Question

我试图了解destruct和...之间的区别在以下场景中传播：

使用示例...传播

function do2(a,b,c){
    alert (a+b+c);    
}

do2(...[5,3,5]);

使用毁灭的例子：

function do3({a , b , c}){
    alert (a+b+c);
}
do3([5,3,5]);

我什么时候使用？谁能说明这两种方式之间的区别以及在这种情况下使用哪种方式？我还是初学者，所以任何帮助都会很好。

Answer 1

运营商点差

传播示例：

const add = (a, b) => a + b;
let args = [3, 5];
add(...args); // same as `add(args[0], args[1])`, or `add.apply(null, args)`

函数不是JavaScript中唯一使用逗号分隔列表的地方 - 现在可以轻松连接数组：

let cde = ['c', 'd', 'e'];
let scale = ['a', 'b', ...cde, 'f', 'g'];  // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

<强>解构

解构是一种快速从{}或[]中提取数据的方法，而无需编写太多代码。

let foo = ['one', 'two', 'three'];

let one   = foo[0];
let two   = foo[1];
let three = foo[2];
into

let foo = ['one', 'two', 'three'];
let [one, two, three] = foo;
console.log(one); // 'one'

ES6还支持对象解构，这可能会使用更明显：

let myModule = {
  drawSquare: function drawSquare(length) { /* implementation */ },
  drawCircle: function drawCircle(radius) { /* implementation */ },
  drawText: function drawText(text) { /* implementation */ },
};

let {drawSquare, drawText} = myModule;

drawSquare(5);
drawText('hello');

Answer 2

第一个示例将a，b c分配给索引0，1，2的已传递数组的元素，对应到数组中元素的数量

function do2(a, b, c){
    alert (a + b + c);    
}

do2(...[5, 3, 5]);

第二个示例期望一个对象作为函数的参数，{a , b , c}将传递的对象分解为a，b，c作为函数内的局部变量

function do3({a , b , c}){
    alert (a + b + c);
}
do3({a:5, b:3, c:5});

另见What is SpreadElement in ECMAScript documentation? Is it the same as Spread operator at MDN?

破坏和...在JavaScript中传播的区别

2 个答案: