有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 数组方法

javascript cat 10个月前 (11-24) 36次浏览 已收录 0个评论 扫描二维码

1、初识数组

1、创建数组

// 数组的作用是:使用单独的变量名来存储一系列的值。数组是可以存储任意数据类型的数据

// 1、字面量创建(推荐)
var arr = []; // []
var arr = [3]; // [3]
var arr = [1, 2, 3]; // [1, 2, 3]
var arr = ['abc', 3, true, null, undefined, function () { }, {}, [1, 2]];
console.log(arr);

// 2、构造函数创建
var arr = new Array(); // []
var arr = new Array(3); // [undefined, undefined, undefined]
var arr = new Array('3'); // ["3"]

console.log(arr);

2、数组读写

var arr = ['刘备', '关羽', '张飞'];
// 读: 数组[下标]
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]); // undefined   读一个不存在的下标,返回undefined

// 数组有长度,且可以通过下标获取某一个,所以可以for循环
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// --------------------------
// 写: 数组[下标] = 值;
arr[5] = '小王'; // ["刘备", "关羽", "张飞", undefined, undefined, "小王"]
console.log(arr);

// --------------------------
// 面试题
arr[100] = '小王';
console.log(arr.length); // 101

3、数组的长度读写

var arr = ['刘备', '关羽', '张飞'];

// 数组的长度可读可写
// 清空一个数组:长度为0

// 读
console.log(arr.length); // 3

// 修改长度
arr.length = 5;
console.log(arr); // ["刘备", "关羽", "张飞", empty × 2]

arr.length = 1;
console.log(arr); // ["刘备"]

// -------------------------
// 字符串长度只读不写
var str = 'abc';
str.length = 1;
console.log(str); // 'abc'

数组API方法

1、栈方法

// 栈方法:即数组的前后添加,前后删除
// 先进先出:排队
// 先进后出:羽毛球筒

// 共同点:都修改原数组
// 添加的方法:一次可以添加多个,同时返回数组的长度
// 删除的方法:一次只能删除一个,返回被删除的项

var arr = ['刘备', '关羽', '张飞'];

// 数组.push(参数);
// 向数组的尾部添加,一次可以添加多个,返回数组的长度
var n = arr.push('小王', '王小二');
console.log(arr);
console.log(n);

// -------------------------------

// 数组.unshift(参数);
// 向数组的头部添加,一次可以添加多个,返回数组的长度
var n = arr.unshift('小五', '小二');
console.log(arr);
console.log(n);

// -------------------------------

// 数组.pop();
// 删除数组最后一项,返回被删除的项
var n = arr.pop();
console.log(arr);
console.log(n);

// 数组.shift();
// 删除数组第一项,返回被删除的项
var n = arr.shift();
console.log(arr);
console.log(n);

2、强大的splice

数组.splice(起始位置, 要删除的个数, 要添加的项...);

作用:可以实现数组任意位置的添加、删除、替换

返回值:返回由删除的项组成的数组(修改原数组)

var arr = ['刘备', '关羽', '张飞'];

// 1、删除
var n = arr.splice(1, 1);
console.log(arr); // ["刘备", "张飞"]
console.log(n); // ["关羽"]

// 2、替换
var n = arr.splice(1, 1, '关平', '关兴');
console.log(arr); // ["刘备", "关平", "关兴", "张飞"]
console.log(n); // ["关羽"]

// 3、添加
var n = arr.splice(2, 0, '关平', '关兴');
console.log(arr); // ["刘备", "关羽", "关平", "关兴", "张飞"]
console.log(n); // []

3、sort排序

var arr = [5, 8, 7, 4, 2, 11, 3, 9, 6];

// 数组中是单一的数字

// 1、sort排序
// 默认以字符串进行排序,即便是数字,也是以字符串排序
// 数组.sort();
// 会修改原数组,并返回排序以后的数组
var n = arr.sort();
console.log(arr);
console.log(n);
console.log(arr == n); // true

// 2、如果要想以数字进行排序,则sort需要接收一个比较函数
// 比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。
arr.sort(function (a, b) {
    // return a - b; // 正序
    // return b - a; // 倒序
    return Math.random() - 0.5; // 无序
});
console.log(arr);

中文排序

var arr = [
    { name: '二驴', num: 78 },
    { name: '狗磊', num: 38 },
    { name: '方丈', num: 58 },
    { name: '天道', num: 97 },
    { name: '辛巴', num: 56 },
    { name: '二蛋', num: 78 },
    { name: '仙洋', num: 98 },
    { name: '蛋蛋', num: 79 }
];

// 按成绩排序
arr.sort(function (a, b) {
    return a.num - b.num;
});
console.log(arr);

// 按中文排序
arr.sort(function (a, b) {
    return a.name.localeCompare(b.name, 'zh');
})
console.log(arr);

4、排序算法

1、选择排序

var arr = [5, 32, 2, 7, 45];
console.log(fn(arr)); // []

