函數的擴充
es6可以與解構指派預設值結合使用，直接為函數的參數指定預設值。
function fn(x, y=123){ // 函數裡的參數可以設定預設值
console.log(x, y)
}
fn(1, 3) //1, 3
fn(1,) //1, 123
function fn({ x=666, y=999 }){
console.log(x, y)
}
fn({}) //666, 999
fn(1, 2) //666, 999 //這種情況會使用預設值
//Cannot read property 'x' of undefined
fn() //報錯
函數的 length 屬性
指定了預設值後，
length
屬性将失真。
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
- fn.length 傳回形參個數
- arguments.length 傳回實參個數
rest 參數
ES6 引入 rest 參數（形式為
...變量名
），用于擷取函數的多餘參數，代替
arguments
對象。
arguments
對象不是數組，而是一個類似數組的對象。是以為了使用數組的方法，必須使用
Array.prototype.slice.call
先将其轉為數組。
rest 參數就是一個真正的數組，數組特有的方法都可以使用。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
箭頭函數
基本用法
var f = a => a;
//上面的箭頭函數等同于
var f = function(a) {
return a;
};
如果箭頭函數不需要參數或需要多個參數，就使用一個圓括号代表參數部分。
var a = () => 1;
// 等同于
var a = function () { return 1 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭頭函數直接傳回一個對象，必須在對象外面加上括号。
// 報錯
let getTempItem = id => { id: id, name: "byu" };
// 不報錯
let getTempItem = id => ({ id: id, name: "byu" });
箭頭函數使用注意點
箭頭函數轉成 ES5 的代碼如下。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
//轉換後的 ES5 版本清楚地說明了，箭頭函數裡面根本沒有自己的this，而是引用外層的this。
由于箭頭函數沒有自己的
this
，是以當然也就不能用
call()
、
apply()
、
bind()
這些方法去改變
this
的指向。
數組的擴充
判斷數組與類數組
//typeof是無法判斷出數組與類數組的
console.log(typeof divs) //Object
console.log(typeof arr) //Object
let divs = document.getElementsByTagName('div')
let arr = []
//第一種方法：instanceof 能夠判斷出數組與類數組
console.log(arr instanceof Array) //true
console.log(divs instanceof Array) //false
//第二種判斷方法：判斷他們的構造器
console.log(arr.constructor === Array)
console.log(divs.constructor === Array)
//第三種判斷方法：判斷對象中的字元串方法是否為[object Array]
console.log(Object.prototype.toString.call(arr) === "[object Array]")
console.log(Object.prototype.toString.call(divs) === "[object Array]")
//第四種方法：根據es6中isArray的API來進行判斷
console.log(Array.isArray(arr))
console.log(Array.isArray(divs))
将類數組轉為數組
let divs = document.getElementsByTagName('div')
let arr = []
Array.from(divs)
//或者
[...divs]
類數組中沒有forEach方法，隻能先轉為數組之後再周遊
Array.from(divs).forEach((val, idx, self) => {
console.log(val)
})
function foo(a, b, c){
console.log(arguments) //arguments為類數組
}
find()、findIndex()
find()用于找出第一個符合條件的數組成員
它的參數是一個回調函數，所有的數組成員依次執行這個回調函數，直到找出第一個傳回值為true的成員。
如果沒有符合條件的成員，則傳回undefined。
let arr = [1, 2, 3, 44, 222]
console.log(arr.find(val => val > 20))
findIndex方法與find方法很類似，傳回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則傳回-1。
let arr = [1, 2, 3, 44, 222]
console.log(arr.findIndex(val => val < 5)）
for … of和for … in
for … of 拿到的是值且不可以對json進行周遊。
let arr = ["a", "f", "e", "o"]
for(let key of arr){
console.log(key) //a,f,e,o
}
for … in 周遊的是數組的項，若用于周遊json，則周遊的是對象的鍵。
let arr = [1, 2, 3, 44, 222]
for(let key in arr){
console.log(key) //0,1,2,3
}
keys()和values()
keys()和values()都用于周遊數組 ，他們都傳回一個周遊器對象，可以用for…of循環進行周遊。
唯一的差別是keys()是對鍵名的周遊；values()是對鍵值的周遊；entries()是對鍵值對的周遊。
let arr = Array.from(btns)
console.log(arr) //[button, button, button, button, button]
for(let key of arr.keys()){
console.log(key) //0,1,2,3,4
}
for(let key of arr.values()){
console.log(key ) //<button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button>
}
for(let key of arr.entries()){
console.log(key) //[0, button],[1, button],[2, button],[3, button],[4, button]
}
合并數組
//方法一
let a = []; let b = []
let c = a.concat(b)
//方法二
let c = [...a, ...b] //rest擴開運算
![ES6-字元串-數值[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)