zl程序教程

您现在的位置是:首页 >  其他

当前栏目

ES6 从入门到精通 # 04:函数之默认值、剩余参数

2023-03-14 22:50:21 时间

说明

ES6 从入门到精通系列(全23讲)学习笔记。



带参数默认值的函数

// es5 写法
function add(a, b) {
    a = a || 666;
    b = b || 777;
    return a + b;
}
console.log(add());

function add2(a, b = 666) {
    return a + b;
}
console.log(add2(2));



2eebc37580cb4b3ab5e8f4aa9d8a4dd6.png



默认的表达式也可以是一个函数

function getVal(val) {
    return val + 1;
}
function add3(a, b = getVal(6)) {
    return a + b;
}
console.log(add3(3));

19fb300d8c1246b68ec7d0cc524fd7cc.png



剩余参数

由三个点 ... 和一个紧跟着的具名参数指定,比如:...keys,这个解决了 arguments 的问题。

// es5
function getBlogInfo(obj) {
    let result = Object.create(null);
    for(let i = 1; i < arguments.length; i++) {
        result[arguments[i]] = obj[arguments[i]];
    }
    return result;
}

let blog = {
    name: "凯小默的博客",
    author: "kaimo",
    year: "2017"
}
let blogData = getBlogInfo(blog, "name", "author", "year");
console.log(blogData);


c601b7ba313042249a86130d6b1189b5.png

// es6
function getBlogInfo(obj, ...keys) {
    console.log(keys);
    let result = Object.create(null);
    for(let i = 0; i < keys.length; i++) {
        result[keys[i]] = obj[keys[i]];
    }
    return result;
}

let blog = {
    name: "凯小默的博客",
    author: "kaimo",
    year: "2017"
}
let blogData = getBlogInfo(blog, "name", "author", "year");
console.log(blogData);


a2892c11de1c47fe8dcf8db0d626fd7e.png


剩余参数 对比 arguments:

function checkArgs(...args) {
    console.log(args); // 真实数组
    console.log(arguments); // 伪数组
}
checkArgs("name", "author", "year");


ae988cf6d0354de19cd674093e1a5554.png