es6

ES6

簡介：

ES6（es2015）, ES7（es2016）

經常使用命令行：

切換盤e:

進入文件夾cd test

返回上一級目錄cd..

es6實時編譯成es5

使用compile

一、使用在線compile：

https://www.tslang.cn/play/index.html

二、使用本地編譯器compile

 

 

 

 

 

 

 

 

npm -v //檢查你電腦是否安裝了node，是否有npm

npm install -g typescript //全局安裝typescript

tsc -v//檢查tsc（typescript簡寫）的版本號看是否安裝好

 

 

新建ts文件 test.ts

命令行找到ts文件位置，執行下面命令，就會發現js文件自動生成了

 

 

 

xxxxxxxxxx

 

 

 

 

tsc test.ts

 

 

三、使用webstorm實時編譯

前提是的安裝compile=》依賴babel

一、在webstorm中新建一個ts文件，

二、輸入內容時，webstorm頂部會出現一行提示：Compile Typescript to Javascript? OK NO cONFIGURE/

三、點擊OK

label能夠轉的

聲明let,const，箭頭函數，class

label不能夠轉的

Symbol，Array.from

變量聲明

let

做用：與var相似，用於聲明一個變量

特色：

• 在塊做用域內有效
• 不能重複聲明
• 不會預處理，不存在變量提高

應用：

• 循環遍歷加監聽（用for循環綁定點擊事件，事件處理函數內使用for 的變量）
• 使用let取代var是趨勢

const

做用：定義一個常量

特色：

• 常量不能修改
• 其餘特色同let

應用：保存不用改變的數據

解構賦值

從對象或數組中提取數據，並複製給變量（多個）

對象的解構賦值

變量名必定要對應對象的屬性名

 

 

 

xxxxxxxxxx

 

 

 

 

let { n,a } = { n:'tom',a:12};

console.log(n,a);

 

 

 

 

 

xxxxxxxxxx

 

 

 

 

let obj = { name:'Lily',age:18 ,sex:'女'};

let { name,age } = obj;

console.log(name,age);

 

 

數組的解構賦值

變量名和數組下標對應

 

 

 

xxxxxxxxxx

 

 

 

 

let arr = [1,2,3,5];

let [,a,b,c] = arr;//不須要的用逗號佔位置

console.log(a, b,c);

 

 

解構函數中的參數

 

 

 

xxxxxxxxxx

 

 

 

 

let obj = { name:'Lily',age:18 ,sex:'女'};

function foo({name,sex}) {  //進行解構賦值

    console.log(name, sex);

}

foo(obj);

 

 

模板字符串

簡化字符串的拼接

1. 模板字符串必須用``包含
2. 變化的部分使用${xxx}定義

 

 

 

xxxxxxxxxx

 

 

 

 

let obj = { name:'Lily',age:18 ,sex:'女'};

let str1 = '個人名字叫'+obj.name+',個人年齡是'+obj.age; //es5的寫法

let str2 = `個人名字叫${obj.name},我得年齡是${obj.age}`;//es6的寫法

 

 

簡化的對象寫法

• 對象的屬性簡寫
• 對象的方法簡寫

 

 

 

xxxxxxxxxx

 

 

 

 

let name = 'Lily';

let age = 18;

let obj = {

    name,//同名的屬性能夠省略

    age,

    getName() {//能夠省略函數的function

        return this.name

    }

};

console.log(obj);

console.log(obj.getName());

 

 

箭頭函數

小括號

• 沒有形參小括號不能省略

 

 

 

xxxxxxxxxx

 

 

 

 

let fun = ()=> console.log('我是箭頭函數');

fun();

 

 

• 只有一個形參時，小括號能夠省略

 

 

 

xxxxxxxxxx

 

 

 

 

let fun = a => console.log(a);

fun(5);

 

 

• 兩個及兩個以上的形參的時候 （）不能省略

 

 

 

xxxxxxxxxx

 

 

 

 

let fun = (a,b) => console.log(a+b);

fun(5,10);

 

 

大括號

• 函數體只有一條語句或者是表達式的時候{}能夠省略，反之不能夠省略
• 而且會自動返回語句執行的結果或表達式的結果

 

 

 

xxxxxxxxxx

 

 

 

 

let fun = (a,b) => a+b;

console.log(fun(5, 10));

 

 

this

箭頭函數內的this指向取決於所處的環境，es5中的this指向取決於調用的對象

this,能夠簡單地看 () 外層的this指向誰，函數體內的this就指向誰

如下案例能夠助你理解；

 

 

 

xxxxxxxxxx

 

 

 

 

let obj = {

    name:'箭頭函數',

    getName:function () {

        console.log(this);//obj 普通function函數，this指向調用該函數時的obj

        btn2.onclick = ()=>{

            console.log(this);//obj 箭頭函數，this指向 同於 ()外部的this

        }

    }

};

obj.getName()

 

 

 

 

 

xxxxxxxxxx

 

 

 

 

let obj = {

    name:'箭頭函數',

    getName: ()=> {

        console.log(this);//window 箭頭函數，this指向 同於 ()外部的this,此處外部就是obj所處的全局window

        btn2.onclick = ()=>{

            console.log(this);//window 箭頭函數，this指向 同於 ()外部的this

        }

    }

};

obj.getName()

 

 

...運算符

函數形參中的應用

 

 

 

​x

 

 

 

 

function foo(...value) {

    console.dir(arguments); //是僞數組，不能用forEach遍歷

    console.dir(value);  //是真數組，不能用forEach遍歷

    value.forEach(function (item,index) {

​

    })

}

foo(1,2)

 

 

 

 

 

xxxxxxxxxx

 

 

 

 

function foo(a,...value) {

    console.dir(a); //1

    console.dir(value);  //去掉a以外的後面的參數

    value.forEach(function (item,index) {

​

    })

}

foo(1,2,3)

 

 

數組中的應用

 

 

 

xxxxxxxxxx

 

 

 

 

let arr = [1,6];

let arr1 = [2,3,4,5];

arr = [1,...arr1,6];

console.log(arr);       //[1, 2, 3, 4, 5, 6]

console.log(...arr);    //1 2 3 4 5 6

 

 

形參默認值

 

 

 

xxxxxxxxxx

 

 

 

 

function Point(x=0,y=0) { //給形參設置默認值,用於調用時未傳參時生效

    this.x = x;

    this.y = y;

}

let point = new Point(23,35);

let point2 = new Point();

console.log(point2);

 

 

Promise對象

實測發現：promise會報錯，估計暫不支持

Promise三個狀態

• pending：初始化狀態
• fullfilled：成功狀態
• rejected：失敗狀態

promise應用

• 實現超時處理
• ajax異步請求

使用promise的基本步驟

一、建立對象

 

 

 

xxxxxxxxxx

 

 

 

 

var promise = new Promise((resolve,reject)=>{

        /*初始化promise狀態：pending：初始化*/

​

       /*執行一步操做，一般是ajax請求， 開啓定時器*/

       setTimeout(()=>{

           /*根據異步任務的返回結果去修改promise的狀態*/

​

           /*異步任務執行成功會執行的函數*/

           resolve('哈哈');//修改promise的狀態爲fullfilled：成功的狀態

​

           /*異步任務執行失敗會執行的函數*/

           reject('嘿嘿');//修改promise的狀態爲rejected：失敗的狀態

​

       },2000)

   });

 

 

二、調用then方法

 

 

 

xxxxxxxxxx

 

 

 

 

 /*外部調用，避免層層嵌套*/

promise.then((res)=>{

    console.log(res+'成功了');

},(res)=>{

    console.log(res+'失敗了');

});

 

 

三、改良後使用

 

 

 

