JS数组方法

1、Array.pop()

• 删除数组中最后一个元素，返回值是删除的元素值
• 会改变数组

let arr = [2, 5, 6, 12]
let popA = arr.pop()
console.log(popA) // 12
console.log(arr) // [ 2, 5, 6 ]

2、Array.push()

• 向数组末端添加元素（可以添加多个元素），返回值是添加完后新数组的长度
• 会改变原数组

let arr = [2, 5, 6, 12]
let pushA = arr.push(66,"hello")
console.log(pushA) // 6
console.log(arr) // [ 2, 5, 6, 12, 66, 'hello' ]

3、Array.shift()

• 从数组头部删除一个元素（只能一个），返回值为删除的元素
• 改变原数组

let arr = [2, 5, 6, 12]
let shiftA = arr.shift()
console.log(shiftA) // 2
console.log(arr) // [ 5, 6, 12 ]

4、Array.unshift()

• 向数组前面添加元素（可以添加多个元素）， 返回值是添加完后的数组的长度
• 改变原数组

let arr = [2, 5, 6, 12]
let shiftB = arr.unshift("hello", 8)
console.log(shiftB) // 6
console.log(arr) // [ 'hello', 8, 2, 5, 6, 12 ]

5、Array.splice(index, how, n)

• index 必需, 规定从何处添加/删除元素。
• how 可选。要删除的项目数。如果设置为 0，则不会删除任何项目, 如未设置任何值（数字）则删除从 index 开始到原数组结尾的所有元素。
• n 可选。要添加到数组的新元素。
• 向/从数组添加/删除项目，并返回删除的项目
• 改变原数组

let arr = [2, 5, 6, 12]
// 删除元素
let spliceA = arr.splice(1,2)
console.log(spliceA) // [ 5, 6 ]
console.log(arr) // [ 2, 12 ]

// 添加元素
let spliceB = arr.splice(1,0,"hello" , "world")
console.log(spliceB) // []
console.log(arr) // [ 2, 'hello', 'world', 12 ]

// 删除并添加元素
let arr2 = [6,8,12,6]
let spliceC = arr2.splice(1,1,"hello" , "world")
console.log(spliceC) // [ 8 ]
console.log(arr2) // [ 6, 'hello', 'world', 12, 6 ]

6、Array.concat()

• 连接两个或者多个数组或对象或具体值，返回一个新的数组

let arr = [2, 5, 6, 12]
let arr2 = ["hello", "world"]
let concatA = arr.concat(arr2,["boy"], {name: "张三"})
console.log(concatA) // [ 2, 5, 6, 12, 'hello', 'world', 'boy', { name: '张三' } ]

7、Array.sort()

• 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
• 可规定排序方式，但必须是函数

let arr = [2, 1, 5, 6, 12]
// 不规定排序方式
console.log(arr.sort()) // [ 1, 12, 2, 5, 6 ]
// 升序
console.log(arr.sort((a, b) => a - b)) // [ 1, 2, 5, 6, 12 ]
// 降序
console.log(arr.sort((a, b) => b - a)) // [ 12, 6, 5, 2, 1 ]

8、Array.reverse()

• 将数组反转,返回值是反转后的数组
• 改变原数组

let arr = [2, 1, 5, 6, 12]
arr.reverse()
console.log(arr) // [ 12, 6, 5, 1, 2 ]

9、Array.slice(start, end)

• 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组
• 不会改变原数组

let arr = [2, 1, 5, 6, 12]
console.log(arr.slice(2,4)) // [ 5, 6 ]
console.log(arr) // [ 2, 1, 5, 6, 12 ]

10、Array.forEach(callBack)

• 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组
• callBack 参数：
  value --当前索引的值
  index --索引
  array --原数组

let arr = [2, 1, 5, 6, 12]
let res = arr.forEach((value, index, arr) => {
    if(value > 2) {
        arr[index] = value*10
    }
    return arr
})

console.log(arr) // [ 2, 1, 50, 60, 120 ]
console.log(res) // undefined

11、Array.map(callback)

• 映射数组(遍历数组),有return 返回一个新数组
• callback 参数：
  value --当前索引的值
  index --索引
  array --原数组

let arr = [2, 1, 5, 6, 12]
let res = arr.map((value, index, arr) => {
    value = value * index
    return value
})
console.log(arr) // [ 2, 1, 5, 6, 12 ]
console.log(res) // [ 0, 1, 10, 18, 48 ]

arr.forEach()和arr.map()的区别 :
arr.forEach()是和for循环一样，是代替for，arr.map()是修改数组其中的数据，并返回新的数据。
arr.forEach() 没有return ，arr.map() 有return

12、Array.fliter(callback)

• 过滤数组，返回一个满足要求的新数组
• 不改变原数组
• callback的参数：
  value --当前索引的值
  index --索引

let arr = [2, 1, 5, 6, 12]
let res= arr.filter((value, index) => value > 5)
console.log(arr) // [ 2, 1, 5, 6, 12 ]
console.log(res) // [ 6, 12 ]

13、Array.every(callback)

• 依据判断条件，数组的元素是否全满足，若满足则返回ture
• callback的参数：
  value --当前索引的值
  index --索引

let arr = [2, 1, 5, 6, 12]
let res = arr.every((value, index) => value > 0)
console.log(arr); // [ 2, 1, 5, 6, 12 ]
console.log(res); // true

