2024 JavaScript 数组（Array）方法1w+字汇总（含数组新特性，全到没朋友，再也不用东拼西凑了）

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 = []; // 创建一个空数组

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”

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取

一个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”

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-PWWyvaX3-1712075477287)]

[外链图片转存中…(img-3RgfsXO0-1712075477287)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-HYIew82z-1712075477288)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取