数组的常用方法

发表于 | 分类于 ，

数组作为一个引用数据类型的对象，包含了很多用于操作数组的方法。这里主要介绍一些比较常用的方法。

增删数据

数组末尾增删数据

JavaScript 中提供了一组方法，用于对数组末尾的数据进行增加或删除。

  • push：向数组末尾增加多条数据；
  • pop：删除数组末尾的一条数据；
1
2
3
4
5
let ary = [100, 200, 300];
ary.push(400, 500, 600);
console.log(ary);   //  [100, 200, 300, 400, 500, 600]
ary.pop();
console.log(ary);   //  [100, 200, 300, 400, 500]

数组开头增删数据

JavaScript 中提供了一组方法，用于对数组开头的数据进行增加或删除。

  • unshift：向数组开头增加多条数据；
  • shift：删除数组开头的一条数据；
1
2
3
4
5
let ary = [100, 200, 300];
ary.unshift(400, 500, 600);
console.log(ary);   //  [400, 500, 600, 100, 200, 300]
ary.shift();
console.log(ary);   //  [500, 600, 100, 200, 300]

数组任意位置增删数据

JavaScript 中提供了一个万能方法，用于对数组任意位置的数据进行增加或删除。语法结构如下：

1
数组名.splice(下标, 删除个数, 新增数据1, 新增数据2...);

例：

1
2
3
let ary = [100, 200, 300];
ary.splice(1, 1, 400);    
console.log(ary);    // [ 100, 400, 300 ]

说明：如果不需要删除数据，则splice方法的第二个参数为 0。

查找数据

查找一条数据的下标

JavaScript 中提供了两个方法用来查找某一条数据在数组中的下标。如果没找到对应数据，则返回-1。

  • indexOf()：查找数据第一次出现的下标；
  • lastIndexOf()：查找数据最后一次出现的下标；

语法结构：

1
2
数组名.indexOf(数据);
数组名.lastIndexOf(数据);

例：

1
2
3
4
let ary = ['hello', 'world', 'hello', 'kitty'];
console.log(ary.indexOf('hello'));       // 0
console.log(ary.lastIndexOf('hello'));   // 2

查找一条数据是否存在

JavaScript 中提供了includes()方法用来查找某一条数据在数组中是否存在。

语法结构：

1
数组名.includes(数据)

例：

1
2
3
4
let ary = ['hello', 'world', 'hello', 'kitty'];
console.log(ary.includes('hello'));        // true
console.log(ary.includes('JavaScript'));   // false

查找一部分数据

JavaScript 中提供了slice()方法用来查找数组中的一部分数据，并将找到的数据组成一个新数组。

数据结构：

1
数组名.slice(起始位置下标, 结束位置下标);

说明：slice()用来查找从起始位置到结束位置（不包含）之间的所有数据。

例：

1
2
3
let ary = [100, 200, 300, 400];
let result = ary.slice(1, 3);
console.log(result);        // [200, 300]

数据排序

JavaScript 中提供了一组方法，用于操作数组内所有数据的顺序。

  • reverse：将所有数据顺序颠倒；
  • sort：根据给定条件对所有数据进行排序；
1
2
3
4
5
let ary = [100, 300, 200, 500, 400];
ary.reverse();
console.log(ary);    // [ 400, 500, 200, 300, 100 ]
ary.sort();
console.log(ary);    // [ 100, 200, 300, 400, 500 ]

sort方法说明：sort()方法如果省略参数，数组内的数据会先自动通过toString()方法将值转换成字符串，再按照字符串的比较规则按照从小到大排序。

如果想要按照数字标准进行排序，就需要提供一个比较函数作为参数。语法结构如下：

1
2
3
4
数组名.sort(function(a, b){
    return a - b;    // 从小到大
    return b - a;    // 从大到小
});

例：

1
2
3
4
5
6
7
8
9
10
let ary = [100, 300, 200, 500, 400];
ary.sort(function(a, b){
    return a - b;
})
console.log(ary);    // [ 100, 200, 300, 400, 500 ]
ary.sort(function(a, b){
    return b - a;
})
console.log(ary);    // [ 500, 400, 300, 200, 100 ]

数组和字符串转换

JavaScript 中提供了一组方法用户数组和字符串之间的相互转换。

  • join：数组拼接成字符串
  • split：字符串分割成数组（这是字符串的方法）

语法结构如下：

1
2
数组名.join(拼接符);
字符串名.split(分割符);

例：

1
2
3
4
5
6
7
let ary = [100, true, 'hello'];
let result = ary.join("-");
console.log(result);    // 100-true-hello
let str = "hello, nice to meet you";
let result = str.split(",");
console.log(result);    // [ 'hello', ' nice to meet you' ]

数组的遍历

在《数组的基础语法》中我们讲了数组两种最基本的遍历方式：for 循环和 for-of 。除了这两种以外，数组还提供了很多遍历的方法。

forEach()

自 2009 年 ES5 正式发布后，我们开始可以使用forEach方法来遍历数组。

描述：按顺序让数组中每一项依次执行某种相同的操作。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
arr.forEach(function(item, index) {
	console.log( item );   // 10 11 12 13 14
	console.log( index );  // 0 1 2 3 4
})

图解：

说明：

  • 数组自带的forEach循环，使用频率较高，但实际上性能比普通for循环弱。
  • forEach不能使用continue和break语句中断循环，也不能使用return语句返回到外层函数。

map()

描述：按顺序让数组中每一项依次执行某种相同的操作，然后返回一个新数组。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
let newArr = arr.map(function(item, index) {
	return item * 2;
})
console.log( newArr ); // [20, 22, 24, 26, 28]

图解：

filter()

描述：按顺序让数组中每一项依次执行某种相同的操作，然后筛选出符合条件的元素，组成新数组并返回。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
let newArr = arr.filter(function(item, index) {
	return item % 2 == 0;
})
console.log(newArr); // [10, 12, 14]

图解：

reduce()

描述：按顺序让数组中的前项和后项做某种计算，并累计返回最终值。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
let result = arr.reduce(function(prev, next) {
	return prev + next;
})
console.log(result); // 60

图解：

利用reduce()方法的特点，我们还可以通过该方法结合三目运算来求一个数组中的最大或最小值。

1
2
3
4
5
6
7
let arr = [1, 4, 2, 3, 7, 5];
let result = arr.reduce(function(prev, next) {
	return prev > next ? prev : next;
})
console.log(result);

every()

描述：按顺序让数组中每一项依次执行某种相同的操作，用来检测数组中每一项是否都符合条件。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
let result = arr.every(function(item, index) {
	return item % 2 == 0;
})
console.log(result); // false

说明：检测的元素中，如果全部都满足条件，返回true，只要有一项不满足条件，则返回false。即一假必假。

图解：

some()

描述：按顺序让数组中每一项依次执行某种相同的操作，用来检测数组中某一项是否都符合条件。

1
2
3
4
5
6
let arr = [10, 11, 12, 13, 14];
let result = arr.some(function(item, index) {
	return item % 2 == 0;
})
console.log(result); // true

说明：检测的元素中，只要有一项符合条件，就返回结果true，如果全部都不满足条件，则返回结果false。即一真必真。

图解：

我 秦始皇 打钱