关于ES6中函数参数解构的理解

最新推荐文章于 2025-08-14 09:21:42 发布

原创最新推荐文章于 2025-08-14 09:21:42 发布 · 597 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #node.js #vue.js

本文介绍了ES6中函数参数的两个重要特性：默认值和解构赋值。通过实例展示了如何使用这些特性来简化代码，并讨论了在使用解构赋值时需要注意的问题。

仅作个人理解不作任何参考！

形参结构主要就是为了简化代码

1.函数形参的默认值

function fn2(name='zs',age=18) {
    console.log(name,age);
}
fn2('ls',20)
在ES6中允许为函数的形参设置默认值，
上面代码打印出来为  ls 20
如果fn2调用函数是不传实参，那么就会打印默认值
打印出来为  zs  18

2,函数形参的结构

let obj = {
    name:'张三',
    age:18,
    sex:'男'
}

function fn({name,age}) {
    console.log(name,age);
}
fn()  //TypeError: Cannot destructure property `name` of 'undefined' or 'null'.
函数形参在解构时如果实参没有传参那么{name,age} = null
所以在打印时就会报错，报错的意思是，不能在null或者undefined上解构属性‘name’,
函数形参结构是一定要传有这个属性的对象，否则会报undefined，如果对象中有这个属性，就可以正常输出打印
如果没有实参可以传递，那么可以采用在实参中传递一个空对象{}，这是在打印就不会报错，
但是打印的是undefined，因为null和undefined中永远不会有属性，但是传空对象就可能存在属性和属性值，
所以不会报错，只是打印undefined


function fn1({name='zs',age=18}={}) {
    console.log(name,age);
}
fn1() 
也可以采用上边的写法，把空对象一步到位提到形参中，此时也可以正常打印默认值，但是如果形参中没有等于一个空对象，
也会报错，错误又会回归上边的错误类型，相当于{name,age}=null,不能在null中读取属性name和age