数组方法大全

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

push()——末尾追加

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

push()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.push(5, 6, 7)
    console.log(arr) // [1,2,3,4,5,6,7]
    console.log(arr1) // 7
</script>

push.png

unshift()——首位追加

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

unshift()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.unshift(5, 6, 7)
    console.log(arr) // [5,6,7,1,2,3,4]
    console.log(arr1) // 7
</script>

unshift.png

pop()——末尾删除

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

pop()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.pop()
    console.log(arr) // [1,2,3]
    console.log(arr1) // 4
</script>

pop.png

shift()——首位删除

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

shift()方法案例

<script>
    let arr = [1, 2, 3, 4]
    let arr1 = arr.shift()
    console.log(arr) // [2,3,4]
    console.log(arr1) // 1
</script>

shift.png

slice()——截取

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

slice()方法案例

<script>
    let arr = ['apple', 'banana', 'orange', 'lemon']

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

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

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

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()方法案例

<script>
    let arr = ['apple', 'banana', 'orange', 'lemon']
    let arr1 = arr.reverse()
    console.log(arr) //  ['lemon', 'orange', 'banana', 'apple']
    console.log(arr1) //  ['lemon', 'orange', 'banana', 'apple']
</script>

reverse.png

sort()——数组排序

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

sort()方法案例

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

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort()
    console.log(arr) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
    console.log(arr1) //[11, 111, 12, 13, 15, 2, 33, 445, 5, 7]
</script>

sort1.png

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

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort(function(a, b) {
        return a - b //从小到大
    })
    console.log(arr) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
    console.log(arr1) // [2, 5, 7, 11, 12, 13, 15, 33, 111, 445]
</script>

sort2.png

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

<script>
    let arr = [11, 111, 2, 12, 15, 13, 445, 5, 33, 7]
    let arr1 = arr.sort(function(a, b) {
        return b - a //从大到小
    })
    console.log(arr) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
    console.log(arr1) // [445, 111, 33, 15, 13, 12, 11, 7, 5, 2]
</script>

sort3.png

concat()——拼接数组

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

concat()方法案例

<script>
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = arr1.concat(arr2)
    console.log(arr3) //[1,2,3,4,5,6]
    console.log(arr1, arr2) // [1,2,3] [4,5,6]
</script>

concat.png

join()——拆分数组

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

join()方法案例

<script>
    let arr = ['a', 'p', 'p', 'l', 'e']
    let str1 = arr.join('') //以空字符分隔
    let str2 = arr.join('-') //以-分隔
    let str3 = arr.join() //默认以，分隔
    console.log(arr)
    console.log(str1) //apple
    console.log(str2) //a-p-p-l-e
    console.log(str3) //a,p,p,l,e
</script>

join.png

indexOf()——查找数组元素

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

indexOf()方法案例

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

<script>
    let arr = ['apple', 'banana', 'orange']
    console.log(arr.indexOf('banana')) //1
    console.log(arr.indexOf('lemon')) //-1
</script>

indexOf1.png

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

<script>
    let arr = [1, 2, 5, 4, 3, 1, 2]
    console.log(arr.indexOf(1, 3)) // 5
    console.log(arr.indexOf(2, 0)) // 1
    console.log(arr.indexOf(2, 2)) // 6
    console.log(arr.indexOf(5, 3)) // -1
</script>

indexOf2.png

forEach()——遍历数组

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

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

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

js代码块

<script>
    var arr = ['张三', '李四', '王五']
    arr.forEach(function(item, index, arr) {
        console.log(item, index, arr)
    })
</script>

forEach.png

some()

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

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

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

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.some(function(item, index, arr) {
        return item > 200//满足数组元素大于200
    })
    var newArr1 = arr.some(function(item, index, arr) {
        return item > 400//满足数组元素大于400
    })
    console.log(newArr)//返回true
    console.log(newArr1)//返回false
</script>

some.png

every()

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

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

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

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr1 = arr.every(function(item, index, arr) {
        return item < 200//满足数组元素小于200
    })
    var newArr2 = arr.every(function(item, index, arr) {
        return item <= 400//满足数组元素小于等于400
    })
    console.log(newArr1)//返回false
    console.log(newArr2)//返回true
</script>

every.png

filter()

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

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

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

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var arr = [100, 200, 300, 400]
    var newArr = arr.filter(function(item) {
        return item < 400//满足数组元素小于400
    })
    console.log(newArr)//返回[100,200,300]
</script>

filter.png

map()

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

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

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

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.map(function(item) {
        return item * 2 //将数组元素乘以2
    })
    var newArr1 = arr.map(function(item) {
        return item / 2 //将数组元素除以2
    })
    console.log(newArr) //返回[200,400,600,800]
    console.log(newArr1) //返回[50，100，150，200]
</script>

map.png

reduce()

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

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

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

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

js代码块

<script>
    var arr = [100, 200, 300, 400]
    var newArr = arr.reduce(function(preval, item, index, arr) {
        console.log(preval, item, index, arr)
        return preval + item
    })
    console.log(newArr)
</script>

reduce.png

Array.of()——创建数组

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

<script>
    console.log(Array.of()) //[]
    console.log(Array.of(1, 2, 3, 4, 5)) //[1,2,3,4,5]
</script>

Array.of.png

find()

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

<script>
    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.find(item => item > 2)
    console.log(arr1) //3
</script>

findIndex()

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

<script>
    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.findIndex(item => item > 2)
    console.log(arr1) //2
</script>

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

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

<script>
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.includes(2)) //true
    console.log(arr.includes(7)) //false

    console.log(arr.includes(3, 1)) //true
    console.log(arr.includes(3, 3)) //false
</script>

扩展运算符...

• 拼接合并数组

<script>
    let arr = [1, 2, 3]
    let arr1 = [4, 5, 6]
    let arr2 = [...arr, ...arr1]
    console.log(arr2) //[1,2,3,4,5,6]
</script>

扩展运算符.png