web開發學習總結之常用es6特性

1 let和const關鍵字

1. 1 let

ES5中只有var能夠定義變量，作用域是在function中。
ES6中可以用let來定義變量，定義是塊級作用域變量。

• 如果用let來引導循環，出了循環體就真的沒有定義了。

for(let i = 0; i < 10 ; i++) {
	//相當於在這裏定義了i
}
console.log(i);  //報錯

• 使用let，不再有變量聲明的提升。

console.log(a); //報錯
let a = 10; 

• let會引發暫時性死區。
  在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱爲“暫時性死區”（temporal dead zone，簡稱 TDZ）。

var m = 10;
function fun(){
	m = 20;  //報錯。函數在預解析階段會預讀所有的語句，發現了let語句，所以就將這個函數變爲了一個m的暫時性死區，此時m不允許在let前被賦值。
	let m;

	console.log(m);
}
fun();

1.2 const

const命令表示定義一個常量，不能被更改的量：

const pi = 3.14;
console.log(pi);
pi = 3.1415;  //報錯

但是可以指向一個引用類型值，對這個引用類型值的操作是允許的，但是不能允許指向別的值：

const arr = ["白板","幺雞","二條"];
arr.push("三筒");
console.log(arr);    // 合法，["白板","幺雞","二條","三筒"];

arr = ["王","王","2","2","2","2"];  //報錯，因爲arr是常量。

如果要凍結對象，用Object.freeze()

const arr = Object.freeze(["路飛", "索隆","布魯克"]);
console.log(arr);		//合法
arr.push("埼玉");		//報錯！因爲對象已經被凍結！

Object.freeze()只能凍結一層：

var obj = Object.freeze({"a" : 1 , "b" : 2 , "c" : ["J","Q","K"]});
obj.a = 44;		//沒有修改成功
obj.c.push("A");	//A成功推入了數組，因爲freeze只能凍結1層
console.log(obj);	//{"a" : 1 , "b" : 2 , "c" : ["J","Q","K","A"]};

1.3 其它

let和const定義的變量不會成爲window對象的屬性，

let a = 100;
var b = 200;
const c = 300;
alert(window.a);  //undefined
alert(window.b);  //200
alert(window.c);  //undefined

2 ES6中的解構

2.1 數組的解構

數組的解構，用[ ]。

var [a,b,c] = ["湯姆貓", "傑瑞鼠", "老闆娘"];
console.log(a);	// 湯姆貓
console.log(b); // 傑瑞鼠
console.log(c); // 老闆娘

2.2 對象的解構

對象的解構，用{ }。

var {name,age}  = {name :"老王" , age : 12};
console.log(name);	// 老王
console.log(age); // 12

2.3 …運算符

spread運算符和rest運算符其實都是三個點**…**。

2.3.1 spread運算符

spread運算符又叫擴展運算符。
功能是把數組或類數組對象展開成一系列用逗號隔開的值。

var [a, b, ...c] = ["Google", "Facebook", "Alibaba", "Tencent", "163"];
console.log(a);	// Google
console.log(b); // Facebook
console.log(c);	// ["Alibaba", "Tencent", "163"]

幾個常用用法。

//數組深拷貝
var arr1 = arr;
var arr2 = [...arr];
console.log(arr === arr1); //true, 說明arr和arr2指向同一個數組
console.log(arr === arr2); //false, 說明arr3和arr指向不同數組
 
//把一個數組插入另一個數組字面量
var arr3 = [...arr, 4, 5, 6];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
 
//字符串轉數組
var str = 'love';
var arr4 = [...str];
console.log(arr4); //[ 'l', 'o', 'v', 'e' ]

2.3.2 rest運算符

功能是把逗號隔開的值序列組合成一個數組。

// 1.主要用於不定參數，所以ES6開始可以不再使用arguments對象
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}
bar(1, 2, 3, 4); // 將別打印 1 2 3 4，即args=[1, 2, 3, 4]
 
