ES6(三) 函数 1

2020-05-06  本文已影响0人  蒋小花_4b6c

1.带参数默认值的函数

2.arguments

3.形参默认值,对arguments的影响

4.参数默认值表达式

5.

带参数默认值的函数

// ES5

function makeRequest(url, timeout, callback) {

    timeout = timeout || 2000;

    callback = callback || function() {};

    // 函数的剩余部分

}

// ES6

function makeRequest(url, time = 2000, callback = function() {} ) {

    // 函数的剩余部分

}

// 如果第二个参数是可选的,第三个参数是必填的,

// 那么可将第二个参数赋值为undefined/null

function makeRequest(url, time = 2000, callBack) {

    console.log(url, time = 2000, callBack);

}

makeRequest('/foo', undefined, function aa() { console.log('this is callBackFun.') });

            // 输出: /foo 2000 ƒ aa() { console.log('this is callBackFun.') }

makeRequest('/foo', null, function aa() { console.log('this is callBackFun.') });

            // 输出:  /foo 2000 ƒ aa() { console.log('this is callBackFun.') }

arguments

它是JS的一个内置对象.    

JS不像JAVA是显示传递参数,JS传的是形参,可以传也可以不传.

若方法里没有写参数却传入了参数,该如何拿到参数呢,答案就是arguments了.

function getParam() {

    console.log(arguments);

    console.log(typeof arguments );

    console.log(arguments.length );

    const newArgments = Array.prototype.slice.call(arguments);

    // 把arguments转化成一般的数组

    newArgments.forEach(element => {

        console.log(element);

    });

}

getParam();

getParam([1, 2]);

getParam([1, 2], 'time', 'url');

形参默认值,对arguments的影响

// ES5 的非严格模式:

function mixArgs(first, second) {

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

    first = "c";

    second = "d";

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

}

mixArgs("a", "b");

// 输出: true true true true

// 更改 first 与 second 改变了 arguments 对象

// ES5 的严格模式:

function mixArgs(first, second) {

    // "use strict";

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

    first = "c";

    second = "d"

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

}

mixArgs("a", "b");

// 输出: true true false false

// 更改 first 与 second 就不会再影响 arguments 对象

ES6 与 ES5严格模式 一样 

// 非严格模式

function mixArgs(first, second = "b") {

    console.log(arguments.length);

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

    first = "c";

    second = "d"

    console.log(first === arguments[0]);

    console.log(second === arguments[1]);

}

mixArgs("a");

// 输出: 1 true false false false

参数默认值表达式

参数默认值并不要求一定是基本类型的值(int, string array, object……)

function getValue() {

    return 5;

}

function add( first,  second = getValue() ) {

    return first + second;

}

console.log( add(1, 1) ); // 2

console.log( add(1) ); // 6

如果getValue() 是一个而可变的数,情况会怎样?

let value = 5;

function getValue() {

    return value++;

}

function add( first, second = getValue() ) {

    return first + second;

}

console.log( add(1, 1) ); // 2

console.log( add(1) );  // 6

console.log( add(1) ); // 7

console.log( add(1) ); // 8

Tips:

second = getValue(),注意此处是带有括号的,否则,没有括号就是引用.

另一种有趣的能力:可以将前面的参数作为后面参数的默认值

function add( first, second = first ) {

    return first + second;

}

console.log( add(1, 1) ); // 2

console.log( add(1) ); // 2

将两种方法结合:

第二个参数的默认值是一个函数返回的值,第二个参数的函数使用了第一个参数

function getValue(value) {

    return value + 5;

}

function add( first,  second = getValue(first) ) {

    return first + second;

}

console.log( add(1, 1) ); // 2

console.log( add(1) ); // 7

但是,注意啦!!

引用其他参数来为参数进行默认赋值时,仅允许引用前方的参数,因此前面的参数不能访问 后面的参数。

(默认值参数可以使用前面的参数,不能使用后面的参数.)

function getValue(value) {

    return value + 5;

}

function add(first = second, second) {

    return first + second;

}

console.log( add(1, 1) ); // 2

console.log( add(1) ); // NAN

console.log( add(1, 0) ); // 1

console.log( add(1, undefined) ); // NAN

console.log( add(undefined, 1) ); // 抛出错误

此处的无法访问后面的参数,就要查看“暂时性死区”这一概念.

上一篇 下一篇

猜你喜欢

热点阅读