春风得意马蹄疾
一日看尽长安花

ES6函数扩展:参数默认值、rest参数、扩展运算符

ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值、rest参数、扩展运算符和箭头函数

参数默认值

一般的,为参数设置默认值需要如下设置

function log(x,y){
    y=y||'world';
    console.log(x,y);
}

但这样设置实际上是有问题的,如果y的值本身是假值(包括false、undefined、null、""、0、-0、NaN),则根本无法取本身值

function log(x,y){
    y=y||'world';
    console.log(x,y);
}
log('hello');//hello world
log('hello','China');//hello China
log('hello',NaN);//hello world

ES6允许为函数的参数设置默认值,即直接写在参数定义的后面

function log(x,y='world'){
    console.log(x,y);
}
log('hello');//hello world
log('hello','China');//hello China
log('hello',NaN);//hello NaN

注意:参数变量是默认声明的,所以不能使用let或const再次声明

function fn(x=5){
    let x=1;  //Identifier 'x' has already been declared
    const x=2; //Identifier 'x' has already been declared
}

尾参数

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样容易看出来到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的

function fn(x=1,y){
    return [x,y];
}
console.log(fn());//[1,undefined]
console.log(fn(2)); //[2,undefined]
console.log(fn(2,1));//[2,1]
console.log(fn(undefined,1));//[1,1]

如果传入undefined,将触发该参数等于默认值,Null没有这个效果

function fn(x=1,y){
    return [x,y];
}
console.log(fn(null,1));//[null,1]

length

指定了默认值后,函数的length属性,将返回没有指定默认值的参数个数

console.log((function(a){}).length);//1
console.log((function(a=5){}).length);//0
console.log((function(a,b,c=5){}).length);//2

注意:如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了

console.log((function(a=5,b,c){}).length);//0
console.log((function(a,b,c=5){}).length);//2

作用域

【1】如果参数默认值是一个变量,则该变量所处的作用域,与其他变量的作用域规则是一样的,即先是当前函数的作用域,然后才是全局作用域

var x = 1;
function f(y = x) {
  console.log(y);
}
f(2) // 2

【2】如果函数调用时,函数作用域内部的变量x没有生成,则x指向全局变量

var x = 1;
function f(y = x) {
  var x = 2;
  console.log(y);
}
f() // 1

rest参数

ES6引入rest参数(形式为"...变量名"),用于获取参数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中

function add(...values){
    var sum=0;
    for(var val of values){
        sum+=val;
    }
    return sum;
}
console.log(add(2,5,3)); //10

rest参数是一个数组,所以数组特有的方法都可以用于这个变量

下面是一个利用rest参数改写数组push方法的例子

function push(arr,...values){
    values.forEach(function(item){
        arr.push(item)
        });
}
var arr=[];
push(arr,1,2,3);
console.log(arr);//[1,2,3]

函数的length属性不包括rest参数

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

注意:rest参数之后不能有其他参数

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

扩展运算符

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])// 1 2 3
console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5

该运算符主要用于函数调用

function add(x,y){
    return x+y;
}
var arr=[1,2];
console.log(add(...arr));//3

Math.max方法简化

// ES5
Math.max.apply(null, [14, 3, 77])

// ES6
Math.max(...[14, 3, 77])

//等同于
Math.max(14, 3, 77)

push方法简化

// ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

扩展运算符可以将字符串转为真正的数组

[...'hello']// [ "h", "e", "l", "l", "o" ]

箭头函数

关于箭头函数的详细介绍请点此文章

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » ES6函数扩展:参数默认值、rest参数、扩展运算符
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x