JS基础 - 数组操作方法合集

常用的处理数组的方法合集

遍历

forEach

forEach：对数组内的每个方法都执行一次给定的函数

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

可选参数可以获取到：当前的值、index、当前被循环的数组。

一个额外的参数 thisArg，可以用来指定调用回调函数时的 this 的值，举个例子：

const array1 = ['a', 'b', 'c'];
const obj = {a: 1};

array1.forEach(function(){
    console.log(this)
}, obj);

//output: {a: 1}

需要注意的是：如果要正确获取 this 的值，不能用箭头函数。

map、filter 两个方法都支持修改 this 的指向。

map

map：返回一个数组，其中每个元素都使用指定函数进行过转换。

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

filter

filter：返回一个数组，只有当指定函数返回 true 时，相应的元素才会被包含在这个数组中。

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

查询

every

every：测试一个数组内的所有元素是否都能通过某个指定函数的测试，返回一个布尔值。

语法：var newArray = arr.every(callback(element[, index[, array]])[, thisArg])

const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((currentValue) => currentValue < 40));
// output: true

some

some：判断数组中是否至少有一个元素通过了函数测试。

语法：arr.some(callback(element[, index[, array]])[, thisArg])

const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((currentValue) => currentValue < 10));
// output: true

find

find：返回数组中满足提供的测试函数的第一个元素的值。

语法：arr.find(callback[, thisArg])

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

虽然 5 之后的元素都符合条件，但只返回第一个匹配的元素。

findIndex

findIndex：返回数组中满足提供的测试函数的第一个元素的索引。

语法：arr.findIndex(callback[, thisArg])

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf

indexOf：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法：arr.indexOf(searchElement[, fromIndex])

fromIndex：开始查找的位置。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

lastIndexOf

lastIndexOf：返回给定元素在数组内的最后一个索引，如果不存在，则返回 -1。

语法：arr.lastIndexOf(searchElement[, fromIndex])

includes

includes：判断数组中是否包含某项，返回一个布尔值。

语法：arr.includes(valueToFind[, fromIndex])

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// output: true

增删

push、pop、shift、unshift

push：这是一个相对简单的方法，它将一个项添加到数组的末尾。它就地修改数组，函数本身会返回添加到数组中的项。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

pop：从数组中删除最后一项。同样，它也是就地修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

shift：从数组中删除第一个项。同样，它也是就地修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

unshift：将一个或多个元素添加到数组的开头。同样，它也是就地修改数组。与其他方法不同的是，函数本身返回数组最新的长度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

splice、slice

splice：通过删除或替换现有元素或者添加新元素来修改数组的内容。这个方法也是就地修改数组。

语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

下面的代码示例的意思是：在数组的位置 1 上删除 0 个元素，并插入 b。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b');

slice：从指定的起始位置和结束位置之前（即前闭后开）返回数组的浅拷贝。如果未指定结束位置，则返回数组的其余部分。这个方法不会修改数组，只是返回所需的子集。

语法：arr.slice([begin[, end]])

let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

小结一下

• 所有插入元素的方法，比如 push、unshift 一律返回数组新的长度；
• 所有删除元素的方法，比如 pop、shift、splice 一律返回删除的元素，或者返回删除的多个元素组成的数组；

格式化

concat

concat：用于合并两个或多个数组，返回一个新数组。

语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// output: Array ["a", "b", "c", "d", "e", "f"]

flat

flat：按照一个可指定的深度递归遍历数组，将深层次的数组进行扁平化。

语法：arr.flat([depth])

depth：数组的深度，如果不知道有多少层，可以设置为Infinity。

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// output: [0, 1, 2, [3, 4]]

fill

fill：用一个固定值进行填充，可设置起止位置（不包括中止索引的位置）。

语法：arr.fill(value[, start[, end]])

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

from

from：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

语法：Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike：伪数组对象/可迭代对象（例如Set/Map对象、函数里面的参数对象 arguments、用 getElementsByTagName/ClassName/Name 获得的 HTMLCollection、用 querySelector 获得的 NodeList）

mapFn：可选参数，如果指定了该参数，新数组中的每一项都会执行该回调函数；

thisArg：可选参数，执行回调函数时的 this 对象；

console.log(Array.from('foo'));
// output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// output: Array [2, 4, 6]

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// output: [ "foo", "bar", "baz" ]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// output: [[1, 2], [2, 4], [4, 8]]

reverse

reverse：将数组中元素的位置颠倒，该方法会修改原数组。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// output: "array1:" Array ["one", "two", "three"]

sort

sort：根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0，则顺序保持不变。如果返回正数，则交换元素顺序。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]

toString

toString：返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// output: "1,2,a,1a"

面对嵌套数组，toString 也可以实现类似于 flat 方法的扁平化处理

[1, [2, [3, 4]]].toString(); // "1,2,3,4"

转换

join

join：将一个数组（或者类数组）内的所有元素拼接成一个字符串。

语法：arr.join([separator])

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// output: "Fire,Air,Water"

console.log(elements.join(''));
// output: "FireAirWater"

console.log(elements.join('-'));
// output: "Fire-Air-Water"

reduce

reduce：基于给定函数累加值。

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

accumulator：累计计数；

currentValue：正在处理的项；

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

keys

keys：返回一个包含数组中每个索引键的 Array Iterator 对象。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// output: 0
// output: 1
// output: 2

values

values：返回一个包含数组中每个索引值的 Array Iterator 对象。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// output: "a"
// output: "b"
// output: "c"