我找不到一个简单的例子来说明ES6和ES5之间的区别，所以我做了一个。两个代码示例都创建了完全相同的对象。但是ES5的例子也适用于较老的浏览器(如IE11)，而ES6的例子则不能。

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

给定的代码:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

翻译:

var thetop = 'top';
var config = { thetop : 10 }; // config.thetop = 10
<something>.stop().animate(config, 10);

正如你所看到的，{thetop: 10}声明没有使用变量thetop。相反，它创建了一个具有名为thetop键的对象。如果你想让键值是顶部变量的值，那么你必须在顶部使用方括号:

var thetop = 'top';
var config = { [thetop] : 10 }; // config.top = 10
<something>.stop().animate(config, 10);

方括号语法已在ES6中引入。在JavaScript的早期版本中，您必须执行以下操作:

var thetop = 'top';
var config = (
  obj = {},
  obj['' + thetop] = 10,
  obj
); // config.top = 10
<something>.stop().animate(config, 10);

ES6 / 2020

如果你试图使用“key:value”从任何其他来源将数据推入对象，你可以使用这样的方法:

let obj = {}
let key = "foo"
let value = "bar"

obj[`${key}`] = value

// A `console.log(obj)` would return:
// {foo: "bar}

// A `typeof obj` would return:
// "object"

希望这能帮助到一些人:)

这样也可以实现预期的输出

var jsonobj={}; 变量计数=0; $（document）.on（'click'，'#btnadd'， function（） { jsonobj[count]=new Array（{ “1” ： $（“#txtone”）.val（）}，{ “2” ： $（“#txttwo”）.val（）}）; 计数++; console.clear（）; console.log（jsonobj）; }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <span>值 1</span><输入 id=“txtone” 类型=“文本”/> <span>值 2</span><输入 id=“txttwo” 类型=“文本”/> <按钮 id=“btnadd”>添加</button>

在变量周围加上方括号对我来说很好。试试这个

var thetop = 'top';
<something>.stop().animate(
    { [thetop] : 10 }, 10
);

使用ECMAScript 2015，你现在可以直接在对象声明中使用括号表示:

var obj = {
  [key]: value
}

其中key可以是返回值的任何类型的表达式(例如变量)。

你的代码看起来是这样的:

<something>.stop().animate({
  [thetop]: 10
}, 10)

在被用作键之前，top将被计算。