前言
数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。
创建数组
字面量方式
let arr1 = []; // 创建一个空数组
let arr2 = ["leo"]; // 创建一个包含1个字符串的数组
let arr3 = ["leo","is",18]; // 创建一个包含3项数据的数组
构造函数方式
let arr1 = new Array(); // 创建一个空数组
let arr2 = new Array("leo"); // 创建一个包含1个字符串的数组
let arr3 = new Array("leo","is","nice"); // 创建一个包含3个字符串的数组
Array.of 方式
Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型
let arr = Array.of(1,2);
console.log(arr.length); // 2
console.log(arr[0]); // 1
let arr1 = Array.of("leo");
console.log(arr1.length); // 1
console.log(arr1[0]); // "leo"
Array.from 方式
Array.from() 将可迭代对象或者类数组对象作为第一个参数传入，就能返回一个数组
function fn(...args) { // ...args剩余参数数组，由传递给函数的实际参数提供
let newArr = Array.from(args);
console.log(newArr);
}
fn("leo","is",18); // ["leo","is",18]
扩展：映射转换
如果你想实行进一步的数组转换，你可以向 Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式，并将其存储在目标数组的对应位置上
function fn(...args) {
let newArr = Array.from(args, value => value + 6);
console.log(newArr);
}
fn("leo","is","great"); // ["leo6","is6","great6"]
数组方法
返回新数组
concat()
连接两个或更多的数组，并返回结果
let arr = [1,2,3,4];
let newArr = arr.concat([5,6],7);
console.log(newArr); // [1,2,3,4,5,6,7]
console.log(arr); // [1,2,3,4] 原数组不变
join()
把数组的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的，默认使用逗号作为分隔符
let arr = [1,2,3];
console.log(arr.join()); // "1,2,3"
console.log(arr.join("-")); // "1-2-3"
console.log(arr); // [1, 2, 3] 原数组不变
slice()
选取数组的一部分，并返回一个新数组。
slice() 接受一个或两个参数，在只有一个参数的情况下， 其返回从该参数指定位置开始到当前数组末尾的所有项；如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项，当出现负数时，将负数加上数组长度的值来替换该位置的数
let arr = [1,3,5,7,9,11]; // length：6
let newArr1 = arr.slice(1); // 从index为1开始向后截取
console.log(newArr1); // [3, 5, 7, 9, 11]
let newArr2 = arr.slice(1,4); // 从index为1开始向后截取，到index为4停止，不包括4
console.log(newArr2); // [3, 5, 7]
let newArr3 = arr.slice(1,-2); // -2 + 6 = 4，相当于arr.slice(1,4)
console.log(newArr3); // [3, 5, 7]
let newArr4 = arr.slice(-4,-1); // 相当于arr.slice(2,5)
console.log(newArr4); // [5, 7, 9]
console.log(arr); //[1, 3, 5, 7, 9, 11] 原数组没变
map()
通过指定函数处理数组的每个元素，并返回处理后的数组
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(item){
return item * item;
});
console.log(newArr); // [1, 4, 9, 16, 25]
console.log(arr); // [1, 2, 3, 4, 5] 原数组不变
filter()
检测数值元素，并返回符合条件所有元素的数组，实现“过滤”功能
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr = arr.filter(function(item, index) {
return index % 3 === 0 || item >= 8;
});
console.log(newArr); // [1, 4, 7, 8, 9, 10]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 原数组不变
toLocaleString()
toString()
以上两个都是将数组转换成字符串，并返回结果
let arr = [1,2,3,4,5];
let str1 = arr.toLocaleString();
let str2 = arr.toString();
console.log(str1); // "1,2,3,4,5"
console.log(str2); // "1,2,3,4,5"
console.log(arr); // [1,2,3,4,5] 原数组不变
flat()
按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，实现数组扁平化。
参数：指定要提取嵌套数组的结构深度，默认值为 1
let arr = [0, 1, 2, [3, 4]];
console.log(arr.flat()); // [0, 1, 2, 3, 4]
let arr1 = [0, 1, 2, [[[3, 4]]]];
console.log(arr1.flat(2)); // [0, 1, 2, [3, 4]]
//使用 Infinity，可展开任意深度的嵌套数组
let arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr2.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 扁平化数组空项,如果原数组有空位，flat()方法清除空位
let arr3 = [1, 2, , , 4, 5];
console.log(arr3.flat()); // [1, 2, 4, 5]
flatMap()
会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数：指定要提取嵌套数组的结构深度，默认值为 1
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]); // [2, 4, 3, 6, 4, 8]
entries()
keys()
values()
entries()、keys()、values() 都是用于遍历数组，它们都返回一个遍历器对象，可以用for...of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) { // [0,1]
console.log(index);
}
// 0
// 1
for (let item of ['a', 'b'].values()) { // ['a','b']
console.log(item);
}
// 'a'
// 'b'
for (let [index, item] of ['a', 'b'].entries()) { // [[0,'a'],[1,'b']]
console.log(index, item);
}
// 0 'a'
// 1 'b'
改变原数组
push()
向数组的末尾添加一个或更多元素，返回新的长度，原数组改变
let arr = ["leo","is","great"];
let len = arr.push("true");
console.log(arr); // ["leo","is","great","true"] 原数组改变
console.log(len); // 4
pop()
删除数组的最后一个元素，返回删除的元素，原数组改变
// arr：["leo","is","great","true"]
let item = arr.pop();
console.log(item); // "true"
console.log(arr); // ["leo","is","great"] 原数组改变
unshift()
向数组的开头添加一个或更多元素，返回新的长度，原数组改变
let arr = ["leo","is","great"];
let len = arr.unshift("look");
console.log(arr); // ["look","leo","is","great"] 原数组改变
console.log(len); // 4
shift()
删除并返回数组的第一个元素，原数组改变
// arr：["look","leo","is","great"]
let item = arr.shift();
console.log(item); // "look"
console.log(arr); // ["leo","is","great"] 原数组改变
sort()
sort() 方法用于对数组的元素进行排序，原数组改变，默认排序顺序为按字母升序
let arr = ["a", "d", "c", "b"];
console.log(arr.sort()); // ["a", "b", "c", "d"]
let arr1 = [13, 24, 51, 3];
console.log(arr1.sort()); // [13, 24, 3, 51]
console.log(arr1); // [13, 24, 3, 51] 原数组改变
sort()使用场景广泛，我单独写成一篇博客，详细介绍其用法，详情请阅读
Js sort()核心用法，有了它，你无需再为数组排序而发愁_前端不释卷leo的博客-CSDN博客定义和用法sort() 方法用于对数组的元素进行排序（常规数组、对象数组）。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序（按照字符串Unicode编码）。注意：当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序，你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。注意：这种方法会改变原始数组！基本使用1、对常规字符串数组进行排序（默认排序）：var fruits = ["Banana", "Orange".https://blog.csdn.net/qq_41809113/article/details/121407648?spm=1001.2014.3001.5502
reverse()
反转数组的元素顺序
let arr = [1,2,3,4];
console.log(arr.reverse()); // [4,3,2,1]
console.log(arr); // [4,3,2,1] 原数组改变
splice()
从数组中添加或删除元素。它有很多种用法，可以实现删除、插入和替换。
1、删除元素，返回删除的元素
可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数
let arr = [1,3,5,7,9,11];
let removeArr = arr.splice(0,2); // 从index为0开始删除，删除2项，即1，3
console.log(removeArr); // [1, 3]
console.log(arr); // [5, 7, 9, 11] 原数组改变
2、向指定索引位置添加元素
可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数，添加的话为0）、要插入的项
let arr = [1,3,5,7,9,11];
arr.splice(1, 0, 12); // 在index为1处删除0个元素，插入元素12
console.log(arr); // [1,12,3,5,7,9,11] 原数组改变
3、替换指定索引位置的元素
可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数、要插入的任意数量的项
let arr = [1,3,5,7,9,11];
arr.splice(1, 1, 12); // 在index为1处删除1个元素（即删除3），并插入元素12
console.log(arr); // [1,12,5,7,9,11] 原数组改变
fill()
使用一个固定值来填充数组。当只是用一个参数时，该方法会用该参数填充整个数组
let arr = [1,2,3,4,5];
arr.fill(1);
console.log(arr); // [1,1,1,1,1] 原数组改变
可以传入三个参数，分别为：填充的参数，开始位置，结束位置（不包括结束位置的那个元素）
let arr = [1,2,3,4,5];
arr.fill(6,2,4);
console.log(arr); // [1,2,6,6,5] 原数组改变
copyWithin()
从数组的指定位置拷贝元素到数组的另一个指定位置中
语法
array.copyWithin(target, start, end)
let arr = [1,2,3,4,5];
arr.copyWithin(3, 0); // 将数组的前两个元素复制到数组的最后两个位置
console.log(arr); // [1,2,3,1,2] 原数组改变
默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）
let arr = [1,2,3,4,5,6,7];
//从索引3的位置开始粘贴，即前面的1,2,3不变
//从索引0的位置开始复制
//遇到索引3时停止复制（不包括），即最后复制的为1,2,3
arr.copyWithin(3, 0, 3);
console.log(arr); // [1,2,3,1,2,3,7] 原数组改变
更多方法
indexOf()
搜索数组中的元素（从前往后），并返回它所在的位置，接收两个参数：要查找的项、查找起点索引（可选）。
lastIndexOf()
搜索数组中的元素（从后往前），并返回它所在的位置，接收两个参数：要查找的项、查找起点索引（可选）。
以上两个方法都返回要查找的项在数组中的位置，在没找到的情况下返回 -1
let arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 从前往后查找，即第一个5
console.log(arr.lastIndexOf(5)); // 5 从后往前查找，即倒数第一个5
console.log(arr.indexOf(5,2)); // 2 从index为2开始从前往后查找
console.log(arr.lastIndexOf(5,4)); // 2 从index为4开始从后往前查找
console.log(arr.indexOf("5")); // -1 没找到，返回-1
// 注意：查找时使用 === 进行比较，因此 5 !== "5"
forEach()
对数组进行遍历，并将元素传递给回调函数，该方法没有返回值。
回调函数参数：当前遍历元素，对应的索引，数组本身
let arr = [1,2,3];
arr.forEach(function(item,index,obj){
console.log(index + '-' + item + '-' + (obj === arr));
});
// "0-1-true"
// "1-2-true"
// "2-3-true"
// 箭头函数
let arr1 = [1,2,3];
arr1.forEach((item,index,obj) => {
console.log(index + '-' + item + '-' + (obj === arr1));
});
every()
判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回 true；如果有一项不满足，则返回 false
let arr = [1,2,3,4,5];
let flag1 = arr.every(function(item){
return item < 10;
});
console.log(flag1); // true
let flag2 = arr.every(function(item){
return item < 3;
});
console.log(flag2); // false
some()
判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true；如果所有项都不满足，则返回 false
let arr = [1,2,3,4,5];
let flag1 = arr.some(function(item){
return item < 3;
});
console.log(flag1); // true
let flag2 = arr.some(function(item){
return item < 1;
});
console.log(flag2); // false
reduce()
从数组的第一项开始，逐个遍历到最后。
reduceRight()
从数组的最后一项开始，向前遍历到第一项。
以上两个方法都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值
回调函数有 4 个参数：前一个值、当前值、项的索引、数组对象
let arr = [1,2,3,4,5];
let sum = arr.reduce(function(prev, cur, index, array){ // 使用reduceRight()结果相同
return prev + cur;
},10); // 数组开始遍历加了一个初始值10，可以不设默认 0
console.log(sum); // 25
includes()
判断数组是否包含指定的值，如果是返回 true，否则 false。
参数有两个，第一个是（必填）需要查找元素，第二个是（可选）开始查找元素的索引
let arr = [1,2,3,4,5];
let flag1 = arr.includes(3);
console.log(flag1); // true
let flag2 = arr.includes(2,3); // 从index为3开始查找2是否存在
console.log(flag2); // false
// 注意：includes使用 === 来进行比较，仅有一个例外：NaN 被认为与自身相等
let values = [1, NaN, 2];
console.log(values.indexOf(NaN)); // -1
console.log(values.includes(NaN)); // true
find()
findIndex()
以上两个方法均接受两个参数：回调函数、用于指定回调函数内部的 this（可选）。
回调函数可接受三个参数：数组的某个元素，该元素对应的索引位置，以及该数组本身。
回调函数应当在给定的元素满足你定义的条件时返回 true，而两个方法都会在回调函数第一次返回 true 时停止查找。
注意：find()方法返回匹配的值，而 findIndex()返回匹配位置的索引
let arr = [1,2,3,4,5,1,9];
let findItem = arr.find(function(item,index,array){
return item > 2; // 当查找到满足项之后，停止查找
})
console.log(findItem); // 3 返回元素
let findItemIndex = arr.findIndex(function(item,index,array){
return item > 2;
})
console.log(findItemIndex); // 2 返回元素的索引
isArray()
用于判断一个对象是否为数组，如果是数组返回 true，否则返回 false
let arr = [1,2,3,4,5];
console.log(Array.isArray(arr)); // true
即将发布的数组新特性
- at(): 数组支持索引查询
- Array Group: 数组元素分类；
- Array find from last: 数组逆向查询
方法尝鲜
at()
数组支持索引查询
过去我们在使用
[]
语法时，会以为数组和字符串支持按照索引去查询元素
let arr = [1,2,3,4,5];
console.log(arr[4]); // 5
at()可以解决数组、字符串、TypedArray不能直接通过索引查询。该提案目前进入satge4，被各大浏览器实现。可以复制下面的代码直接在浏览器尝试
let arr = [1,2,3,4,5];
console.log(arr.at(-2)); // 4
Array Group
用于数组元素分类
给数组Array的原型上添加了两个方法，
groupBy
和
groupByToMap
举例
将数组中的元素，按照数字 ‘40’ 来进行分类
let arr = [23, 56, 78, 42, 11, 49];
arr.groupBy((item,index) => {
return item > 40 ? '比40大' : "比40小"
})
// {'比40大': [56, 78, 42, 49] , '比40小': [23,11]}
groupBy
方法返回了一个新的匿名对象，其中对象的键key为
groupBy
的回调函数的返回值。
groupByToMap
方法返回了一个常规的Map，其中Map的键key为
groupBy
的回调函数的返回值
举例
let arr = [1, 2, 3, 4, 5];
let odd = { odd: true };
let even = { even: true };
arr.groupByToMap((num, index, array) => {
return num % 2 === 0 ? even: odd;
});
// => Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
Array find from last
从数组的最后一个到第一个查找元素的方法
要想倒序查询数组元素，我们可以先进行一次反转
reverse()
，再使用
find
进行查询
let arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];
[...arr].reverse().find(item => item.value % 2 === 1); // { value: 3 }
通过方法
findLast
，支持了直接逆向查询数组
arr.findLast(item => item.value % 2 === 1); // { value: 3 }
由于文章内容过长，若有错误，请不吝赐教。
如果你觉得有帮助，请关注、点赞、收藏。
一起学前端，一起进步~~~
版权归原作者 前端不释卷leo 所有， 如有侵权，请联系我们删除。