1. 函数参数的解构赋值方式

下面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

function add([x, y]){return x + y;
}add([1, 2]); // 3

如下代码所示，函数参数写成对象的形式也可以，毕竟数组也是对象的一种。

function add({x, y}) {return x + y;
}add({x:1,y:2}); // 3

2. 函数参数解构设置参数默认值

1. 方法1

下面代码中，函数show的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
注意：之所以触发参数默认值，是因为传递的参数值为undefined。

function show({x = 0, y = 0} = {}) {return [x, y];
}show({x: 1, y: 2}); // [1, 2]
show({x: 1}); // [1, 0]
show({}); // [0, 0]
show(); // [0, 0]show({x: 1, y: undefined}); // [1, 0]

2. 方法2

该方法的写法与上面方法的唯一区别就是将默认值写到了后面的大括号里，就得到了完全不一样的结果。
这是因为该方法是为函数参数指定默认值，而方法1是为变量x，y指定默认值。因此，当有参数传入时，无论传入的参数是何值，包括undefined，都会被当做有参数传入，不会触发默认值。只有完全没有参数传入时，才会触发默认值[0, 0]。

function show({x, y} = {x: 0, y: 0}) {return [x, y];
}show({x: 1, y: 2}); // [1, 2]
show({x: 1}); // [1, undefined]
show({}); // [undefined, undefined]
show(); // [0, 0]show({x: 1, y: undefined}); // [1, undefined]

3. 总结

参与解构的函数参数可以写成对象或者数组的形式。
当默认值写在前面大括号里时，传入参数是undefined时会触发默认值。
当默认值写在后面大括号中时，无参数传入时触发默认值。

参考文献：《ECMAScript 6 入门教程》

ES6函数参数的解构赋值，以及2种设置参数默认值方法的区别相关推荐

【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
[ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象本质上,这种写法属于"模式 ...
ES6中变量的解构赋值
1.数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
ES6之变量的解构赋值
变量的解构赋值 1. 数组的解构赋值基本用法 ES6允许写成下面这样 let [a, d, c] = [1, 2, 3]; //按照对应位置对变量赋值这种写法也叫模式匹配只要等号两边模式相同(解 ...
ES6之二（解构赋值）
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).解构分为以下几种: 数值解构 1. 情况1:少对多 ---解构成功 let [ , , ...
Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
石川es6课程---6、解构赋值
石川es6课程---6.解构赋值一.总结一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...
ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...

ES6函数参数的解构赋值，以及2种设置参数默认值方法的区别

文章目录