js 学习之路 —— Array

数组换而言之呢就是一组有序的数据，它允许里面每个槽位储存任意类型的数据

一、创建数组

// 构造函数创建
let names = new Array() // => []
let names = new Array(2) // => [empty * 2] => [undefined, undefined]
let names = new Array('毛叔叔') // => ['毛叔叔']

// 数组字面量创建
let names = ['毛叔叔']

// es6 构造函数创建静态方法
// .from()
Array.from('毛叔叔') // => ['毛', '叔', '叔']
Array.from({ length: 3 }) // => [undefined, undefined, undefined]

let a1 = [1,2,3,4]
let a2 = Array.from(a1, (x) => x**2) // => [1,4,9,16]
let a3 = Array.from(a1, function(x) {
    return x**this.exponent
}, { exponent: 2 }) // => [1,4,9,16]

// .of
Array.of(1,2,3,4) // => [1,2,3,4]
Array.of(undefined) // => [undefined]

---

二、方法

1、迭代器方法

Array 原型提供 3 个用于检索数组内容的方法

• keys() ：返回索引的迭代器。
• values() ：返回数组元素值的迭代器。
• entries() ：返回索引与值的二维数组的迭代器。

2、复制 —— copyWithin()

copyWithin (插入索引值，复制最小索引值，复制最大索引值)

• 返回结果：更改后原数组
• 操作：

1. 判断有无复制范围，有的话复制范围值，没有则复制全数组
2. 判断有无插入参数，有的话从插入参数下标值开始插入，没有则从头开始

• 参数：

1. 插入索引值（选填）：从数组第几个索引值开始插入复制内容。
2. 复制最小索引值（选填）：从数组第几个索引值开始复制内容，不填的话默认复制全部。
3. 复制最大索引值（选填）：复制的最大范围下标值，不包括设置下标，不填的话默认到数组结束

// copyWithin()
let init = [1, 2, 3, 4, 5] // 默认值

// 复制内容，从索引 2 开始插入
init.copyWithin(2) // => [1, 2, 1, 2, 3]

// 从索引 2 开始复制，插入 索引0
init.copyWithin(0, 2) // => [3, 4, 5, 4, 5]

// 复制索引 0 - 2，不包含 2 的内容，插入索引 1 的位置
init.copyWithin(1, 0, 2) // => [1, 1, 2, 4, 5]

// 负索引
init.copyWithin(-4, -3, -1)
=> init.copyWithin(-4 + init.length, -3 + init.length, -1 + init.length)
=> init.copyWithin(1, 2, 4) // => [1, 3, 4, 4, 5]

// 忽略
init.copyWithin(1, 14, 15) // => [1, 2, 3, 4, 5]
init.copyWithin(1, -16, -14) // => [1, 2, 3, 4, 5]
init.copyWithin(1, 4, 2) // => [1, 2, 3, 4, 5]

3、填充 —— fill()

fill (填充值，最小索引值，最大索引值) 

• 返回结果：更改后原数组
• 操作：

1. 先判断有无填充范围
2. 再判断有无填充参数， 没有默认填充 undefined
3. 开始填充

• 参数：

1. 填充值（选填）：替换该参数。默认 undefined
2. 最小索引值（选填）：以该参数下标开始替换。默认为 0
3. 最大索引值（选填）：有传第二参数的前提下，设置最大范围坐标值，但不包含。默认数组总长度

// fill()
let zeros = [0, 0, 0, 0, 0] // 默认值

// 不传参
zeros.fill() // => [undefined, undefined, undefined, undefined, undefined]

// 全填充
zeros.fill(5) // => [5, 5, 5, 5, 5]

// 部分填充
zeros.fill(5, 3) // => [0, 0, 0, 5, 5]
zeros.fill(5, 1, 3) // => [0, 5, 5, 0, 0]
zeros.fill(5, 1, 10) // => [0, 5, 5, 5, 5]

zeros.fill(5, -4, -1)
=> zeros.fill(5, -4 + zeros.length, -1 + zeros.length)
=> zeros.fill(5, 1, 4) // => [0, 5, 5, 5, 0]

// 忽略
zeros.fill(5, 10, 15) // => [0, 0, 0, 0, 0]
zeros.fill(5, -16, -10) // => [0, 0, 0, 0, 0]
zeros.fill(5, 4, 2) // => [0, 0, 0, 0, 0]

4、数组元素操作 

• push() ：向数组末尾添加元素，返回数组最新长度
• unshift() ：向数组开头添加元素，返回数组最新长度
• shift() ：删除数组第一项，返回删除项
• pop() ：删除数组最后一项，返回被删除项

// init
init = [0, 1]

// unshift()
init.unshift(5) // => 3, init == [5, 0, 1] 

// push()
init.push(3, 4) // => 4, init == [0, 1, 3, 4]

// shift()
init.shift() // => 0, init == [1]

// pop()
init.pop() // => 1, init == [0]

5、排序 —— sort(), reverse()