14、Array.some(callback)

• 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
• callback的参数：
  value --当前索引的值
  index --索引

let arr = [2, 1, 5, 6, 12]
let res = arr.some((value, index) => value > 6)
console.log(arr); // [ 2, 1, 5, 6, 12 ]
console.log(res); // true

15、Array.reduce(callback, initialValue)

• 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值

• 参数：

• callback:
  previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）
  currentValue 必选 --数组中当前被处理的数组项
  index 可选 --当前数组项在数组中的索引值
  array 可选 --原数组
  initialValue: 可选 --初始值

• 实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

let arr = [2, 1, 5, 6, 12]
// 未提供值
let res1 = arr.reduce((preval, curval) => preval += curval)
console.log(res1); // 26
// 提供值
let res2 = arr.reduce((preval, curval) => preval -= curval, 0)
console.log(res2); // -26

16、Array.reduceRight(callback, initialValue)

• 与Array.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加。
• 实行方法：reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。

let arr = [2, 1, 5, 6, 12]
// 未提供值
let res1 = arr.reduceRight((preval, curval) => preval += curval)
console.log(res1); // 26
// 提供值
let res2 = arr.reduceRight((preval, curval) => preval -= curval, 0)
console.log(res2); // -26

17、Array.indexof()

• 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

let arr = [2, 1, 1, 5, 6]
let res = arr.indexOf(1)
let res2 = arr.indexOf(12)
console.log(res); // 1
console.log(res2); // -1

18、Array.lastIndexOf()

• 和Array.indexOf()的功能一样，不同的是从后往前查找

let arr = [2, 1, 1, 5, 6]
let res = arr.lastIndexOf(1)
let res2 = arr.lastIndexOf(12)
console.log(res); // 2
console.log(res2); // -1

19、Array.from()

• 将伪数组变成数组，就是只要有length的就可以转成数组
• 当需要转变对象时，必须用于length属性，且其余建需要从0开始，否则转变的数组中将填充undefined

let str = "hello"
// 正常排序
let obj = {0: "张三", 1: 18, length: 2}
// 将 第二个键变成3 
let obj1 = {0: "李四 ", 3: 18, length: 2}
console.log(Array.from(str)); // [ 'h', 'e', 'l', 'l', 'o' ]
console.log(Array.from(obj)); // [ '张三', 18 ]
console.log(Array.from(obj1)); // [ '李四 ', undefined ]

20、Array.of()

• 将一组值转换成数组，类似于声明数组
• Array()有缺点，就是参数问题引起的重载

console.log(Array(2)) // [ <2 empty items> ]
console.log(Array.of(2)); // [ 2 ]

21、Array.copyWithin()

• 在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组
• 参数:
  target --必选 索引从该位置开始替换数组项
  start --可选 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。
  end --可选 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数

let arr = [2, 1, 3, 5, 6]
let arr2 = [2, 1, 3, 5, 6]
let arr3 = [2, 1, 3, 5, 6]

let res = arr.copyWithin(1)
console.log(res); // [ 2, 2, 1, 3, 5 ]

let res1 = arr2.copyWithin(1,2)
console.log(res1); // [ 2, 3, 5, 6, 6 ]

let res2 = arr3.copyWithin(1,2,4)
console.log(res2); // [ 2, 3, 5, 5, 6 ]

22、Array.find(callback)

• 找到第一个符合条件的数组成员

let arr = [2, 1, 3, 5, 6]

let res = arr.find((value, index, arr) => value > 3)
console.log(res); // 5

23、Array.findIndex(callback)

• 找到第一个符合条件的数组成员的索引值

let arr = [2, 1, 3, 5, 6]

let res = arr.findIndex((value, index, arr) => value > 3)
console.log(res); // 3

24、Array.fill(target, start, end)

• 使用给定的值，填充一个数组,ps:填充完后会改变原数组
• 参数：
  target – 待填充的元素
  start – 开始填充的位置-索引
  end – 终止填充的位置-索引（不包括该位置)

let arr = [2, 1, 3, 5, 6]

let res = arr.fill("hello", 2)
console.log(res); // [ 2, 1, 'hello', 'hello', 'hello' ]

let res2 = arr.fill("world", 2, 3)
console.log(res2); // [ 2, 1, 'world', 'hello', 'hello' ]

25、Array.includes()

• 判断数组中是否包含给定的值

let arr = [2, 1, 3, 5, 6, NaN]

let res = arr.includes(3)
console.log(res); // true

let res2 = arr.includes(66)
console.log(res2); // false

let res3 = arr.includes(NaN)
console.log(res3); // true

与indexOf()的区别：
indexOf()返回的是数值，而includes()返回的是布尔值
indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断

26、Array.keys()

• 遍历数组的键名

let arr = [2, 1, 3, 5, 6]

let res = arr.keys()
for(let item of res) {
    console.log(item); // 0 1 2 3 4
}

27、Array.values()

• 遍历数组键值

let arr = [2, 1, 3, 5, 6]

let res = arr.values()
for(let item of res) {
    console.log(item); // 2 1 3 5 6
}

28、Array.entries()

• 遍历数组的键名和键值

let arr = [2, 1, 3, 5, 6]

let res = arr.entries()
for(let item of res) {
    console.log(item); // [ 0, 2 ] [ 1, 1 ] [ 2, 3 ]  [ 3, 5 ] [ 4, 6 ]
}