ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:

  • 命名参数
  • 设置默认参数
  • 多个返回值

命名参数

在传统的函数定义如下:

function findUsersByRole (
  role, 
  withContactInfo, 
  includeInactive
) {...}

我们会这样调用函数传参:

findUsersByRole(
  'admin', 
  true, 
  true
)

直接看函数调用,我们很有可能会对第二和第三个参数迷惑,不知道它们分别表示什么意思。

使用解构赋值,可以很好解决这个问题。上面的函数可以改为:

findUsersByRole({
  role: 'admin', 
  withContactInfo: true, 
  includeInactive: true
})

解构赋值使用object类型的方式传递参数,使用命名参数,清晰明了。

函数定义解构赋值参数

function findUsersByRole ({
  role,
  withContactInfo, 
  includeInactive
} = {}) {...}

忽略参数

调用解构赋值定义函数的参数,可以忽略某些参数:

findUsersByRole({
  role: 'admin', 
  includeInactive: true
})

={}对解构赋值参数设置默认值,在调用函数时完全可以不传参数

findUsersByRole()

参数无需按指定顺序

与函数普通参数不同,解构赋值参数不需要按声明的顺序赋值

findUsersByRole({
  withContactInfo: true,
  role: 'admin', 
  includeInactive: true
})

默认参数

对函数的传统参数赋默认值,类似于:

function findUsersByRole (
  role, 
  withContactInfo = true, 
  includeInactive
) {...}

在调用函数时,如果需要使用参数的默认值,需要在参数的位置上传undefined

findUsersByRole(
  'Admin', 
  undefined, 
  true
)

函数findUsersByRole的第二个参数处传undefined,这显得很不优雅。

解构赋值设置默认参数

function findUsersByRole ({
  role,
  withContactInfo = true, 
  includeInactive
} = {}) {...}

withContactInfo设置默认值为true,调用函数当withContactInfo不传时,值默认为true,调用如下:

findUsersByRole({
  role: 'Admin',
  includeInactive : true
})

返回多值

如果在传统返回多个值,我们可以使用对象。

function getUser(id) {
  //...
  let name = ...;
  let age = ...;
  return {
    id: id,
    name:name,
    age: age
  }
}

在接收对象数据时:

let user = getUser(10);

使用解构赋值可以直接赋值给变量

let {id,name,age} = getUser(10);

版权声明:著作权归作者所有。

相关推荐

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n

JavaScript(ES6)判断字符串是否包含子字符串的方法

ES6 includesES6的字符串新增了includes方法,我们可以用它来判断是否包含子字符串。str.includes(searchString[, position]) searchString:查询的子字符串position:可选,开始搜索的位置,默认为0'Blue Whale'.includes('Blue'); // returns

TypeScript:变量声明之解构赋值

解构(Destructuring)是ES6新增的特性。数组和对象(Object)的一个作用是把一些值组合打包在一起。与之相对,解构就类似把数组里的值或对象的属性解包。使用解构赋值语法可以很简便地把数组的值或对象的属性赋值给单独的变量。语法var a, b, rest; [a, b] = [10, 20]; console.log