前言

数组是JavaScript中经常会使用到的一种数据格式，数组方法是编程中经常使用的一种工具，它们可以帮助我们高效地处理数组数据。数组是一种存储多个值的数据结构，而数组方法可以在数组上进行各种操作，如访问、添加、删除、修改和搜索等。通过调用这些方法，我们可以简化代码、提高效率和准确性。其中这些方法有的是在原数组上进行操作，会改变原数组；有些则是会返回一个新数组，原数组不变。下面小编将会从下面两方面带各位小伙伴熟悉数组常用的一些方法。

原数组改变的数组方法：push,unshift,pop,shift,splice,reverse,sort

原数组不变的数组方法：concat,map,filter,join,indexOf,slice,forEach,includes,some,every

原数组改变的数组方法

原数组改变的数组方法形象化巧记：

push

Array.push(),将一个或多个元素添加到数组的末尾，并且返回该数组的新长度。（用于数组添加）

const arr = ['red', 'green', 'blue']
arr.push('yellow','white')
console.log(arr) //[ 'red', 'green', 'blue', 'yellow', 'white' ] //原数组改变

const arr2 = ['red', 'green', 'blue']
const a = arr2.push('yellow')
console.log(a)  //4

unshift

Array.unshift(),将一个或多个元素添加到数组的开头，并且返回该数组的新长度。（用于数组添加）

const arr = ['red', 'green', 'blue']
arr.unshift('yellow','white')
console.log(arr) //[ 'yellow', 'white', 'red', 'green', 'blue' ] //原数组改变

const arr2 = ['red', 'green', 'blue']
const a = arr2.unshift('yellow')
console.log(a)  //4

pop

Array.pop(),从数组中删除最后一个元素，并且返回该元素的值；若数组为空，则会返回undefined。（用于数组删除）

const arr = ['red', 'green', 'blue']
arr.pop()
console.log(arr) //[ 'red', 'green' ] //原数组改变

const arr2 = ['red', 'green', 'blue']
const a = arr2.pop()
console.log(a)  //blue

shift

Array.shift(),从数组中删除第一个元素，并且返回该元素的值；若数组为空，则会返回undefined。（用于数组删除）

const arr = ['red', 'green', 'blue']
arr.shift()
console.log(arr) //[ 'green', 'blue' ] //原数组改变

const arr2 = ['red', 'green', 'blue']
const a = arr2.shift()
console.log(a)  //red

const arr3 = []
console.log(arr3.shift()) //undefined

splice

Array.splice(start,deleteCount), star:指定修改的开始位置（从0开始）；deleteCount：表示要移除的数组元素的个数，如果省略默认从指定位置删除到最后。（用于数组修改）

const arr = ['red', 'green', 'blue','balck','white']
arr.splice(1,3)
console.log(arr) //[ 'red', 'white' ] //原数组改变 

const arr2 = ['red', 'green', 'blue','balck','white']
arr2.splice(2,2)
console.log(arr2) //[ 'red', 'green', 'white' ]

const arr3 = ['red', 'green', 'blue','balck','white']
arr3.splice(0)
console.log(arr3) //[]

sort

Array.sort，对数组数据进行排序。（用于数组排序）

const arr = [ '2', '5', '3', '1', '7', '6']
arr.sort() //默认升序  <=> arr.sort((a,b)=>a-b) 
console.log(arr) //[ '1', '2', '3', '5', '6', '7' ] //原数组改变

const arr2 = [ '2', '5', '3', '1', '7', '6']
arr2.sort((a,b)=>b-a) //降序
console.log(arr2) //[ '7', '6', '5', '3', '2', '1' ]

reverse

Array.reverse，对数组数据进行反转。（用于数组反转）

const arr = ['red', 'green', 'blue','balck','white']
arr.reverse()
console.log(arr) //[ 'white', 'balck', 'blue', 'green', 'red' ] //原数组改变

原数组不变的数组方法

原数组不变的数组方法形象化巧记：

concat

Array.concat(arr1,arr2...)，合并两个或多个数组，返回一个新数组。（用于数组合并）

const arr = ['red', 'green', 'blue']
const arr2 = ['yellow', 'white', 'black']
const arr3 = ['pink', 'orange']

const res = arr.concat(arr2,arr3)
console.log(res) //['red','green','blue','yellow','white','black','pink','orange']
console.log(arr) //[ 'red', 'green', 'blue' ] //原数组不变

slice

Array.slice(start,end), star:指定切割的开始位置（包含该位置）；end：指定切割的结束位置（不包含该位置）。支持负参数，-1为数组最后一项，-3为倒数第三项。如果省略end参数则默认从指定的开始位置切割到最后。返回一个新数组。（用于切割原数组元素）。

const arr = ['red', 'green', 'blue','balck','white']
const res = arr.slice(1,3)
console.log(res) //[ 'green', 'blue' ]
console.log(arr) //[ 'red', 'green', 'blue', 'balck', 'white' ] //原数组不变

const arr2 = ['red', 'green', 'blue','balck','white']
const res2 = arr2.slice(-3,-1)
console.log(res2) //[ 'blue', 'balck' ]

const arr3 = ['red', 'green', 'blue','balck','white']
const res3 = arr3.slice(0) //可实现数组的复制
console.log(res3) //[ 'red', 'green', 'blue', 'balck', 'white' ]
    
const arr4 = "[object String]"
const res4 = arr4.slice(8,-1)
console.log(res4)  //String

join

Array.join()用于把数组中的所有元素转换成一个字符串，通过参数指定数组元素之间分隔符，若为' '，则所有元素之间连接没有任何字符。

