函数解构参数小细节

关于解构

在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) {
    
}
复制代码