es6重點理解

1.let,const

let:

特性：

1> 塊級作用域
//塊級作用域的出現，實際上使得獲得廣泛應用的立即執行函數表達式（IIFE）不再必要了

2> 不存在變量提升

3> 在let聲明之前，變量都是不可用的

const:
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

特性：

1> 塊級作用域

2> 聲明的常量不會提升，

3> 生命不賦值也會報錯，

4> 在const聲明之前，常量都是不可用的

2.rest: ...rest

相當於除已有形參之外的所有形參，

function fn(name,...rest) {
    console.log(name);//‘luyuan‘
    console.log(rest);//[1,2,3,4]
}
fn(‘luyuan‘, 1,2,3,4)

3.結構賦值（最外層的大括號表示塊級作用域）

對象解構：

{
    let obj = {
        a: [1,2],
        b: 3
    }
    const {a, b} = obj;
    console.log(a, b);
}

嵌套對象解構：

{
    let obj = {
        a: {
            d: 5,
            b: {
                c: 4
            }
        }
    }

    const {a: {d, b}} = obj;
    console.log(d,b.c);
}

數組結構：

let arr = [1, 2, 3]

//解構前2個元素
const [a, b] = arr
console.log(a,b) //1 2

調換兩個變量的值：

let a = 1,b = 2;

[a, b] = [b, a];

//實際解構過程，左邊的變量和右邊的數組元素一一對應下標。

不定元素解構：

let arr = [1,2,[3,45]];
//相當於克隆
let [...rest] = arr;

解構參數：

{
    function fn(area, infor) {
        let {name = 0, age = 18} = infor;
        console.log(area, infor);
    }
    fn(‘bj‘, {‘name‘: ‘luyuan‘, ‘age‘: 21});
}

4.String,Math,Object,Number,Array新的API

Number

//判斷一個值是否為NAN
Number.isNaN()

String

//includes() 用來查看是否包含數組中的相連的任意幾個 包含返回ture 不包含false
var str = ‘includes‘;
str.includes(‘includ‘) //true;

 

//startsWidth() 以字符串字母開頭(一個或兩個) 是返回ture 不是包含false
var str = ‘includes‘;
str.startsWidth(‘in‘) //true

 

//endsWidth 以字符串字母結尾(一個或兩個) 是返回ture 不是包含false

 

//repeat復制 定義幾個就會復制幾個

"abc".repeat(3) // "abcabcabc"

Array

//Array.from 復制一份
let arrs = Array.from(arr);

 

//Array.of 放到一個數組裏,類似於 new Array
Array.of(1, 2, 3);//[1,2,3]

fill

//1代表數組的下標，7代表從下標為1處及之後內容用7填充。
[0, 0, 0].fill(7, 1) // [0,7,7]
[0, 0, 0, 4, 6, 3, 4].fill(9, 3) // [0,0,9,9,9,9,9]

Object

//第一個參數為目標對象，後面的參數都是源對象。
var aa = { a: 1 };
var qq = { b: 2 };
var zz = { c: 3 };
var kk = Object.assign(aa, qq, zz);
console.log(kk === aa) //true

Math、Number、String 、Array、Object 的新 APIs

5.函數參數默認值

function test(name = ‘luyuan‘) {
    console.log(name);
}
等同於：
function test(name) {
    name = name || ‘luyuan‘
}

怎麽理解？

let foo = ‘outer‘;

function bar(func = x => foo) {
    let foo = ‘inner‘;
    console.log(func()); 
}
bar(); //inner


// bar的參數: func = x => foo
let func = function(x) {
    return foo;
}

6.對象屬性，方法的簡寫。

{
    function person(obj) {
        let {name = "ll", age = "18", sex = "girl"} = obj
        return {
            name,
            age,
            sex,
            sayHello() {
                console.log(‘hello‘);
            }
        }
    }
    console.log(person({"name": "luyuan", "age": 21, "sex": "boy"}));
}

7.Set

Set是類似於數組的一種新的數據結構，它是一個構造函數，類似於Array()，但是他不允許有重復值;

生成一個set

//可以接受一個數組，來初始化一個set，
let set = new Set([1,2,3,4,5,3,4,5]);//

//let set = new Set();
[1,2,3,4,5,3,5,6].forEach(x => set.add(x));

遍歷方法

keys()：返回鍵名的遍歷器（什麽是遍歷器？Iterator）
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回調函數遍歷每個成員

//for-of
for(let k of set.values()) {
    console.log(k);//1,2,3,4,5,6
}
for(let k of set.keys()) {
    console.log(k);//1,2,3,4,5,6
}
for(let k of set.entries()) {
    console.log(k);//1,2,3,4,5,6
}

//[...set]
[...set];//[1,2,3,4,5,6]

操作集合

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

//並集
let union = new Set([...a, ...b]); //{1, 2, 3, 4}

//交集
let intersect = new Set([...a].filter(x => b.has(x))); //{2, 3}

//差集
let difference = new Set([...a].filter(x => !b.has(x))); //{1}

8.class

class與語法糖

“語法糖”的意思是現有技術本可以實現，但是采用某種寫法會更加簡潔優雅。最常見的就是聲明對象采用的就是語法糖 var a={b:111}。
ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

例子：

{
　　//class People，類，它相當於構造函數和原型的集合，
　　class People {
　　　　//constructor相當於是es5中的構造函數
　　　　constructor(work, name){
　　　　　　this.name = name;
　　　　　　this.work = work;
　　　　　　//初始化方法
　　　　　　this.init();
　　　　}
　　　　//在原型上的方法，People類所有的實例都有
　　　　init() {
　　　　　　console.log(‘我的工作是‘ + this.work + ‘,‘ + ‘我叫‘ + this.name);
　　　　}
　　　　eat(area) {
　　　　　　console.log(this.name + ‘去‘ + area + ‘吃飯‘);
　　　　}
　　}
　　//extends，繼承類，它可以繼承People類中所有的屬性和方法。
　　class Student extends People{
　　//通過extends繼承的類稱為子類，他沒有自己的this對象，同樣是要繼承父類的this對象(即實例對象)
　　　　constructor(work, name, rank) {
　　　　　　//繼承父類的this對象，super(參數)必須放在首行，
　　　　　　super(work, name);
　　　　　　this.rank = rank;
　　　　　　this.getRank(rank);
　　　　}
　　　　getRank(rank) {
　　　　　　console.log(‘我是‘ + this.name + ‘,我的排名是‘ + rank);
　　　　}
　　}

　　let people = new People(‘develop‘, ‘people‘);
　　people.eat(‘酒店‘);
　　let student = new Student(‘study‘, ‘student‘, 1);
　　student.eat(‘食堂‘);
}

30分鐘掌握ES6/ES2015核心內容（上）

ES6的繼承機制，實質是先創造父類的實例對象this（所以必須先調用super方法），然後再用子類的構造函數修改this

9.async-await總結

1.async-await是解決異步回調最終的答案

async是generator和yield的語法糖，實現的功能都是相同的，只是實現的方式更方面了一些，代碼看上去優雅，可讀性好，

2.語法

async function asyncGrammer() {
    let result = await Math.random();
    console.log(result);
}
//返回一個Promise對象
asyncGrammer();

ES6系列文章 異步神器async-await

es6 學習筆記(二)