ES6数组的扩展

扩展运算符

扩展运算符，三个点（...）。将一个数组转为用逗号分隔的参数序列，把数组里面的东西统统拿出来。

1. 使用方法

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

2. 应用

• 函数参数

// 函数的调用
function funCall(a, b, c, d, e) {
  return  [a, b, c, d, e]
}
let data = [3, 4, 5]
funCall(1, 2, ...data)  // [1, 2, 3, 4, 5]
// 函数参数的扩展
function funExtend(a, b, ...c) {
  console.log(a, b, ...c)
}
funExtend(9, 10, 11, 12, 13)  // 9 10 11 12 13

• 复制数组

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

• 合并数组

let arr = [1, 2, 3, 4]
let arr2 = [5, 6, 7]
console.log([...arr, ...arr2])  // [1, 2, 3, 4, 5, 6, 7]

• 与解构赋值结合

let arr = [1, 2, 3, 4, 5]
let [front, ...end] = arr  // es5实现 let first = arr[0]; let end = arr.slice(1)
console.log(end)  // [2, 3, 4, 5]

Array.from()

• 可以将字符串、类似数组的对象、map、set等数据转为数组形式
  其中“类似数组的对象”本质特征就是有一个length属性，Array.from()就是根据这个length属性来定数组的长度。如果没有length属性，就无法转换为数组了。

// 将字符串 => 数组
let str = '我只是一个字符串'
Array.from(str)  // ["我", "只", "是", "一", "个", "字", "符", "串"]
// 类似数组的对象  => 数组
let obj = {
  '0': 0,
  '1': 1,
  length: 2
}
Array.from(obj)  // [0, 1]
// set => 数组
Array.from(new Set().add(1).add(2))  // [1, 2]
[...new Set().add(1).add(2)]
// map => 数组
Array.from(new Map().set('a', 1).set('b', 2))  // [['a', 1], ['b', 2]]
[...new Map().set('a', 1).set('b', 2)]   // [['a', 1], ['b', 2]]

• Array.from()还可以传入第二个参数，就是数组的map映射

let obj = {
  '0': 0,
  '1': 1,
  length: 2
}
Array.from(obj, (item) => item * 5)  // [0, 5]

Array.of()

• es5有一个创建数组的方法就是 Array()、new Array()，但是Array()方法有一个局限就是，传入的参数是数组的length长度，这一点带给使用者体验很是不好，所以es6就增加了Array,of()来创建数组

Array(2)  // [,]   创建一个length为2的数组
Array.of(2)  // [2]

find()、 findIndex()

• find()，返回匹配到的第一个元素，它的参数是一个回调函数
  findIndex 返回匹配到的第一个元素的位置，它的参数是一个回调函数

// find()
let arr = [5, 12, 8, 130, 44]
arr.find((item, index, array) => {
  return item > 5
})   // 12
// findIndex()
arr.findIndex((item, index, array) => {
  return item > 5
})   // 1

keys()、values()、entries()

• 遍历数组的keys, valus，遍历数组

// keys()
let arr = [5, 12, 8, 130, 44]
for(let key of arr.keys()) {
  console.log(key)
}  // 0, 1, 2, 3, 4
// values
let arr = [5, 12, 8, 130, 44]
for(let key of arr.values()) {
  console.log(key)
}  // 5, 12, 8, 130, 44
// entries()
for(let key of arr.entries()) {
  console.log(key)
}  // [0, 5]  [1, 12]  [2, 8]  [3, 130]  [4, 44]

includes()

• 返回true或者false

let arr = [5, 12, 8, 130, 44]
arr.includes(5)  // true
arr.includes(6)  // false
[1, 2, NaN].includes(NaN)   // true

fill()

var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.fill("Runoob")  // Runoob,Runoob,Runoob,Runoob

数组的空位

• 空位不是undefined，一个位置的值等于undefined，依然是有值的，但是空位是没有任何值的。空数组不会发生遍历

Array(3)  // [ , , ]
0 in [undefined, undefined, undefined]  // true
0 in [ , , ]   // false

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！