[ES6-重点纪录] 函数中的预设参数 & Rest 参数

JavaScript 终于让函数也能有预设值了，在 ES6 中为函数加入了预设参数 (Default parameters) 与 Rest 参数的语法，在设计或建构时能更直觉的加入参数值了。

函数中的预设参数

主要用途

预设参数是为了代替传统的方式，解决了需要判断是否为undefined才能设置预设值的麻烦

// 函数中的预设参数function multiply(a, b = 1) {    return console.log(a * b);}// 等同于function multiply(a, b) {    b = (typeof b !== 'undefined') ?  b : 1;    return console.log(a * b);}multiply(10, 2); // 20multiply(10); // 10

使用特性

预设参数可以是任何表达式，甚至可以取前一个变数来使用

function defaultParam(){ return 'test'; }function foo(a, b = a * 2, c = defaultParam()) {    console.log(a, b, c);}foo(10); // 10 20 'test'

预设参数可以与解构赋值结合使用

// 函数参数的预设值设为空物件，也设置了解构赋值的预设值// 此方式是为了避免产生 undefined// 只要不是传入物件，对应错误就会触发参数预设值，再进而触发解构赋值的内容function foo({x = 0, y = 0} = {}) {    return console.log([x, y]);}foo();    // [0, 0]foo({});  // [0, 0]     foo({x: 10, y: 20});  // [10, 20]foo({x: 5});    // [5, 0]foo({z: 1});    // [0, 0]

如果传入undefined将会触发参数等于预设值，但传入null则没有这个效果

// 放入 undefined 与 null 的差别function foo(x = 5, y = 10) {    console.log(x, y);}foo(undefined, null); // 5 null

Rest 参数

主要用途

Rest 参数是取得剩下的参数后存放在同一个阵列里由三个点组成...，后面再加上阵列变数名称，与扩展运算子很相似，但两者是相反的概念主要是代替函数中的arguments物件，其实不能说完全取代，因为arguments内还有其他参数，但常用来获取里面的阵列，只是繁琐的转换过程比较麻烦

// 函数中的 Rest 参数function foo(...rest) {    return console.log(rest);}// 等同于function foo() {    return console.log(Array.prototype.slice.call(arguments));}foo(); // []foo(10, 20, 30); // [10, 20, 30]

使用特性

rest 参数必须是最后一个参数，否则会产生错误

function foo(a, ...b, c) {}// SyntaxError: Rest parameter must be last formal parameter

主要是放在函数中使用，但也能拿来做解构赋值在进行解构赋值时，等号左边可以使用 rest 参数，右边使用为 spread 扩展运算子

// 使用在解构赋值上// 将两个阵列合併后再做排序大小，最后取出第一个值let spread1 = [5, 2, 8];let spread2 = [6, 1, 3];let [first, ...rest] = [...spread1, ...spread2].sort();console.log(first); // 1 console.log(rest); // [2, 3, 5, 6, 8]