ES6入門

會飛的Tiger發表於2017-05-12

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年釋出的，所以又稱ECMAScript 2015。但是現在越來越多的人開始使用ES6。

ES6申明語法

　　let 表示宣告一個變數，和var類似

　　const 表示申明一個常量，常量不可被修改，相當java裡的 static final 。

 

let a = 3;
const b = 3;

 a = 2;
console.log(a);            // 2        

b = 2;
console.log(b);            // 報錯：Uncaught TypeError: Assignment to constant variable.

 

 

變數的解構賦值

解構賦值的原則是:只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值,所以宣告時，只要左右兩邊結構相同就可以賦值。

let [a,b] = [1,2];    
console.log(a,b);        // 1,2

　let [[a],[[b],c]] = [[1],[[2],3]];
　console.log(a,b,c);　　　　//  1,2,3

 

ES6的塊級作用域

用let所宣告的變數，只在let命令所在的程式碼塊內有效。

 

{
    let a = 0;
    var b = 0;
}
 
console.log(b);         // 0
console.log(a);        // Uncaught ReferenceError: a is not defined(…)

 function f1() {
 　　let n = 5;
 　　if (true) {
 　　　　let n = 10;
 　　}
 　　console.log(n); 　　//  5　　用let申明
}

 function f1() {
 　　var n = 5;
 　　if (true) {
 　　　　var n = 10;
 　　}
 　　console.log(n); 　　//     10　　用var 申明
}

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 　　10　　　　用var 申明

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 　　6　　用let申明

還有要注意的是:使用let宣告的變數，在域解析的時候不會被提升。
console.log(a);
var a = 10;　　　　// 10

console.log(b);
let b = 10;　　　　//Uncaught ReferenceError: b is not defined(…)

 

 

arrowfunction 箭頭函式

語法：()=>{}  ,  {}裡面表示的是返回值

特性：

　　函式內建 this 的值，取決於箭頭函式在哪兒定義，而非箭頭函式執行的上下文環境。

　　沒有arguments物件

let a = ()=>{};
console.log(a);    // undefined

　let a = ()=>{
　　　return 5;
　};
　console.log(a());　　// 5

 

函式內建 this 的值，取決於箭頭函式在哪兒定義，而非箭頭函式執行的上下文環境這句話怎麼理解？

示例1

let a = {
　　name :'make'
}
a.b = function(){
　　let a = ()=>{　　　　// 這裡用箭頭函式
　　　　console.log(this);　　// Object {name: "make"}
　　　　return this;
　　}
　　return a();
}
a.b();

示例2

let a = {
　　name :'make'
}
a.b = function(){
　　let a = function(){　　　　// 這裡用function
　　　　console.log(this);　　// window物件
　　　　return this;
　　}
　　return a();
}
a.b();

類 class

　　其他語言不清楚，但如果你對java有那麼一點研究，你會發現，類的宣告，extends,super 方法和java幾乎沒什麼區別。

　　constructor  構造方法
　 extends 　　　繼承
　 super           關鍵字，它指代父類的例項（即父類的this物件）；
class Animal{　　　　// 申明一個動物類
    constructor(name){　　　　// 動物類的構造方法
        this.name = name;　　// 給動物類取個名字
    }
    say(){　　　　　　　　　　// 動物都會說話
        console.log(this.name + "說話了");
    }
}
let tiger = new Animal("tiger");　　// 例項化一個動物類，傳入一個名稱
tiger.say();　　　　　　　　　　　　　　//  tiger說話了  
class Cat extends Animal{　　　　　　// 有個Cat類繼承了動物類，就擁有動物類所有的方法 
    constructor(name){
        super();
        this.name = name;
    }
}
let cat = new Cat("cat");
cat.say();

Set 和Map 

　 set介紹

　　Set 是 ES6 新增的有序列表集合，它不會包含重複項。之前我們通常用物件（Object）或者陣列（Array）來實現沒有重複項的集合。

let c = new Set([1,2,3]);　　
console.log(c);　　// 1,2,3
c.add("b");　　　　// 1,2,3,b
c.delete("b");　　// 1,2,3　　
c.has("b");　　　　// flase
c.size;　　　　　　// 3
console.log(c.keys());　　// 1,2,3,
console.log(c.values());　　// 1,2,3
c.forEach(function(key,value,set){
    console.log(value + "," + key);　　// {1,1}{2,2}{3,3}
});
add(value)      新增某個值
delete(value)   刪除value這個值
size()　　　　　　返回集合的個數
has(value)　　　 判斷是否包含某個值
set.key() 　　　 返回所有的key值
set.value()　　　返回所有的vlue值
forEach(key,value,set)　　第一個引數為key,第二個為value,第三個為迴圈的型別

　　

　　這裡介紹一個陣列去重的方法

　　原理是set集合會過濾掉重複的值。

　　new Set(Array);

let a = [1,2,3,1];
let b = new Set(a);
console.log(b);    // 1,2,3

　　Map介紹

　　首先map物件是一個簡單的鍵/值對映。任何值（包括物件和原始值）都可以用作一個鍵或一個值。

let map = new Map([ ['a',1],['b',2] ]);
console.log(map);　　　// Map {"a" => 1, "b" => 2}
map.set('chen',22).set('zhou',22);
console.log(map);　　　　//Map {"a" => 1, "b" => 2, "chen" => 22, "zhou" => 22}
console.log(map.get('chen'));　　// 22
map.delete('zhou');
console.log(map.has('chen'));　　//true
console.log(map.size);　　　　　　// 3
console.log(map.values());　　　　　　　　　　//MapIterator {1, 2, 22}
console.log(map.keys());　　　　　　　　　　// MapIterator {"a", "b", "chen"}
map.forEach(function(value,key,map){
    console.log(value + "," + key);　　　　//1,a; 2,b;22,chen
});
set(key,value)　　　　新增一個鍵值對
get(key)　　　　　　　 獲取key值對應的value
delete(key)　　　　　　刪除某個值
has(key)　　　　　　　 判斷是否包含某個值
size()　　　　　　　　　返回map的長度
keys()　　　　　　　　　返回所有的key
values()　　　　　　　　返回所有的value
foreach(key,value,map)　　通set類似




template string　


主要用來連線字串




平時的寫法　
$(".box").append("<img src=" + urlSrc + ">");
ES6的寫法
$(".box").append("<img src=${urlSrc}>");




不需要去拼接，${}裡面存放一個變數。




相關文章