函数解构参数小细节

最新推荐文章于 2024-11-19 15:05:06 发布

转载最新推荐文章于 2024-11-19 15:05:06 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c9269b36fb9a070dc2890c7

ES5获取对象或数组值的方式繁琐，ES6提供了解构特性来解决这一痛点。解构可设置默认值，支持嵌套和重命名。解构还能用于函数参数传递，同时针对参数默认值问题，可结合相关语法解决第三个参数可选及默认值的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于解构

在es5中我们获取对象或者数组的值的时候往往是这样的：

var jack = {
    name: "jack",
    age: 12
}
var colors = ["red", "green", "yellow"];
var name = jack.name,                   // "jack"
    age = jack.age;                     // 12
    firstColor = colors[0],
    secondColor = colors[1];
复制代码

如果你要提取更多变量则需要写更多类似的结构，有的可能存在多层嵌套。es6为解决这个痛点，提供了一个全新的特性，这就是我们的解构啦。要达到上面的效果，es6中我们可以这么写

const jack = {
    name: "jack",
    age: 12
};
const colors = ["red", "green", "yellow"];

const {name, age} = jack;
const [firstColor, secondColor] = colors;

复制代码

有没有更简洁明了，当然如果是使用var, let, const 声明变量，则必须提供初始化的值（等号右边）;

默认值

解构的时候是可以给予默认值的，如果没有则会赋值undefined;

const jack = {
    name: "jack",
    age: 12
};
const {name, age, weight = 60} = jack;

console.log(weight) // 60

复制代码

嵌套和重命名

解构也是支持嵌套的,同时你可以赋值给不是属性名的任何变量

const jack = {
    others: {
        school: "xxx",
        country: "America"
    }
}
const {others: {school,country}} = jack;
const {others: jackInfo} = jack
console.log(school, country) // 'xxx', "America"
复制代码

解构参数

解构也可以用在函数参数传递的过程中，这种方式更特别，以前我们在实现一个函数时,如果要获取对象里面的值通常会这样

function fn (name, age, options) {
    options = options || {}; //判断是否传参
    var school = options.school;
    // ....其它逻辑代码

}
复制代码

而es6中你就完全不用如此

function fn (name, age, {school, country}) {
    
};
// 调用
fn('jack', 12, {school: "xxx", country: "America"});
复制代码

默认值问题

上面这个例子中如果你不传入第三个参数，调用函数会报错，你可以这样：

function fn (name, age, {school, country} = {}) {
    
};
// 调用
fn('jack', 12);
复制代码

这种方法只是解决了调用报错问题，但“school”和“country”的默认值还是没解决，可以利用解构赋值一样的语法解决默认值的问题

function fn (name, age, {school="xxx", country="America"}) {
    
};
复制代码

将上面两种结合起来既可以解决第三个参数可选，也可以解决默认值的问题

const default = {
    school: 'xxx',
    country: 'America'
}
function fn (name,age {school=default.school, country=default.country}=default) {
    
}
复制代码

转载于:https://juejin.im/post/5c9269b36fb9a070dc2890c7