JS基础数组与伪数组

【前言】

    本文简单介绍下JS基础数组与伪数组

 

【主体】

    

1.基本用法

• window.Array是全局函数（也是函数）
• Array()与new Array()是一样的效果
  在JS中基础类型与复杂类型不同
   

  

var a = Array(3)
var a = new Array(3) //长度为3，3个undefined 

var a = Array(3, 3)// a = [3, 3]

 

JS在Array上的不一致性

 

 

不一致性

2. JS中数组的本质

人类理解：就是数据的有序集合
JS理解：数组就是原型链中有Array.prototype的对象，且length动态变化。

 

数组

 

2.1 伪数组

1. 有0，1，2，3 ... n length 这些key的对象
2. 原型链中没有Array.prototype

目前知道的数组有

• arguments对象
• document.querSelectAll('div') 返回的对象
• 字符串

3.数组的API

• Array.prototype.forEach
  这是一个接受函数的API，该函数可有一、两个参数，最多可有三个参数

a = [1,2,3]
a.forEach(function(value, key) {})
forEach(array, function(value, key) {}))

forEach的原理和实现方法

var obj  = ['a', 'b']
obj.forEach = function(x) { // x为函数名
  for(let i = 0, i<this.length, i++) {// this指向obj 
    x(obj[i], i)
  }
}
obj.forEach(function(value, key) {
  console.log(value, key)
})
a 0
b 1

 

函数三个参数时

• a.sort()

a.sort( fucntion(x, y) {
  return a[x] - a[y] // 小于零从小到大，大于零从大到小
})

• a.join()

a = [1, 2, 3]
a.join('东东')
''1东东2得到3东东''

a.join(',') = a,join() = a+ ' '
''1, 2, 3''

• a.concat()

var c = a.concat(b)
//复制一个数组
var b = a.concat([])
a === b //false 不同数组

• a.map()
  
   

  

  map

 

forEach和map的区别

• a.filter()

a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

a.filter(function(value, key) {
  return value % 2 === 0 
}).map(fucntion(value) {
  return value * value
}) // (5) [4, 16, 36, 64, 100]

 

• a.reduce()
map可以用reduce表示
  filter可以用reduce表示

a = [1, 2, 3]
a.reduce(function(sum,n) {
     return sum + n  
}, 0)

// map用reduce表示
a.reduce(function(arr, n) {
  arr.push(n*2)
  return arr
}, [])
// (3) [2, 4, 6]

//filter用reduce表示
a.reduce(fucntion(arr,n) {
  if (n % 2 === 0) {
      arr.push(n)
  }
  return arr
}, [])

 

关于js伪数组

• 具有length属性；
• 按索引方式存储数据；
• 不具有数组的push()、pop()等方法；

 

你可能知道怎么把伪数组转换为数组，但是你知道这里边的原理吗？

假如页面有一组li元素

<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>

获取集合，控制台打印

这就是一个伪数组，长得很像数组，但是没有数组splice，concat，join，pop等方法

通过如下方法转换为数组

Array.prototype.slice.call(oUL);

可以看到变成了数组，并且拥有了Array的所有方法

那么问题来了，这是怎么实现的呢？

接下来重点来了

var obj = {//构造一个伪数组
    "0": "aaa",
    "1": 12,
    "length": 2,
    "push": Array.prototype.push,
    "splice": Array.prototype.splice
}

Array.prototype.push = function(arr) {//动态改变length，并且添加新元素到数组末尾this[this.length] = arr;
    this.length++;
}
console.log(obj);

obj.push("newVal");

console.log(obj)

可以看到，现在我们的伪数组已经和之前有一样的结构和功能，既可以存储对象数据，又可以有数组的方法。

如果你看懂了以上教程，我出道题来考考你，说明你真的懂了

var obj = {
    "0": "a",
    "1": "b",
    "3": "c",
    "length": 3,
    "push": Array.prototype.push,
}

obj.push("d");

console.log(obj);
console.log(obj.length);

欢迎留言回答，评论，说说你的答案

.