目录
注意:
目录可以点击跳转的(它不是蓝的,怕你们不晓得)
手机端的,跳不了┓(;´_`)┏
ES3(包括之前)
ES5
ES6(ES2015)
ES2016
ES2019
1.
Array.prototype.concat()
Array.prototype.concat()
定义和用法:
concat()
方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组(以此可知,它是纯函数)。
语法:
arrayObject.concat(arrayX,arrayX,......,arrayX)
参数 | 描述 |
---|---|
arrayX | 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。 |
返回值: 返回一个新的数组
代码示例:
var arr1 = [1,2,3];
var arr2 = arr1.concat(4,5);
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr3); // [ 1, 2, 3, 4, 5 ]
2.
Array.prototype.pop()
Array.prototype.pop()
pop()
方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
代码示例:
const arr = ['a', 'b', 'c'];
console.log(arr.pop());
// c
console.log(arr);
// ["a", "b"]
3.
Array.prototype.push()
Array.prototype.push()
push()
方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
代码示例:
const arr = ['a', 'b', 'c'];
console.log(arr.push('d'));
// 4
console.log(arr);
// ["a", "b", "c", "d"]
4.
Array.prototype.shift()
Array.prototype.shift()
shift()
方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
const arr = ['a', 'b', 'c'];
console.log(arr.shift());
// a
console.log(arr);
// ["b", "c"]
5.
Array.prototype.unshift()
Array.prototype.unshift()
unshift()
方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
const arr = ['a', 'b', 'c'];
console.log(arr.unshift('d'));
// a
console.log(arr);
// ["d", "a", "b", "c"]
console.log(arr.unshift(1,2));
// 6
console.log(arr);
// [1, 2, "d", "a", "b", "c"]
6.
Array.prototype.reverse()
Array.prototype.reverse()
reverse()
方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
const arr = ['a', 'b', 'c'];
console.log(arr.reverse());
// ["c", "b", "a"]
console.log(arr);
// ["c", "b", "a"]
7.
Array.prototype.sort()
Array.prototype.sort()
sort()
方法用于对数组的元素进行排序,并返回数组。
语法:
arrayObject.sort(sortby)
参数 | 描述 |
---|---|
sortby | 可选。规定排序顺序。必须是函数。 |
返回值:
对数组的引用。请注意,数组在原数组上进行排序,不生成副本。
注意: 默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的
所以会有如下结果:
const arr = [1,4,13,3,11,2,22,9];
arr.sort();
console.log(arr);
// [1, 11, 13, 2, 22, 3, 4, 9]
解决方法就是传入比较函数,如下:
升序:
const arr = [1,4,13,3,11,2,22,9];
arr.sort((a,b) => a-b);
console.log(arr);
// [1, 2, 3, 4, 9, 11, 13, 22]
降序:
const arr = [1,4,13,3,11,2,22,9];
arr.sort((a,b) => b-a);
console.log(arr);
// [22, 13, 11, 9, 4, 3, 2, 1]
8.
Array.prototype.join()
Array.prototype.join()
join()
方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符(默认为逗号)进行分隔的。
代码示例:
const arr = ['a', 'b', 'c'];
console.log(arr.join());
// a,b,c
console.log(arr.join(''));
// abc
console.log(arr.join('-'));
// a-b-c
9.
Array.prototype.slice()
Array.prototype.slice()
slice()
方法可从已有的数组中返回选定的元素。
语法: arrayObject.slice(start,end)
返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
const arr = [10, 20, 30, 40, 50]
const arr1 = arr.slice()
console.log(arr1) // [10, 20, 30, 40, 50]
const arr2 = arr.slice(1, 4)
console.log(arr2) // [20, 30, 40]
const arr3 = arr.slice(2)
console.log(arr3) // [30, 40, 50]
const arr4 = arr.slice(-3) //可使用负值从数组的尾部选取元素。
console.log(arr4) // [30, 40, 50]
10.
Array.prototype.splice()
Array.prototype.splice()
splice()
方法向/从数组中添加/删除项目,然后返回被删除的项目。
该方法会改变原始数组。
const arr = [10, 20, 30, 40, 50]
// splice 非纯函数
const spliceRes = arr.splice(1, 2, 'a', 'b', 'c')
console.log(spliceRes, arr) //[20,30] [10, 'a', 'b', 'c', 40, 50]
const spliceRes1 = arr.splice(1, 2)
console.log(spliceRes1, arr)//[20,30] [10, 40, 50]
const spliceRes2 = arr.splice(1, 0, 'a', 'b', 'c')
console.log(spliceRes2, arr)//[] [10, "a", "b", "c", 20, 30, 40, 50]
11.
Array.prototype.toLocaleString()
Array.prototype.toLocaleString()
toLocaleString()
返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', {timeZone: "UTC"});
console.log(localeString);
12.
Array.prototype.toString()
Array.prototype.toString()
toString()
返回一个字符串,表示指定的数组及其元素。
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// 1,2,a,1a
13.
Array.prototype.toSource()
Array.prototype.toSource()
该特性是非标准的,请尽量不要在生产环境中使用它!
(不要使用了,我就放在这里看看)
返回一个字符串,代表该数组的源代码.
var alpha = new Array("a", "b", "c");
alpha.toSource(); //返回["a", "b", "c"]
14.
Array.isArray()
Array.isArray()
Array.isArray() 用于确定传递的值是否是一个 Array。
console.log(Array.isArray([1, 2, 3]));
// true
console.log(Array.isArray({foo: 123}));
// false
console.log(Array.isArray("foobar")) ;
// false
15.
Array.prototype.indexOf()
Array.prototype.indexOf()
indexOf()
方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
const arr = ['a','b','c','a'];
console.log(arr.indexOf('a'));
// 0
console.log(arr.indexOf('f'));
// -1
16.
Array.prototype.lastIndexOf()
Array.prototype.lastIndexOf()
lastIndexOf()
方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回-1
。从数组的后面向前查找。
const arr = ['a','b','c','a'];
console.log(arr.lastIndexOf('a'));
// 3
console.log(arr.indexOf('f'));
// -1
17.
Array.prototype.every()
Array.prototype.every()
every()
方法用于检测数组所有元素是否都符合指定条件(通过函数提供)
every()
方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回
false
,且剩余的元素不会再进行检测。 - 如果所有元素都满足条件,则返回
true
。
注意:
若收到一个空数组,此方法在一切情况下都会返回 true
。
every()
不会改变原始数组。
const fun1 = (i) => i < 10;
const fun2 = (i) => i > 10;
const arr = [1, 2, 3];
console.log(arr.every(fun1));
// true
console.log(arr.every(fun2));
// false
const arr1 = [1,2,3,11];
console.log(arr1.every(fun1));
// false
18.
Array.prototype.some()
Array.prototype.some()
some()
方法用于检测数组中的元素是否满足指定条件(函数提供)
some()
方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回
true
, 剩余的元素不会再执行检测 - 如果没有满足条件的元素,则返回
false
注意:
如果用一个空数组进行测试,在任何情况下它返回的都是false
`some() ``不会改变原始数组
const fun1 = (i) => i < 10;
const fun2 = (i) => i > 20;
const arr = [1, 11, 12];
console.log(arr.some(fun1));
// true
console.log(arr.some(fun2));
// false
19.
Array.prototype.forEach()
Array.prototype.forEach()
forEach()
方法用于调用数组的每个元素,并将元素传递给回调函数
注意: forEach()
对于空数组是不会执行回调函数的
const arr = [1,2,3];
arr.forEach(i => console.log(i));
// 1
// 2
// 3
20.
Array.prototype.map()
Array.prototype.map()
map()
方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map()
方法按照原始数组元素顺序依次处理元素。
注意:
map()
不会对空数组进行检测。
map()
不会改变原始数组。
const arr = [1,2,3];
const map = arr.map(i => i*2);
console.log(map);
// [2, 4, 6]
console.log(arr)
// [1, 2, 3]
21.
Array.prototype.filter()
Array.prototype.filter()
filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:
filter()
不会对空数组进行检测。
filter()
不会改变原始数组
const arr = [1,2,3,4,5,6];
const result = arr.filter(i => i>3);
console.log(result);
// [4, 5, 6]
console.log(arr)
// [1, 2, 3, 4, 5, 6]
22.
Array.prototype.reduce()
Array.prototype.reduce()
reduce()
方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce()
可以作为一个高阶函数,用于函数的 compose
。
注意:
reduce()
对于空数组是不会执行回调函数的。
const array1 = [1, 2, 3, 4];
const reducer = (total, currentValue) => total + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
23.
Array.prototype.reduceRight()
Array.prototype.reduceRight()
reduceRight()
方法的功能和 reduce()
功能是一样的,不同的是 reduceRight()
从数组的末尾向前将数组中的数组项做累加。
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
(accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]
24.
Array.prototype.entries()
Array.prototype.entries()
定义和用法:
entries()
方法返回一个数组的迭代对象(Array Iterator)
,该对象包含数组的键值对 (key/value)。
代码示例:
var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.entries();
调用遍历器对象的next
方法,进行遍历:
console.log(iterator.next().value); // [0, "Banana"]
console.log(iterator.next().value); // [1, "Orange"]
console.log(iterator.next().value); // [2, "Apple"]
使用for...of
循环:
for (let [index, elem] of fruits.entries()) {
console.log(index, elem);
}
// 0 "Banana"
// 1 "Orange"
// 2 "Apple"
25.
Array.prototype.keys()
Array.prototype.keys()
定义和用法:
keys()
方法返回一个包含数组中每个索引键的Array Iterator对象
。
代码示例:
var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2
26.
Array.prototype.values()
Array.prototype.values()
定义和用法:
values()
方法返回一个包含数组中每个索引值的Array Iterator对象
。
代码示例:
var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.values();
for (const value of iterator) {
console.log(value);
}
// Banana
// Orange
// Apple
27.
Array.from()
Array.from()
Array.from()
方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
console.log(Array.from('foo'));
// ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// [2, 4, 6]
28.
Array.of()
Array.of()
Array.of()
方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of()
和Array
构造函数之间的区别在于处理整数参数:
Array.of(7)
创建一个具有单个元素 7 的数组,Array(7)
创建一个长度为7的空数组(注意:这是指一个有7个空位(empty
)的数组,而不是由7个undefined
组成的数组)。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
29.
Array.prototype.find()
Array.prototype.find()
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 12
30.
Array.prototype.findIndex()
Array.prototype.findIndex()
findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
。
const array1 = [5, 12, 8, 130, 44];
const found = array1.findIndex(element => element > 10);
console.log(found);
// 1
31.
Array.prototype.fill()
Array.prototype.fill()
fill()
方法用于将一个固定值替换数组的元素。
语法:
array.fill(value, start, end)
参数 | 描述 |
---|---|
value | 必需。填充的值。 |
start | 可选。开始填充位置。 |
end | 可选。停止填充位置 (默认为 array.length) |
返回值: 修改后的数组
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
32.
Array.prototype.copyWithin()
Array.prototype.copyWithin()
copyWithin()
方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
语法:
array.copyWithin(target, start, end)
参数 | 描述 |
---|---|
target | 必需。复制到指定目标索引位置。 |
start | 可选。元素复制的起始位置。 |
end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。 |
返回值:改变后的数组
const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]
33.
Array.prototype.includes()
Array.prototype.includes()
includes()
方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true
,否则返回false
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false
34.
Array.prototype.flat()
Array.prototype.flat()
flat()
方法会递归到指定深度将所有子数组连接,并返回一个新数组。
语法:
var newArray = arr.flat([depth]);
参数 | 描述 |
---|---|
depth | 指定递归展开的深度,默认为:1 |
代码示例:
var arr1 = [1, 2, [3, 4]];
console.log( arr1.flat()) // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log( arr3.flat(2)); // [1, 2, 3, 4, 5, 6]
flat()
函数会自动清除数组中的空元素
var arr4 = [1, 2, , 4, 5];
console.log(arr4.flat()); // [1, 2, 4, 5]
35.
Array.prototype.flatMap()
Array.prototype.flatMap()
flatMap()
方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map()
,然后对返回值组成的数组执行flat()
方法。
该方法返回一个新数组,不改变原数组。
返回值:
一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。
代码示例:
const arr1 = [1, 2, 3, 4];
const map1 = arr1.map(x => [x * 2]);
console.log(map1);
// [[2], [4], [6], [8]]
const flatm1 = arr1.flatMap(x => [x * 2]);
console.log(flatm1);
// [2, 4, 6, 8]
const flatm2 = arr1.flatMap(x => [[x * 2]]);
console.log(flatm2);
// [[2], [4], [6], [8]]