ES6函数第一篇：参数篇

目录

1.默认参数

2.剩余参数

3.展开运算符

---

1.默认参数

（1）使用

在书写型参数，直接给形参进行赋值的值成为默认值，如此，在调用函数时，如果没有给对应的参数赋值（即它的值为undefined），则会自动使用默认值

（2）对arguments的影响

只要给函数加上参数默认值，该函数会自动变成严格模式下的规则，即arguments和形参脱离

（3）暂时性死区的问题

形参和ES6中的 let / const 声明一样，具有作用域，并且根据参数声明的顺序，存在暂时性死区

【例1-1-1】不设置默认参数时，传参不够时的情况

//若没有默认值，如果传参不够，返回NaN
function sum(a, b, c) {
    return a + b + c;
}
console.log(sum(1));
console.log(sum(1, 2, 3));

【结果】

图1-1-1

【例1-1-2】设置默认值后，不传参或者传undefined的参数使用默认值

//设置默认值
function sum1(a, b = 1, c = 1) {
    return a + b + c;
}
console.log(sum1(1, 2, 3));
console.log(sum1(1, undefined, 3));
console.log(sum1(1));

【结果】

图1-1-2

【例1-1-3】练习：在页面的容器中添加文本内容。因为一般情况改变的只有内容，因此可以给容器设置默认值

<div id="container"></div>

function addText(name = 'div', container = document.getElementById('container'), text = '') {
    const ele = document.createElement(name);
    ele.innerText = text;
    container.appendChild(ele);
}
addText(undefined, undefined, '桃花扇');
addText('p', undefined, '抹香鲸');

【结果】

图1-1-3

【例1-2】改变形参不会改变arguments

function test(a, b = 1) {
    console.log('arguements', arguments[0], arguments[1]);
    console.log('a:', a, 'b:', b);
    a = 3;
    console.log('重新赋值a后的arguements', arguments[0], arguments[1]);
    console.log('重新赋值a后的a:', a, 'b:', b);
}
test(1, 2)

【结果】可见形参与arguments没有映射关系 

图1-2

 

【例1-3】暂时性死区的问题

该例纯粹是为了说明默认参数的暂时性死区的问题，没有什么实际意义，一般不会使用某个形参给另一个形参赋值

首先，当作默认值的形参a给b赋值，此时a的初始化值为1，因此打印结果图1-3-1

function test(a, b = a) {
    console.log('a =',a,',','b =', b);
}
test(1)

【结果】

图1-3-1

对比下例，开始传参，a取默认值b，此时b在暂时性死区，还未初始化，则报错结果如图1-3-2

function test(a = b, b) {
    console.log('a =', a, ',', 'b =', b);
}
test(undefined, 1)

【结果】

图1-3-2

2.剩余参数

（1）arguments的缺陷

1) 如果和形参配合使用，容易导致混乱

2) 从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图

（2）语法

function (...形参名) {函数体}

（3）注意

1) 一个函数，只能出现一个剩余参数

2) 一个函数，如果有剩余参数，剩余参数必须是最后一个参数

【例2-1】剩余参数举例

function sum(...args) {
    //args收集了所有的参数，形成一个数组
    let sum = 0;
    // console.log(args);
    for (let i = 0; i < args.length; i++) {
        sum += args[i];
    }
    return sum;
}
console.log(sum());
console.log(sum(1));
console.log(sum(1,2));
console.log(sum(1,2,3,));
console.log(sum(1,2,3,4));

【结果】

图2-1-1

function test(a, b, c, ...args) {
    console.log(args);
}
test(1, 2, 3, 44, 5, 3, 221, 45);

【结果】

图2-1-2

【例2-2】若剩余参数不是最后一个参数

function test(a, ...args, b) {
    console.log(args);
}
test(1, 2, 3, 44, 5, 3, 221, 45);

 【结果】

图2-2

3.展开运算符

（1）语法：...要展开的东西

（2）展开数组

（3）展开对象

【例3-1】

function test(...args) {
    console.log(args);
    console.log(...args);
}
test(12,434,3246,7634);

【结果】当args把剩余变量收集起来后，构成了一个数组，可以通过展开运算符将它们拆分

图3-1

【例3-2】展开对象

const obj = {
    name: 'jwh',
    age: 18,
}
const obj1 = {
    ...obj,
    //也可以对obj中的属性进行覆盖
    name: 'zdw'
}
console.log(obj);
console.log(obj1);

【结果】

图3-2