数组方法大全

数组是做项目中最常见的数据返回的形式，因此我们在处理数组数据的时候，就需要用到数组的方法。数组方法有很多种，我们在处理数据的时候，就得考虑用数组那个方法更简便的实现效果。这篇文章就来总结一下数组的常用的方法，记住最常用方法即可，有些方法了解就行。

push()——末尾追加

• 语法：arr.push(item1,item2,...,itemN)
• push()方法：在数组尾部添加一个或者多个数组元素。
• 原数组会发生改变。
• 该方法有返回值，返回值是添加元素之后的数组长度。

push()方法案例

push.png

unshift()——首位追加

• 语法：arr.unshift(item1,item2,...,itemN)
• unshift()方法：在数组的头部添加一个或者多个数组元素。
• 原数组会发生改变。
• 该方法有返回值，返回值是添加元素之后的数组长度。

unshift()方法案例

unshift.png

pop()——末尾删除

• 语法：arr.pop()
• pop()方法：在数组的尾部删除一个数组元素。
• 原数组会发生改变。
• 该方法有返回值，返回值是这个被删除的数组元素。

pop()方法案例

pop.png

shift()——首位删除

• 语法：arr.shift()
• shift()方法：在数组的头部删除一个数组元素。
• 原数组会发生改变。
• 该方法有返回值，返回值是这个被删除的数组元素。

shift()方法案例

shift.png

slice()——截取

• 语法：arr.slice(startIndex,endIndex)
• slice()方法：截取数组元素。
• 参数：传的参数表示数组元素的索引值。不传参数，截取整个数组；传一个参数，从start索引开始截取，一直到数组结束；传两个参数，从start索引开始截取，一直到end索引结束，不包括end索引上的数组元素！！！
• 原数组不会发生改变。
• 该方法有返回值，返回值是截取的数组元素组成的新数组。

slice()方法案例

slice.png

splice()——增加或者删除数组元素

• 语法：arr.splice(startIndex,howmany,item1,…,itemN)
• splice()方法：增加或者删除数组元素。
• 参数和返回值：不传参数，不增加也不删除，原数组不改变，返回空数组；传一个参数，从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组；传两个参数，第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组；传三个或者多个参数，第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。

splice()方法案例

• 不传参数——不传参数，不增加也不删除，原数组不改变，返回空数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====不传参数=====')
    let arr1 = arr.splice()
    console.log(arr) // ['apple', 'banana', 'orange','lemon']
    console.log(arr1) // []

splice1.png

• 传一个参数——从startIndex索引开始删除，一直到数组结束，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传一个参数=====')
    let arr2 = arr.splice(1)
    console.log(arr) // ['apple']
    console.log(arr2) // ['banana', 'orange', 'lemon']

splice2.png

• 传两个参数——第一个参数是开始删除的索引值，第二个参数是要删除的个数，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传两个参数=====')
    let arr3 = arr.splice(0, 2)
    console.log(arr) // ['orange', 'lemon']
    console.log(arr3) // ['apple', 'banana']

splice3.png

• 传三个或者多个参数——第一个参数表示开始删除的索引值，第二个参数表示要删除的个数，第三个以及三个之后的参数表示要新增的数组元素，原数组改变，返回刚刚被删除的数组元素组成的新数组。

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传三个参数=====')
    let arr4 = arr.splice(1, 2, 'mango')
    console.log(arr) // ['apple', 'mango', 'lemon']
    console.log(arr4) // ['banana', 'orange']

splice4.png

    let arr = ['apple', 'banana', 'orange', 'lemon']
    console.log('=====传多个参数=====')
    let arr5 = arr.splice(2, 1, 'mango', 'watermelon')
    console.log(arr) // ['apple', 'banana', 'mango' 'watermelon', 'lemon']
    console.log(arr5) // ['orange']

splice5.png

reverse()——翻转数组

• 语法：arr.reverse()
• reverse()方法：翻转数组。
• 原数组会发生改变。
• 该方法有返回值，返回值是翻转之后的数组。

