ES6之數組的擴展

ES6中對字符串、函數、對象、數組等都進行了擴展，感受目的呢就是完善一下JS所爲外行人詬病的一些僞bug.其實我的以爲不完美的JS纔是真的美，什麼東西都無懈可擊了就顯得不夠有趣了。好了，接下來又要開始拾人牙慧了...

---

主要講解:

1. 擴展運算符...
2. Array.from()
3. Array.of()
4. Array.prototype.find() 和 Array.prototype.findIndex() --經常使用

---

1.擴展運算符... 用於將數組轉爲逗號分隔的參數序列

如: ...[1,2,3] => 1,2,3 --只限一維轉換,這種轉換隻有放進函數中調用纔有意義，不能單獨存在

基礎用法:
   function plus(x,y){
        return x+y;
    }

    plus(...[3,7]);
    //10
    plus(3,...[7])
    plus(...[3],7)
    //能夠靈活的置於函數參數中任意位置，只要根據傳進的數據進行解析便可。
    
    //Array原生push方法(可向數組末尾添加一個或多個元素,順序添加，且不建立新數組，直接修改原數組)
    let arr = [1,2,3];
    arr.push(4,5); //直接傳參
    arr // [1,2,3,4,5]

    //使用擴展的方式:傳入一個數組，進行拼接
    arr.push(...[6,7,8]);
    arr //[1,2,3,4,5,6,7,8]

---

應用:
    i.數組的淺拷貝
        let arr = [12,34,56];

        let arr2 = [...arr];
        let [...arr3] = arr;
        arr2 // [12,34,56]
        arr3 // [12,34,56]

        arr2 == arr 
        //false

    ii.合併數組
        [...arr,...arr2,...arr3]
        //[12, 34, 56, 12, 34, 56, 12, 34, 56]

    iii.結合解構賦值，生成剩餘數組 -- 擴展運算符只能置於參數最後
        let [one,...rest] = [1,2,3,4,5];
        one // 1
        rest // [2,3,4,5]

    iv. 擴展字符串成數組 --感受這個好像沒啥用,'babe'.split('')也能夠
        [...'babe']
        //["b", "a", "b", "e"]
        //不過阮老師的書上說擴展運算符的寫法能夠識別四個字節的Unicode字符
        //有相關需求可使用這種方式解剖字符串

    v. 實現了Iterator接口的對象都可以使用擴展運算符轉化成真正的數組(關於Iterator下次再寫)
        
        function convert2Arr(){
          return [...arguments];
        }
        
        let result = convert2Arr(1,2,3,4,5);
        result // [1,2,3,4,5]

---

2.Array.from()

用於將類數組對象、可遍歷的對象轉爲真正的數組(類數組對象特徵:屬性爲非負整數、存在length屬性、length>=0)

//類數組對象
let obj = {
    0:'hello',
    1:'world',
    4:'outof bounds data',
    length:3   //由於length不能動態改變，隨意賦值，最後獲得的數組長度就是其值
}
Array.from(obj);
// ["hello", "world", undefined]
//根據屬性名對應到數組的index,超過length部分捨棄。沒有對應的屬性，置爲undefined

---

//實現了Iterator接口的數據結構
let str = 'babe';
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯，感受如今JavaScript向着更幸福的方向發展了，條條大路通羅馬。

---

注意:
    Array.from()是一個很不嚴謹的角色，只要對象含有length屬性，且值爲正整數就能轉
    不保證轉出來的東西質量是否符合要求。
    Array.from({user:'babe',length:5})
    // [undefined, undefined, undefined, undefined, undefined]
        
    Array.from()可接收第二個參數，用於對數組的每一項進行處理並返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>{x*x})
    //[undefined, undefined, undefined]  --切記處理函數中必定要返回
        
    Array.from()還可接收第三個參數，這樣在處理函數中就可使用傳進去的對象域中的值
    let that = {
        user:'babe'
    }
    let obj = {
        0:'babe',
        1:'zhangsan',
        2:'lisi',
        length:3
    }
    let result = Array.from(obj,(user) =>{
        if(user == that.user){
            return user;
        }

        return 0;
    },that);
    result //["babe", 0, 0]

---

3.Array.of()

用於將一組值轉換爲數組，存在的意義是替代以構造函數的形式建立數組，修復數組建立因參數不一致致使表現形式不一樣的僞bug.

//原始方式
new Array()
// []
new Array(2)
// [empty × 2]
new Array(1,2,3,4,5)
// [1, 2, 3, 4, 5]

//先進改良方式
Array.of();
// []
Array.of(2);
// [2]
Array.of(1,2,3,4,5);
// [1, 2, 3, 4, 5]

---

4.Array.prototype.find() 和 Array.prototype.findIndex()方法 --經常使用

find方法用於查找第一條符合要求的數據，找到返回該數據，不然返回undefined; findIndex則用於找到第一條符合要求的數組位置，找到返回index,不然返回-1;----這兩個方法均可以使用indexOf替代，只是比indexOf更精細(能夠查找NaN所在位置)

let result = [
    {extractId:1,sec:'Fi900'},
    {extractId:2,sec:'Fi901'},
    {extractId:3,sec:'Fi902'},
    {extractId:4,sec:'Fj900'},
    {extractId:5,sec:'Fj901'}
];

result.find(obj => obj.sec == 'Fi902')
// {extractId: 3, sec: "Fi902"}
result.findIndex(obj => obj.sec == 'Fi902')
// 2

//這個還要記住一個處理函數的接收參數順序，依次爲:當前值、當前位置、原始數組
result.find((val,index,arr)=>{...});
result.findIndex((val,index,arr)=>{});
//此兩個方法都可接收第二個參數，傳進去一個做用域對象,而後在處理函數中可使用傳入的對象
let scope = {extractId:2};
result.findIndex(item=>item.extractId == scope.extractId,scope);
// 1

---

今天就先寫到這裏了(每次都有點有始無終，介紹的也只是我感興趣的點，之後儘可能全，而後有側重點)，若是bug請指正Thanks♪(･ω･)ﾉ