数组常用方法-数组ES6方法-用法及总结

数组处理数据基本方法

concat()

用于连接两个或多个数组，不修改原数组，返回一个新的数组

参数：Array，可以是任意多个，包括0个

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let newArr = arr1.concat(arr2)// [1, 2, 3, 4, 5, 6]

join()

用于把数组中所有的元素放入一个字符串，不修改原数组，返回通过指定分隔符进行分隔后的字符串

参数：String，可以是任意字符串，包括空字符串''，默认用逗号,分隔

let arr1 = [1, 2, 3]
let newArr = arr1.join('')// '123'

pop()

用于删除数组的最后一个元素，修改原数组，返回被删除的元素

参数：无参数，如果数组本身为空[]，则pop()不改变数组，返回undefined值

let arr1 = [1, 2, 3]
let newArr = arr1.pop() // 3

push()

用于往数组的最后添加一个或多个元素，修改原数组，返回添加后数组新的长度

参数：Any，任意类型的参数，多个参数用,隔开，也可是一个参数

let arr1 = [1, 2, 3]
let newArr = arr1.push('a', 'b')// 5

reverse()

用于颠倒数组中元素的顺序，修改原数组，不产生新数组

参数：无参数，直接调用即可

let arr1 = [1, 2, 3]
let newArr = arr1.reverse()
console.log(newArr, arr1 === newArr)// [3, 2, 1] true

shift()

用于删除数组的第一个元素，修改原数组，返回被删除的元素

参数：无参数，如果数组本身为空[]，则shift()不改变数组，返回undefined值

let arr1 = [1, 2, 3]
let newArr = arr1.shift()// 1

unshift()

用于往数组的开头添加一个或多个元素，修改原数组，返回添加后数组新的长度

参数：Any，任意类型的参数，多个参数用,隔开，也可是一个参数

let arr1 = [1, 2, 3]
let newArr = arr1.unshift('a')// 4

slice()

用于从已知数组中返回选定的元素，不修改原数组，返回选定元素组成的新数组

参数：Number，规定选取数组时从哪里开始选取(start)，到哪里结束(end)，包含start，不包含end，默认选定从数组开始到结束的所有元素，所有情况下的返回值都是数组

let arr1 = [1, 2, 3]
let newArr = arr1.slice()// [1, 2, 3]

参数不是负数时，返回从原数组选定的索引start(包含)到end(不包含)所有元素

let arr1 = ['a', 'b', 'c', 'd', 'e']
let newArr = arr1.slice(1, 2)// ["b"]

参数是负数时，表示从原数组最后一个元素算起始位置，到第n个元素。例如-1返回就是最后一个元素，-2就是返回最后的两个元素，依次类推

let arr1 = ['a', 'b', 'c', 'd', 'e']
let newArr = arr1.slice(-3)// ["c", "d", "e"]

sort()

用于对数组的元素进行排序，修改原数组，返回对原数组的引用

参数：Function，不传参默认升序排序

升序排序：

function asc(a, b) {
    
    
    return a - b
}
let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.sort(asc)
console.log(newArr, newArr === arr1)// [1, 2, 3, 4, 5] true

降序排序：

function desc(a, b) {
    
    
    return b - a
}
let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.sort(desc)
console.log(newArr, newArr === arr1)// [5, 4, 3, 2, 1] true

splice()

用于数组中删除后添加项目，改变原数组，返回被删除的项目组成的新数组，未删除元素返回空数组，可以不添加项目

参数：前两个参数Number类型为必传参数，后面的参数Any类型为可选参数

第一个参数表示从哪个位置开始删除数组的元素，第二个参数表示删除多少个元素，后面的参数表示往删除的位置添加的元素

第一个参数为负数时表示从最后算起始位置第n个元素开始

let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.splice(-2, 1, 'a')
console.log(newArr, arr1)// [4] [1, 2, 3, "a", 5]

带一个参数不为负数时表示从索引第n个开始

let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.splice(2, 3, ['a', 'b'], ['c'])
console.log(newArr, arr1)// [3, 4, 5] [1, 2, ["a", "b"], ["c"]]

