javascript - JavaScript 中 Destruction 和 ...Spread 的区别

Question

我试图理解 destruct 和 ...Spread 在以下场景中的区别:

使用 ...Spread 的示例

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');