在Babel中使用赋值进行Javascript对象解构

Question

我有以下对象:

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'}

我想将一些属性复制到另一个对象中.在最新版本的Chrome中,我可以:

const newUser = {id, name, age} = action;

该newUser对象包含:

{id: 100, name: 'Andres', age: 27}

这在浏览器中工作正常.但是,使用我编译的JS代码它不起作用.我明白了:

 error ReferenceError: id is not defined

如果我删除id,我会用不同的密钥获得相同的消息,依此类推.

我的设置:

"webpack": "2.1.0-beta.21"
"webpack-dev-server": "2.1.0-beta.0"

而对于巴贝尔:

"babel-core": "6.x",
"babel-eslint": "6.x",
"babel-loader": "6.x",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "6.x",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "6.x",
"babel-preset-es2015-native-modules": "^6.6.0",
"babel-preset-react": "6.x",
"babel-preset-stage-0": "6.x",

Babel或Webpack是否缺少一些东西来实现我想要的东西？

Answer 1

这里的问题是你试图一次声明并分配给变量,而在严格模式语义下这是不允许的,这是由Babel强制执行的.因此,您的代码段比您预期的更多:

 const newUser = {id, name, age} = action;

作为其一部分评估解构表达,分配将被执行以id,name,age,的引用不存在,这应该抛出一个ReferenceError根据异常的规范.更具体地说,底部有一条说明:

当分配内严格模式代码出现时,它是如果一个运行时错误LREF在第一算法或第二算法的步骤7中它是一个不可解决的参考的步骤1.F.如果是,则抛出ReferenceError异常.

您可以尝试在控制台中运行此代码段来证明:

// Will work
(function () {
  a = 5;
})();

// Won't work
(function () {
  'use strict';
  b = 5;
})()

为了使用Babel,我认为你想要的方式,你将不得不放弃ES2015预设并手动包含所有插件,选择退出transform-strict-mode.简而言之,您将自己打开一罐PITA.

正确的做法是声明要绑定到的属性的所有变量:

'use strict';

let a, b, c;

({fee: a, fii: b, foo: c} = {fee: 1, fii: 2, foo: 3});
console.log(a, b, c);

不幸的是,这仍然无法满足您的需求.解构表达式的结果是一个赋值表达式,其中返回的值将是赋值(析构)的值,因此您newUser实际上不会像预期的那样成为新对象:

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'}
const newUser = {id, name, age} = action;

console.log(newUser === action);

这导致我们采用以下解决方案.它可能不那么简洁,但它清楚地概述了正在执行的工作:

const action = {id: 100, name: 'Andres', age: 27, type: 'CREATE_USER'}
const {id, name, age} = action;

const newUser = {id, name, age};