js稀疏数组、密集数组、数组空位、手写数组map方法

1.稀疏数组

let arr = [1,2,3]
console.log('这是一个js常规的数组',arr)  // [1,2,3] 

let arr1 = []
arr1[2] = 'a'
console.log('这是一个稀疏数组',arr1)  // [empty x 2,'a']  
// 如上,arr1枚举只有一个,但是length是3,说明存在两个我们看不见的值,这个值我们暂且可以称之为数组空位
// 当然,创建稀疏数组的方式有很多
// 1. new Array(3)
// 2. [1,2,,,,3]
// 3.delete arr[2]

2.数组 delete

let arr = [1,2,3]
delete arr[0]
console.log(arr) // [2,3] arr.length: 3
// 数组使用delete 虽然可以删掉对应元素,但是会留下数组空位,所以说使用delete删除数组元素后,数组长度不变
// 所以说我们最好不要使用delete来删除数组,因为如果代码上下文对数组进行遍历操作的话,又delete了元素,很可能会造成问题

3.js里的数组实际上全是稀疏数组

• js里的数组有个特点

let arr = []
arr[0] = 'a' // 这样给数组赋值是没问题的
arr['1'] = 'b' // 这样给数组赋值是没问题的
arr['c'] = 'd' // 这样给数组赋值也是是没问题的

console.log(arr) // ['a','b',c:'d']  arr.length: 2
// arr['c']是没算到数组的长度里的
// js数组是不严格的,它更像是对象,因为js里数组的索引可以是数字,也可以是字符串,也可以是非数字

4.利用js数组的此特性可以做什么

// 比如说现在有个需求,要根据数组不同的长度给div添加不同的的样式(可能示例有点蠢,我就是提供一个思路)

// 我们一般的写法：
// <div :class="arr.length > 2 ? 'class1' : 'class2'"></div>
// let arr = [1,2,3]

// 当我们知道数组的这个特征之后呢,也可以这么写,因为我们给数组添加非数字的属性,并不会对数组的长度造成影响
// <div :class="arr['class']"></div>
// let arr = [1,2,3]
// arr.forEach()
// arr['class'] = arr.length > 2 ? 'class1' : 'class2'

5.有稀疏数组,就有密集数组(相对的,因为严格意义上来讲js是只有稀疏数组的)

// 其实,创建一个密集数组很简单
// 方法1
let arr = Array.apply(null,new Array(3))
console.log(arr) // [undefined,undefined,undefined]
// 方法2
let arr1 = [...new Array(3)]
console.log(arr1) // [undefined,undefined,undefined]

6.实现一个map,以及map对数组空位的处理

let arr = [1,2,3].map(item => item*2)
console.log(arr) // [2，4，6]

let arr = [1,2,,,3].map(item => item*2)
console.log(arr) // [2，4，6]  arr.length: 5


Array.prototype.myMap = function (cb){
  let funs = []
  for(let i = 0; i < this.length; i++){
    funs.push(cb(this[i],i))
    if(this.hasOwnProperty(i)){
      delete funs[i]
    }
  }
  return funs
}

let res = [1,2,3].myMap(function(item,index){
  return item * 2
})

let res1 = [1,2,,,3].myMap(function(item,index){
  return item * 2
})

console.log(res1) // [2，4，6]  arr.length: 5

7.hasOwnProperty

• 判断对象里否有某属性,在对象的原型里
• 当然也可以用来判断数组是否有某下标