個人es6學習筆記

時間 2019-11-10

原文原文鏈接

前兩個月看了一套es6的教程，如今將當時我作的筆記分享出來，與你們一塊兒分享，個人不足之初也但願你們能夠指出來。雖然簡單學過一遍，可是我項目中用到的也就const，let，解構賦值，默認參數，箭頭函數，promiss，模板字符串差很少這幾個吧，其餘的還不是很瞭解。如今再拿出來結合阮一峯老師的書再從新的學習一遍。css

ES6

npm install babel-cli -g前端
npm install babel-cli babel-preset-es2015 --save-devnode
babel es6.js -w -o es5.jswebpack

es6項目構建

基礎架構es6
任務自動化(gulp，減小人工操做，提升效率)web
- 文件合併，項目依賴ajax
編譯工具(babel（es6->es5),webpack(模塊化，項目依賴))express
代碼實現npm

基礎架構

業務邏輯：頁面交互編程
自動構建
- 編譯 1.編譯到es5/3，爲了IE8要到es3
- 輔助
  1. 自動刷新：js修改->自動編譯->刷新瀏覽器
  2. 文件合併
  3. 資源壓縮: js ,css,圖片轉base64編碼
服務接口
- 數據
- 接口

任務自動化gulp

什麼是任務自動化
什麼是gulp：經過流方式操做文件，快，用來解決自動化構建工具，加強構建流程，背後是nodejs，提供多種插件，經過不一樣task組合去完成更加複雜的東西。
glup做用
瞭解如何使用gulp完成任務自動化：看文檔，API，插件

編譯工具

babel（JavaScript編譯器），webpack解決模塊化
babel核心用法
瞭解webpack及webpack-stream做用，後者是webpack對於gulp的支持

代碼實現

建立es6前端工程
完成目錄結構，自動構建。服務器搭建

實踐

三個板塊，前端代碼，css，js模板，服務器，前端編譯，服務器定時刷新

npm install express -g //安裝最新版
npm install -g express-generator

npm package.json
.babelrc babel

es6語法

let:

塊兒級做用域
嚴格模式
es6強制嚴格模式
變量未聲明不能引用,變量不能夠重複聲明

const

聲明必須賦值，不能夠更改
對象存儲的是指針，值能夠變

解構賦值

解構賦值
解構賦值分類
- 數組解構賦值（重點)
  - [a,b]=[1,2],兩邊都是數組
  - [a,b,c=3]=[1,2] 解構沒有成功配對爲undfine默認值
  - [a,b,...rest]=[1,2,3,4,5,6] reset爲數組
  - （{a,b}={a:1,b:2})
- 對象解構賦值（重點)
```
{
    let o={p:43,q:true}
    let {p,q}=0 //p=43 ,q=true
    }
```
  - 默認值
- 字符串解構賦值
- 布爾值解構賦值
- 函數參數解構賦值
- 數值解構賦值
應用場景

變量的交換

{
    let a=1;
    let b=2;
    [a,b]=[b,a];
}

{
    function f(){
        return [1,2]
    }
    let a,b
    [a,b]=f();
}

{
    function f(){
        return [1,2,3]
    }
    let a,b
    [a,,b]=f(); //a=1,b=4
}

{
    function f(){
        return [1,2,3]
    }
    let a,b
    [a,...b]=f(); //a=1,b=4
}

塊兒做用域隔離變量

對象解構賦值

{
    let metaData={
    title:'abc',
    test:[{
        title:'test',
        desc:'description'
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]}=metaData //abc test

    }

正則

構造函數的變化

{
    //es5寫法
    let regex=new RegExp('xyz','i');
    let regex2=new RegExp(/xyz/i);
    console.log(regex.test('xyz123'),regex2.test('xyz123'))

    //es6
    let regex3=new RegExp(/xyz/ig,'i'); //第二個修飾符會覆蓋前面正則的修飾符
    console.log(regex3.flags); //flags新增屬性，用於獲取修飾符
}

正則的方法擴展

u修飾符(Unicode),正則在處理Unicode的特徵值

{
    
    console.log('u-1',/^\uD83D/.test('\uD83D\uDC2A'));  //把四個字節當成兩個字符字母
    console.log('u-2',/^\uD83D/u.test('\uD83D\uDC2A'));  //把四個本身當成一個字符
    console.log(/\u{61}/.test('a'));   //false
    console.log(/\u{61}/u.test('a'));   //true 加u纔可使{}內編碼被識別
    //.只是能夠識別小於0xffff的unicle字符，若是編碼超過兩個字節沒法識別
    console.log(‘\u{20BB7}’); 
    let s='';
    console.log('u',/^.$/.test(s))  //false.沒有直接匹配
    console.log('u-2',/^.$/u.test(s))  //true
}

字符串中有大於兩個字節的，必定要加上u修飾符，才能夠正確識別，不然沒法處理
換行符，回車符，行分隔符，段分隔符，.也不能夠識別

y修飾符

{
    let s='bbb_bb_b';
    let a1=/b+/g;
    let a2=/b+/y;
    console.log('one',a1.exec(s),a2.exec(s));
    console.log('two',a1.exec(s),a2.exec(s));
    //g,y都是全局匹配，g是從上一次匹配的位置繼續尋找，不強調必須在匹配的下一個，中間任何位置均可以，y必須是緊跟着的纔算。
    console.log(a1.sticky,a2.sticky);//判斷是否開啓了y修飾符的模式
}

s修飾符（只是題提案，沒有真正實現)
- . z在s修飾符下能夠識別換行符，回車符，行分隔符，段分隔符。 6.總結

構造函數
字符串原來使用的跟正則相關的方法，如今都是隱形調用的正則對象的方法
y和g的區別，以及y的點是下一個開始
u修飾符的使用狀況
s修飾符做用

字符串擴展

Unicode表示法

{
    console.log('a',`\u0061`);
    console.log('s',`\u20BB7`); //會當成兩個字符前四個和7，用大括號抱起來解決
    console.log('s',`\u{20BB7}`);
} 
{
    let s=
    s.codePointAt(0)  //取碼值
    Srtring.fromCharCode("0x20bb7");  //es5不能處理unicode亂碼
    String.fromCodePoint("0x20bb7")     //es6 能夠
}

遍歷接口

{
    let s=
    for 循環
    //es6
    for(let code of str){
        console.log(code)
    }
}

模板字符串

數據和模板拼成帶結果的字符串

{
    let name="list";
    let info="hellow word";
    let m=`i am $(name),$(info)`;
}

新增方法（10種)

str.includes("c");
str.startsWith("");
str.endsWith("");
str.repeat(2)
'1'.padStart(2,'0') es7:要知足兩個長度，不夠用零部
'1'.padEnd(a,'0')

//標籤模板，過濾字符串，處理多語言轉換
{
    let user={
        name:'list',
        info:'hello word'
    };
    console.log(abc`i am $(user.name),$(user.info)`);
    function adb(s,v1,v2){
        console.log(s,v1,v2)
        return s+v1+v2;
    }
}

String.rawHi\n$(1+2)) //raw: 對全部//進行轉意，使用頻率不高

注意：有幾個方法是es7提案，須要安裝補丁庫，npm install babel-polyfill --save-dev

數值擴展

新增方法
- 二進制以0b開頭，b小寫大寫都可
- 八進制用0o開頭；
- Number.isFinite(15) //判斷數是否有盡
- Number.isNaN:判斷是否是數
- Number.isInteger(25) //25.0是整數，不是數返回false
- Number.MAX_SAFE_INTEGER
- Number.MIN_SAFE_INTEGER
- Number.isSafeInteger(10)
- Math.trunc(4.1) //取整數，知取整數部分
- Math.sign(5) //返回+-1/0 判斷是否是正數，嘗試轉換，NaN
- Math.cbrt(-1) //返回立方根
- 三角函數，對數
方法調整

數組擴展

Array.from：把僞數組，集合轉換爲數組

Array.of(3,4,7,9,11):一組數據變量轉換爲數組類型

//1.
let p=document.querySelectorAll('p');
let pArr=Array.from(p);
pArr.forEach(function(item){
    console.log(item.textContent)
})
//2.轉換同時進行了白遍歷
Array.from([1,3,5],function(item){return item*2})

copyWithin:頻率不高

[1,2,3,4,5].copyWithin(0,3,4) //替換位置從零開始，讀取數據從三開始，

find\findIndex

[1,2,3,4].find(function(item){
    return item>3; //找到第一個就中止，返回的是value
})
[1,2,3,4].findIndex(function(item){
    return item>3; //找到第一個就中止，返回的是下標
})

fill

[1,'a',undefined,fill(7)]:數組內被替換成7
['a','b','c'].fill(7,1,3):數組，從第一個開始換到第三個

entries\keys\values

values須要開啓兼容

for(let index of ['1','c','ks'].keys()){
    console.log(index) //返回數組下標的集合，values是取值
}
for(let [index,value] of ['1','c','ks'].entries()){
    console.log(index,value) //返回數組下標的集合，values是取值
}

inludes

[1,2,NaN].includes(1);
[1,2,NaN].include(NaN):能夠作到

函數擴展

參數默認值

{
    function test(x,y='world){
        console.log('默認值',x,y)
    }
    test('hello') //默認值helloworld
}
//注意有默認值的必須在後面

rest函數:不肯定輸入參數時，將其轉化爲數組

{
    function test3(...arg){
        for(let v of arg){
            console.log('rest',v)
        }
    }
    test3(1,2,3,4,'a');
}

擴展運算符:把數組轉換成離散值
```
...[1,2,4]
```
箭頭函數：定義時，es5是調用時函數名參數(沒有的話用() 返回值要注意this的綁定
```
{
    let arrow = v => v*2;
    console.log(arrow(3))
}
```
this綁定：重點補充箭頭函數this的指向
尾調用，存在於函數式編程，一點，函數的最後一句是否是函數,提高性能，建議若是在性能優化過程當中以爲某一過程是不斷嵌套別的函數，或者說依賴於另外一個
```
{
    function tail(x){
        console.log('tail',x);
    }
    function fx(x){
        return  tail(x);
    }
    fx(123);
}
```

對象擴展（指Object)

簡潔表示法

{
        //簡潔表示法
        let o=1;
        let k=2;
        let es5={o:o,k:k}
        let es6={o,k}
        
        let es5_method={
            hello:function(){
        }
        }
        let es6_method={
            hello(){
            }
        }
}

屬性表達式

let a='b';
let es5_obj={
    a:'c'
}
//es6key能夠用表達式,變量
let es6_obj={
    [a]:'c';
}

擴展運算符:es7提案支持很差 let {a,b,...c}={a:'test'.b:'kill',c:'add',d:'ccc'}
Object新增方法
1. Object.is('abc','abc');功能上等同於===
2. Object.assign({a:'a'},{b:'b'}) //返回生成的一個新的對象，是淺拷貝，只拷貝地址，只拷貝自身的，繼承的和不可枚舉的不考唄
```
for(let [key,value] of Object.entries(test)){
    
}
```

Symbol數據類型

Symbol概念：提供獨一無二的值，聲明的值不重複，不相等
```
let a1=Symbal();
let a2=Symbol.for('a3');
```
Symbol做用 for in let of拿不到，要經過Object.getOwnPropertySymbols()返回數組，或Reflect。ownKeys

數據解構

Set：相對於數組，key不能夠重複,主要方法add delete ,clear,has

let list=new Set();
list.add(5);
list.size();
let  arr=[1,2,3,4,5];
let lisrt= new Set(arr);
//添加劇復的不會生效，能夠用於數組的去重；
let arr=[1,2,3,4,1,2];
let new=new Set(arr);

for (let key of list.keys()){

}
for (let value of list.values.value()){

}
for (let value of list.values()){

}
for (let value of list.entries()){

}
list.forEach(function(item){

})

WeakSet:支持的數據類型不同只能夠是對象，是弱引用，添加的對象只是地址引用，不會檢測地址是否被回收，沒有clear方法 size屬性，不能夠遍歷

Map：相對於Object，key能夠不是string

let map=new Map();
let arr=['123'];
map.set(arr,456);
let map=new Map([['a',123],['b':456]]);

size(),get(),delete(),clear()

WeakMap:接受的key必須是對象，沒有size，不能clear，不能遍歷

數據解構2

Map和Array對比
- 增：push/unshift set
- 查 find返回值 has()返回布爾值
- 改 foreach判斷存在->修改 set
- 刪 findindex->刪除 delete
Set與Array對比
- 增 push/ add對象
- 查 find has（) 對象要先保存
- 改 forEach forEach
- 刪 forEach forEach->delete item
Map,Set,Object 對比
- 增 map.set('t',1) set.add({'t':1}) obj['t']=1
- 查 map.has('t') set.has(item) 't' in obj
- 改 set('t',2) item.t=2 obj['t']=2;
- 刪 map.delete('t')成本最低 set.delete(item) delete obj['t']
總結：能用map不用數組，要求惟一性set ，放棄object和array

Proxy 和 Reflect

Proxy 和 Reflect的概念
Proxy 和 Reflect的適用場景

數據校驗

類

基本語法

class Parent{
    constructor(name='imooc'){
        this.name=name; 
    }
}
let v_parent=new Parent('v');

類的繼承

class Child extends Parent{
    construct(name='child){
        super(name);  //爲空使用父類默認值,必須第一行
        this.type='child';
    }

}

靜態方法:經過類去調用，而不是類的實例

class Parent{
    constructor(name='imooc'){
        this.name=name; 
    }
    static tell(){

    }
}
Parent.tail();

靜態屬性

class Parent{
    constructor(name='imooc'){
        this.name=name; 
    }
    
}
Parent.type="test";
console.log(Parent.type)

getter setter

class Parent{
    constructor(name='imooc'){
        this.name=name; 
    }
    get longName(){
        return this.name;
    }
    set longName(value){
        this.name=value;
    }
}

Promise

什麼是異步（回調和事件，Promise)
Promise的做用
Promise的基本用法

{
    let ajax=function(){
        console.log('執行')；
        return new Primise(function(resolve,reject){
            setTimeout(function(){
                    resolve();
                },1000)
        })
    }
    ajax().then(function(){

    })
}

Iterator和for of

Iterator接口

{
    let arr=['hello','word']
    let map=arr[Symbol.iterator]();
    map.next();
    map.next();
}

Iterator基本用法
for of

Generaror

基本概念：異步編程的一種解決方案,返回的是Iterator接口調用next()依此執行yield

{
    let obj={};
    obj[Symbol.iterator]=function*(){
        yield 1;
        yield 2;
        yield 3;
    
    }
    for (let value of obj){
        console.log()
    }
}

next函數的用法

{
    let atate=function*(){
        while(1){
            yield 'A';
            yield 'B';
            yield 'C';
        }
    }
    let status=state();
    console.log(status.next())
}

yield*的語法

Decorator(修飾器是一個函數，修改類的行爲)

須要額外插件：npm install babel-plugin-transform-decorators-legacy --save-dev .babelrc加入插件

基本概念

擴展類的功能

基本用法

{
    let readonly=function(target,name,description){
        description.writable=false;
        return descriptor;
    }
    class Test{
        @readonly
        time(){
        return '2018-03-11'
        }
    }
}