如何在 JavaScript 对象文字中使用变量作为键？

Posted 2023-03-07

技术标签:

【中文标题】如何在 JavaScript 对象文字中使用变量作为键？【英文标题】：How to use a variable for a key in a JavaScript object literal? 【发布时间】：2021-08-17 13:35:14 【问题描述】：

为什么以下工作有效？

<something>.stop().animate(
     'top' : 10 , 10
);

而这不起作用：

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

为了更清楚：目前我无法将 CSS 属性作为变量传递给 animate 函数。

【问题讨论】：

另见：create object using variables for property name 另见：creating object with dynamic keys 另见：add dynamically named properties to object 谢谢。正在寻找确切的东西不客气！ 【参考方案1】：

thetop : 10 是一个有效的对象字面量。该代码将创建一个对象，其属性名为thetop，其值为10。以下两者相同：

obj =  thetop : 10 ;
obj =  "thetop" : 10 ;

在 ES5 及更早版本中，您不能将变量用作对象字面量中的属性名称。您唯一的选择是执行以下操作：

var thetop = "top";

// create the object literal
var aniArgs = ;

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);

ES6 defines ComputedPropertyName 作为对象字面量语法的一部分，它允许您编写如下代码：

var thetop = "top",
    obj =  [thetop]: 10 ;

console.log(obj.top); // -> 10

您可以在每个主流浏览器的最新版本中使用这种新语法。

【讨论】：

我明白了！谢谢！这不应该与 eval 一起使用吗？我的意思是它目前在我的示例中不起作用，但我认为它应该...... :-) @Marcel: eval() 在动态属性名称的对象文字中不起作用，你只会得到一个错误。不仅如此，eval() 真的不应该用于此类事情。有一篇关于eval的正确和错误用法的优秀文章：blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx @AndyE 考虑使用更具体的时间更新“最近版本”和“当前 IE TP”，例如“版本晚于 XXX”或“2014-mm 之后”（我自己会做出改变，但是我不知道什么是好的价值观。对于 ES6，如果键为空/未定义，有没有办法忽略该属性？例如，在[key] : "value" 中，如果 key 为 null，它将给出 null: "value"，而我希望结果为很好的解决方案，但是为什么你知道这么多，甚至阅读整个规范都无法理解：（【参考方案2】：

我使用以下方法将具有“动态”名称的属性添加到对象：

var key = 'top';
$('#myElement').animate(
   (function(o)  o[key]=10; return o;)(left: 20, width: 100),
   10
);

key 是新属性的名称。

传递给animate的属性对象将是left: 20, width: 100, top: 10

这只是使用其他答案推荐的所需[] 表示法，但代码行数更少！

【讨论】：

【参考方案3】：

ES5 引用说它不应该工作

注意：ES6 的规则已更改：https://***.com/a/2274327/895245

规格：http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

属性名称：
标识符名称字符串文字数字文字
[...]

产生式 PropertyName : IdentifierName 的评估如下：

返回包含与 IdentifierName 相同的字符序列的字符串值。

产生式 PropertyName : StringLiteral 的评估如下：

返回 StringLiteral 的 SV [字符串值]。

产生式 PropertyName : NumericLiteral 的评估如下：

令 nbr 为形成 NumericLiteral 值的结果。返回 ToString(nbr)。

这意味着：

theTop : 10 与 'theTop' : 10 完全相同

PropertyNametheTop 是一个IdentifierName，所以它被转换为'theTop' 字符串值，也就是'theTop' 的字符串值。

不可能用可变键编写对象初始化器（文字）。

仅有的三个选项是 IdentifierName（扩展为字符串文字）、StringLiteral 和 NumericLiteral（也扩展为字符串）。

【讨论】：

反对者：我是第一个在这个问题上引用任何标准的人。最佳答案中的 ES6 引用是在我回答后编辑的，当时该标准尚未被接受。如果您碰巧知道我为什么会被否决，请解释一下，我只是想学习。我还不如得到同伴压力徽章...... 我猜反对票主要是因为您的回答没有提供解决方案，并且在这方面“没有用”。投票反对同侪压力:-) @Bergi 感谢您的勇气！ :-) 但我想我已经直接回答了这个问题：问：“为什么以下工作？”。 A：因为 ES5 是这么说的。 “怎么办？”是隐含的。在有人在 ES6 解决方案中进行编辑之前，您是否对说“不可能”没有标准引用的首要问题投了反对票？啊，对。当我直接回答这些问题时，我通常会在引用中引用具体问题以使其清楚。引用标准可以得到更好的答案，但目前你的帖子甚至没有回答 imo 的问题。说明什么可以在 ES5 中生成密钥并不意味着它们如何工作。 thetop 肯定是 IdentifierName，那么为什么它不起作用？这个问题仍然悬而未决。 @Bergi 再次感谢您向我解释！我已对其进行了更新以使其更加明确。我之前没有做过，因为我虽然很明显，因为我们可以写a:1.a，所以a显然不会在标识符情况下扩展变量值。但是，是的，在这种情况下，进一步解释是一种改进。【参考方案4】：

使用ECMAScript 2015，您现在可以直接在对象声明中使用方括号表示法：

var obj = 
  [key]: value

key 可以是返回值的任何类型的表达式（例如变量）。

所以你的代码如下所示：

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

thetop 在用作键之前将被评估。

【讨论】：

