目录

前言

创建数组

字面量方式

构造函数方式

Array.of 方式

Array.from 方式

数组方法

返回新数组

concat()

join()

slice() 

map() 

filter()

toLocaleString() 

toString()

flat()

flatMap()

entries()

keys()

values()

改变原数组

push()

pop()

unshift()

shift()

sort()

reverse()

splice() 

fill()

copyWithin()

更多方法

indexOf()

lastIndexOf()

forEach()

every()

some()

reduce()

reduceRight()

includes() 

find()

findIndex()

isArray()

即将发布的数组新特性

方法尝鲜

at()

Array Group

Array find from last

---

前言

数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。

创建数组

字面量方式

let arr1 = new Array();   // 创建一个空数组
let arr2 = new Array("leo");   // 创建一个包含1个字符串的数组
let arr3 = new Array("leo","is","nice");   // 创建一个包含3个字符串的数组

构造函数方式

let arr1 = [];   // 创建一个空数组
let arr2 = ["leo"];   // 创建一个包含1个字符串的数组
let arr3 = ["leo","is",18];   // 创建一个包含3项数据的数组

Array.of 方式

Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型

let arr = Array.of(1,2);
console.log(arr.length);   // 2
console.log(arr[0]);   // 1let 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：6let 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个元素，插入元素12console.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），并插入元素12console.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 从后往前查找，即倒数第一个5console.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);   // truelet 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);   // truelet 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);   // truelet 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 }

由于文章内容过长，若有错误，请不吝赐教。

如果你觉得有帮助，请关注、点赞、收藏。

一起学前端，一起进步~~~