js中对象和数组的都是如何解构的

对象为什么能够解构

 从一道面试题而来

**for of 能否遍历Object，如何遍历？**

我们都知道想遍历对象有2种方式：

1.for in

2.Object.keys()先获取key的数组，然后使用数组遍历方式获取key对应的value

那么for of可以遍历Object吗？

Iterator 是 ES6 提出的接口，为各种数据结构提供统一的访问机制，只要部署了Iterator，就可以遍历。

在Object.prototype上实现一个Symbol.iterator的函数，返回next方法的对象，每次调用next依次返回数据。

    function objectIterator() {

      const keys = Object.keys(this)

      let index = 0

      return {

        next: () => {

          const done = index >= keys.length

          const value = done ? undefined : this[keys[index]]

          index++

          return {

            done, value

          }

        }

      }

    }



    Object.prototype[Symbol.iterator] = objectIterator



    cosnt obj = {name: "xl", age: 28}



    for(let iterator of obj) {

      console.log("iterator", iterator)

    }

深入问题

**对象自身并没有Symbol.iterator方法，为什么对象还能实现解构呢？ Set 扩展运算符、解构赋值都是用到Symbol.iterator方法的**

先来看解构

1. 一般常见的解构赋值

    const obj = {name: "xl", age: 28}

    const {name, age} = obj

    说明了啥？解构只是相当于创建一个外部变量name来承接数据"xl"，改变外部变量的值并不会影响到源对象的值。

    实际过程：let name = obj.name

2. 携带剩余参数的
   

 const obj = {name: "xl", age: 28, address: "沈阳"}

    const {name, ...res} = obj

    console.log(res) // {age: 28, address: "沈阳"}


    // 具体过程需要看 Babel 的代码编译，下面的文章链接有说明

    function _objectWithoutProperties(source, excluded) {

      if (source == null) return {};

      var target = _objectWithoutPropertiesLoose(source, excluded);

      var key, i;

      if (Object.getOwnPropertySymbols) {

        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

        console.log(sourceSymbolKeys);

        for (i = 0; i < sourceSymbolKeys.length; i++) {

          key = sourceSymbolKeys[i];

          if (excluded.indexOf(key) >= 0) continue;

          if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;

          target[key] = source[key];

        }

      }

      return target;

    }

    function _objectWithoutPropertiesLoose(source, excluded) {

      if (source == null) return {};

      var target = {};

      var sourceKeys = Object.keys(source);

      var key, i;

      for (i = 0; i < sourceKeys.length; i++) {

        key = sourceKeys[i];

        if (excluded.indexOf(key) >= 0) continue;

        target[key] = source[key];

      }

      console.log(target);

      return target;

    }


    var obj = {

      nickname: 7,

      age: 18,

      address: "西安",

      [Symbol("test")]: "111",

    };


    var nickname = obj.nickname,

      rest = _objectWithoutProperties(obj, ["nickname"]);

总结

数组的解构过程：创建新数组 -> 遍历迭代器 -> 复制属性

对象的解构过程：创建新变量 -> 枚举属性 -> 赋值属性并赋值

参考链接：

面试官：你可以用 for of 遍历 Object 吗？

对象为什么能解构?让我来告诉你😏😏😏