bar = function(a, ...args) {
    console.log(a);	// 1
    console.log(args); // [2, 3, 4]
}
bar(1, 2, 3, 4);
　　
// 2.rest運算符配合解構使用：
var [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]

2.3.3 小結

總之，ES6中三個點“…”既可以用來把數組或類數組對象展開，也可以把逗號隔開的值序列組合成一個數組。具體是展開還是組合，看是賦值還是被賦值。

2.4 實際應用

• 函數參數自動解構

function fun([a,b]){
	console.log(a + b);
}

fun([4,7]);

• 形參列表使用…
  …將形參列表組合成數組（此時…表示rest運算符）。

function fun(...arr){
	let sum = 0;
	for(let i = 0 ; i < arr.length ; i++){
		sum += arr[i];
	}
	console.log(sum);
}
fun(1,2,3,4);

• 形參列表中對象的自動解構

function fun({shuxue, yuwen, yingyu}){
	console.log(shuxue + yuwen + yingyu);
}
var xiaoming = {"name" : "小明" , "age" : 12 , "shuxue" : 10 , "yuwen" :20 , "yingyu" :30};
fun(xiaoming); //60，在計算各個科目的總分。

• 更改變量名
  對於對象來說，還有一個k:v的解構模式，特別重要。
  冒號右邊的變量才真正的被賦值，冒號左邊的變量表示對象的屬性。

let obj = {"a" : 1 , "b" : 2};
let { a : n , b : m} = obj;
console.log(n);  //1
console.log(m);  //2
console.log(a);  //報錯
console.log(b);  //報錯

• …傳形參
  這裏…充當的是spread運算符或擴展運算符（就是把數組或對象拆開成一系列用逗號隔開的值）。

function fun(a,b,c){
	console.log(a);
	console.log(b);
	console.log(c);
}
var arr = [1,2,3];
fun(...arr); // 將依次輸出1， 2， 3

3 ES6中的字符串、數組的增強

3.1 字符串增強

includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。
repeat()：重複多少次
`：新增加的運算符，表示模板字符串，其中的字符串可以換行。

let str = "我愛北京天安門";
console.log(str.includes("北京"));   //true
console.log(str.startsWith("北京"));  //false
console.log(str.endsWith("天安門"));  //true
var str2 = "★".repeat(5);
console.log(str2); // ★★★★★

// 模板字符串
var a = 10;
var b = "高興";
var c = "手機";
var str = `好高興啊，我買了一個${c}，花了${a}元，我很${b}啊！`;
console.log(str);

3.2 數組增強

• Array.from()可以將類數組對象變爲數組：

let obj = {
	"0" : "湯姆貓",
	"1" : "傑瑞鼠",
	"2" : "老闆娘",
	length : 3
};
let arr = Array.from(obj);
console.log(arr); // [ "湯姆貓", "傑瑞鼠"， “老闆娘”]

• Array.of方法用於將一組值，轉換爲數組。

var arr = Array.of(1,2,3);
console.log(arr); // [1, 2, 3]

• ind()、findIndex()
  尋找數組中是否有某項find()、findIndex()，裏面要放置回調函數。
  需要注意的是，裏面的回調函數的三個參數分別是項、編號、數組本身。

機理是JS會測試每一個項目，返回第一個返回true的項。

var arr = [3,4,5,34,34,324,342,43,23,30,60,45,34,53];
var item = arr.find(function(value,index,arr){
	if(value % 5 == 0 && value % 6 == 0){
		return true;
	}
});
console.log(item);  //30

返回第一個返回true的下標項，用findIndex，如果沒有一個項目返回true的函數，此時就會顯示-1。

var arr = [3,4,5,34,34,324,342,43,23,30,60,45,34,53];
var item = arr.findIndex(function(value,index,arr){
	if(value % 5 == 0 && value % 6 == 0){
		return true;
	}
});
console.log(item);  //9

• for of 遍歷
  增加了一種數組的遍歷方法，叫做for of遍歷。通常配合arr.entries()和arr.key()來使用。

let arr = [ "湯姆貓", "傑瑞鼠", "老闆娘" ];
for(let v of arr){
	console.log(v); // 輸出 "湯姆貓" "傑瑞鼠" "老闆娘"
}

let arr = [ "湯姆貓", "傑瑞鼠", "老闆娘" ];
for(let [k,v] of arr.entries()){
	console.log(k,v);
}
// 0， "湯姆貓"
// 1， "傑瑞鼠"
// 2， "老闆娘"

• includes()
  返回一個布爾值，判斷數組中是否有某個項。現在終於不用遍歷整個數組來驗證某一個項目是否存在了。

4 ES6中的對象的增強

• 如果kv一致，此時可以省略v

let a = 100;
let obj = {
	a ,
	b : 200,
	c : 300
};
console.log(obj);

• 合併對象

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}

• 得到對象的所有鍵

var obj = {"a" : 1 , "b" : 2 , "c" : 3};
console.log(Object.keys(obj));

5 ES6中的Symbol類型

S6引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是JavaScript語言的第七種數據類型，前六種是：Undefined、Null、布爾值（Boolean）、字符串（String）、數值（Number）、對象（Object）。

6 ES6中的Set和Map數據結構

Set是不能有重複項的集合，Map是可以用引用類型值當做key的對象。

ES6 提供了新的數據結構 Set。它類似於數組，但是成員的值都是唯一的，沒有重複的值。

實例化的時候就可以直接傳入數組，此時類似數組的去重。

let s = new Set([1,1,1,1,1,2,2,2,2]);
console.log(s);   // Set{1,2}
for(let v of s){   
	console.log(v);   //1，2
}
console.log([...s]);   //[1,2] 

這是數組去重的最快的方法。

let arr = [1,23,34,3,3,3,324,23,3,34,34,324];
arr = [...new Set(arr)]
console.log(arr);

size屬性表示集合的長度。
new Map()的時候用數組表示映射關係，語法如下：

var xiaoming = {"name" : "小明" , "age" : 12 , "sex" : "男"};
var xiaohong = {"name" : "小紅" , "age" : 13 , "sex" : "女"};
var xiaoqiang = {"name" : "小強" , "age" : 14 , "sex" : "男"};

var m = new Map([
	[xiaoming , "好人"],
	[xiaohong , "壞人"],
	[xiaoqiang , "好人"]
]);

m.set(xiaoqiang,"壞人");  //設置xiaoqiang對象映射到"壞人"
console.log(m.get(xiaoming)); // 好人

7 ES6中的Promise對象

Promise具體的詳解見這篇文章

8 ES6中的類的定義

直接看例子。

class People{
	constructor(name,age,sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
	} // 注意這裏沒有分號喲！
	sayHello(){
		console.log(`你好，我是${this.name}，今年${this.age}歲了`);
	}
}

class Student extends People{
	constructor(name,age,sex,xuehao,banji){
		super(name,age,sex); // super關鍵字，和java一樣
		this.xuehao = xuehao;
		this.banji = banji;
	}
	xuexi(){
		console.log(`我是${this.name}，我正在學習，我是${this.xuehao}啊`);
	}
}

var xiaoming = new Student("小明",12,"男",1000,"一年級1班");
xiaoming.xuexi();
xiaoming.sayHello();

ES6並沒有深化“繼承”的概念，還是用我們的“prototype”來實現繼承（原型鏈）。類其實是一個語法糖。

console.log(xiaoming.__proto__.__proto__ === People.prototype);  //true

9 ES6中的箭頭函數

lambda表達式。和C#類似。
特別注意的是箭頭函數中的this是在定義時就已經確定好了，以後都不會再改變。即使你使用call，apply，箭頭函數中的this依然不變。

注意：
（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
（3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

var fun = () => {
	console.log(this.a);
}

var obj = {
	a : 100,
	f : fun
}
obj.f();   //undefined
obj.f.call(obj);  //undefined
obj.f.apply(obj);  //undefined

也就是說fun()在運行的時候，裏面的this永遠不等於obj。而是永遠等於window對象（在瀏覽器環境中），或者是空對象（在NodeJS環境中）。