// 选择排序
// 从第一项起,每一项都和后面所有项依次比较,如果被比较项比当前项小,则两项交换位置。
// 每一轮,都找到一个最小的数,放到前面。
function fn(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                var temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }
        }
        // console.log(arr.toString()); // 每一轮数组的状况
    }
    return arr;
}

2、冒泡排序

var arr = [5, 32, 2, 7, 45];
console.log(fn(arr)); // []

// 冒泡排序
// 从第一项起,比较相邻的两个元素,如果前一个比后一个大,则交换位置。
// 第一轮的时候最后一个元素应该是最大的一个。每一轮最后一个元素已经是最大的了,所以最后一个元素下一轮不用比较。
function fn(arr) {
    for (var i = 1; i < arr.length; i++) {
        for (var j = 0; j < arr.length - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
        console.log(arr.toString()); // 每一轮数组的状况
    }
    return arr;
}

5、concat

数组.concat(参数, ...)

将参数拼接到数组中,参数可以是数组,也可以是项

返回拼接后的结果,不影响原数组

var arr1 = [1, 2, 3];
var arr2 = ['a', 'b', 'c'];

var arr = arr1.concat(arr2, '小王', '五小二');
console.log(arr1); // [1, 2, 3]
console.log(arr2); // ['a', 'b', 'c']
console.log(arr); // [1, 2, 3, "a", "b", "c", "小王", "五小二"]

// 推荐用法:
var arr = [].concat(arr1, arr2, '小王', 'abc');
console.log(arr); // [1, 2, 3, "a", "b", "c", "小王", "abc"]

6、reverse

数组.reverse();

作用:反转数组,返回反转以后的数组,并修改原数组

var arr = ['a', 'b', 'c'];
arr.reverse();
console.log(arr); // ["c", "b", "a"]

反转字符串

var str = '我爱你';

// 方式一
console.log(str.split('').reverse().join(''));

// 方式二
var s = '';
for (var i = str.length - 1; i >= 0; i--) {
    s += str[i]
}
console.log(s);

// 方式三
var array = [];
for (var i = 0; i < str.length; i++) {
    // console.log(str[i]);
    array.unshift(str[i]);
}
console.log(array.join(''));

7、indexOf和lastIndexOf

数组.indexOf(要查找的项[, 查找的起始位置]);

数组.lastIndexOf(要查找的项[, 查找的起始位置]);

作用:返回要查找的项在这个数组中的下标,如果没有,返回-1

IE8及以下不支持

var arr = [3, 4, 2, 5, 4, 3, 4, 5];

console.log(arr.indexOf(4)); // 1
console.log(arr.indexOf(4, 2)); // 4
console.log(arr.lastIndexOf(4)); // 6

console.log(arr.indexOf('4')); // -1

数组去重方式一

// 方式一(IE8及以下不支持)
function fn(arr) {
    var newArr = []; // 存储去重以后的新数组的仓库
    for (var i = 0; i < arr.length; i++) {
        var v = arr[i];

        if (newArr.indexOf(v) === -1) {
            newArr.push(v);
        }
    }
    return newArr;
}
var arr = ['a', 'b', 'a', 'c', 'c', 'a'];
console.log(fn(arr)); // ['a', 'b', 'c']

数组去重方式二

// 方式二
function fn(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1); // 删除对应这一项
                j--;
            }
        }
    }
    return arr;
}

var arr = ['a', 'b', 'a', 'a', 'a', 'c', 'c', 'a'];
console.log(fn(arr)); // ['a', 'b', 'c']

8、slice

数组.slice(起始下标, 结束下标);

数组截取,不影响原数组,返回截取的新数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

console.log(arr.slice()); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']  没有参数,返回全部
console.log(arr.slice(2)); // ['c', 'd', 'e', 'f', 'g'] 有一个参数,从参数处起一直到最后
console.log(arr.slice(2, 5)); // ['c', 'd', 'e'] 有两个参数,从参数处起一直起到第二个参数处止,不包括第二个参数
console.log(arr.slice(5, 2)); // [] 第二个参数比第一个小,返回空数组
console.log(arr.slice(2, -2)); // ['c', 'd', 'e'] 负数和长度相加

9、数组类型判断

Array.isArray(参数)

作用:判断参数是否是数组,返回布尔值

不足:IE8及以下不支持

console.log(typeof []); // object

console.log(Array.isArray(null)); // false
console.log(Array.isArray({})); // false
console.log(Array.isArray([])); // true

10、数组克隆

var arr = ['a', 'b', 'c'];

// 需求:有这样一个数组,需要克隆一份(跟原数组长得一模一样来一个新的数组)

// ---------------
// 不行,这不是克隆,这是地址的引用。这种方式,一改全改
// var arr1 = arr;

// ---------------

// 方式一
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    newArr.push(arr[i]);
}
// 验证
newArr.push('ls');
console.log(newArr);
console.log(arr);

// ----------------

// 方式二
var newArr = arr.slice();
// 验证
newArr.push('ls');
console.log(newArr);
console.log(arr);

// -----------------

// 方式三
var newArr = arr.concat();
// 验证
newArr.push('ls');
console.log(newArr);
console.log(arr);
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址