xxxxxxxxxx

 

 

 

 

 function ajax(type,url) {

     var promise = new Promise((resolve,reject)=>{

        var xmlHttp = new XMLHttpRequest();

         xmlHttp.onreadystatechange = function () {

             console.log(xmlHttp.readyState);

             /*此處會執行4次，readyState=1,2,3,4*/

             if(xmlHttp.readyState === 4 && xmlHttp.status === 200){

                 resolve(JSON.parse(xmlHttp.responseText));//成功執行

             }else {

                 /*此處會執行3次，readyState=1,2,3*/

                 reject(JSON.parse(xmlHttp.responseText));//失敗執行，

             }

         };

         xmlHttp.open(type,url,false);

         xmlHttp.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded');

         xmlHttp.send();

     });

     return promise

 }

 /*外部調用，避免層層嵌套，第一個回調成功狀態，第二個回調失敗執行*/

 ajax('get','https://iqiyi.yscase.com/gugong/api').then((res)=>{

    console.log(res);

},(res)=>{

    console.log(res);

});

 

 

四、鏈式回調

 

 

 

xxxxxxxxxx

 

 

 

 

function ajax(type,url) {

    let promise = new Promise((resolve,reject)=>{

​

        setTimeout(function () {

            resolve(111);

        },1000)

    });

    return promise

}

/*外部調用，避免層層嵌套，第一個回調成功狀態，第二個回調失敗執行*/

ajax('get','https://iqiyi.yscase.com/gugong/api/aaa.php').then((res)=>{

    console.log(res);

    var url = 'https://iqiyi.yscase.com/gugong/api/bbb.php';

    /*再請求返回一個，實現鏈式寫法*/

    return ajax(url)；

​

},(res)=>{

​

}).then(()=>{//鏈式寫法：第二個請求回調

​

},()=>{

​

});

 

 

Symbol

es6添加的一種原始數據類型

已有的數據類型：numble，string，boolean，undefined，null，對象

特色

• Symbol屬性對應的值是惟一的，解決命名衝突問題
• Symbol值不能與其餘數據進行計算，包括同字符串拼接
• for in，for of遍歷時不會被遍歷Symbol屬性

使用

一、傳參標誌，只要是symbol類型，都不相等

 

 

 

xxxxxxxxxx

 

 

 

 

let symbol1 = Symbol('111');

let symbol2 = Symbol('111');

console.log(symbol1);

console.log(symbol2);

console.log( symbol1 === symbol2);  //不相等，

 

 

二、Symbol做爲對象的屬性名

 

 

 

xxxxxxxxxx

 

 

 

 

let symbol1 = Symbol();//沒有參數的

let symbol2 = Symbol('111');//有參數的

let obj = {};

obj[symbol1] = 'hello';//做爲屬性名

obj[symbol2] = 'my';

console.log(obj);

 

 

三、內置Symbol值

除了定義本身使用的Symbol值之外，WS6還提供了11個內置的Symbol值，指向語言內部使用的Symbol

Iterator

做用：

• 一是爲各類數據結構，提供一個統一的、簡便的訪問接口；
• 二是使得數據結構的成員可以按某種次序排列；
• 三是 ES6 創造了一種新的遍歷命令for...of循環，Iterator 接口主要供for...of消費

Iterator的遍歷過程

1. 建立一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。
2. 第一次調用指針對象的next方法，能夠將指針指向數據結構的第一個成員。
3. 第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。
4. 不斷調用指針對象的next方法，直到它指向數據結構的結束位置。

每一次調用next方法，都會返回數據結構的當前成員的信息。具體來講，就是返回一個包含value和done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。

如下模擬next方法返回值的例子

 

 

 

xxxxxxxxxx

 

 

 

 

var it = makeIterator(['a', 'b']);

​

it.next() // { value: "a", done: false }

it.next() // { value: "b", done: false }

it.next() // { value: undefined, done: true }

​

function makeIterator(array) {

  var nextIndex = 0;

  return {

    next: function() {

      return nextIndex < array.length ?

        {value: array[nextIndex++], done: false} :

        {value: undefined, done: true};

    }

  };

}

 

 