toString()

用于把数组转换为字符串，不修改原数组，返回值一个新的字符串

参数：无参数，返回值与没有参数的join()方法返回的字符串相同

let arr1 = [1, 2, 3, 4, 5]
let newArr = arr1.toString()
console.log(newArr, arr1)// "1,2,3,4,5" [1, 2, 3, 4, 5]

indexOf()

用于返回数组中某个指定的元素位置，不修改原数组，返回指定元素第一次出现的位置的索引值，没找到则返回-1

参数：第一个参数是要查找的元素，不能是引用类型，第二个参数是从索引为多少的位置开始查找，indexOf()方法不能找到NaN

let arr1 = [1, 2, 3, 4, 5, null, undefined]
let newArr = arr1.indexOf(null)
console.log(newArr, arr1)// 5 [1, 2, 3, 4, 5, null, undefined]

includes()

用于来判断一个数组是否包含一个指定的值，不修改原数组，返回判断结果的布尔值

参数：第一个参数是要查找的值必需，第二个参数是开始查找的索引位置(负值表示从后往前第几个)默认值为0可选，includes()能找到NaN

let arr = ['a', 'b', 'c', NaN]
arr.includes(NaN)// true

Array.isArray()

用于判断一个对象是不是数组，不修改原数组，返回对象是否为数组的布尔值

参数：Object，需要判断的对象

let arr1 = [1, 2, 3, 4, 5]
Array.isArray(arr1)// true

Array.from()

用于从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例，返回一个新的数组

参数：Object，原来的数组或可迭代对象

let arr1 = [1, 2, 3, 4, 5]
let newArr = Array.from(arr1)// [1, 2, 3, 4, 5]

Array.of()

用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型，返回一个新数组

参数：Any，任意个参数，将按顺序成为返回数组中的元素

let arr = Array.of('a', [1, 2], null, undefined, NaN, {
    
    
    b: 3
})
console.log(arr)// ["a", [1, 2], null, undefined, NaN, {b: 3}]

flat()

用于按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，简单来说就是将多维素组降维成一维数组，不修改原数组，返回一个新的数组

参数：Number，表示要提取嵌套数组的结构深度，默认值为 1，传Infinity可以将未知维度的多维数组拉平

function arrayFlat(arr, depth = Infinity) {
    
    
    return arr.flat(depth)
}
// 将flat()封装，不传depth时默认 depth = Infinity 
// 为避免性能消耗，在已知维度的数组可以直接传depth
var arr = [1, [2, [3, [4, [5, [6, [7, [8]]]]]]]]
console.log(arrayFlat(arr))// [1, 2, 3, 4, 5, 6, 7, 8]

不常用的方法

reduce()

用于接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，不修改原数组，返回计算后的结果

参数：第一个是处理数组的函数必传，第二个是传递给函数的初始值可选

function getSum(a, b) {
    
    
    return a + b
}
var arr = [1, 2, 3]
console.log(arr.reduce(getSum, 4))// 4 + 1 + 2 + 3 最终输出结果为 10

copyWithin()

用于从数组的指定位置拷贝元素到数组的另一个指定位置中，修改原数组，返回修改后的结果，不改变原数组的长度

参数：第一个表示复制到指定目标索引位置必需，第二/三个是元素复制的起始/结束位置(不包含结束位置)可选，默认复制从开始到结束，粘贴到数组原长度截止

let arr = [1, 2, 3, 'a', 'b', 'c', 'd']
arr.copyWithin(1, 3, 5)// [1, "a", "b", "a", "b", "c", "d"]

entries()

用于返回一个数组的迭代对象，该对象包含数组的键值对，不修改原数组，返回一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（proto:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。

参数：无参数，直接调用

let arr = ['a', 'b', 'c']
let iterator = arr.entries()
console.log(iterator.next().value)// [0, "a"]
console.log(iterator.next().value)// [1, "b"]
console.log(iterator.next().value)// [2, "c"]
console.log(iterator.next().value)// undefined

fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引，修改原数组，返回修改后的结果