【参考方案5】：

在变量周围添加方括号对我很有用。试试这个

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

【讨论】：

这在旧版本的 EcmaScript 中不起作用，但现在这是一种非常干净的方法。【参考方案6】：

给定代码：

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 的键创建一个对象。如果您希望键是变量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);

【讨论】：

obj['' + thetop] 可以替换为 obj[thetop]。它会自动字符串化，除非它是一个符号。【参考方案7】：

这样你也可以获得想要的输出

var jsonobj=;
var count=0;
$(document).on('click','#btnadd', function() 
    jsonobj[count]=new Array( "1"  : $("#txtone").val(), "2"  : $("#txttwo").val());
    count++;
    console.clear();
    console.log(jsonobj);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

【讨论】：

【参考方案8】：

分配键的ES5实现如下：

var obj = Object.create(null),
    objArgs = (
      (objArgs = ),
      (objArgs.someKey = 
        value: 'someValue'
      ), objArgs);

Object.defineProperties(obj, objArgs);

我附上了一个用来转换为裸对象的 sn-p。

var obj = 
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': 
    'key5': 'value5'
  


var bareObj = function(obj) 

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) 

    var objArgs = (
      (objArgs = ),
      (objArgs[key] = 
        value: value
      ), objArgs);

    Object.defineProperties(bareObj, objArgs);

  );

  return 
    input: obj,
    output: bareObj
  ;

(obj);

if (!Object.entries) 
  Object.entries = function(obj)
    var arr = [];
    Object.keys(obj).forEach(function(key)
      arr.push([key, obj[key]]);
    );
    return arr;
  


console(bareObj);

【讨论】：

【参考方案9】：

您可以为 ES5 执行以下操作：

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('"' + theTop + '":' + JSON.stringify(10) + ''), 10
)

或者提取到一个函数中：

function newObj (key, value) 
  return JSON.parse('"' + key + '":' + JSON.stringify(value) + '')


var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

【讨论】：

【参考方案10】：

如果您希望对象键与变量名相同，ES 2015 中有一个简写。 New notations in ECMAScript 2015

var thetop = 10;
var obj =  thetop ;
console.log(obj.thetop); // print 10

【讨论】：

【参考方案11】：

你可以这样做：

var thetop = 'top';
<something>.stop().animate(
    new function() this[thetop] = 10;, 10
);

【讨论】：

【参考方案12】：

我找不到关于 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));

【讨论】：

【参考方案13】：

你也可以这样试试：

let array1 = [
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
,

    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
]
let res = array1.map((value, index) => 
    return  [value.description]:  count: value.count, date: value.date  
)
console.log(res);

【讨论】：

这对我帮助很大。谢谢你:)【参考方案14】：

更新：正如评论者指出的那样，任何支持箭头函数的 JavaScript 版本也支持([myKey]:myValue)，所以这个答案没有实际用途-case（事实上，它可能会在一些奇怪的极端情况下崩溃）。

不要使用下面列出的方法。

我不敢相信这还没有发布：只需使用带有匿名评估的箭头函数！

完全非侵入性，不混淆命名空间，只需要一行：

myNewObj = ((k,v)=>o=;o[k]=v;return o;)(myKey,myValue);

演示：

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>o=;o[k]=v;return o;)(myKey,myValue);
console.log(myNewObj);

在还不支持新的[myKey]: myValue 语法的环境中很有用，例如——显然；我刚刚在我的 Web 开发者控制台上验证了它——Firefox 72.0.1，发布于 2020 年 1 月 8 日。 我的立场是正确的；只需将东西放在括号中即可。

（我相信您可能会做出一些更强大/可扩展的解决方案或任何涉及巧妙使用 reduce 的解决方案，但在这一点上，将对象创建分解为自己的可能会更好函数而不是强制将其全部内联）

自从 OP 十年前提出这个问题以来，这并不重要，但为了完整起见并证明它是确切对上述问题的回答，我'将在原始上下文中显示：

var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>o=;o[k]=v;return o;)(thetop,10), 10
);

【讨论】：

同时引入了箭头函数和计算属性名称。您的控制台检查不正确，因为您需要在控制台中输入( [myKey]: myValue ) 以使其成为对象not a block。 “只需要一行” — 当然，整个缩小的 jQuery 库只需要一行。 “非侵入性” — 如果对象具有 getter、setter 或 Proxy 目标，则不成立。答案可以改写为 var myNewObj = (function (myKey, myValue) o = ; o[myKey] = myValue; return o; )(myKey, myValue);支持版本 【参考方案15】：

2020 年更新/示例...

一个更复杂的例子，使用括号和文字......你可能不得不做的事情，例如 vue/axios。将文字括在括号中，所以

[ ` ... ` ]


    [`filter[$query.key]`]: query.value,  // 'filter[foo]' : 'bar'

【讨论】：

【参考方案16】：

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"

希望这可以帮助某人:)

【讨论】：

以上是关于如何在 JavaScript 对象文字中使用变量作为键？的主要内容，如果未能解决你的问题，请参考以下文章

更深入一点，变量赋值和严格相等如何在 Javascript 中工作

你可以在javascript中使用模板文字创建对象属性名称吗？

前端知识点

如何让这个 Javascript 字谜算法在 Ruby 中工作？

如何区分对象文字和其他 Javascript 对象？

如何在 JavaScript 文字符号中创建关联数组