構建最簡單數組

項目中，有時會遇到須要遍歷生成多個內容，能夠構建一個簡單的數組，每一個元素只要有值便可。

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)
}
複製代碼