关于对象方括号属性语法及Symbol.iterator复用的技术咨询

嘿，我来帮你理清这两个问题，都是ES6里很实用的特性哦！

1. 用[]包裹对象属性的语法术语及适用范围 #

这个语法叫做计算属性名（Computed Property Names），是ES6新增的对象字面量特性，它绝对不是只给Symbol.iterator专属的！

简单来说，任何能被计算为字符串或Symbol类型的表达式，都可以放在方括号[]里，作为对象的属性名。举几个常见的使用场景：

• 用变量动态定义属性名：

const propKey = 'email';
const user = {
  [propKey]: 'user@example.com'
};
console.log(user.email); // 输出 'user@example.com'

• 用表达式生成属性名：

const product = {
  [`item-${Date.now()}`]: 'new phone'
};
console.log(Object.keys(product)); // 输出类似 ['item-1720000000000'] 的数组

• 用自定义Symbol作为属性名：

const uniqueKey = Symbol('unique');
const obj = {
  [uniqueKey]: 'only one'
};
console.log(obj[uniqueKey]); // 输出 'only one'

你用到的Symbol.iterator只是内置Symbol的一种，本质上也是用计算属性名的方式把它绑定为对象的迭代器方法。

2. 能否复用迭代器函数并直接调用 #

当然可以！不过要注意语法细节：不能写成obj.[Symbol.iterator]()，正确的调用方式是obj[Symbol.iterator]()——因为它是计算属性名，访问的时候必须用方括号语法，就像你访问动态属性时的写法一样。

给你调整下示例代码，实际运行验证下：

let obj = {
  a: 'alex',
  [Symbol.iterator]: function* () {
    yield this.a;
  },
  getA: function() {
    return this.a;
  }
};

console.log(obj.getA()); // 输出 'alex'

// 直接调用迭代器方法获取迭代器对象
const iterator = obj[Symbol.iterator]();
console.log(iterator.next()); // 输出 { value: 'alex', done: false }
console.log(iterator.next()); // 输出 { value: undefined, done: true }

// 也可以用for...of循环自动触发这个迭代器
for (const value of obj) {
  console.log(value); // 输出 'alex'
}

如果你想更灵活地复用这个生成器函数，还可以把它单独抽出来，需要时手动绑定this调用：

// 单独定义生成器函数
function* getValueIterator() {
  yield this.a;
}

let obj = {
  a: 'alex',
  [Symbol.iterator]: getValueIterator,
  getA: function() { return this.a; },
  // 自定义方法调用迭代器
  runIterator: function() {
    const iter = getValueIterator.call(this);
    console.log(iter.next().value);
  }
};

obj.runIterator(); // 输出 'alex'

这样不管是作为对象的默认迭代器，还是手动调用，都能正常工作，核心是要保证this指向正确的对象哦。

内容的提问来源于stack exchange，提问作者Isaac