Question

我们说我有以下名为obj的Javascript对象：

obj = {
    val1: {
        val2: "Hello World"
    }
};

我可以使用以下内容解析函数中的obj：

function someFunction({ val1: { val2: greeting } }) {
    console.log(greeting);
}

为了比较，这里有一个更传统的香草功能：

function someFunction(obj) {
    console.log(obj.val1.val2); // could have stored this in a "greeting" const for clarity if desired
}

我的问题是，这真的是一种改进吗？当然，在函数体中使用greeting更加清晰，但是您可以很容易地看到这样的语法如何变得非常密集并且难以读取更复杂的对象。从绩效的角度来看，解构会更有效吗？我很难想象，因为无论如何都应该通过引用传递对象。也许我在这里错过了一些东西。

提前感谢您的想法！

Answer 1

使用对象解构允许代码以一些小的方式简化。这些都不是改变生活的主要因素，但我认为一旦人们对此有所了解，他们会发现它很有用。

它使得函数采用的参数更加明确。通常使用obj的函数，您将被迫阅读函数体以查找哪些密钥有效，或检查文档。

var foo = function(args) {
   // hmmm what keys go on args?
}

var foo = function({ url : url, overwrite : overwrite = false }) {
   // oh, url and overwrite, and overwrite has a default
}

它在函数体中保存了一些键击，以避免必须触及嵌套键。

// forced to continually reach into the args object
var foo = function(args) {
   if (args.nested.something === true) {
      doFn(args.nested.key);
   }
}

// no more reaching, everything is flat
var foo = function({ nested : { something : something, key : key } }) {
  if (something === true) {
      doFn(key);
  }
}

它允许更好地默认嵌套密钥。

// old style 
var foo = function(args) {
    args = args || {};
    args.nested = args.nested || {};
    args.nested.foo = args.nested.foo || "fooValue";
    args.nested.active = args.nested.active !== undefined ? args.nested.active : true; // can't do || on boolean true or it overwrites passed false
}

var foo = function({
   nested : { foo : foo = "fooValue", active : active = true } = {}
} = {}) {
    console.log(foo, active);
}

// foo() - "fooValue" true
// foo({}) - "fooValue" true
// foo({ nested : { foo : "changed" } }) - "changed" true
// foo({ nested : { active : false} }) - "fooValue" false

我是否使用它，不是真的。但我会，我会稍微习惯它，就像=>和模板字符串一样，我现在经常使用它们。

Answer 2

一方面，差异在于你可以

for (int i = 0; i <= names.Length-1; i++){
    output = output + names[i] + "\n";
}

获取

return {greeting}

虽然仍然能够使用{greeting: "Hello World"}标识符，但如果需要，则指向值greeting。在第二个例子中你需要使用

"Hello World"

获得相同的价值。

ES6论证解构有什么意义？

2 个答案: