做有态度的前端团队

网易FEG前端团队

ES6学习笔记——参数

在 ES5 中,在函数中我们需要各种操作去处理 默认参数、不定参数 和 重命名参数 等需求,在 ES6 中我们可以使用更简洁的语法完成这些需求。

默认参数

function addTwoNumbers(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}

ES6 中,函数的参数可以支持设置默认值:

function addTwoNumbers(x=0, y=0) {
    return x + y;
}
addTwoNumbers(2, 4); // 6
addTwoNumbers(2); // 2
addTwoNumbers(); // 0

rest 参数

在 ES5 中,我们需要这么处理不定参数:

function logArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

使用rest ,我们就可以更方便地处理不确定数目的参数:

function logArguments(...args) {
    for (let arg of args) {
        console.log(arg);
    }
}

命名参数

在 ES5 中使用配置对象的模式来处理命名参数,jQuery中的使用:

function initializeCanvas(options) {
    var height = options.height || 600;
    var width  = options.width  || 400;
    var lineStroke = options.lineStroke || 'black';
}

我们可以解构一个函数的形参实现相同的功能:

function initializeCanvas(
    { height=600, width=400, lineStroke='black'}) {
        // Use variables height, width, lineStroke here
    }

如果我们想使整个值可选择,我们可以解构一个空的对象:

function initializeCanvas(
    { height=600, width=400, lineStroke='black'} = {}) {
        // ...
    }

展开操作

在 ES5 中:

Math.max.apply(null, [-1, 100, 9001, -32]); // 9001

在 ES6 中,我们可以通过展开操作,把一个数组的值作为参数传递给一个函数:

Math.max(...[-1, 100, 9001, -32]); // 9001

我们可以更简洁地使用这个语法来合并数组:

let cities = ['San Francisco', 'Los Angeles'];
let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

手机阅读请扫描下方二维码:

none
上一篇:初探sessionStorage的使用   下一篇:Bug汇总

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif