Javascript 数组方法整理

最新推荐文章于 2024-07-12 16:27:40 发布

2401_84092778

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量209

点赞数 4

分类专栏：程序员文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_84092778/article/details/137672711

版权

程序员专栏收录该内容

280 篇文章 0 订阅

订阅专栏

3、Array.reduce() 与 Array.reduceRight()
4、Array.fill()
5、Array.find()
6、Array.indexOf() 与 Array.lastIndexOf()
7、Array.findIndex()
8、Array.includes()
9 、Array.pop()
10、Array.shift()
11、Array.push()
12、Array.unshift()
13、Array.splice()
14、Array.slice()
15、Array.join()
16、Array.reverse()
17、Array.sort()
18、Array.some()
19、Array.every()
20、Array.from() 与 Object.keys(object) 与 Object.values(object)
21、Array.of()
22、Array.isArray()
23、Array.at()
24、Array.copyWithin()
25、Array.concat()
26、Array.entries()
27、Array.toString()

1、 Array.map() 与 Array.forEach()

==============================================================================================

相同点：

都是循环遍历数组中的每一项

每次执行匿名函数参数一样，分别是item（当前每一项）、index（索引值）、arr（原数组）

只能遍历数组

匿名函数中的this都是指向window；

两种方法都不能用 break 中断

不同点：

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

forEach()方法返回undefined

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach()

const squareUsingForEach = [];

numbers.forEach(x => squareUsingForEach.push(x*x));

// 使用 map()

const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]

console.log(squareUsingMap); // [1, 4, 9, 16, 25]

map() 方法按照原始数组元素顺序依次处理元素。

map() 不会对空数组进行检测，它也不会改变原始数组。

const list = [1, 2, 3, 4];

list.map((el) => el * 2); // [2, 4, 6, 8]

map() 速度比 forEach() 快；

//性能对比

const users=new Array(10000).fill(“半生过往”);

// 1. forEach()

console.time(“forEach”);

const newArray = [];

users.forEach((item) => {

newArray.push(item)

});

console.timeEnd(“forEach”);

// 2. map()

console.time(“map”);

const newArray2 = users.map ((item) => {

return item

});

console.timeEnd(“map”);

map()方法输出可以与其他方法(如reduce()、sort()、filter())链接在一起，以便在一条语句中执行多个操作。

forEach()是一个终端方法，这意味着它不能与其他方法链接，因为它返回undefined。

//在这里插入代码片使用以下两种方法找出数组中每个元素的平方和：

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach()

const squareUsingForEach = []

let sumOfSquareUsingForEach = 0;

numbers.forEach(x => squareUsingForEach.push(x*x));

squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// 使用 map()

const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total,value) => total + value);

console.log(sumOfSquareUsingForEach); // 55

console.log(sumOfSquareUsingMap); // 55

2、Array.filter()

==============================================================================

三个参数：

item 必须。当前元素的值

index 可选。当前元素的索引值

arr 可选。当前元素属于的数组对象（原数组）

filter() 方法创建一个新的数组，并返回一个包含所有元素的新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：

filter() 不会对空数组进行检测，它也不会改变原始数组。

const list = [1, 2, 3, 4];

console.log(list.filter((el) => el % 2 === 0)); // [2, 4]

3、Array.reduce() 与 Array.reduceRight()

====================================================================================================

四个参数：

total 必需。初始值或函数先前返回的值。

item 必需。当前元素的值。

index 可选。当前元素的数组索引。

arr 可选。当前元素所属的数组对象（原数组）

reduce() 方法接收一个函数作为累加器 (result/tоtаl) 中，数组中的每个值（从左到右）开始缩减，最终减为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意：

reduce() 对于空数组是不会执行回调函数的。

const list = [1, 2, 3, 4, 5];

console.log(list.reduce((total, item) => total + item, 0)); // 15

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

注意：

reduceRight() 对于空数组是不会执行回调函数的。

const list = [1, 2, 3, 4, 5];

console.log(list.reduceRight((total, item) => total + item, 0)); // 15

4、Array.fill()

============================================================================

fill() 方法用于将一个固定值替换数组的元素。

三个参数：

value 必需。填充的替换值。

start 可选。开始填充位置。

end 可选。停止填充位置 (默认为 array.length)

const list = [1, 2, 3, 4, 5];

console.log(list.fill(0)); // [0, 0, 0, 0, 0]

5、Array.find()

============================================================================

返回满足条件数组中第一个元素的值。否则返回undefined。
当数组中的元素满足条件时返回 true , find() 返回符合条件的元素，之后的值不会再调用执行函数。

三个参数：

value 必需。填充的替换值。

start 可选。开始填充位置。

end 可选。停止填充位置 (默认为 array.length)

const list = [1, 2, 3, 4, 5];

console.log(list.find((el) => el === 3)); // 3

console.log(list.find((el) => el === 6)); // undefined

6、Array.indexOf() 与 Array.lastIndexOf()

=====================================================================================================

indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。

三个参数：

item 必需。查找的元素。

start 可选。数组中开始检索的位置。

const list = [1, 2, 3, 4, 5, 3, 4, 5];

console.log(list.indexOf(3)); // 2 (从开始位置查找，查找到第一个 3 下标为 2)

