数组是类似于列表的高阶对象,原型中也提供了遍历和修改的相关操作,接下来就让我们一起来认识一些数组上的方法吧
1、push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度(number)。
会改变原数组,依次添加- 参数:要被添加到数组末尾的元素
- 返回值:数组的新长度
示例:
let arr1 = [1, 2, 3];
console.log(arr1); // [1,2,3]
let newLength1 = arr1.push(4, 5, 6);
console.log(arr1); // [1,2,3,4,5,6];
console.log(newLength1); // 6
2、unshift() 方法将一个或多个元素添加到数组的 开头,并返回该数组的新长度
会改变原数组,以【块】的形式整个添加- 参数:一个或多个要被添加到数组开头的元素
- 返回值:数组的新长度
示例:
let arr2 = [4, 5, 6];
console.log(arr2); // [ 4, 5, 6 ]
let newLength2 = arr2.unshift(1, 2, 3);// 以块的形式添加的
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]
console.log(newLength2); // 6
3、pop() 方法从数组中删除最后一个元素,并返回被删除的元素。此方法会更改数组的长度。
会改变原数组- 返回值:数组末尾被删除的元素(数组为空时返回
undefined)- 调用一次就删除一个,写一个
pop()
示例:
let arr3 = [4, 5, 6];
console.log(arr3);// [4,5,6]
let element1 = arr3.pop();// 返回被删除的元素
console.log(arr3);// [4,5]
console.log(element1);// 6
4、shift() 方法从数组中删除第一个元素,并返回被删除的元素。此方法更改数组的长度。
会改变原数组- 返回值:数组开头被删除的元素(数组为空时返回
undefined)- 调用一次就删除一个,写一个
shift()
示例:
let arr4 = [1, 2, 3];
console.log(arr4); // [1,2,3]
let element2 = arr4.shift();
console.log(arr4); // [2,3]
console.log(element2); // 1
5、splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
会改变原数组- 参数:多个参数,
- 第一个参数指定
开始位置(包含开始)(1.超出数组长度,则在末尾操作;2.负值则倒数;3.负值绝对值超过数组长度,从0开始);- 第二个参数,要
移除的数组元素的个数,1.没写、大于或等于第一个参数之后的元素个数,则后面的全部删除;2.为0或负数则不删除元素;- 第三个参数及之后的参数都是要
添加到开始位置之后的的元素(可选)- 返回值:由
被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
示例:
let arr5 = [1, 2, 3, 4, 5];
console.log(arr5); // [ 1, 2, 3, 4, 5 ]
let elementArr = arr5.splice(1, 2, 7, 8, 9);
console.log(arr5); // [ 1, 7, 8, 9, 4, 5 ]
console.log(elementArr); // [2,3]
6、sort() 方法在原数组的基础上对数组的元素进行排序,并返回该数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列,可能会出现10<5的情况,因为1的代码单元值小于5,所以一般会添加一个比较函数
会改变原数组- 参数:用于指定按某种顺序进行排序的函数(可选):该函数有两个参数,用于比较的两个元素
- 返回值:排序之后的数组
示例:
let arr6 = [1, 5, 8, 9, 2, 8, 0, 20, 3, 5, 62, 15];
arr6.sort(); // 没有可选函数
console.log(arr6); // [0, 1, 15, 2, 20, 3, 5, 5, 62, 8, 8, 9]
arr6.sort((a, b) => a - b);
console.log(arr6); // [0, 1, 2, 3, 5, 5, 8, 8, 9, 15, 20, 62]
arr6.sort((a, b) => b - a);
console.log(arr6); // [62, 20, 15, 9, 8, 8, 5, 5, 3, 2,1, 0]
7、reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。
会改变原数组。- 颠倒顺序后的数组
示例:
let arr7 = [1, 2, 3, 4, 5];
console.log(arr7); // [1, 2, 3, 4, 5]
let newArr7 = arr7.reverse();
console.log(arr7); // [ 5, 4, 3, 2, 1 ]
console.log(newArr7); // [ 5, 4, 3, 2, 1 ]
8、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
不会改变原数组- 参数:需要合并的数组或者值(数组的维度会打平1层,再将元素合并)
- 返回值:新的数组实例
示例:
let arr8 = [1, 2, 3];
console.log(arr8); // [1, 2, 3]
let arr9 = [4, [1, 2, 3], 6];
let newArr8 = arr8.concat(arr9, 7, 8, 9);
console.log(arr8); // [1, 2, 3],不影响原数组
console.log(newArr8); // [ 1, 2, 3, 4, [ 1, 2, 3 ], 6, 7, 8, 9 ],会打平一层
9、slice() 方法截取数组中的一部分,并返回一个新的数组对象
不会改变原数组- 参数:
开始位置(包含):为负数则倒数;省略从0开始;超出数组长度则返回空数组结束位置(不包含):参数为负倒数;省略则开始后的全部;大于数组也是开始后的全部- 返回值:截取到的新数组
示例:
let arr10 = [1, 2, 3, 5, 6, 7];
console.log(arr10);// [ 1, 2, 3, 5, 6, 7 ]
let newArr10 = arr10.slice(1, 4);
console.log(arr10);// [ 1, 2, 3, 5, 6, 7 ]
console.log(newArr10);// [ 2, 3, 5 ]
10、flat() 方法会按照一个可指定的深度递归打平数组,返回一个新数组。
不会改变元素组- 参数:可选,指定
打平的维度,默认值是1,全部打平可以使用Infinity- 返回值:打平后的新数组
示例:
let arr11 = [1, 2, [3, 4, [5, 6]]];
console.log(arr11); // [ 1, 2, [ 3, 4, [ 5, 6 ] ] ]
let newArr11 = arr11.flat(Infinity);
console.log(arr11); // [ 1, 2, [ 3, 4, [ 5, 6 ] ] ]
console.log(newArr11); // [ 1, 2, 3, 4, 5, 6 ]
11、fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
会改变原数组- 参数:
- 第一个参数为用来
填充数组元素的值- 开始索引,默认值为0,包含
- 结束索引,默认值为数组长度(开始后的所有),不包含
- 返回值:修改后的数组
示例:
let arr12 = [1, 2, 3, 4, 5];
console.log(arr12); // [ 1, 2, 3, 4, 5 ]
let newArr12 = arr12.fill(0, 1, 4);
console.log(arr12); // [ 1, 0, 0, 0, 5 ]
console.log(newArr12); // [ 1, 0, 0, 0, 5 ]
12、forEach() 方法遍历数组的每个元素执行一次给定的函数。
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:undefined
示例:
let arr13 = [1, 2, 3, 4, 5, 6];
console.log(arr13);
let result = arr13.forEach((element) => {
console.log(element + 1); // 2 3 4 5 6 7
});
console.log(arr13); // [1, 2, 3, 4, 5, 6]
console.log(result); // undefined
13、map() 方法将数组中的元素一个个弄出来做一些操作,再放到一个新数组中去,然后返回这个新数组
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:由回调函数的返回值所组成的新数组
示例:
let arr14 = [1, 2, 3, 4, 5, 6];
console.log(arr14);// [ 1, 2, 3, 4, 5, 6 ]
let newArr14 = arr14.map((element) => element * 2);
console.log(arr14);// [ 1, 2, 3, 4, 5, 6 ]
console.log(newArr14);// [ 2, 4, 6, 8, 10, 12 ]
14、filter() 方法创建给定数组的一部分,其包含原数组中通过回调测试的所有元素。
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:由通过回调测试的所有元素组成的新的数组,没有元素通过就返回空数组
示例:
let arr15 = [1, 2, 3, 4, 5, 6];
console.log(arr15); // [ 1, 2, 3, 4, 5, 6 ]
let newArr15 = arr15.filter((element) => element > 3);
console.log(arr15); // [ 1, 2, 3, 4, 5, 6 ]
console.log(newArr15); // [ 4, 5, 6 ]
15、reduce() 方法对数组中的每个元素按顺序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
不会改变原数组- 参数:
- 1.reducer回调函数,包含四个参数:
- (1)
previousValue上一次的reducer回调的返回值;- (2)
currentValue正在处理的元素;- (3)
currentIndex正在处理的元素的索引值(可选);- (4)操作的数组(可选);
- 2.
initialValue初始值(可选),
- 指定则作为第一次调用reducer回调的上一次返回值
previousValue,currentValue为数组的第一个元素;- 如果没有指定,则
previousValue为数组的第一个元素,currentValue为数组的第二个元素- 返回值:使用“reducer”回调函数遍历整个数组后的结果。
- 报错:初始值未指定,且操作数组为空
示例:
let arr16 = [1, 2, 3, 4, 5, 6];
console.log(arr16);// [ 1, 2, 3, 4, 5, 6 ]
let result16 = arr16.reduce(
(prevalue, currentValue) => prevalue + currentValue,
0
);
console.log(arr16);// [ 1, 2, 3, 4, 5, 6 ]
console.log(result16);// 21
16、flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
- 相当于先map操作数组,然后打平1层,与arr.map().flat(1)几乎一样,效率会高一点
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:由回调函数的返回值所组成的新数组,为打平状态
示例:
let arr17 = [1, 3, 5];
console.log(arr17); // [1, 3, 5]
let newArr17 = arr17.flatMap((e) => [e, e * 2]);
console.log(arr17); // [1, 3, 5]
console.log(newArr17); // [ 1, 2, 3, 6, 5, 10 ]
// 相当于
let newArr18 = arr17.map((e) => [e, e * 2]).flat();
console.log(newArr18); // [ 1, 2, 3, 6, 5, 10 ]
17、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:回调都返回true,则返回值为true;反之为false
示例:
let arr18 = [1, 2, 3, 4];
console.log(arr18); // [1, 2, 3, 4]
let result18 = arr18.every((e) => e > 0);
console.log(arr18); // [1, 2, 3, 4]
console.log(result18); // true
18、some() 方法测试数组中有 1 个元素通过了被提供的函数测试就返回true
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:回调有一个返回true,则返回值为true;反之为false
示例:
let arr19 = [1, 2, 3, 4];
console.log(arr19); // [1, 2, 3, 4]
let result19 = arr19.some((e) => e > 3);
console.log(arr19); // [1, 2, 3, 4]
console.log(result19); // true
19、find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:第一个通过回调的元素的值,都没有通过就返回undefined
示例:
let arr20 = [1, 2, 3, 4];
console.log(arr20); // [1, 2, 3, 4]
let result20 = arr20.find((e) => e > 2);
console.log(arr20); // [1, 2, 3, 4]
console.log(result20); // 3
20、findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:第一个通过回调的元素的索引值,都没有通过就返回-1
示例:
let arr21 = [1, 2, 3, 4];
console.log(arr21); // [1, 2, 3, 4]
let result21 = arr21.findIndex((e) => e > 2);
console.log(arr21); // [1, 2, 3, 4]
console.log(result21); // 2
21、findLast() 方法从数组的最后开始寻找,返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:第一个通过回调的元素的值,都没有通过就返回undefined
示例:
let arr22 = [1, 2, 3, 4];
console.log(arr22); // [1, 2, 3, 4]
let result22 = arr22.findLast((e) => e > 2);
console.log(arr22); // [1, 2, 3, 4]
console.log(result22); // 4
22、findLastIndex() 方法从数组的最后开始寻找返回数组中满足提供的测试函数的第一个元素的 索引 。 若没有找到对应元素则返回-1。
不会改变原数组- 参数:
- 1.回调函数回调的参数:
- (1)
currentValue当前处理的元素;- (2)
index当前处理元素的索引值,可选;- (3)
array正在操作的数组,可选;- 2.可选,指定执行回调时的
this值- 返回值:第一个通过回调的元素的索引值,都没有通过就返回-1
示例:
let arr23 = [1, 2, 3, 4];
console.log(arr23); // [1, 2, 3, 4]
let result23 = arr23.findLastIndex((e) => e > 2);
console.log(arr23); // [1, 2, 3, 4]
console.log(result23); // 2
23、indexOf() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。
- 不改变原数组
- 参数:
- 1.
searchElement要查找的元素;- 2.fromIndex(可选),开始查找的位置(正序),
- (1)开始位置大于或等于数组长度就全不找;
- (2)负值倒数位置正序往后;
- (3)如果负值的绝对值大于数组长度则从0开始找
- 返回值:有返回第一个的索引,没有就返回-1
示例:
let arr24 = [1, 2, 3, 4];
let result24 = arr24.indexOf(3,0);
console.log(result24); // 2
24、lastIndexOf() 方法在数组中从后往前找到的第一个给定元素的索引值,如果不存在则返回 -1。如果有fromIndex,就从 fromIndex 处开始由后往前找
- 不改变原数组
- 参数:
- 1.
searchElement要查找的元素;- 2.
fromIndex(可选),开始查找的位置(逆序),默认从末尾开始,
- 大于或等于数组长度就全部查找,
- 负值倒数然后逆序往前,
- 负值且绝对值大于数组长度就把查找
- 返回值:有返回
第一个的索引,没有就返回-1
示例:
let arr25 = [1, 2, 3, 4];
let result25 = arr25.lastIndexOf(3,3);
console.log(result25); // 2
25、join() 方法用指定的分隔符将一个数组(或一个[类数组对象]的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个元素,那么将返回该元素而不使用分隔符。
- 参数:
separator可选指定分隔符,默认为逗号- 返回值:由数组元素和分隔符拼接的字符串
示例:
let arr26 = [1, 2, 3, 4];
let result26 = arr26.join(",");
console.log(result26); // 1,2,3,4
26、includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
- 参数:
- 1.
searchElement,要查找的元素值;- 2.
fromIndex可选开始位置,负数倒数正序查找。默认值为0- 返回值:包含为true,不包含为false
示例:
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true