【日常记录】【JS】一道解构面试题

嘤嘤怪呆呆狗2024-04-10 22:08

文章目录

1、描述

让这一段代码可以执行，并且正确输出

js 复制代码

    let [name, age] = {
      name: '呆呆狗',
      age: 20
    }
    console.log(name, age);

2、分析与实现

在浏览器上执行这段代码会报错

翻译以下：不是可迭代对象
可迭代对象（Iterable）是指实现了可迭代协议（Iterable Protocol）的对象。换句话说，可迭代对象是具有 Symbol.iterator 方法的对象，该方法返回一个迭代器对象。
迭代器是实现了迭代器协议（Iterator Protocol）的对象。根据这个协议，一个对象如果要被视为迭代器，它必须实现一个名为 next 的方法，该方法每次被调用都会返回一个包含 value 和 done 属性的对象。其中，value 表示迭代器返回的值，而 done 表示迭代器是否已经完成遍历。

js 复制代码

    let [name, age] = {
      name: '呆呆狗',
      age: 20,
      [Symbol.iterator]: function () {
        return {
          next() {
            return {
              value: 1,
              done: false
            }

          }
        }
      }
    }
    console.log(name, age);

这样就没报错了，但是值不对，可以借助 原型对象 ,Object.values(obj) 返回值是一个数组，数组默认就实现了可迭代协议

js 复制代码

    Object.prototype[Symbol.iterator] = function () {
      // 把这个对象转化成数组，拿到他的Symbol.iterator 属性，
      // 又因为 可迭代协议，所以返回的是一个迭代器 ，所以需要手动调用以下
      return Object.values(this)[Symbol.iterator]()
    }
    let [name, age] = {
      name: '呆呆狗',
      age: 20,

    }
    console.log(name, age);

3、参考链接

迭代器、可迭代对象