面试题:[…undefined] 输出什么?

[…undefined] 输出什么?

... 可以称之为 展开语法(Spread syntax),又可以叫 扩展运算符。可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

首先我们来看数组中常见的用法:

const foo = [1, 2, 3];
const bar = [0, ...foo];

console.log(bar);
// [0, 1, 2, 3]

这种方式类似数组中的 slice() ,将 foo 浅拷贝到 bar 数组里。

我们在浏览器上输出结果:

[...undefined]

// Uncaught TypeError: undefined is not iterable

看到代码报错 Uncaught TypeError,因为 undefined 是不可迭代的。那什么可迭代呢,试试普通对象:

[...{}]

// Uncaught TypeError: {} is not iterable

从这里可以看出普通对象也不行。在数组或函数参数中使用展开语法时, 该语法只能用于 可迭代对象

什么是 可迭代对象

要成为可迭代对象, 一个对象必须实现 @@iterator 方法。这意味着对象(或者它原型链上的某个对象)必须有一个键为 @@iterator 的属性,可通过常量 Symbol.iterator 访问该属性。

什么意思呢,看一个简单的例子最直接:

const counter = {
  *[Symbol.iterator]() {
    yield1;
  },
};

[...counter];
// 正常执行,结果:
// [1]

一个普通对象中,必须包含一个 Symbol.iterator 属性,并规定是一个无参数的函数,其返回值为一个符合 迭代器协议 的对象。迭代器协议 属于 迭代协议迭代协议 并不是新的内置实现或语法,而是协议。这些协议可以被任何遵循某些约定的对象来实现。

什么是迭代器?

只有实现了 迭代器协议 的一个对象才能成为迭代器。例如:

const counter = {
  next() {
    return { value: undefined, done: true };
  },
};

迭代器是通过使用 next() 方法实现 迭代器协议 的任何一个对象,该方法返回具有两个属性的对象:value,这是序列中的 next 值;和 done ,如果已经迭代到序列中的最后一个值,则它为 true 。如果 value 和 done 一起存在,则它是迭代器的返回值。

可迭代对象 和 迭代器 有什么区别呢?

如果实现了 迭代器协议 和 可迭代协议,那么它就是一个 可迭代对象

const counter = {
  next() {
    return { value: undefined, done: true };
  },
  [Symbol.iterator]() {
    returnthis;
  },
};

[Symbol.iterator]() 通过返回 this 以便调用该方法后获得一个迭代器,以下方式也许会更好理解:

const counter = {
  [Symbol.iterator]() {
    // 返回一个迭代器
    return {
      next() {
        return { value: undefined, done: true };
      },
    };
  },
};

当一个对象需要被迭代的时候,首先,会不带参数调用它的 @@iterator 方法,然后使用此方法返回的迭代器获得要迭代的值。此函数可以是普通函数,也可以是生成器函数,以便在调用时返回迭代器对象。在此生成器函数的内部,可以使用 yield 提供每个条目。

如果 @@iterator 方法不返回迭代器呢?

const counter = {
  [Symbol.iterator]() {
    return1;
  },
};

[...counter];
// Uncaught TypeError: Result of the Symbol.iterator method is not an object

如果一个可迭代对象的 @@iterator 方法不能返回迭代器对象,那么可以认为它是一个不符合标准的可迭代对象。

生成器(Generator)对象到底是一个迭代器,还是一个可迭代对象?

生成器对象既是迭代器,也是可迭代对象,因为它符合 可迭代协议 和 迭代器协议

function* gen() {
  yield1;
  yield2;
  yield3;
}

[...gen()];
// [1, 2, 3]

那内置可迭代对象有哪些呢?

目前所有的内置可迭代对象有:

  • String
  • Array
  • TypedArray
  • Map
  • Set
  • arguments
  • NodeList

它们的原型对象都实现了 @@iterator 方法。

那想实现 [...obj] 展开一个普通对象,有办法吗?

顾名思义,那就是要将普通对象转换为 可迭代对象

  • 展开对象的 key[...Object.keys(obj)]
  • 展开对象的 value[...Object.values(obj)]
  • 展开整个对象:[...Object.entries(obj)]

那 {...undefined} 执行结果是什么?

展开语法在字面量对象的行为细节与数组中有很大差别,可以看作是 Object.assign({}, undefined),主要区别是 Object.assign() 函数会触发 setters,而展开语法则不会。

执行结果则是返回一个 {} 空对象,{...true}{...1}{...null} 亦是如此。

{ ...[1, 2, 3] } 执行结果呢?

首先在对象中不能将 ... 后面当作 可迭代对象 看待,应该看作是一个普通对象,即包含 key

{ ...[1, 2, 3] }
// {0: 1, 1: 2, 2: 3}

那请说 ... 语法作为剩余参数的特性

展开语法可以用于函数的最后一个命名参数,它由剩余参数组成的真数组。它与 arguments 对象的区别主要有三个:

  1. 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参;
  2. arguments 对象不是一个真正的数组,而剩余参数是真正的 Array 实例;
  3. arguments 对象还有一些附加的属性(如 callee 属性)。

展开语法还可以用于数组/对象解构,剩余元素必须是数组/对象的最后一个元素。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 面试题:[…undefined] 输出什么?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们