• sort(可选函数) ：将元素变为字符串后进行比较，结果以升序排序
• reverse() ：将原有数组反转排列

// init
init = [0, 1, 3, 5, 4, 11]

// sort()
init.sort() // => [0, 1, 11, 3, 4, 5]
init.sort((a, b) => a - b) // => [0, 1, 3, 4, 5, 11]

// reverse()
init.reverse() // => [11, 4, 5, 3, 1, 0]

6、合并 —— concat()

// init
init = [0, 1]
init2 = [3, 4]
init3 = [[6, 7]]

init.concat(2) // => [0, 1, 2]
init.concat(2, init2) // => [0, 1, 2, 3, 4]
init.concat(init2, init3) // => [0, 1, 3, 4, [6, 7]]

// 二维数组的操作
init2[Symbol.isConcatSpreadable] = false
init.concat(2, init2) // => [0, 1, 2, [3, 4]]

7、截取 —— slice()

• 返回结果：不更改原数组，返回修改后新数组
• 参数

1. 开始索引值（选填）：截取开始下标值。默认为 0
2. 结束索引值（选填）：截取结束下标值，有第一个参数时才生效。默认为数组结尾

// init
let init = [1, 2, 3, 4, 5]

init.slice(1) // => [2, 3, 4, 5]
init.slice(1, 3) // => [2, 3]

init.slice(-2, -1)
=> init.slice(-2 + init.length, -1 + init.length)
=> init.slice(3, 4) // => [4]

init.slice(-10) // => [1, 2, 3, 4, 5]
init.slice(-10, -7)
=> init.slice(-5, -2) // => []

init.slice(3, 1) // => []

8、替换 —— splice()

• 返回结果：修改原数组，返回修改值
• 参数

1. 开始坐标值（选填）：删除元素下标值。
2. 删除数量（选填）：包含第一参数下标值，所要删除的数量。填 0 则为不删除，默认 1
3. 添加元素（选填）：从第三个元素开始，后面传入的参数都是添加元素，

// init
let init = [1, 2, 3, 4, 5]

// 删除 => splice(删除坐标值)
init.splice(4) // => [5], init == [1, 2, 3, 4]

// 删除 => splice(开始索引值，删除数量)
init.splice(1, 4) // => [2, 3, 4, 5], init == [1]


// 新增 => splice(开始索引值, 删除数量 = 0, 插入值)
init.splice(3, 0, 6) // => [], init == [1, 2, 3, 6, 4, 5]

// 替换 => splice(开始索引值, 删除数量, 插入值)
init.splice(3, 1, 6, 7) // => [4], init == [1, 2, 3, 6, 7, 5]

9、查询 —— indexOf(), lastIndexOf(), find(), findIndex(), includes()

// init
let init = [1, 2, 3, 4, 5, 4, 3]

// 从数组开头找 => indexOf(查找的元素, 开头位置 = 0)
init.indexOf(1) // => 0
init.indexOf(1, 2) // => -1

// 从数组结尾找 => lastIndexOf(查找的元素, 开头位置 = init.length - 1)
init.lastIndexOf(4) // => 5
init.lastIndexOf(4, 1) // => -1
init.lastIndexOf(4, 3) // => 3

// 含有 => includes(元素, 开头位置 = 0)
init.includes(5) // => true
init.includes(5, 6) // => false

// 函数查找第一个匹配元素 => find() 返回元素
init.find((a, index) => a > 4) // => 5
init.find((a, index) => a < 4) // => 1

// 函数查找第一个匹配元素的下标 => findIndex() 返回坐标
init.findIndex((a, index) => a > 4) // => 4

  10、迭代 —— every(), some(), filter(), forEach(), map()

// init
let init = [1, 2, 3, 4, 5]

// every() => 全匹配则返回 true
init.every(a => a > 3) // => false

// some() => 有匹配成功，就返回 true
init.some(a => a > 3) // => true

// filter() => 返回匹配成功的数组
init.filter(a => a > 3) // => [4, 5]

// forEach() => 循环操作，不返回
init.forEach(a => a + 1) // => undefined

// map() => 循环操作，返回操作后数组
init.map(a => a + 1) // => [2, 3, 4, 5, 6]

11、归并 —— reduce(), reduceRight()

// init
let init = [1, 2, 3, 4, 5]

// reduce(归并函数(上一个归并值，当前值，当前索引坐标，数组本身)，初始值 = 0)
init.reduce((a, b) => a + b) // => 15
init.reduce((a, b) => a + b, -15) // => 0
init.reduce((a, b) => a - b) // => -13

// reduceRight 和 reduce 一样，不过是从最后一项开始遍历

12、展平 —— flat()

// init
const init = [1,2,[3,[4,[5]]], ,]

// .flat() 默认去一层和空
init.flat() // => [1, 2, 3, [4, [5]]]

// .flat(2) 展平两层
init.flat(2) // => [1, 2, 3, 4, [5]]

// .flat(Infinity) 默认展平最高层
init.flat(Infinity) // => [1, 2, 3, 4, 5]