01伪数组转为真数组

什么是伪数组？

1. 具有length属性，可以获取长度。
2. 具有索引，可以通过遍历获取所有元素。
3. 不可以使用数组的内置方法和属性。

伪数组不能使用使用数组内置方法和属性的原因

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    let ul = document.getElementsByTagName("ul");
    console.log(ul[0].children);
  </script>

 

 

 从上图可以看出，该伪数组的原型是HTMLCollection的HTML元素集合和Object对象，不是数组。

常见的伪数组

1. 函数的内置对象arguments，它是所有实参组成的伪数组。
2. DOM对象组成的伪数组，通过document.querySelectorAll等获得的dom对象列表（似乎现在querySelectorAll可以使用forEach方法了，但是document.getElementsByClassName等就不行）
3. 还有函数中的arguments形成的伪数组

将伪数组转化为真数组的几种方法

1. 设置一个空数组，把伪数组赋值给新数组

let ul = document.getElementsByTagName("ul");
    let arr = [];
    for(let i = 0; i < ul[0].children.length; i++) {
      arr.push(ul[0].children[i])
    }
    console.log(arr);

2. ES6中Array.form()的方法

let ul = document.getElementsByTagName("ul");
    let n = Array.from(ul[0].children);
    n.forEach(item => {
      console.log(item);
    })

3. ES6的扩展运算符(...)

(...)剩余参数(rest参数) : 获取剩下的所有的实参 //可取代arguments且arguments获取的是伪数组

let ul = document.getElementsByTagName("ul");
    console.log([...ul[0].children]);

4. 利用Array的原型对象的slice方法，配合call()方法修改slice中this指向

// 实际上是：用.call可以将带有length的伪数组指向slice函数内的this，从而返回需要的数组对象。
// 注意：slice()方法是不改变原数组的
let ul = document.getElementsByTagName("ul");
    let arr = [].slice.call(ul[0].children);
    console.log(arr);

注意

Array.form方法是从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

浅拷贝： 拷贝的是地址. 修改拷贝后的数据，对原数据有影响；

深拷贝： 拷贝的是数据. 修改拷贝后的数据，对原数据不会有影响；

简单的理解就是：假设B复制了A，当修改A的时候，看B是否发生变化，如果B发生变化，那就是浅拷贝，如果B没有发生变化，那就是深拷贝

// 浅拷贝例子
    let obj = {
      name: 'qhx',
      age: 4
    }
    let obj2 = obj;
    obj2.name = 'qqq';
    console.log(obj); // {age: 4, name: 'qqq'}
    console.log(obj2); // {age: 4, name: 'qqq'}

// 深拷贝例子
    let a = 3;
    let b = a;
    b = 5;
    console.log(a); // 3
    console.log(b); // 5