JavaScript稀疏数组示例教程

目录

• 前言
• 什么是稀疏数组？
• 创建带有孔洞的稀疏数组
• 删除元素的映射
• 现象
• 稀疏数组的快速映射（强制创建映射关系）
• 总结

let array = new Array(10)
// 下标可以是任何的字符串，就像操作 Object 一样
array.name = 'This is an Array.'
array['name'] = 'This is an Array.' // 等效 array.name

// 虽然之前赋上了一个新的属性 name，但是其长度仍然输出10，而非11
console.log(array.length) // 10
// 用整数类型下标定义一个数组元素才会计入数组长度
array['0'] = 'first' // 下标其实都是字符串
array[11] = 'eleventh' // 看起来这个下标是一个数字，但是 JS 会自动把它转为字符
console.log(array.length) // 12

array.length = 100
console.log(array.length) // 100

let sparse = new Array(100)

let sparse = []
// 用一个超过原始长度的下标为元素赋值，也就为该元素创建了一个映射关系，同时改变了该数组的长度
sparse[99] = 'last'
console.log(sparse.length) // 100
// 用对象字面量书写数组时，允许元素留空
sparse = [, , ,] // 这就创建了长度为3的空洞的数组
console.log(sparse.length) // 3

let sparse = ['red', 'green', 'blue'] // 三个元素的数组
sparse.length = 100 // 此时长度已是100，但有效元素仍然只有3个

let one = '壹'
let array = []
array[0] = one // 将数组的第一个元素指到对象 one，长度变为 1
console.log(array, array.length) // ['壹'], 1
delete array[0] // 删除数组第一个元素的映射关系
console.log(array) // [空]
console.log(array.length) // 因为只是删除了元素的映射，长度并没有改变，仍然输出 1
console.log(one) // one 的值并不会删除，仍然保留，输出 '壹'

let sparse = new Array(10)
console.log(sparse[0]) // undefined

// 此时数组元素的映射关系一个都没有创建，所以 forEach 不会有任何输出
sparse.forEach((value, i) => {
  console.log(i, value)
}) // nothing
// 根据下标为最后一个元素赋值
sparse[sparse.length - 1] = 'tenth'
// 只会输出已建立映射的元素 sparse[sparse.length-1] 的值 'tenth'
sparse.forEach((value, i) => {
  console.log(i, value)
}) // 9, tenth

for( let i = 0; i < sparse.length; i += 1){
  console.log(i, sparse[i])
}

let array = ['1', 'day', 'white', 'Jake', undefined, null, 0] // 一个完全映射的数组
// 输出每个元素，包括null、undefined、0
array.forEach((value, i) => {
  console.log(i, value)
})

let sparse = new Array(10)
// 由于还没有建立映射关系，所以 some 的回调也没有触发，于是得到的结果依然是 false
console.log(sparse.some(item => !item)) // false
// 在所有元素都被赋值后，用同样的回调，some 的结果发生了变化
sparse.fill(false) // 赋值
console.log(sparse.some(item => !item)) // true

let array = ['one', 'two', 'three']
array.length = 1
console.log(array) // ['one']

let sparse = new Array(5)
// Array.apply
let array1 = Array.apply(null, sparse)
// Array.from方法
let array2 = Array.from(sparse)
// 解构
let array3 = new Array(...sparse)
let array4 = [...sparse]
// 把所有元素映射为 undefined 了
array1.forEach((item, i) => {
  console.log(i, item) // 输出 undefined × 5
})
……