console.log(list.indexOf(3,4)); // 6 (从下标为 4 位置开始查找，查找到第它后面的第一个个 3，也就是整个数组里的第二个三下标为 6)

console.log(list.indexOf(6)); // -1 （没有找到元素为 6 的数据）

lastIndexOf() 使用方法同 indexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
如果要检索的元素没有出现，则该方法返回 -1。

7、Array.findIndex()

=================================================================================

返回满足条件的数组中第一个元素的索引。否则返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。不改变数组的原始值。

三个参数：

item 必需。当前元素的值。

index 可选。当前元素的数组索引。

arr 可选。当前元素所属的数组对象（原数组）

const array = [5, 12, 8, 130, 44];

console.log(array.findIndex((element) => element > 13)); // 3

8、Array.includes()

================================================================================

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

两个参数：

item 必需。需要查找的元素值。

index 可选。从该索引处开始查找，如果为负值，则按升序从 array.length + index 的索引开始搜索，如果计算出的索引小于 0，则整个数组都会被搜索。

const list = [1, 2, 3, 4, 5];

console.log(list.includes(3)); // true

console.log(list.includes(6)); // false

console.log(list.includes(3,-1)); // true //数组长度是5 index 是 -1 computed index 是 5 + (-1) = 4

console.log(list.includes(3,-100)); // true //数组长度是5 index 是 -100 computed index 是 5 + (-100) = -95 小于 0 整个数组都会被搜索

console.log(list.includes(3,5)); // false

9 、Array.pop()

============================================================================

pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！

const list = [1, 2, 3, 4, 5];

console.log(list.pop()); // 5 当前删除的数据

console.log(list); // [1, 2, 3, 4] 最新数组

10、Array.shift()

==============================================================================

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意，此方法改变数组的长度！

const list = [1, 2, 3, 4, 5];

console.log(list.shift()); // 1 当前删除的数据

console.log(list); // [2, 3, 4, 5] 最新数组

11、Array.push()

=============================================================================

将新元素附加到数组的末尾，并返回新的长度。

参数

item1,item2, …, itemX 可选。向数组末尾位置添加一个或者多个元素。

const list = [1, 2, 3, 4, 5];

console.log(list.push(6)); // 数组长度6

console.log(list); // [1, 2, 3, 4, 5, 6]

12、Array.unshift()

================================================================================

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

参数

item1,item2, …, itemX 可选。向数组起始位置添加一个或者多个元素。

const list = [1, 2, 3, 4, 5];

console.log(list.unshift(0)); // 数组长度 6

console.log(list); // [0, 1, 2, 3, 4, 5]

13、Array.splice()

===============================================================================

splice() 方法从数组添加/删除项目，并返回删除的项目，注意，splice() 方法会改变原始数组。

三个参数

index: 数组开始下标

len: 替换/删除的长度

item: 替换的值，删除操作的话 item为空

const list = [1, 2, 3, 4, 5];

console.log(list.splice(1, 2)); // 从下标1 开始删除两个 [2, 3]

console.log(list); // [1, 4, 5]

//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)

var arr = [‘a’,‘b’,‘c’,‘d’];

arr.splice(1,1);

console.log(arr);

//[‘a’,‘c’,‘d’];

//删除起始下标为1，长度为2的一个值(len设置2)

var arr2 = [‘a’,‘b’,‘c’,‘d’]

arr2.splice(1,2);

console.log(arr2);

//[‘a’,‘d’]

//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

var arr = [‘a’,‘b’,‘c’,‘d’];

arr.splice(1,1,‘ttt’);

console.log(arr);

//[‘a’,‘ttt’,‘c’,‘d’]

var arr2 = [‘a’,‘b’,‘c’,‘d’];

arr2.splice(1,2,‘ttt’);

console.log(arr2);

//[‘a’,‘ttt’,‘d’] 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

// 添加 ---- len设置为0，item为添加的值

var arr = [‘a’,‘b’,‘c’,‘d’];

arr.splice(1,0,‘ttt’);

console.log(arr);

//[‘a’,‘ttt’,‘b’,‘c’,‘d’] 表示在下标为1处添加一项’ttt’

14、Array.slice()

==============================================================================

slice() 方法可从已有的数组中返回选定的元素。【截取数组】
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分
不会改变原始数组。

const list = [1, 2, 3, 4, 5];

console.log(list.slice(1, 2)); // 从下标1 开始删除两个 [2, 3]

console.log(list); // [1, 2, 3, 4, 5]

15、Array.join()

=============================================================================

join() 方法将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号 (,)。
注意，join() 方法不会改变原始数组。

const list = [1, 2, 3, 4, 5];

console.log(list.join(', ')); // “1, 2, 3, 4, 5”

16、Array.reverse()

================================================================================

reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。

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

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

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

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

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

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

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。

====================================

reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。

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

[外链图片转存中…(img-uanuGFhb-1712890387980)]

[外链图片转存中…(img-d0cnNnuW-1712890387981)]

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

[外链图片转存中…(img-2VGPGib5-1712890387981)]

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

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

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。

[外链图片转存中…(img-G908jWyX-1712890387981)]
[外链图片转存中…(img-Bd5dprj8-1712890387982)]

2401_84092778

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Javascript 数组方法整理

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
复制链接

扫一扫