for of

• 將Iterator接口部署到指定的數據類型上，可使用for of去循環遍歷
• 有Iterator接口的數據類型：字符串，數組，arguments，sex容器，map容器
• 對象Object沒有

做用

1. 遍歷數組
2. 遍歷set
3. 遍歷Map
4. 遍歷字符串
5. 遍歷僞數組

Generator函數

概念：

1. 是 ES6 提供的一種異步編程解決方案，語法行爲與傳統函數徹底不一樣。
2. Generator 函數是一個狀態機，封裝了多個內部狀態。
3. 是一個遍歷器對象生成函數。返回的遍歷器對象，能夠依次遍歷 Generator 函數內部的每個狀態。
4. 可暫停函數（惰性求值），yield可暫停，next方法可啓動。每次返回的是yield後的表達式結果

 

 

 

xxxxxxxxxx

 

 

 

 

function* helloWorldGenerator() {

  yield 'hello';

  yield 'world';

  return 'ending';

}

var hw = helloWorldGenerator();

 

 

特色：

1. function關鍵字與函數名之間有一個星號；
2. 函數體內部使用yield表達式，定義不一樣的內部狀態（yield在英語裏的意思就是「產出」）。
3. next傳的參就是啓動時yield的回調，yield的默認回調是undefined

 

 

 

xxxxxxxxxx

 

 

 

 

function* myGenerator(){

    console.log('開始');

    let aaa = yield 'hello';

    console.log(aaa);//aaaaaaaaa  next傳的參就是啓動時yield的回調，

    console.log('暫停後，再次執行');

    yield 'generator';

    return 'bbb'

}

let MG = myGenerator();

console.log(MG);//遍歷器對象

console.log(MG.next());//{value: "hello", done: false}

console.log(MG.next('aaaaaaaaa'));//{value: "generator", done: false}

console.log(MG.next());//{value: "bbb", done: true}

 

 

給object添加iterator接口

 

 

 

xxxxxxxxxx

 

 

 

 

var obj = { name : '嶽想玲', age:'27' };

console.log(obj);

obj[Symbol.iterator] = function* () {

    yield 1;

    yield 2;

    yield 3;

};

console.log(obj);

for(var i of arr){

    console.log(i);

}

 

 

應用在異步請求中

 

 

 

xxxxxxxxxx

 

 

 

 

function gotoOauch(url,data) {

    $.ajax({

        type: 'GET',

        data: data,

        url: 'https://iqiyi.yscase.com/gugong/api'+url,

        success: function(data){

            console.log((data));

            let userid = data.data.user_id;

            aaa.next(userid);

        }

    })

}

function* myGenerator() {

    let userid = yield gotoOauch('/create_user.php',null);

    yield gotoOauch('/query_help_count.php',{user_id:userid});

}

let aaa = myGenerator();

aaa.next();

 

 

async函數

（源於ES2017，暫時還不能用）

概念：真正意義上解決異步回調的問題，同步流程表達異步操做

本質：Generator語法糖

語法：