reverse()方法案例

reverse.png

sort()——数组排序

• 语法：arr.sort(sortfunction)
• sort()方法：数组排序。
• 原数组会发生改变。
• 该方法有返回值，返回值是排序之后的数组。

sort()方法案例

• 没有参数的情况，按照数组元素首字母的顺序进行排序

sort1.png

• 有参数的情况，参数是一个函数，a-b 从小到大排序。

sort2.png

• 有参数的情况，参数是一个函数，b-a 从大到小排序。

sort3.png

concat()——拼接数组

• 语法：arr.concat(arr1)
• concat()方法：拼接数组。
• 原数组不会发生改变。
• 该方法有返回值，返回值是拼接之后的数组。

concat()方法案例

concat.png

join()——拆分数组

• 语法：arr.join('指定分隔符')
• join()方法：拆分数组，将每个数组元素转换成字符串，通过指定的分隔符进行分隔，最后连接成一个字符串
• 原数组不会发生改变。
• 该方法有返回值，返回值是一个新的字符串。

join()方法案例

join.png

indexOf()——查找数组元素

• 语法：arr.indexOf(value,startIndex)
• indexOf()方法：查找元素在数组中第一次出现的位置，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。
• 原数组不会发生改变。

indexOf()方法案例

• 传一个参数，如果存在，则返回该元素在数组中的索引；如果不存在，则返回-1。

indexOf1.png

• 传两个参数，第一个参数是需要查找的元素，第二个参数是从第几个开始查找的索引值，查找元素从第startIndex索引开始一次出现的位置，如果存在，则返回元素在数组中的索引值；如果不存在，则返回-1。

indexOf2.png

forEach()——遍历数组

forEach()方法的功能是循环遍历数组中的每一个元素；

forEach()方法会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

forEach.png

some()

判断数组中是否存在满足指定条件的数组元素，只要有一个数组元素满足指定条件就返回true

some()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

some.png

every()

判断数组中是否存在满足指定条件的数组元素，只有所有数组元素都满足指定条件才会返回true，只要有一个数组元素不满足条件都会返回false

every()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

every.png

filter()

筛选出满足指定条件的数组元素，并且返回由满足指定条件的数组元素组成的新数组

filter()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

filter.png

map()

根据指定的条件来处理数组元素，并且返回处理之后的数组元素组成的新数组

map()方法会自己遍历数组，它会接收一个函数；这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写

item 表示该数组中的每个数组元素，index 表示每个数组元素的下标，array 表示原数组

js代码块

map.png

reduce()

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

reduce()方法会自己遍历数组，它会接收一个函数；这个函数包含四个形参，分别为：preval，item, index, array, 用不到时可以不写

preval代表上一次调用回调函数的返回值，item 表示该数组中的当前正在处理的数组元素，index 表示该数组中的当前正在处理的数组元素的下标，array 表示原数组

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

js代码块

reduce.png

Array.of()——创建数组

• 语法：Array.of(item1,item2,...,itemN)
• Array.of()方法：创建数组，将参数中所有的值作为数组元素组成一个数组作为返回值；如果参数为空，则返回空数组。
• 参数的值可以不用为同一类型。

Array.of.png

find()

• 查找数组中符合条件的元素，若有多个符合条件的元素，则返回第一个符合条件的元素。

findIndex()

• 查找数组中符合条件的元素索引，如果有多个符合条件的元素，则返回第一个满足条件的元素索引。

includes()——检测数组中是否包含一个值

• 语法：arr.includes(value,startIndex)
• includes()方法：检测数组中是否包含一个值，如果包含则返回true，如果不包含则返回false。
• 参数：传一个参数，检测数组中是否包含一个值；传两个值，检测数组从startIndex索引开始到数组结束是否存在value值；如果存在则返回true，如果不存在则返回false。

扩展运算符...

• 拼接合并数组

扩展运算符.png