参数：第一个是用来填充的参数，第二个是填充的起始索引(包含)可选，第三个是填充的结束位置索引(不包含)，默认从数组的开始填充到结尾

let arr = ['a', 'b', 'c']
arr.fill(1, 2, 3)// ["a", "b", 1]

数组遍历方法

every()

用于检测数组所有元素是否都符合指定条件（通过函数提供），不修改原数组，如果所有元素都通过检测返回 true，否则返回 false

参数：第一个用来测试每个元素的函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

当检测到元素不满足条件时，返回false，停止循环，后面有满足条件的也不会执行

let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0)// true
arr.every(item => item > 1)// false

some()

用于检测数组中的元素是否满足指定条件（函数提供），不修改原数组，如果有一个元素都通过检测返回 true，所有都不通过检测返回 false

参数：第一个用来测试每个元素的函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

如果数组中有元素满足条件返回 true，停止循环，后面有满足条件的也不会执行，否则返回false，循环所有元素

let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 3)// true

filter()

用于创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不修改原数组，返回新创建的数组

参数：第一个参数是函数，数组中的每个元素都会执行这个函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

新数组包含了符合条件的所有元素，如果没有符合条件的元素则返回空数组，会循环原数组的每一项

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
words.filter(item => item.length > 6)// ["exuberant", "destruction", "present"]

map()

用于返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不修改原数组，返回新创建的数组

参数：第一个参数是函数，数组中的每个元素都会执行这个函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

会循环数组的每一项完成相应操作，需要把操作后的每一项return出去，没有return的那一项会返回undefined

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(item => item += 1) // [2, 3, 4, 5, 6]

forEach()

用于对数组的每个元素执行一次给定的函数，特定情况下会修改原数组，返回undefined

参数：第一个参数是函数，数组中的每个元素都会执行这个函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

除了抛出异常以外，没有办法中止或跳出 forEach() 循环

let arr = [1, 2, 3, 4, 5, {
    
    
    a: 'obj'
}]
arr.forEach(item => {
    
    
    if (typeof item === "object") {
    
    
        item.a = 123
    }
})
// item为引用类型时对item的操作会修改原数组
console.log(arr)// [1, 2, 3, 4, 5, {a: 123}]

find()

用于返回通过测试（函数内判断）的数组的第一个元素的值，不修改原数组，返回满足条件的第一个元素的值

参数：第一个参数是函数，数组中的每个元素都会执行这个函数必需，第二个参数执行 callback 时使用的 this 值可选(几乎不用)

有满足条件时，返回符合测试条件的第一个数组元素值，停止循环，后面有满足条件的也不再执行，如果没有符合条件的则返回 undefined

let ages = [3, 10, 18, 20]
ages.find(item => item > 5)// 10

findIndex()

findIndex()方法与find()一样，就是返回值是索引值，而不是元素，没找到符合条件的就返回-1而不是undefined

let ages = ['a', 'b', NaN, 'c']
ages.findIndex(item => typeof item == "number")// 2

注意：find()、findIndex()不能直接找到NaN

let ages = ['a', 'b', NaN, 'c']
ages.find(item => item == NaN)// undefined
ages.findIndex(item => item == NaN)// -1

find()、findIndex()不能区分空数据和undefined(这种极端情况可以忽略)

let ages = ['a', , 'b', NaN, 'c', undefined, null]
//第二条数据为空，find()、findIndex()会当做undefined找出来返回
ages.find(item => item === undefined)// undefined
ages.findIndex(item => item === undefined) // 1

$数组方法总结$

1、数组添加元素的方法unshift()、push()，都是直接修改原数组，返回新数组的长度

2、数组删除元素的方法shift()、pop()，都是直接修改原数组，返回被删除的元素

3、数组直接操作的方法reverse()、sort()，都是直接修改原数组，不产生新的数组

4、转换数组的方法toString()、join()、concat()，都不修改原数组，返回转换后的值

5、截取数组元素的方法splice()、slice()，splice()修改原数组，可以插入新的元素，slice()不修改原数组，不能插入新的元素

6、数组的部分方法能返回跟原数组相同的新数组，但都是浅拷贝

$如有问题或错误，欢迎指正$