Question

我应该在这两者之间使用哪个，有没有一个比另一个有优势？

// 1st
{ ["test"]() { return 1; } }

// 2nd
{ "test": function () { return 1; } }

Answer 1

"test": function () { return 1; }是旧方法，而"test"() { return 1; }是新方法，省略了function关键字。

还请注意，这里的[]允许您将变量用作标识符

let name = "test1"
let a = {
  "test2": function () { return "you called test2" },
  "test3"() { return "you called test3" },
  
  
  [name]() { return "you called test1" },
  [name + "1"]() { return "you called " + name + "1" }
}

// written differently works the same
console.log( a.test2() ) // "you called test2" <-- the old way declared one
console.log( a.test3() ) // "you called test3" <-- new way declared one

// same call
console.log( a[name]() ) // "you called test1" <-- declared using
console.log( a.test1() ) // "you called test1" <-- [name]() {...}

// the [...] notation allow the build of identifier freely 
console.log( a.test11() ) // "you called test11"      <-- declared using
console.log( a[name + "1"]() ) // "you called test11" <-- [name + "1"]() {...}

由于Javascript像其他许多语言一样倾向于避免过时而导致旧程序无法继续工作，因此您会发现可以以多种方式完成一件事

Answer 2

它允许使用变量属性名称：

let propName = "test"
console.log({ [propName]() { return 1 } }.test());

Answer 3

优势：

函数是正常声明的，因此具有名称。（而使用{name: function() { ... }}格式，您的所有功能是匿名的，即使引用它们的属性具有名称帮助工具。名称帮助工具可以帮助您在调试器，告诉您哪些函数引发了异常。（2015年更新：最新的JavaScript规范ECMAScript第6版，定义了JavaScript引擎必须推断出的多种方式函数的名称。其中之一是将功能分配给属性，如我们的{name: function() { ... }}示例中所示。这样引擎实施ES6，这个原因将消失。）
为您提供仅由您的个人使用的私有功能的自由模块（例如我上面的internalSomething）。上没有其他代码页面可以调用那些函数；他们是真正的私人。在return语句中，只有最后导出的内容可见
在范围函数之外。
根据环境轻松返回不同的功能，如果实现只是完全改变（例如IE-vs-W3C 或SVG与Canvas等）。

javascript在对象中命名函数

3 个答案: