1. 程式人生 > >es6 --函式的擴充套件

es6 --函式的擴充套件

一、函式引數預設值

//es6之前的做法
function log(x,y){
    var y=y||'world';
    console.log(x,y);
}
log('hello'); // hello world
log('hello',0); //hello world

**:這種寫法 當引數y賦值為false時,此時預設值就有效。這可能並不是我們想要的。 你可能會做如下改進:

function log(x,y){
    if(arguments.length==1){
        y='world';
    }
    console.log(x,y);
}

讓我們感受下es6的寫法:

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

 2.與解構預設值結合使用

此時我們一定要傳入物件,不傳則就會報錯。

function log({x,y=5}){
    console.log(x,y);
}
log({}); //undefiend 5
log({1,2}) // 1 2
log(); //報錯 

3.作用域

 如果引數預設值是一個變數,則該變數所處的作用域與其他變數的作用域規則是一樣的,即先是當前函式的作用域,然後才是全域性的作用域。

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

//如果呼叫時函式作用域內部的變數x沒有形成。

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

 

二、rest引數

形式如(... 變數名)用於獲取函式的多餘引數。將多餘的引數放到一個數組中。

function add(...values){
    let sum=0;
    values.forEach(function(item){
        sum+=item;
    });
    return sum;
}
add(2,3,5);

 

三、擴充套件運算子

擴充套件運算子是三個點(...)。

//陣列轉換數值

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

代替apply方法

//求最大值 在es5中的寫法
Math.max.apply(null,[12,19,22]);

//es6
Math.max(...[12,19,22]);

//轉換類陣列物件

var nodeList=document.getElementsByTagName('div');
//es5
var arr=Array.prototype.slice.apply(null,nodeList);

//es6
var arr1=[...nodeList];
var arr1=[1,2];
var arr2=[3,4,5];
var arr3=[19,21,22];

//es5中
arr1.concat(arr2,arr3);

//es6中
[...arr1,...arr2,...arr3]

 

四、箭頭函式

1.箭頭函式一般用於回撥中,this指向外層函式。

2.不可以當作建構函式。不能使用new命令。

3.不可以使用arguments物件。該物件在函式體內不存在。

4.不能用作Generator函式

//用於回撥函式中  es5

var arr=[1,2,3,4,5];
arr.some(function(item){
    return item>0;
});

//es6
arr.some((item)=>{return item>0;})

this總指向外層函式。 

		var handle={
			id:0,
			init:function(){
				console.log('init',this.id++);
				return ()=>{
					console.log('箭頭函式 this',this.id);
				}
			}
		}
		handle.init()();

 自身沒有arguments,super

function foo(){
    setTimeout(()=>{
        console.log('arguments:',arguments);
    },1000);

}
foo(1,2,34,2);
//arguments: [1,2,34,2]