使用ES6剩余解构从DOM元素取值时，为何A为undefined？

先看触发问题的核心代码：

button.addEventListener("click", ()=>{
  const {dataset: {custom}, ...props} = input;
  const {value: A} = props; // A输出undefined
  const {dataset: {standard}, value: B} = input; // B能正常拿到值
  
  console.info(`A: '${A}' - B: '${B}'`);
});

剩余解构的局限性 #

ES6的剩余解构语法...props只会提取对象自身的可枚举属性，完全忽略原型链上的属性，也不会提取对象自身的不可枚举属性。

而DOM输入框元素的value属性，是定义在HTMLInputElement原型上的访问器属性（getter/setter），并不是当前input元素自身的可枚举属性。所以当你用剩余解构把dataset.custom之外的属性打包到props时，value根本不会被包含进去，自然A就是undefined。

常规解构的工作逻辑 #

常规解构{value: B} = input本质就是直接访问input.value，JavaScript在访问对象属性时会自动沿着原型链向上查找，找到原型上的value访问器并执行getter，所以能正常获取到输入框的值。

验证方式 #

你可以在控制台执行以下代码验证：

// 查看input自身的可枚举属性，看不到value
console.log(Object.keys(input));
// 验证value不是input自身的属性
console.log(input.hasOwnProperty('value')); // 返回false

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