es6整理

javascrip原有的表現集合概念的數據結構:
    Array-數組
    Object-對象
es6:四種集合概念的數據結構
    Array-數組
    Object-對象
    Map
    Set


Iterator遍歷器
    1 提供一種通用的遍歷不同數據結構的方法
    2 擁有Symbol.iterator屬性的數據結構,都可以使用for...of來進行遍歷
    3 原生具備Iterator接口的數據結構如下
        3.1 Array
        3.2 String
        3.3 Set
        3.4 Map
        3.5 TypedArray
        3.6 函數的arguments對象(箭頭函數中沒有arguments對象)
        3.7 NodeList
    
    4 所以其他的結構如果要使用for...of的話,需要加上Symbol.iterator屬性,比如Object默認是沒有的,可以加上,但不是很有必要



Promise對象的好處:
    1 可以將異步操作以同步的流程表達出來,不會出現層層嵌套的情況
    2 Promise對象提供統一的接口,使得控制異步操作更加容易
Promise對象的缺點:
    1 無法取消Promise,一旦新建它就會立即執行,無法中途取消
    2 如果不設置回調函數,Promise內部拋出的錯誤,不會反應到外部
    3 當處於pending狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)



字符串的擴展:
    1 模板字符串
    2 新增了一些方法:
        2.1 之前判斷內容會否存在這個字符串只有indexOf(),現在新增了3個方法:
            includes(); 是否包含
            startWith(); 是否以它開頭
            endWith(); 是否以它結尾
        2.2 將一個字符串重複
            let h = 'hello'.repeat(3); //h="hellohellohello"a
            參數只能是正數,不能爲負數,可以爲小數,但只會取整數部分,如:2.9->2
            如果參數爲負數會報錯,注:如果是小數會在取整數部分之後判斷是否爲負數,因爲如:-0.1 取整數部分-> -0 ->0 所以這裏不會報錯,因爲取整之後就等於0了,不是負數了
        2.3 trim() 消除前後字符串前後的空格
            這裏新增了2個方法:
                trimStart() 清除頭部
                trimEnd() 清除尾部
        


數值的擴展:JavaScript 所有數字都保存成 64 位浮點數
    1 ES6 將全局方法parseInt()和parseFloat(),移植到Number對象上面,行爲完全保持不變。
        1.1 parseInt() 這是原來的使用方式
        1.2 Number.parseInt() 現在的使用方式
    2 判斷是否爲整數
        Number.isInteger();
    3 Math的擴展:
        3.1 Math.trunc() 返回一個數的整數部分(+-號保留)
            如:Math.trunc(12.9)->12
                Math.trunc(-12.9)->-12
        3.2 Math.pow(n,m) n的m次方(這個不是新增的)
    4 es6新增了一個數據類型-BigInt(大整數,類似Java中的大數BigDecimal),可以計算超出Number範圍的數值



函數的擴展:
    1 參數可以設置默認值
        指定默認值後,這個參數就不計算在函數的length屬性上了,比如:
        (function func(x,y=1){}).length //1,如果y沒有設置默認值,則length=2
    2 rest參數,可以將多餘的參數放到rest中
        如:function func(x,...arr){} arr是個數組
            func(1,2,3,4,5);
            則這個時候arr=[2,3,4,5]
    3 函數的name屬性:返回函數名
        function func(){};
        func.name; //func
    4 箭頭函數:
        寫法:
            let f = value=>value+1;
        等同於:
            let f = function(value){
                return value+1;
            }
        如果有多個參數並且多條語句,則如下:相當於省略了function
            let f = (v1,v2)=>{
                console.log(v1);
                return v1+v2;
            }
        注:箭頭函數中的this和非箭頭函數的this指向不同
            普通函數:this指向當時調用這個函數的對象
            箭頭函數:this指定當時聲明這個箭頭函數所在的對象的this對象所指



數組的擴展:
    1 spread 擴展運算符 (任何定義了 Iterator 接口的對象,都可以用擴展運算符轉爲真正的數組)
        對數組使用擴展運算符
            1.1 基本描述
                console.log(...[1,2,3]) 只有函數調用時,擴展運算符外面才能包一層括號使用,否則會報錯,比如直接 (...[1,2,3]) 回車會報錯,
                和函數的rest參數是相反的
                    function func(...arr){
                        //這是把外面的多個參數接成一個數組
                    }
            1.2    替代apply()方法
                spread可以替代es5中的apply方法,因爲擴展運算符可以直接展開數組
                    es5:
                        function func(a,b,c){}
                        let param = [1,2,3];
                        func.apply(null,param);
                    es6:
                        function func(a,b,c){}
                        let param = [1,2,3];
                        func(...param);
            1.3 複製數組
                let arr1 = [1,2,3];
                let arr2;
                使用原來的方法:
                    方法1:for循環一個個給arr2.push();
                    方法2:arr2 = arr1.concat(); //通過連接,返回一個新數組,而concat又沒有傳參數,所以返回的就是arr1數組的內容
                使用es6中的擴展運算符:
                    arr2 = [...arr1];
            1.4 合併數組
                同樣,合併數組也可以使用擴展運算符:
                    let arr3 = [...arr1,...arr2];
        對字符串也可以使用擴展運算符
            let strs = [..."hello"]; //["h", "e", "l", "l", "o"]
    
        上面發現對數組可以使用 擴展運算符;對字符串也可以使用擴展運算符,那到底什麼時候能使用擴展運算符呢?
            任何定義了遍歷器(Iterator)接口的對象(參閱 Iterator 一章),都可以用擴展運算符轉爲真正的數組。
    2 Array.of方法用於將一組值,轉換爲數組
        let arr = Array.of(1,2,4); //[1,2,4]
        其實也可以這樣:let arr = [];
                        arr.push(1,2,4); //[1,2,4]
    
    3 數組的find()和findIndex()方法
        3.1 find(); 返回第一個符合條件的數據
            [-9,-5,0,2-7].find((value,index,arr)=>{ //value:循環的每一項值;index:當前下標;arr:該數組
                return value>0;
            })
            //結果是2
        3.2 findIndex(); 返回符合條件的第一個數據的index
            [-9,-5,0,2-7].findIndex((value,index,arr)=>{ //value:循環的每一項值;index:當前下標;arr:該數組
                return value>0;
            })
            //結果是3
    4 includes()等



