JavaScript中数组常用的方法
JavaScript中数组常用的方法：
一.新增
1. push()
作用：添加一个或者多个新的元素至数组尾部并且返回数组的长度，会改变原数组
参数：一个以及多个要添加的新元素，添加多个元素时参数之间用逗号隔开
let arr=['熏悟空']; var len=arr.push('猪扒盖','撒无尽'); console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(len); //3
2. unshift()
作用：添加一个或者多个新的元素至数组头部并且返回数组的长度，会改变原数组
参数：一个以及多个要添加的新元素，添加多个元素时参数之间用逗号隔开
let arr=['熏悟空']; var len=arr.unshift('猪扒盖','撒无尽'); console.log(arr); //[ '猪扒盖', '撒无尽', '熏悟空' ] console.log(len); //3
3. splice()：
作用：用于数组元素的新增，删除，以及替换，此处只说新增，会改变原数组
参数：第一个参数为你所要操作参数在数组中的索引；第二个参数为你所要删除的元素数量，设置为0则不删除；第三个参数你所要添加的元素，可以没有，也可以有多个。
let arr=['熏悟空','猪扒盖']; arr.splice(1,0,'撒无尽','白聋马'); //从数组的索引为1处开始添加元素，0表示不删除 console.log(arr); //[ '熏悟空', '撒无尽', '白聋马', '猪扒盖' ]
4. concat()
作用：用于合并两个或者多个数组，返回一个合并后的新数组，不会改变原数组
参数：一个或者多个合并的数组，这个数组可以是真正的数组，也可以是单个的值
let arr=['熏悟空','猪扒盖','撒无尽']; let arr2=arr.concat('糖酸脏',['白聋马','逼马吻']) console.log(arr); //['熏悟空','猪扒盖','撒无尽'] console.log(arr2); //[ '熏悟空', '猪扒盖', '撒无尽', '糖酸脏', '白聋马', '逼马吻']
注意：用这种方式进行数组新增，原数组是没有进行改变的，如果需要获取合并后的数组是需要定义一个变量来获取返回结果的
二.删除
1. pop()
作用：删除数组最末尾的一个元素并返回该元素，会改变原数组
参数：无
let arr=['熏悟空','猪扒盖']; var res=arr.pop(); console.log(arr); //[ '熏悟空' ] console.log(res); //'猪扒盖'
2. shift()
作用：删除数组头部的一个元素并返回该元素，会改变原数组
参数：无
let arr=['熏悟空','猪扒盖']; var res=arr.shift(); console.log(arr); //[ '猪扒盖' ] console.log(res); //'熏悟空'
3. splice()
作用：用于数组元素的新增，删除，以及替换，此处只说删除，会改变原数组
参数：第一个参数为你所要操作参数在数组中的索引；第二个参数为你所要删除的元素数量，设置为0则不删除；第三个参数你所要添加的元素，可以没有，也可以有多个。
let arr=['熏悟空','猪扒盖','撒无尽']; arr.splice(1,2); //从索引1位置开始删除2个元素，注意第三个参数没有值，有值的话就会添加，只删除的话不填 console.log(arr); //[ '熏悟空' ]
4. slice()
作用：从已有的数组中返回选定的元素，返回符合条件的元素组成一个新的数组，不会改变原数组。
参数：两个参数，第一个参数为start，表示开始截取的索引位置，可选，第二个参数为end，表示结束截取的索引位置，可选。
注意：slice返回的是符合参数范围的元素组成的新数组，不改变原数组，如要获取需定义一个变量接收。
包前不包后原则。
let arr=['熏悟空','猪扒盖','撒无尽']; let arr2=arr.slice(1,2); //从数组中索引为1的位置开始截取，截取到索引为2的数组为止，但是截取的范围包括索引为1的元素，但不包括索引为2的元素，即所谓包前不包后 console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(arr2); //[ '猪扒盖' ]
如果slice()的第二个参数不写的话就表示截取到数组最后
let arr=['熏悟空','猪扒盖','撒无尽']; let arr2=arr.slice(1); console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(arr2); //[ '猪扒盖', '撒无尽' ]
如果slice()一个参数都不填则整个数组截取。
如果slice()的参数为负数，则表示从数组末尾开始倒数截取
let arr=['熏悟空','猪扒盖','撒无尽']; let arr2=arr.slice(-2); //从数组倒数第二个元素开始截取，到最后一个元素结束，包括最后一个元素 let arr3=arr.slice(-2,-1); //从数组倒数第二个元素开始截取，到倒数第一个元素结束，不包括最后一个元素 let arr4=arr.slice(-2,1); //这种写法不报错，但存在问题，因为只能正向截取，不能逆向截取，不能从倒数第二个元素截取到索引为1的元素，结果会为空数组 console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(arr2); //[ '猪扒盖', '撒无尽' ] console.log(arr3); //[ '猪扒盖' ] console.log(arr4); //[]
请注意splice()和slice()的两个方法的书写和区别，很容易弄混的。
三.修改
1. splice()
作用：用于数组元素的新增，删除，以及替换，此处只说删除，会改变原数组
参数：第一个参数为你所要操作参数在数组中的索引；第二个参数为你所要删除的元素数量，设置为0则不删除；第三个参数你所要添加的元素，可以没有，也可以有多个。
let arr=['熏悟空','猪扒盖','撒无尽','糖酸脏']; arr.splice(1,2,'猪肛裂'); //从索引为1的元素开始将后面2个元素替换成我从第三个参数开始的元素 console.log(arr); //[ '熏悟空', '猪肛裂', '糖酸脏' ]
四.查找
1. indexOf()
作用：返回数组中某个指定的元素位置，如果元素存在与数组中则返回元素对应的索引，如不存在则返回-1。
参数：一个参数，为需要查找的元素
let arr=['熏悟空','猪扒盖','撒无尽','熏悟空']; let index=arr.indexOf('熏悟空'); //找到第一个符合条件的，直接返回索引，不管后面是否还有一样的值
let index2=arr.indexOf('糖酸脏'); console.log(index); //0
console.log(index2); //-1
2. lastIndexOf()
作用：返回一个指定的元素在数组中最后出现的位置，如果元素存在与数组中则返回元素对应的索引，如不存在则返回-1。
参数：一个参数，为需要查找的元素
注意：lastIndexOf()与indexOf()的区别在于逆向与正向的区别。
let arr=['熏悟空','猪扒盖','撒无尽','熏悟空']; let index=arr.lastIndexOf('熏悟空'); //从数组最后一位开始向前查找，找到了符合条件的元素，返回元素对应的索引，直接返回，不管前面是否还有一样的值 let index2=arr.lastIndexOf('糖酸脏'); console.log(index); //3 console.log(index2); //-1
3. find()
作用：返回通过测试（函数内判断）的数组的第一个元素的值。
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：是找到第一个符合你函数中判断条件的值，符合条件了就停止执行，不符合条件就返回undefined
let arr = [1,2,3,4,5]; let result=arr.find(function(val,index,arr){ return val>2 }) console.log(arr); //[ 1, 2, 3, 4, 5 ] console.log(result); //3 注意此时，在他找到了满足盘点条件的元素后就直接终止了循环，不在管后面的值是否符合条件
4. findIndex()
作用：返回通过测试（函数内判断）的数组的第一个元素的值在数组中的位置（即索引）。
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：是找到第一个符合你函数中判断条件的值的索引，而不是其本身的值
let arr = [1,2,3,4,5]; let result=arr.findIndex(function(val,index,arr){ return val>2 }) console.log(arr); //[ 1, 2, 3, 4, 5 ] console.log(result); //2 注意，返回的是元素3在数组中的索引位置，而不是其本身值是多少
五.其他功能
1.join()
作用：将数组改变为字符串，不改变原数组。
参数：一个，为连接符，即数组元素转换为字符串时之间用什么分隔开来，可以不填
let arr=['熏悟空','猪扒盖','撒无尽']; let str=arr.join(); //没有参数则默认用逗号隔开 let str2=arr.join('-'); //有参数则用参数隔开 console.log(str); //熏悟空,猪扒盖,撒无尽 console.log(str2); //熏悟空-猪扒盖-撒无尽
2.reverse()
作用：将数组元素中的数据从后往前重新排列，会改变原数组
参数：无
let arr=['熏悟空','猪扒盖','撒无尽']; arr.reverse(); console.log(arr); //[ '撒无尽', '猪扒盖', '熏悟空' ]
3.sort()
作用：将数组元素按照一定的规则进行排序，会改变原数组
参数：一个，可选，为函数，函数中添加排序规则，若不写参数则默认按照ascii码排序，ascii排序规则请自行搜索，不做赘述。
let arr = ['熏悟空', '猪扒盖', '撒无尽']; arr.sort(); console.log(arr); //[ '撒无尽', '熏悟空', '猪扒盖' ] 按照ascii码排列规则进行排序 let arr1 = [5, 1, 4, 9, 6, 2]; arr1.sort(function (a, b) { return a - b }) console.log(arr1); //[ 1, 2, 4, 5, 6, 9 ] 按照升序进行排序
4. forEach()
作用：数组遍历，用于调用数组的每个元素，并将元素传递给回调函数。
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：forEach只是对数组的元素进行取值并进行相关操作，不会改变原数组，不会返回新数组，且无法用return终止遍历。
let arr = ['熏悟空', '猪扒盖', '撒无尽']; arr.forEach(function(value){ console.log(value); })
//顺序打印 '熏悟空'，'猪扒盖','撒无尽'
//如果想要对原数组的值进行修改，可以利用函数的后面两个参数进行操作，但是这本身是数组你自身在操作原数组，不属于forEach改变了原数组：
let arr = ['熏悟空', '猪扒盖', '撒无尽'];
arr.forEach(function(val,index,arr){
arr[index]=val+'1'
})
console.log(arr);
//['熏悟空1'，'猪扒盖1','撒无尽1']
5. filter()
作用：数组遍历，创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：filter会查找函数中符合条件的元素，将其进行组合成一个新数组并将之返回，不会修改原数组，无法return终止循环，return只能跳出当前循环，return后面一般跟着判断条条件。
let arr = ['熏悟空', '猪扒盖', '撒无尽']; let newArr=arr.filter(function(val,index,arr){ return val!=='熏悟空' }) console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(newArr); //[ '猪扒盖', '撒无尽' ]
6. map()
作用：遍历数组，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：map会按照你函数中的代码处理数组中的每一个元素，并将结果组合成一个新的数组并返回，不会修改原数组，无法return终止与跳出循环，return后面一般跟着你要对数据进行的操作
let arr = ['熏悟空', '猪扒盖', '撒无尽']; let newArr=arr.map(function(val,index,arr){ return val+1 }) console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(newArr); //[ '熏悟空1', '猪扒盖1', '撒无尽1' ]
7. some()
作用：遍历数组，用于检测数组中的元素是否满足指定条件（函数提供），若存在一项或多项返回 ture,否则返回 false
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：some方法不会返回新数组，也不会对原数组进行修改，更不能用return进行终止或跳出循环，返回的值为boolean值，不是新数组。
let arr = ['熏悟空', '猪扒盖', '撒无尽']; let result=arr.some(function(val,index,arr){ return val==='猪扒盖' }) console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽' ] console.log(result); //true //因为数组中'猪扒盖'与判断条件相同，所以返回true，否则返回false
8. every()
作用：用于检测数组所有元素是否都符合指定条件（通过函数提供），若每个元素都返回 ture,则返回 true，否则返回false，注意此处与some()的区别。
参数：常用参数为一个，为元素处理函数，函数传递三个参数，分别为value(当前值)，index(索引)，arr(当前元素所属的数组对象，就是你遍历的那个数组)。
注意：some方法不会返回新数组，也不会对原数组进行修改，更不能用return进行终止或跳出循环，返回的值为boolean值，不是新数组。
let arr = ['熏悟空', '猪扒盖', '撒无尽',500]; let result=arr.every(function(val,index,arr){ return typeof val==='string' }) console.log(arr); //[ '熏悟空', '猪扒盖', '撒无尽', 500 ] console.log(result); //false 因为数组中的500不满足判断条件，所以不管其他元素是否满足判断条件，都返回false
以上方法中注意forEach()与filter(),map()的区别，some()与every()的区别。
forEach()与filter(),map()的异同点在于：
在于是否会修改原数组方面，三者都不会修改原数组；
在于是否会返回新数组方面，forEach()不返回新数组，filter()与map()会；
在于是否能通过return终止或跳出循环方面，forEach()与map()无法通过return终止或跳出循环，filter可利用return跳出循环；
some()与every()的主要区别在于返回值得判断条件上，some()是只要有一个元素符合你函数的判断条件就返回true，every是只有当所有元素都符合你函数内部的判断条件才返回true。
以上方法中修改原数组的方法有：push()，unshift()，pop()，shift()，splice()，reverse()，sort()
不会修改原数组的方法有：concat()，slice()，indexOf()，lastIndexOf()，find()，findIndex()，join()，forEach()，filter()，map()，some()，every()
浙公网安备 33010602011771号