一、內置執行器。Generator 函數的執行必須靠執行器，因此纔有了co模塊，而async函數自帶執行器。也就是說，async`函數的執行，與普通函數如出一轍，只要一行。

二、async和await，比起星號和yield，語義更清楚了。async表示函數裏有異步操做，await表示緊跟在後面的表達式須要等待結果。

三、co模塊約定，yield命令後面只能是 Thunk 函數或 Promise 對象，而async函數的await命令後面，能夠是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成當即 resolved 的 Promise 對象）。

四、async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象方便多了。你能夠用then方法指定下一步的操做。

 

 

 

xxxxxxxxxx

 

 

 

 

async function foo(url,data) {

    return new Promise((resolve,reject) => {

        $.ajax({

            type: 'GET',

            data: data,

            url: 'https://iqiyi.yscase.com/gugong/api' + url,

            success: data => resolve(data),

            error:error => reject(error)

        })

    })

}

async function myFunc() {

    console.log('開始執行');

    let userid = (await foo('/create_user.php',null)).data.user_id;

    console.log(userid);

    await foo('/query_help_count.php',{user_id:userid});

    console.log('執行完畢');

}

console.log(myFunc());

 

 

class類

 

 

 

xxxxxxxxxx

 

 

 

 

class Person{

    constructor(name,age){ //構造函數

        this.name = name;

        this.age = age;

    }

    showName(){//原型上的方法

        console.log(this.name);

    }

}

let person = new Person('哈哈',18); //實例化對象

console.log(person);

 

 

1. 經過class定義類/實現類的繼承
2. 在類中經過constructor定義構造方法
3. 經過new來建立類的實例
4. 經過extends來實現類的繼承
5. 經過super調用父類的構造方法
6. 重寫從父類中集成的通常方法

繼承

class StarPerson extends Person{//繼承了父類的全部屬性和方法
    constructor(name,age,salary){
        super(name,age); //調用父類的構造函數，傳參
        this.salary = salary;
    }
}
let p1 = new StarPerson('bbbb',18,10000);
console.log(p1);
p1.showName(); //調用原型鏈上的方法（父親的）

字符串方法的擴展

includes（str）

console.log(str.includes('j'));//判斷是否包含指定的字符串

startsWith（str）

console.log(str.startsWith('a'));//判斷是否以指定字符串開頭

enjdsWith（str）

console.log(str.endsWith('a'));//判斷是否以指定字符串開頭

startsWith（count）

console.log(str.repeat(2));//判斷是否以指定字符串開頭

數值方法的擴展

Number.isFinite(i)

console.log(Number.isFinite(Infinity));//是不是有限大的數

Number.isNaN(i)

console.log(Number.isNaN(NaN));//是不是NaN（非數值）

Number.isInteger(i)

console.log(Number.isInteger(2.2));//是不是整數

Number.parseInt(i)

console.log(Number.parseInt(2.2));//轉爲整形

Math.trunc(i)

console.log(Math.trunc(-2.2));//直接去除小數部分

數組方法的擴展

Array.from(arr)

console.log(Array.from(btns))//返回值爲真數組，便可使用真數組的方法如：forEach

Array.of(，，，，);

let arr = Array.of(1,4,'abc',true);//將一系列值轉成一個數組

find

找到第一個知足條件的元素

let arr2 = [3,5,1,8,54];
let result = arr2.find(function (item,index) {
    return item > 4
});
console.log(result);//5

findIndex

找到第一個知足條件的元素的索引值

let arr2 = [3,5,1,8,54];
let result = arr2.findIndex(function (item,index) {
    return item > 4
});
console.log(result);//5

對象的擴展

Object.is(v1,v2)

底層是字符串的形式在判斷

console.log(0 == -0);				//true
console.log(Object.is(0, -0));		//false
console.log(NaN == NaN);			//false   NaN不等於任何值
console.log(Object.is(NaN, NaN));	//true

Object.assign(obj,obj1,obj2);

此方法是淺拷貝，新對象會影響原對象

let obj = {};
let obj1 = { username:'hahaha',age:18};
let obj2 = { sex:'男'};
Object.assign(obj,obj1,obj2);  //將源對象的屬性複製到目標對象上
console.log(obj);

obj.proto

直接操做對象的proto屬性，隱士原型指向,es6以前，對象的隱士原型是不容許改變的，只有prototype才能改變,但es6已結能夠改變了

let obj3 = {};
let obj4 = { qian : 5000000};
obj3.__proto__ = obj4;
console.log(obj3);

深度克隆

參考：http://www.javashuo.com/article/p-zdppnnxl-x.html

棧（stack）和堆（heap）

stack爲自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放。　　

基本類型

存放在棧內存中的簡單數據段，數據大小肯定，內存空間大小能夠分配。

　　5種基本數據類型有Undefined、Null、Boolean、Number 和 String，它們是直接按值存放的，因此能夠直接訪問。

拷貝時會生成一份新的數據，修改後不會影響原數據

引用類型

存放在堆內存中的對象，變量實際保存的是一個指針，這個指針指向另外一個位置。每一個空間大小不同，要根據狀況開進行特定的分配。

　　當咱們須要訪問引用類型（如對象，數組，函數等）的值時，首先從棧中得到該對象的地址指針，而後再從堆內存中取得所需的數據。

拷貝時不會生成新數據，只是拷貝的引用，修改後的數據會影響原數據

傳值與傳址

理解什麼是「淺拷貝」和「深拷貝」。

　　基本類型與引用類型最大的區別實際就是傳值與傳址的區別。

 1     var a = [1,2,3,4,5];
 2     var b = a;//傳址 ,對象中傳給變量的數據是引用類型的，會存儲在堆中；
 3     var c = a[0];//傳值，把對象中的屬性/數組中的數組項賦值給變量，這時變量C是基本數據類型，存儲在棧內存中；改變棧中的數據不會影響堆中的數據
 4     alert(b);//1,2,3,4,5
 5     alert(c);//1

淺拷貝

stack棧內拷貝，heap堆未拷貝

基本數據類型，淺拷貝便可

影響了原數據的就是淺拷貝

深拷貝

對於複雜數據類型：對象和數組，要想深度拷貝就得建立一個新的(開闢新的堆內存)數組或對象進行拷貝

拷貝數據的方法

淺拷貝和深拷貝主要是針對於數組和對象，

淺拷貝就是拷貝引用，修改後會影響原數據，

深拷貝拷貝的時候會生成新數據，修改後不會影響原數據

一、直接賦值給一個變量

//淺拷貝

二、assign(obj1,...);

//淺拷貝，新對象會影響原對象

三、concat();

針對數組元素是基本數據類型的數組來講是深拷貝

若是數組元素是數組或對象時是淺拷貝

let arr = [1,3,{name:'Lily'}];
let arr2 = arr.concat();
console.log(arr2);
arr2[2].name = 'Dave';
console.log(arr);

四、slice();

//同concat

五、JSON.parse(JSON.stringify())

//深拷貝

利用了基本數據拷貝的特色，JSON.stringify（）出來的是基本數據類型字符串

拷貝的數據裏不能有函數！

JSON格式裏沒有函數，只有數組或對象

let arr = [1,3,{name:'Lily'}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].name = 'Dave';
console.log(arr);
console.log(arr4);

實現深度拷貝

拷貝的數據裏有對象或數組

var arr = [1, 10, { name: 'lily' }];
/*判斷類型*/
function checkedType(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}
function clone(target) {
    var result, targetType = checkedType(target);
    if (targetType === 'Object') {
        result = {};
    }
    else if (targetType === 'Array') {
        result = [];
    }
    else {
        return target;
    }
    /*遍歷數據*/
    for (var i in target) {
        var value = target[i];
        if (checkedType(value) === 'Object' || targetType === 'Array') {
            result[i] = clone(value);
        }
        else {
            result[i] = value;
        }
    }
    return result;
}
var arr2 = clone(arr);
arr2[2].name = 'aaa';
console.log(arr);
console.log(arr2);

set容器

無序的，不可重複的，多個value的集合體

set(array)

let set = new Set([1,5,62,5,10]);	//Set(4) {1, 5, 62, 10}

add（value）添加

delete（value）刪除

has（value）判斷是否有某個值

clear（）清空

size長度

用set去重（不重複）

let arr = [1,4,4,6,2,3,7];
let arr1 = arr;
arr = [];
let set = new Set(arr1);
for(let i of set){
    arr.push(i);
}

Map

無序的、key不重複的多個key-calue的集合體

Map(array)

let map = new Map([['aaa','usename'],[36,'age']]);
//Map(2) {"aaa" => "usename", 36 => "age"}

set(key,value)設置

get(value)獲取

delete(key)

has(key)

clear()

size長度