当一个函数的参数是解构对象时，如何调用manipulate这个对象

Question

我正在看freecodecamp的Javascript课程。在ES6的教程中，有： "使用解构赋值来传递一个对象作为函数的参数"

虽然我明白他们是如何将其转换为这个函数的，但我完全不明白这个函数的目的是什么，也不明白如何在这个函数里面调用使用值什么的。我试着在网上搜索，但找不到任何与以解构对象为参数的函数相关的内容。基本上，我不明白如何调用或操作，或者我应该用这种形式的对象来做什么

即

let dog1 = {
    name : "whitey",
    colour: "white"
}

let dog2 = {
    name : "blackey",
    colour: "black"
}

//const {name,colour} = dog1 
//let's me call each property like: console.log(name)="whitey"

var dogfunc = (dog1) =>{
   const {name, colour} = dog1}

//which can be rewritten as:     
var dogfunc = ({name, colour}) => {}     

//Now I'm stuck, I don't understand how I would call each property of dog1 or dog2
//I thought the point would be to allow me call/edit either dog1 or dog2 properties.

Answer 1

解构赋值的想法是为了减少额外的必要代码，以及 "只获取需要的东西"。

用你的例子，考虑一个函数，它接收一个狗对象并打印它的名字。

const dogObject = { 
  name: "Doge",
  breed: "Labrador"
}

function printDogName(dog){
  console.log(dog.name);
}

// or using destructuring
function printDogNameWithInternalDestructuring(dog){
  const { name } = dog;
  console.log(name);
}

printDogName(dogObject); // Doge
printDogNameWithInternalDestructuring(dogObject); // Doge

如果你仔细阅读，你可以看到，从整个狗的对象（它可以包含很多其他属性），我们只对以下内容感兴趣 name. 所以，在我们的函数主体中，我们需要从接收到的对象中获取这个属性。

使用解构赋值，我们可以将解构移到函数所需的参数定义中。函数定义指定了我们期望哪种对象作为参数，以及从这个对象中需要哪些属性，在我们的例子中，就是名称。

function printDogNameWithDestructuring({name}){
  console.log(name);
};

printDogNameWithDestructuring(dogObject); // Doge

从你的例子来看。

let dog1 = {
    name : "whitey",
    colour: "white"
}

let dog2 = {
    name : "blackey",
    colour: "black"
}

const {name,colour} = dog1 
//let's me call each property like: console.log(name)="whitey"
console.log(name) // prints whitney

var dogfunc = (dog1) => {
  const {name, colour} = dog1
  console.log(name);
}

dogfunc(dog1); // prints whitney
dogfunc(dog2); // prints blackey

//which can be rewritten as:  
var dogfunc = ({name, colour}) => {
  console.log(name)
}

// or using a shorter syntax   
var dogfunc = ({name, colour}) => console.log(name);

dogfunc(dog1); // prints whitney
dogfunc(dog2); // prints blackey