構建最簡單陣列

非梧不棲發表於2019-02-20
陣列

專案中，有時會遇到需要遍歷生成多個內容，可以構建一個簡單的陣列，每個元素只要有值即可。

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

相關文章