构建最简单数组

项目中，有时会遇到须要遍历生成多个内容，能够构建一个简单的数组，每一个元素只要有值便可。

Array.prototype.keys()

[...Array(5).keys()]
-> [0, 1, 2, 3, 4]

// 使用伪数组转的真数组也是一个道理
[...Array.from({length: 5}).keys()]
-> [0, 1, 2, 3, 4]
复制代码

1， Object.keys()

首先区分一下，

Object有一个方法Object.keys()

Object.keys()就是遍历对象自身的，可枚举属性的属性名（length不可枚举），并返回一个数组。

而若是对数组对象使用，索引就是属性名，元素就是属性值。

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// key的遍历，是按照for in的顺序排序的。
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
复制代码

2，Array.prototype.keys()

返回的是一个数组的可迭代对象

可迭代对象不会直接显示其属性，须要调用next()方法，才会逐个遍历。

var array = ['a', 'b', 'c'];
var iterator = array.keys();
console.log(iterator) 
// Array Iterator {}
// __proto__: Array Iterator

console.log(iterator.next())  // {value: 0, done: false}
console.log(iterator.next())  // {value: 1, done: false}
console.log(iterator.next())  // {value: 2, done: false}
console.log(iterator.next())  // {value: undefined, done: true}
复制代码

因此，Array.prototype.keys()会返回一个迭代（遍历）器对象，由数组索引值组成。

3，...扩展运算符

3.1，对数组使用，

能够将一个数组转为用逗号分隔的参数列表。

console.log(...[1, 3, 4])  // 1 3 4
// 至关于
console.log(1, 3, 4)  // 1 3 4
复制代码

因此，若是把这个参数列表，用数组包裹起来，就会做为数组的元素

let a = [...[1, 3, 4]]
console.log(a) // [1, 3, 4]
复制代码

3.2，对对象使用，

会取出目标对象中，全部可遍历的属性，并复制到当前对象中。

let a = { name: 'peiqi', sex: 'gril' }
let b = { ...a }
console.log(b) // { name: 'peiqi', sex: 'gril' }
复制代码

其实，就至关于使用了Object.assign()

// Object.assign(obj1, obj2, ...)，用于将一个或多个源对象的全部可枚举属性的值，复制到目标对象。并返回目标对象。
// obj1是目标对象，剩下的都是源对象。
Object.assign({}, a)
复制代码

而且，以上2种方法，都只是复制了对象实例的属性，并无复制对象原型的属性。

若是须要，能够用如下的方法：

// Object.getPrototypeof(obj)，返回目标对象obj的隐式原型 __proto__
let b1 = {
    __proto__: Object.getPrototypeof(a),
    ...a
}

// Object.create(obj)，建立一个新对象，使用目标对象obj来提供新对象的隐式原型 __proto__
let b2 = Object.assign(
    Object.create(Object.getPrototypeof(a)),
    obj
)
复制代码

在对象上使用，主要用于合并2个对象的属性

let ab = { ...a, ...b }
复制代码

3.3，对遍历器对象使用

扩展运算符的本质，就是遍历。

若是目标可遍历，或有Iterator接口，都是能够使用的。

---

综上

因此，下面的操做，就是将Array.prototype.keys()会返回的由数组索引值组成迭代（遍历）器对象进行遍历，生成的参数列表，又放到了一个数组中。

[...Array(5).keys()]
-> [0, 1, 2, 3, 4]
复制代码

---

另外，二维数组也能够这样构建：

// 直接调用方法便可。
const normalArray = () => ['','','','','','']
const superArray = () => {
  return [...Array(5).keys()].map(normalCards)
}
复制代码