javascript函数参数用大括号传递和不用大括号传递有什么区别？

Question

javascript函数参数用大括号传递和不用大括号传递有什么区别？比如下面的代码：

import CheckPermissions from './CheckPermissions';
const Authorized = ({ children, authority, noMatch = null }) => {  //大括号括起来和不用大括号有什么区别？
  const childrenRender = typeof children === 'undefined' ? null : children;
  return CheckPermissions(authority, childrenRender, noMatch);
};

问题就是第2行代码的大括号传参，好像不用大括号也行吧？使用大括号和不使用大括号有什么区别呢？

Answer 1

带大括号是指传递一个参数，参数类型为对象，里面有三个属性children, authority, noMatch，不带大括号就是传递三个参数，这里的大括号不是块级作用域，就是单纯的表示一个对象

Answer 2

这是 es6 的解构语法

const obj={x:1,y:2,z:3}
const {x,y,z}=obj         // 相当于 const x=obj.x, y=obj.y, z=obj.z
console.log(x,y,z)        // 输出 -> 1 2 3

function({x,y,z}){
}

// 相当于

function(obj){
  var  x=obj.x, y=obj.y, z=obj.z
}

---

补充1

其实就是个语法糖,只是方便你使用的,让代码看起来比较简洁
像方法的解构,很多时候传进来一个对象,只用到里面的几个属性,以前都是传入整个对象,然后声明变量将属性赋值给变量,或者就是直接用点,获取属性.

有了解构可以省很多代码.

要说什么时候不用的话,我只想到一种,就是你要直接用这个对象的时候,比如你的函数里面需要给这个对象挂载新的属性,那么就需要直接写对象名,然后里面有用到他的属性的时候,在用赋值的解构

function(obj){
  const {x,y,z}=obj
  obj.newAttr=1
}

像数组,对象,字符串之类的都能有解构,很好用,可以看看下面的参考连接,里面说的很详细

---

补充2 函数参数使用解构的好处

• 对于函数本身

  • 代码简洁
  • 优雅
  • 当需要传入一个对象时,很方便

• 使用函数时

  • 可以不用在意参数顺序
  • 参数有默认值的时候,不用传 undefined
  • 不想传某个参数的时候,直接不用写就可以
  • 命名参数
• 最重要的是官方出品,好用又不贵,干嘛不用

function http1(url,method='get',headers,body,proxy=false) {
  ...
}
function http2({url,method='get',headers,body,proxy}) {
  ...
}

// 必须按照指定顺序
http1(url,method,headers,body,proxy)
// 可以不用在意参数顺序
http2({url,headers,method,body,proxy})

// 对于有默认值的参数,如果不像传值,必须要写一个 undefined
http1(url,undefined,headers,body,proxy)
// 对于有默认的参数,可以选择不传
http2({url,headers})

// 如果后面参数有值不能忽略前面的参数
http1(url,method,headers,body,proxy)
// 可以忽略某些参数,
http2({url,method})

// 很难明白这个最后一个参数 true 是什么意思
http1(url,method,headers,body,true)
// 很清楚的知道,把 true 传递给 proxy
http2({url,headers,proxy:true})

---

详细的可以参考下面的连接
变量的解构赋值
MDN 解构赋值

Answer 3

其实你想要了解的是什么是解构，以及什么时候该用解构。
什么时候传一个对象，用解构方式获取，其实和我应该是用一个类组织我的数据结构，还是以各种属性来组织，其实是一个道理。
举个栗子

function createPlugin(data, { label, width ,height ... }) {

}

function updateSize(height, width ...) {

}