ES6学习 --函数参数默认值与解构赋值默认值

1. ES6的解构
ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中

即分为两种情况:从数组Array中解构,以及从对象Object中解构

①.从数组中解构
const [a, b] = [1, 2]
//a = 1, b = 2

当然这些是基本的数组解构赋值,你还可以用逗号,进行跨值解构,用扩展运算符...进行多余项的解构等等

②.从对象种结构
const {a, b} = {a: 1, a: 2}
//a = 1, b = 2

这也是基本的对象结构赋值,不过在这里提一下,你仍然可以用扩展运算符...进行多余项的解构:

const {a, ...b} = {a: 1, b: 2, c: 3, d: 4}
//a = 1
//b = {b: 2, c: 3, d: 4}

③. 其他类型
当解构其他类型时,也是先将其他类型值转换为Array或者Object

const [a, b, c] = 'hello'
// a = 'h', b = 'e', c = 'l'

const {toString: a} = true
toString === Boolean.prototype.toString // true

2. ES6的函数默认参数
① 定义
函数默认参数允许在没有值或undefined被传入时使用默认形参。
栗子:

function foo (a = 1, b = 2) {
console.log(a, b)
}
foo ()// 1 2

Note: 形参默认是undefiend, 也就是说,在没有默认值时,a = undefiend, b = undefined;不过上面这个例子是没有值被传入的情况
undefiend被传入的情况如下:

function foo (a = 1, b = 2) {
console.log(a, b)
}
foo (undefined, window.valueIsNotDefined)// 1 2

② 默认值不是只有函数参数才能用
还是直接举个例子:

var {a = 1, b = 2} = {}
// a = 1, b = 2

var {a = 1, b = 2} = {a: 'hello'}
// a = 'hello', b = 2

其实解构赋值也是可以赋值默认值的;由此可见:
函数参数默认值的本质,还是解构赋值

3. 一个有趣的小栗子
说了那么多废话,终于要说到这个小栗子了。

Step 1
这是一种超常见的情况,有的时候,当我们定义函数参数的时候,可以去解构当前的参数
比如:

function foo ({ a, b }) {
console.log(a, b)
}
foo({ a: 1, b: 2 })// 1 2

Note: 可以看成做了以下操作:

const { a, b } = { a: 1, b: 2 };
console.log(a, b)

Step 2
更多的时候,我们不会满足于此,我们想要一个默认值

function foo ({a = 1, b = 2}) {
console.log(a, b)
}
foo({})// 1 2

Note: 可以看成做了以下操作:

const { a = 1, b = 2 } = {};
console.log(a, b)

问题 1
然而,我们实际使用时,不会用foo({})这种写法来表示参数缺省,我们大多数人采用foo()这种显而易见的写法,由此问题来了

function foo ({a = 1, b = 2}) {
console.log(a, b)
}
foo()
Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
at foo (<anonymous>:1:14)
at <anonymous>:4:1

通过换一种写法,不难发现错误原因:

const {a = 1, b = 2} = undefined // Error

解决方法:
其实,function foo ({a = 1, b = 2}) {}是对第一个参数的解构,那我们完全按照文章前面函数默认参数定义的那样,在参数为undefined或没有传入的时候,预先定义:

function foo ({a, b} = {a: 1, b: 2}) {
console.log(a, b)
}
foo()// 1 2

分析:可以看做以下写法

function foo (temp = {a: 1, b: 2}) {
var {a, b} = temp
console.log(a, b)
}
foo()// 1 2

问题 2
上面这种方法看似解决了问题,但当我们回过头来,重新运行foo({}),却出现了错误:

function foo ({a, b} = {a: 1, b: 2}) {
console.log(a, b)
}
foo({}) // undefined undefined

经历了前面情景的分析后,现在不难发现:此时的函数参数传入了一个有效值,所以temp不会去采纳默认值,而是去采纳有效的传入值{}; 而var { a, b } = {}的解构,自然而然会让a和b变为undefined

解决方法:
我们很自然的想到:var { a = 1, b = 2 } = {}的形式,来解决这种情况,所以,原函数写作:

function foo ({ a = 1, b = 2 } = {}) {
console.log(a, b)
}
foo()// 1 2
foo({})//1 2

猜你喜欢

转载自www.cnblogs.com/1571523732-qq/p/10032841.html