Javascript数组方法总结


数组方法


Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 从类数组对象中创建一个新的数组实例

function f() {
console.log(arguments) // { '0': 1, '1': 2, '2': 3 }
console.log(arguments.length) // 3
return Array.from(arguments);
}
console.log(f(1, 2, 3)); // [1, 2, 3]

// 从可迭代对象中创建一个新的数组实例,可以获取对象中的元素,如 Map和 Set 等,并进行一定操作

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

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。如果对象是 Array,则为true; 否则为false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function f() {
console.log(arguments) // { '0': 1, '1': 2, '2': 3 }
console.log(arguments.length) // 3
console.log(Array.isArray(arguments)) // 类数组,false
console.log(Array.isArray(Array.from(arguments))) // 数组,true
}
f(1, 2, 3)

// Polyfill

if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}

Array.of()

根据一组参数来创建新的数组实例,支持任意的参数数量和类型。这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

1
2
3
4
5
6
7
8
9
10
11
12
13
Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array() // []
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

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

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

数组实例方法


修改器方法(会改变调用它们的对象自身的值,即改变原数组)

Array.prototype.unshift()

在数组的开头增加一个或多个元素,并返回数组的新长度。

Array.prototype.push()

在数组的末尾增加一个或多个元素,并返回数组的新长度。

Array.prototype.shift()

删除数组的第一个元素,并返回这个元素。

Array.prototype.pop()

删除数组的最后一个元素,并返回这个元素。

Array.prototype.reverse()

颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。

Array.prototype.sort()

对数组元素进行排序,并返回当前数组。默认排序顺序是根据字符串Unicode码点。如果是对数字排序一般需要重写比较函数

1
numbers.sort((a, b) => a - b);

Array.prototype.splice()【容易与slice方法搞混】

通过删除或替换现有元素来修改数组, 并以数组形式返回被修改的内容。此方法会改变原数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 参数:
// 1.指定修改的开始位置(从0计数)
// 2.整数,表示要移除的数组元素的个数。
// 3.要添加进数组的元素, 从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

let months = ['Jan', 'March', 'April', 'June'];

// inserts at 1st index position
months.splice(1, 0, 'Feb');
console.log(months); // ['Jan', 'Feb', 'March', 'April', 'June']

// replaces 1 element at 4th index
months.splice(4, 1, 'May');
console.log(months); // ['Jan', 'Feb', 'March', 'April', 'May']

// 从第 2 位开始删除所有元素
months.splice(2);
console.log(months); // ['Jan', 'March']

访问方法(不改变原数组,只会返回一个新数组或一个其它的期望值)

Array.prototype.includes()

判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false。

Array.prototype.indexOf()

返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。

Array.prototype.lastIndexOf()

返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。

Array.prototype.join()

连接所有数组元素组成一个字符串。

Array.prototype.concat()

返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。

Array.prototype.slice()

截取当前数组中一段元素(左闭右开)[begin,end) 组合成一个新数组并返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 如果参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 
// slice(-2, -1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
// 如果 end 被省略,则slice 会一直提取到原数组末尾。
// 如果 end 大于数组长度,slice 也会一直提取到原数组末尾。

let animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

迭代方法(对数组进行遍历,大部分都需要指定一个回调函数作为参数)

Array.prototype.entries()

返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。

Array.prototype.keys()

返回一个数组迭代器对象,该迭代器会包含所有数组元素的键。

Array.prototype.values()

返回一个数组迭代器对象,该迭代器会包含所有数组元素的值。

Array.prototype.find()

找到第一个满足测试函数的元素并返回那个元素的值,如果找不到,则返回 undefined。

Array.prototype.findIndex()

找到第一个满足测试函数的元素并返回那个元素的索引,如果找不到,则返回 -1。

Array.prototype.forEach()

为数组中的每个元素执行一次回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arr = [2,4,6,8,10]

for(let i = 0;i<arr.length;i++){
console.log(arr[i]) // 2 4 6 8 10
}

arr.forEach((element,index) => {
console.log(`${index} - ${element}`)
// 0 - 2
// 1 - 4
// 2 - 6
// 3 - 8
// 4 - 10
});

// 注意: 没有办法中止或者跳出 forEach() 循环,除了抛出一个异常。如果你需要这样,使用 forEach() 方法是错误的。
// 若你需要提前终止循环,你可以使用:every()、some()、find()等,这些数组方法可以对数组元素判断,以便确定是否需要继续遍历
// 若条件允许,也可以使用 filter() 提前过滤出需要遍历的部分,再用 forEach() 处理。

Array.prototype.every()

如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false。空数组也是返回true。

1
2
3
4
5
6
7
8
9
10
let arr = [1, 30, 39, 29, , 10, 13];

const isMatch = arr.every(element =>{
return element < 40;
});

console.log(isMatch) // expected output: true

// every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。
// 如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用,不会为那些被删除或从来没被赋值(空值)的索引调用。

Array.prototype.some()

如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。空数组也是返回false。

1
2
3
4
5
6
7
let arr = [1, 2, 3, 4, 5];

const hasEvenNumber = arr.some(element =>{
return element % 2 === 0;
});
// 存在偶数
console.log(hasEvenNumber); // expected output: true

Array.prototype.filter()

将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。如无任何数组元素通过测试,则返回空数组

1
2
3
4
5
let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); // expected output: ["exuberant", "destruction", "present"]

Array.prototype.map()

返回一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

1
2
3
4
5
6
let arr = [1, 4, 9, 16];

// pass a function to map
const map = arr.map(x => x * 2);

console.log(map); // expected output: Array [2, 8, 18, 32]

Array.prototype.reduce()

从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 一、将数组中的值累乘
let arr = [1, 2, 3, 4];

const res = arr.reduce((accumulator,element) =>{
return accumulator * element
})

console.log(res); // expected output: 24

// 二、计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

const countedNames = names.reduce((allNames, name) =>{
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
},{});
console.log(countedNames) // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

// initialValue可选,此例中initialValue为{}
// 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

Array.prototype.reduceRight()

同上,不过遍历顺序变成了从右到左


参考文章:
《Array MDN文档》https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array