方括号围绕函数定义中的参数

Question

我在Ember CLI网站上看到了以下代码:

export default Ember.Helper.helper(function([value]) {
  return value.toUpperCase();
});

令我困惑的是value参数周围的方括号.我可以在函数调用中理解它,但为什么在函数定义中呢？

Answer 1

这对我来说非常令人惊讶,但它似乎是有效的javascript,根据ECMAScript 2017语言规范,函数声明中的形式参数可以是任何"绑定元素",包括数组绑定.

https://tc39.github.io/ecma262/#prod-BindingElement

此功能的实际行为似乎意味着函数的参数应该是一个数组,value并将采用数组中第一个元素的值.

Answer 2

这是一个解构任务.@recursive描述的行为是正确的,但它可能有助于知道它不仅限于第一个元素.如果它有三个要素:

function xyz([a, b, c]){...}

然后a,b和c都将在函数范围内声明变量,在这种情况下,将等于数组的前三个元素.此外 - 如果作为参数传递的数组没有至少三个元素,则参数(a,b和c)中指定的其余元素将作为声明存在,但将具有以下值undefined:

// Example
function destructureThis([a, b, c]){
  console.log(a, b, c);
}

var shortArray = [1, 25];
destructureThis(shortArray);

// Prints to console:
// 1 25 undefined

同样,如果参数数组较大,则仅忽略其他元素,如前所述.

var longerArray = [1, 5, 9, 50, 60];
destructureThis(longerArray);

// Prints to console:
// 1 5 9

另外......这是ECMAScript规范最近的一个新增内容,它应该在所有目标环境(看着你的IE)中进行测试,如果不使用Babel或等效物来转发它以实现向后兼容性.