es6 --函式的擴充套件
阿新 • • 發佈:2018-11-12
一、函式引數預設值
//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]