本文详述了JavaScript中常用的数组操作方法，包括push、pop、shift、unshift、reverse、splice、sort、copyWithin、fill、length等，以及ES6新增的方法如map、forEach、every、some、filter、find、from、of等。通过实例演示和分类说明，帮助读者掌握这些方法，提升编程效率。
关注前端达人，与你共同进步
开篇
因为数组操作的方法有很多，我们在实际项目中又会经常使用,本篇文章笔者一次性整理常用的数组操作方法 ( 包含 ES6 的 map、forEach、every、some、filter、find、from、of...等 )，熟悉了这些数组的操作方法，编起代码来也就会更加干净利落哟。
本篇文章阅读时间预计15分钟。
01
方法分类
因为数组操作的方法有很多，我们在实际项目中又会经常使用。下面是我自己针对这些方法做的简单分类，请看下表：
02
push()
push()可以将某些值加入到数组的最后一个位置，并且不限制添加数量（注：数组长度是有限制的），如果需要添加多项内容使用逗号隔开即可，加入后数组长度会增加。
03
pop()
pop()会移除数组的最后一个元素。
04
shift()、unshift()
shift()会移除数组的第一个元素。
unshift()会将指定的元素添加到数组的第一个位置。
05
reverse()
reverse()会将数组反转
06
splice()
splice()可以移除或新增数列的元素，它包含了三个参数，第一个是要移除或要添加的序列号( 必填)，第二个是要移除的长度( 选填，若不填则从第一个参数序号位置开始，后方的所有元素都会被移除，若设定为0则不会有元素被移除)，第三个是要替换的内容( 选填 )
添加第三个参数就能够添加或替换元素。
07
sort()
sort()可以针对数组的元素进行排序，里头包含了一个排序用的判断函数，函数内必须包含两个参数，这两个参数分别代表数组里的第n个和第n+1 个元素，通过比较第n和第n+1个元素的大小来进行排序。
如果不使用判断函数，默认会将元素转换成字串，并采用unicode来判断，这也会造成某些数字的排序错误，如下段示例：
08
copyWithin()
copyWithin()能复制数组中的某些元素，并将它们放到同一个数组指定的位置，copyWithin()有三个参数，第一个是要置换的位置(必填)，第二个是从什么位置开始复制(选填，预设0 )，第三个是停止复制的元素的前一个位置(选填，默认值等于数组长度)。
09
fill()
fill()会把数组中所有元素，置换为指定的值，fill()有三个参数，第一个是准备要置换的内容(必填)，第二个是从什么位置开始置换(选填，不设定就全部置换) ，第三个是停止置换的元素的前一个位置(选填，预设等于数组长度)。
10
length()
length可以取得数组的长度。
11
indexOf()、lastIndexOf()
indexOf()会判断数组中是否包含某个值，判断的方式为「由左而右」，如果有包含就返回这个值在数组中的索引值，如果没有就返回-1，有两个参数，第一个参数表示要判断的值( 必填)，第二个参数表示从数组的哪个位置开始判断( 选填，预设为0 )。
lastIndexOf()会判断数组中是否包含某个值，判断的方式为「由右而左」，如果有包含就返回这个值在数组中的索引值，如果没有就返回-1，这个方法有两个参数，第一个参数表示要判断的值( 必填)，第二个参数表示判断从数组的哪个位置开始从右往左查找( 选填，默认为整个数组长度-1 )。
12
find()
find()会将数组中的「每一个」元素带入指定的函数内做判断，并会返回第一个符合判断条件的元素，如果没有元素符合则会返回undefined。
13
findIndex()
findIndex()会将数组中的「每一个」元素带入指定的函数内做判断，并会返回第一个符合判断条件元素的位置索引，如果没有元素符合则会返回-1。
014
filter()
filter()会将数组中的「每一个」元素带入指定的函数内做判断，如果元素符合判断条件则会返回，组成一个新的数组。
15
forEach()
forEach()会将数组中每个元素套用到指定的函数里进行运算，函数有三个参数，第一个参数表示每个元素的值( 必填)，第二个参数为该元素的索引值( 选填)，第三个参数则表示原本的数组( 选填)。
如果结合第二和第三个参数进行搭配使用，就能做到改变原本数组的效果。
16
join()
join()可以将数组中所有元素，变成由指定的字符分割合并在一起组合成字符串进行呈现，若没有指定字符默认会用「逗号」合并。
17
concat()
concat()可以将两个数组合并在一起，如果是使用ES6语法也可以用扩展运算符...来代替。
18
slice()
slice()可以截取出数组某部份的元素为一个新的数组，有两个必填的参数，第一个是起始位置，第二个是结束位置( 操作时数字减1 )。
19
map()
map()会处理数组中每个元素，最后返回一个新的数组，里头有一个函数( 必填) 和一个返回函数里的this参数( 选填)，函数内又包含三个参数，第一个是每个元素的值( 必填)，第二个是当前元素的索引值( 选填)，第三个是当前的数组( 选填)。
使用第二个和第三个参数的示例:
如果要使用回调函数里this的参数，则「不能使用」箭头函数，因为箭头函数的this指向和函数的this指向不同，所以要用一般的函数处理。
20
reduce()、reduceRight()
reduce()可以将数组中每个元素进行计算，每次计算的结果会再与下个元素作计算，直到结束为止，里头包含一个函数( 必填) 和初始计算的数值( 选填)，函数内有四个参数，第一个是计算的值( 必填)，第二个是取得的元素(必填)，第三个是该元素的索引值( 选填)，第四个是原本的数组(选填)。
reduceRight()和reduce()大同小异，只是其计算方式是由右到左，对于加法来说没什么影响，但对于减法而言就有差异。
21
flat()
flat()可以将一个多维数组的深度转成一维(扁平化或称作降维)，它有一个选填的参数，代表要转换的深度数字，预设为1（只展开一层放到一维数组里，如果是2，只展开2层放到一维数组里），如果深度有很多层，可使用Infinity来全部展开成一维数组。
22
flatMap()
flatMap()的方法等于map()和flat()的组合，在运算后直接将数组扁平化处理。
23
Array.isArray()
Array.isArray()能判断一个元素是否为数组，如果是就返回true，不然就返回false。
24
Array.from()
Array.from()会将「类数组」或是「可迭代的对象」转换成数组，Array.from()有两个参数，第一个参数为「类数组对象」或「可迭代的对象」(必填)，第二个参数则是改变转换成数组元素的函数(选填)。
类数组对象具有length 属性以及索引化index 的元素，可迭代对象表示具有可以利用迭代的方式取得它自己本身的元素，例如Map 和Set...等。( 参考MDN 说法 )
类数组对象写法必须包含length 属性，且对象的key须为0开始的数字，对应转换后的元素索引。
25
Array.of()
Array.of()可以快速将数字、字串等内容，转换成数组。
26
toString()
toString()会把整个数组转换成字符串。
27
every()
every()会将数组中的「每一个」元素带入指定的函数内做判断，只要有任何一个元素不符合判断条件，会回返回false，如果全部符合，就会回传true。
28
some()
some()会将数组中的「每一个」元素带入指定的函数内做判断，只要有任何一个元素符合判断条件，就会返回true，如果全都不符合，才会返回false。
29
includes()
includes()会判断数组中是否包含某个值，如果有包含就返回true，否则返回false，有两个参数，第一个参数表示要判断的值( 必填)，第二个参数表示从数组的哪个位置开始判断( 选填)。
30
valueOf()
valueOf()会返回数组的原始值，如果原本的数组有修改，那么返回的原始值也会跟着改变（相当浅复制）
31
keys()
keys()会返回数组中的每一个索引值( key )成为一个新的Array Iterator对象，因为是Array Iterator对象，可以使用for...of进行迭代。
今天的总结就到这里，希望能在日常工作中能帮助到你，如果你喜欢本文，建议收藏本文，分享给更多的人看到。
精彩推荐
JS小技巧丨随机不重复的ID，模板标签替换，XML与字符串互转，快速取整
CSS 3D 专题丨学习前，你需要搞明白什么是CSS 3D？
Web Animation API丨用原生JS制作一个图片随机移动的动画
小技巧丨console的用法，不仅仅只有console.log()
css基础丨Transforms 属性在实际项目中如何应用？
css基础丨如何理解transform的matrix()用法
css基础丨如何理解Display的属性：None，Block，Inline，Inline-Block
ES6基础丨解构赋值（destructuring assignment）
JavaScript基础丨前端不懂它，会再多框架也不过只是会用而已！
JavaScript基础丨你真的了解JavaScript吗?
专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！
长按关注"前端达人"
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