對象的擴展:
    1 屬性和方法的簡寫:
        1.1 屬性的簡寫:
            let foo = "bar";
            let obj = {foo};
            相當於:
            let foo = "bar";
            let obj = {foo:foo};
        1.2 方法的簡寫:
            let obj = {
                add(x,y){
                    return x+y;
                }
            }
            等同於:
            let obj = {
                add:function(x,y){
                    return x+y;
                }
            }
    2 方法的name屬性:
        不管是不是對象的方法,都有name屬性,返回方法名
        obj.add.name; //add
    3 屬性的遍歷:
        ES6 一共有 5 種方法可以遍歷對象的屬性
            3.1 for...in
                循環遍歷對象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)
            3.2 Object.keys(obj)
                返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名
            3.3 Object.getOwnPropertyNames(obj)
                返回一個數組,包含對象自身的所有屬性(不含 Symbol 屬性,但是包括不可枚舉屬性)的鍵名
            3.4 Object.getOwnPropertySymbols(obj)
                返回一個數組,包含對象自身的所有 Symbol 屬性的鍵名
            3.5 Reflect.ownKeys(obj)
                返回一個數組,包含對象自身的(不含繼承的)所有鍵名,不管鍵名是 Symbol 或字符串,也不管是否可枚舉
            以上的 5 種方法遍歷對象的鍵名,都遵守同樣的屬性遍歷的次序規則。
                首先遍歷所有數值鍵,按照數值升序排列。
                其次遍歷所有字符串鍵,按照加入時間升序排列。
                最後遍歷所有 Symbol 鍵,按照加入時間升序排列。
    4 加入了super 關鍵字
        當前對象的原型對象
    5 對象的解構賦值
        let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    5 擴展運算符:對象的擴展運算符(...)用於取出參數對象的所有可遍歷屬性,拷貝到當前對象之中
        let z = { a: 3, b: 4 };
        let n = { ...z };
        n // { a: 3, b: 4 }
        由於數組是特殊的對象(key值爲下標值),所以對象的擴展運算符也可以用於數組
            let foo = { ...['a', 'b', 'c'] };



Symbol類型
    Symbol類型的值是獨一無二的
    基本類型有:undefined,null,number,string,boolean,Object+新增的Symbol
    Symbol值的定義:(基本上,它是一種類似於字符串的數據類型)
        let s = Symbol();
        這個s就是個Symbol值
        可以給它加描述信息,便於區分:
        let s = Symbol("s");



Set和Map
    1 Set
        1.1 Set類似於數組,但是Set中的元素不允許重複,都是唯一的
            添加成員:
                let set = new Set();
                set.add(1);
        1.2 Set可以接收有Iterator接口的數據結構,所以這裏就可以接受:string,Array等
            new Set([1,2,2,3]); //{1,2,3}
            new Set("hello"); //{"h", "e", "l", "o"}
        1.3 利用Set給數組/字符串去重
            let array = [.....];
            let set = new Set(array);
            let arr = [...set];
        1.4 Set不能加入重複元素的判斷類似於 “===” 的比較,即類型和值都要相同,
            因爲Set.add()時不會發生類型轉換,所以"1",和 1 是不相同的,都能加進去
        1.5 Set上的方法
            長度:size; 不是方法
            是否存在:has(value);
            添加:add(value); 返回操作完之後的整個Set
            刪除:delete(value) 返回boolean值
            清除:clear(); 將裏面的元素都清掉,size爲0
            遍歷:有四個方法
                keys();返回鍵名的遍歷器        由於Set沒有鍵名,所以key和value的值是一樣的(這裏注意key不是和數組一樣的下標值)
                    new Set("hello"); //第一個元素的key和value都是"h"
                values();返回鍵值的遍歷器
                entries();返回鍵值對的遍歷器
                forEach();返回每個元素
                
                前面3個方法都返回的是遍歷器,因此可以直接使用for...of遍歷返回的值
                    let set = new Set([1,2,3,4,5,5,43]);
                    let keys = set.keys();
                    for(k of keys){
                        console.log(k);
                    }
                最後一個forEach()
                    set.forEach((value,key,set)=>{
                        console.log(`${key},${value}`);
                    })
                
    2 Map
        2.1 Map結構類似Object,是鍵值對的形式
            Object的key只能是字符串,值的類型沒有限制
            Map的key和value都可以是任意類型
        2.2 基本使用
            let map = new Map(); //也可以給參數:new Map([{"name:":"jack"},{"age",12}])
            長度:size; //不是方法
            是否存在:has(value);
            添加(設置):set(key,value);
            刪除:delete(key);
            獲取:get(key);
            清除所有成員:clear();
            遍歷:和Set一樣,只是keys和values的值不一樣,因爲Map是有鍵名的

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章