ES6 - 基础学习(14): 函数的扩展

概述

ES6在ES5基础上对函数以及函数的应用进行了很大的扩展，虽然有些功能早就被各大浏览器广泛支持，但一直属于非标准属性 (编外人员，可怜)，直到ES6才将这些写入标准 (终于转正了)。大体上包括以下几个方面：

　　1、函数参数的扩展，ES6允许声明方法时给参数设置默认值，即直接写在形参定义的后面。

　　2、rest参数，ES6引入了 rest参数(形如：...变量名)，用于获取方法的多余参数。

　　3、函数的name属性，用于获取函数的函数名。

　　4、箭头函数，ES6允许使用“箭头”(=>)定义函数。

函数参数的扩展

　　参数的默认值：基本用法

// ES6允许声明方法时给参数设置默认值，即直接写在形参定义的后面。
// 既然参数在定义时就已设置默认值和数据类型，则方法里面就不需要再进行参数判定了。
function testFunc(x, y = 'ES6') {
    console.log(x, y);
}

testFunc('Welcome to');                   // Welcome to ES6
testFunc('Welcome to', 'China');          // Welcome to China
testFunc('Welcome to', '');               // Welcome to
// ES6的写法 除了代码看起来更简洁外，还有两个好处：1、阅读代码时，不用查看函数体或文档，就可以立即知道哪些参数可以省略；
// 2、有利于以后代码的优化和迭代，即使以后去掉了这个参数，也不会导致以前的代码无法运行。

// 在ES6之前，方法不能为参数直接指定默认值，只能通过参数判定的方式，为参数设置默认值。
// testFunc方法，在执行方法体时，先检查参数y是否有赋值(这里最好判定该参数是否有值，既不为undefined；而不是判定该参数是否为空，避免出现 空字符串、null等布尔值可以转为false的值)。若没有，则赋默认值：ES6。
function testFunc(x, y) {
    y = typeof y !== undefined ? y : 'ES6';
    console.log(x, y);
}

testFunc('Welcome to');                  // Welcome to ES6
testFunc('Welcome to', 'China');         // Welcome to China
testFunc('Welcome to', '');              // Welcome to

 　　参数的默认值：使用参数默认值时，函数不允许出现同名参数

// 不使用参数默认值时，方法内允许出现同名参数，且调用时不会报错。只是这多个同名参数实际上表示同一个参数，调用方法时，该参数以最后一个传入值为实际值。
function testFunc(x, x, y) {
    console.log(x, y);
}

testFunc(1, 2, 3);                 // 2 3

// 使用参数默认值时，则方法内不允许出现同名参数，否则调用该方法时会报错。
function test_Func(x = 1, x, y) {
    console.log(x, y);
}

test_Func(1, 2, 3);                 // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

　　参数的默认值：函数参数的默认值存在暂时性死区，即在函数参数默认值表达式中，还未初始化赋值的参数无法作为其他参数的默认值。并且参数的默认值不是直接传值的，而是每次都重新计算默认值表达式的值(即参数的默认值是惰性求值)。

function testFunc(x, y = x) {
    console.log(x, y);
}
testFunc(1);              // 1 1

// 未初始化赋值的参数无法作为其他参数的默认值
function testFunc(x = y) {
    console.log(x);
}
testFunc();              // Uncaught ReferenceError: y is not defined


// 每次都重新计算默认值表达式的值
let x = 1;
function testFunc(y = x + 1) {
    console.log(y);
}

testFunc();             // 2
x = 2;
testFunc();             // 3 每次调用函数testFunc时，都会重新计算 x + 1 的值，而不是第一次调用计算后的值

rest参数

 ES6引入了 rest参数(形如：...变量名)，用于获取方法的多余参数，从而就不需要再使用 arguments对象，查询函数的参数个数以及参数列表了。rest参数搭配的变量是一个数组，该变量将函数多余的参数放入数组中(不限长度)，从而使得该函数可以传入任意多个参数。

rest参数：基本用法

function testFunc(...parList) {
    console.log(parList.length);
}

testFunc(1, 2, 3);         // 3

rest参数：与函数其他参数(固定存在的参数)混合使用

// rest参数是一个数组，数组拥有的方法 rest参数都可以调用。
function testFunc(array, ...parList) {
    parList.forEach(function (item) {
        array.push(item);
    });
}

function test_Func(...parList) {
    console.log(parList);
}

let container = [];
testFunc(container, 1, 2, 3);
console.log(container);                // (3) [1, 2, 3]
console.log(testFunc.length);          // 1    函数参数的 length属性 只能获取函数其他参数(固定存在的参数)个数，rest参数个数，无法获取。所以不包括 rest参数。
console.log(test_Func.length);         // 0

// rest参数只能是函数最后一个参数，后面不能再跟其他参数，否则函数调用时会报错。
function test_Func(...parList, other) {
    console.log(other);
}
test_Func();                        // Uncaught SyntaxError: Rest parameter must be last formal parameter

函数的name属性

 函数的name属性，返回该函数的函数名。这个属性早就被浏览器广泛支持，但直到 ES6，才将其写入了标准(多年的挣扎，终于转正了)。不过 ES6对 name属性的行为做了一些修改，如果将一个匿名函数赋值给一个变量，则 ES5的name属性，会返回空字符串，而 ES6的name属性则会返回实际的函数名。

// Function构造函数返回的函数实例，name属性值为anonymous
console.log((new Function).name);        // anonymous

// bind返回的函数，name属性值会加上bound前缀。
function testFunc() {                 // 具名函数
    console.log('testFunc');
}

testFunc.bind({}).name;                  // 'bound testFunc'

(function () {                        // 匿名函数
    console.log('No name');
}).bind({}).name;                        // 'bound '

箭头函数

ES6允许使用“箭头”(=>)定义函数，箭头函数提供了一种更加简洁的函数书写方式。基本语法：参数 => 函数体

箭头函数：基本用法

var f = v => v;

// 等价于
var f = function(a){
    return a;
}
f(1);      　　　　//1

// 如果箭头函数不需要参数或需要多个参数，则使用 ()将参数部分括起来[不需要参数时，就放一个空()]。
let testFunc = () => 5;

// 等同于
let testFunc = function () {
    return 5;
};

let test_Func = (par1, par2) => par1 + par2;
// 等同于
let test_Func = function (par1, par2) {
    return par1 + par2;
};

// 如果箭头函数函数体有多行语句，则用 {}包裹起来，表示代码块；若只有一行语句，且需要返回结果时，可以省略{}, 结果会自动返回。
let test_Func = (par1, par2) => {
    return par1 + par2;
};

// 最后，如果箭头函数需要直接返回一个对象，则必须在该对象外面加上()，避免引擎将大括号认为是代码块，从而报错。
let getTempItem = id => {id: id, name:"Temp"};    　　// Uncaught SyntaxError: Unexpected token ':'

// 箭头函数可以与变量解构结合使用。
let testFunc = ({par1, par2}) => par1 + par2;

// 等同于
function testFunc(par) {
    return par.par1 + par.par2;
}

箭头函数：箭头函数 + rest参数

let format = (head, ...tail) => [head, tail];
format(1, 2, 3, 4, 5);                // [1, Array(4)]

let sum = (...nums) => {
    let tempLet = 0;
    // nums.forEach(function (item) {
    //     tempLet += item;
    // });

    for (let item of nums) {
        tempLet += item;
    }
    return tempLet;
};
let total = sum(1, 2, 3, 4, 5);        // 15

转发 https://www.cnblogs.com/donghuang/p/12423147.html