构建最简单数组

178 阅读2分钟

项目中,有时会遇到需要遍历生成多个内容,可以构建一个简单的数组,每个元素只要有值即可。

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)
}