JavaScript 数组其实就是一种特殊的对象，JS 其实没有真正的数组，只是用对象来模拟数组。对象的 key 相当于数组的 index，对象的 value 相对于数组的元素。
1. 创建数组
创建数组的三种写法：
let arr = [1,2,3] // 最常用写法
let arr = new Array(1,2,3) // 正规写法
let arr = new Array(3) // 创建一个长度为 3 的数组，此处的 3 表示的是数组的长度，而不是数组元素
其他类型转换为数组： 用字符串创建数组
str.split(',')
let str = '1,2,3'
str.split(',') // 该语句的意思是将字符串转化为数组并且用逗号分隔数组元素
(3) ["1", "2", "3"] // 返回数组
Array.from()
Array.from('123') // 将字符串'123'转化为数组
(3) ["1", "2", "3"]
Array.from({0:'a', 1:'b', 2:'c', 3:'d'})
[] // 返回 空数组，并不是所有的转换都能成功
Array.from({0:'a', 1:'b', 2:'c', 3:'d',length:4})
(4) ["a", "b", "c", "d"] // 对比上一条，加上 length 能成功转换成数组
Array.from({0:'a', 1:'b', 2:'c', 3:'d',length:2})
(2) ["a", "b"] // 对比上一条，如果 length 改为2，那么则会返回一个长度为 2 的数组，后面的元素会被删除
2. 数组合并
let arr1 = [1,2,3] // 声明一个数组 arr1
let arr2 = [4,5,6] // 声明一个数组 arr2
arr1.concat(arr2) // 合并 arr1 和 arr2
(6) [1, 2, 3, 4, 5, 6] // 生成一个新的数组，但是 arr1 和 arr2 并不会被改变
3. 截取数组
let arr = [0,1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.slice(2) // 从数组的第 2 项开始截取，取后面的部分（注意：数组是有第 0 项的）
(7) [2, 3, 4, 5, 6, 7, 8] // 生成了一个新的数组，为数组 arr 截取后的片段，原来的数组不会被改变
截取数组有一种特殊情况，就是复制数组 arr.slice(0)
let arr = [0,1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.slice(0) // 从数组的第2项开始截取，取后面的部分（注意：数组是有第0项的）
(7) (9) [0, 1, 2, 3, 4, 5, 6, 7, 8] // 得到一个新的数组，元素和数组 arr 完全一样，相当于复制了原来的数组 arr
4. 数组元素的增删改查
4.1 删除元素
使用 delete 删除元素（不推荐，delete 是常用来删除对象的元素，不太适合数组）
let arr = ['a','b','c'] // 声明一个数组 arr
delete arr[0] // 删除数组 arr 的第[0]项
arr // 获取数组
(3) [empty, "b", "c"] // 返回数组 arr ，第[0]项的元素已经被删除，但是仍然占长度
改变 length 的长度（不推荐，容易引起 bug）
let arr = ['a','b','c'] // 声明一个数组 arr
arr.length = 1 // 将数组的长度改为 1
arr // 获取数组
["a"] // 返回长度为 1 的数组，除了第[0]项的元素还在，其他元素被删除了
删除数组头部的元素 arr.shift()
let arr = [1,2,3] // 声明一个数组 arr
arr.shift() // 使用 arr.shift() 删除数组的头部元素
arr // 获取 arr
(2) [2, 3] // 返回更新后的 arr ，此时的 arr 长度为 2
删除数组尾部的元素 arr.pop()
let arr = [1,2,3] // 声明一个数组 arr
arr.pop() // 使用 arr.pop() 删除数组的尾部元素
arr // 获取 arr
(2) [1, 2] // 返回更新后的 arr ，此时的 arr 长度为 2
删除数组中间的元素 arr.splice(index,n)
从数组中的第 [index] 个元素开始删除，删除从 [index] 起的 n 个元素
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.splice(2,1) // 使用 arr.splice() 2 代表删除数组的第[2]项元素（第[2]项元素是3），1 代表删除 1 个元素
arr // 获取 arr
(7) [1, 2, 4, 5, 6, 7, 8] // 返回更新后的 arr
替换数组中的元素 arr.splice(index,n,x,y,z)
从数组中的第 [index] 个元素开始，删除从 [index] 起的 n 个元素，并且加入元素 x， y， z
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.splice(4,1,555) // 使用 arr.splice() 4 代表删除数组的第 [4] 项元素（第[4]项元素是5），1 代表删除 1 个元素, 555 作为新的元素加入到 [4] 的位置上
arr // 获取 arr
(8) [1, 2, 3, 4, 555, 6, 7, 8] // 返回更新后的 arr
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.splice(4,3,555,666,777) // 使用 arr.splice() 4 代表删除数组的第 [4] 项元素（第[4]项元素是5），3 代表删除 3 个元素, 555,666,777 作为新的元素加入到 [4] [5] [6] 的位置上
arr // 获取 arr
(8) [1, 2, 3, 4, 555, 666, 777, 8] // 返回更新后的 arr
4.2 查看元素（遍历数组）
跟查看对象的属性值和属性名的方法一样 （该方法不推荐）
Object.keys(arr) 和 Object.values(arr)
let arr = ['a','b','c','d'] // 声明一个数组 arr
Object.keys(arr) // 获取 arr 的键名 keys
(4) ["0", "1", "2", "3"] // 得到数组的下标[index]
Object.values(arr)(4) // 获取 arr 的值 values
["a", "b", "c", "d"] // 得到数组 arr 的元素
打印出数组的第 i 项 （该方法不推荐）
for(let i in arr)
let arr = ['a','b','c','d'] // 声明一个数组 arr
for (let i in arr){ // 打印出数组的第 i 项
console.log(i)
}
0
1
2
3 // 得到该数组有 4 个元素
for 循环遍历数组 （推荐）
let arr = ['a','b','c','d','e'] // 声明一个数组 arr
for (i=0; i<arr.length; i++){ // 遍历数组
console.log(`${i}:${arr[i]}`)
}
0:a // 得到该数组的每一项
1:b
2:c
3:d
4:e
forEach() 函数，原理跟 for 循环遍历数组类似
arr.forEach(function(item,index){
console.log(`${index}:${item}`)
})
查看单个元素
let arr = ['a','b','c'] // 声明一个数组 arr
arr[0] // 查看数组的第[0]项
"a" // 得到第[0]项元素
查看元素是否在数组里
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.indexOf(1) // 查看 1 是否在数组里
0 // 返回 0 ， 说明 1 是在数组里面， 并且是在第[0]项
arr.indexOf(10) // 查看 10 是否在数组里
-1 // 返回 -1 ， 说明 10 不在数组里面
使用条件查找元素
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.find(function(x){ // arr.find
return x%2===0 // 如果有数组元素有是偶数的，就会返回该元素
}
)
2 // 返回 2，函数已经结束，不会继续往下执行
使用条件查找元素下标
let arr = [1,2,3,4,5,6,7,8] // 声明一个数组 arr
arr.findIndex(function(x){ // arr.findIndex
return x%2===0 // 如果有数组元素有是偶数的，就会返回该元素的下标
}
)
1 // 返回 1，说明第一个是偶数的元素下标为2， 函数已经结束，不会继续往下执行
4.3 增加元素
在数组尾部增加元素
let arr = [1,2,3,4,5] // 声明一个数组 arr
arr.push('a','b','c') // 在数组的尾部增加三个元素
arr // 获取该数组
(8) [1, 2, 3, 4, 5, 'a','b','c'] // 得到增加元素后的数组
在数组头部添加元素
let arr = [1,2,3,4,5] // 声明一个数组 arr
arr.unshift('x','y','z') // 在数组的头部增加三个元素
arr // 获取该数组
(8) ["x", "y", "z", 1, 2, 3, 4, 5] // 得到增加元素后的数组
在数组中间添加元素
let arr = [1,2,3,4,5] // 声明一个数组 arr
arr.splice(3,0,3.5) // 3 代表从下标为 3 的元素开始，0 代表删除 0 个元素， 3.5 作为新元素加入到数组中
arr // 获取该数组
(6) [1, 2, 3, 3.5, 4, 5] // 得到增加元素后的数组
数组元素反转
let arr = [1,2,3,4,5] // 声明一个数组 arr
arr.reverse() // 数组的元素反转
arr // 获取该数组
(5) [5, 4, 3, 2, 1] // 此处不是得到新数组，而是原来的数组上的元素顺序反转了
自定义顺序
let arr = [1,4,3,5,2] // 声明一个数组 arr
arr.sort((a,b)=>a-b) // 正序排列
(5) [1, 2, 3, 4, 5]
let arr = [1,4,3,5,2] // 声明一个数组 arr
arr.sort((b,a)=>a-b) // 反序排列
(5) [5, 4, 3, 2, 1]
5. 数组变换 map/filter/reduce
5.1 map （n 变 n）
举例
让一个数组里面的元素都取平方，然后返回到一个新的数组
- for 循环来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
let arr1 = [] // 定义一个数组 arr1
for (i=0; i<arr.length; i++){ // for 循环
arr1[i] = arr[i]*arr[i] // arr 的第 i 项的平方 赋值 给 arr1 的第 i 项
}
arr1 // 获取 arr1
(6) [1, 4, 9, 16, 25, 36] // 得到想要的结果
- map 来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
let arr1 = arr.map(item=>item*item) // map 是一一对应的关系，让 item 等于 item*item （此处 item 跟 item*item 是一一对应的关系）
arr1 // 获取 arr1
(6) [1, 4, 9, 16, 25, 36] // 得到想要的结果
5.2 fliter （n 减少）
举例
如果一个数组里面的元素是偶数，则留下；如果是基数则去掉
- for 循环来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
let arr1 = []
for (i=0; i<arr.length; i++){ // for 循环
if (arr[i]%2===0){ // 如果 arr 的第 i 项可以整除 2
arr1 = arr1.concat(arr[i]) // arr 里面的第 i 项就跟 arr1 合并
}else{
arr1 = arr1.concat([]) // 否则 arr1 就跟一个空数组合并
}
}
(3) [2, 4, 6] // 最后得到想要的结果
- filter 来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
let arr1 = arr.filter(item=>item%2===0?true:false) // arr 里面的 item 如果能被 2 整除，则返回 true 否则返回 false
arr1
(3) [2, 4, 6]
5.3 reduce （n 变 1）
reduce 功能很强大，可以取代 map 和 filter
举例
求和一个数组里面的元素
- for 循环来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
let sum = 0
for (i=0; i<arr.length; i++){ // for 循环
sum = sum + arr[i] // sum 等于 arr 的第 i 项加上 sum
}
console.log(sum) // 打印得出的 sum
21 // sum 的值是21
- reduce 来实现
let arr = [1,2,3,4,5,6] // 定义一个数组 arr
arr.reduce((sum,item)=>{return sum + item},0) // 0 是初始值，一开始 sum 为 0， item 为 1， 然后 sum + item 为 1， 然后 return 出来的 sum + item 的值作为 sum 继续参与下一次的运算
21 // 得到的结果是 21
