es6 — 与解构赋值默认值结合使用[通俗易懂]

全栈程序员-站长 • 2022年3月12日下午5:35 • 未分类 • 阅读 63

大家好，又见面了，我是全栈君。

参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) {
    console.log(x, y)
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // 报错， TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x 和 y 才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x 和 y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5} = {}) {
    console.log(x, y)
}

foo() // undefined 5

上面代码指定，如果没有提供参数，函数foo的参数默认为一个空对象。

eg2:

function fetch(url, {body = '', method = 'GET', header = {} }) {
    console.log(method)
}

fetch('http://example.com', {}) // GET

fetch('http://example.com') // 报错

第二个参数必须是个对象，否则报错，改成下面的写法即可避免这种情况

function fetch(url, {body = '', method = 'GET', headers={} } = {}) {
    console.log(method)
}

fetch('http://example.com') // 'GET'

函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

思考：

// 写法一
function m1({x = 0, y = 0} = {}) {
    return [x, y]
}

// 写法二
function m2({x, y} = {x : 0, y : 0}) {
    return [x, y]
}

上面两种写法的区别：写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数默认是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// 以上的情况都没有区别，下面的情况两者就有区别了
// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]