请问js解构赋值中，（）与{}有什么区别呢？

Question

 <script type="text/javascript">
    function demo(name = "张三", age = 30) {
               //这里可以用（）也可以function demo({name = "张三", age = 30})

        console.log("姓名：" + name);

        console.log("nianl：" + age);
    }

    demo();
    </script>

如代码中注释那样，加花括号和不加都没问题。只是加花括号后面调用也需要加{} ， 那么（）与{}有啥区别呀请问？

Answer 1

简单理解：解构赋值的意思是对应的位置，对应的 key 自动赋值。

使用 () 还是 {}，要看你定义的函数的参数是什么样的，具体看下面的例子。

---

第一种：当函数的参数是一个对象时，需要使用 {}。这样在函数里面能通过参数的相同的 key 获取到参数对象里的 key 对应的值。

function demo({name, age}) {
  console.log(`姓名：${name}`)
  console.log(`年龄：${age}`)
}
demo({
  name: '张三',
  age: 24
})

---

第二种：当函数里的参数是多个时，这个时候用 ()。其实，这个不是结构赋值，真的只是 ES5 里的形参而已，只不过你的代码里用到了 ES6 中的参数默认值设置而已。

function demo(name = "张三", age = 30) {
  console.log("姓名：" + name);
  console.log("nianl：" + age);
}

demo();

Answer 2

加{}就是对象字面量，而不加就是函数的两个形参。换句话说，函数参数个数和类型的区别。

Answer 3

然而并不可以。。。。

Answer 4

花括号要这样调用的 demo({});解构赋值你的结构要一致

Answer 5

区别就是参数的()有序和{}无序吧,{}必传一个空对象

Answer 6

function demo(name = "张三", age = 30)//这是传入两个参数，然后设置默认值
function demo({name = "张三", age = 30})//这是传入一个对象，然后对对象解构

Answer 7

function demo({name, age} = {name: "张三", age: 30}) {

    console.log("姓名：" + name);

    console.log("nianl：" + age);
}

demo();

这样是可以的，这里等号应该是赋默认值的意思吧

Answer 8

{}用于传入对象，对象里面可以包含多个属性或者方法