const arr = [ 2, 5, 3, 1, 7, 6]
const res = arr.join('')
const res2 = arr.join('♥')
console.log(res) //253176
console.log(res2) //2♥5♥3♥1♥7♥6
console.log(arr) //[ 2, 5, 3, 1, 7, 6 ] //原数组不变

map

Array.map（），遍历数组并可以处理数据，原数组与新数组为一一映射的关系。返回新的数组。

const arr = [ 2, 5, 3, 1, 7, 6]
const res = arr.map(item => item = '♥')
const res2 = arr.map(item => item *= 3 ) 
console.log(res) //[ '♥', '♥', '♥', '♥', '♥', '♥' ]
console.log(res2)//[ 6, 15, 9, 3, 21, 18 ]
console.log(arr)//[ 2, 5, 3, 1, 7, 6 ] //原数组不变

forEach

Array.forEach（（item,index）=>{ }），item:数组中的每一项，index:数组下标，可不写。用于遍历数组中的每一个元素，不返回数组。

const arr = [2, 5, 3, 1, 7, 6]

arr.forEach((item,index)=>{
    console.log(item) //依次打印数组每个元素
    console.log(index) //依次打印数组每个元素的下标
})

reduce

Array.reduce((上一次值，当前值) => { }，初始值),返回累计处理的结果，常用于求和等。（原数组不变） 1、如果没有初始值，则上一次值为数组第一个数组元素的值; 2、每一次循环，把返回值作为下一次循环的上一次值; 3、如果有初始值，则起始值作为上一次值。

const arr = [ 1, 2, 3, 4]
//无初始值
const res = arr.reduce((prev,cur)=> prev + cur)
//（第一次循环）  prev   cur    返回值
//                1      2       3
//（第二次循环）  prev   cur    返回值
//                3      3       6
//（第三次循环）  prev   cur    返回值
//                6      4       10
console.log(res) //10

//有初始值
const res2 = arr.reduce((prev,cur)=> prev + cur, 10)
//（第一次循环）  prev   cur    返回值
//                10     1       11
//（第二次循环）  prev   cur    返回值
//                11     2       13
//（第三次循环）  prev   cur    返回值
//                13     3       16
//（第四次循环）  prev   cur    返回值
//                16     4       20
console.log(res2) //20

//数组对象中元素求和方式
const arr2 = [{
    name:'小米',
    salary: 20000
},{
    name:'小方',
    salary: 20000
},{
    name:'小露',
    salary: 20000
},
]
const res3 = arr2.reduce((pre,cur) => pre + cur.salary, 0) //注：此时初始值0一定不能省略
console.log(res3) //60000

filter

Array.filter（（）=>{ } ），筛选满足指定条件的元素，并返回一个新数组。（用于过滤数组元素）

const arr = [ '2', '5', '3', '1', '7', '6']
const res = arr.filter(item => item % 2 === 0) //筛选数组中的偶数
console.log(res) //[ '2', '6' ]
console.log(arr) //[ '2', '5', '3', '1', '7', '6' ] //原数组不变

const arr2 = ['786.sn', 'g213@.cn', 'dash.jpg','3626','786@']
const res2 = arr2.filter(item => item.includes('@')) //筛选数组元素中含有字符@的元素
console.log(res2)//[ 'g213@.cn', '786@' ]

const arr3 = [ '2', '5', '3', '1', '7', '6']
const res3 = arr.filter(item => true) //判断条件为true,则返回每一项
console.log(res3) //[ '2', '5', '3', '1', '7', '6' ]

//总结:item为数组的每一项，箭头函数会将满足判断条件为true的每一项返回。

indexOf

Array.indexOf（item,start），item:指定元素，start:指定检索开始位置（包含该位置），默认为0，返回指定元素在数组中第一次出现的位置索引，若不存在，则返回-1。（用于查找数组指定元素位置索引）

const arr = [2, 5, 3, 1, 7, 6]
const res = arr.indexOf(1) //从数组下标默认位置（0）开始查找数字1
console.log(res) //3

const arr2 = [2, 4, 5, 1, 7, 6, 5, 8, 5]
const res2 = arr2.indexOf(5,3) //从数组下标3位置开始查找数字5
console.log(res2) //6

includes

Array.include（），用于检测数组元素中是否含有指定元素，若含有，返回true;否则，返回false。（用于检测数组含有指定元素）

const arr = [ 2, 5, 3, 1, 7, 6]
const res = arr.includes(6) //查询数组中是否存在6
console.log(res) //true

const arr2 = ['red', 'green', 'blue','balck','white']
const res2 = arr2.includes('blue') //查询数组中是否存在字符串blue
console.log(res2) //true

some

Array.some（），用于检测数组中是否至少有一个元素满足指定条件，若满足，返回true;否则，返回false。（用于检测数组存在元素满足指定条件）

 const arr = [2, 5, 3, 1, 7, 6]
const res = arr.some( item => item % 2 === 0) //查询数组中是否存在偶数
console.log(res) //true

const arr2 = ['786.sn', 'g213.cn', 'dash.jpg','3626','786@']
const res2 = arr2.some( item => item.includes('@')) //查询数组中是否有元素包含字符@
console.log(res2) //true

every

Array.some（），用于检测数组中是否所有元素满足指定条件，若满足，返回true;否则，返回false。（用于检测数组所有元素满足指定条件）

const arr = [2, 5, 3, 1, 7, 6]
const res = arr.every( item => item % 2 === 0) //查询数组中是否都是偶数
console.log(res) //false

const arr2 = ['786.sn@', 'g213.cn@', '@dash.jpg','36@26','786@']
const res2 = arr2.every( item => item.includes('@')) //查询数组元素中是否都包含字符@
console.log(res2) //true

总结

如果觉得文章对您有所帮助的话，麻烦给小博主点点关注，点点赞咯😘，有问题欢迎各位小伙伴评论喔😊~