先給個案例體驗下

  對於像這樣的一個物件，把它轉換成一個數組，我們在開發中應該會遇到過，

  {'未完成':0, '已完成':1, '待確認':2, '已取消':-1}轉為[{"未完成":0},{"已完成":1},{"待確認":2},{"已取消":-1}]

 我們首先想到的是把他們一個個迴圈遍歷取出來，push到一個數組當中去

 let obj1 = { '未完成': 0, '已完成': 1, '待確認': 2, '已取消': -1 },
            arr1 = [];
        for (let i in obj1) {
            let linshiObj = {};
            console.log(obj1[i]);
            linshiObj[i] = obj1[i];
            console.log(linshiObj[i])
            arr1.push(linshiObj);
            // arr1.push(obj1[i]);
        }
        console.log(arr1);
 

1.物件的獲取值有兩種方法

 let obj2 = { name: "zjl" };
        console.log(obj2.name); //常用
        // console.log(obj1['未完成']);
        console.log(obj2['name']);

2.類陣列物件：

 但是在專案開發中可能遇到的情況有很多，所以在這裡就詳細講解了陣列轉物件的一些方法

  這裡所說的物件是類陣列物件，什麼是類陣列物件呢，下面就先描述下；

  類陣列物件：

  擁有length屬性，其它屬性（索引）為非負整數

  不具有陣列所具有的方法

  常見的類陣列有arguments和NodeList，

《javascript權威指南》裡面給出了一個鑑別物件是否是類陣列的函式

 function isArrayLike(Ob) {
            if (Ob &&                                // o is not null, undefined, etc.
                typeofObo === 'object' &&            // o is an object
                isFinite(Ob.length) &&               // o.length is a finite number
                Ob.length >= 0 &&                    // o.length is non-negative
                Ob.length === Math.floor(Ob.length) &&  // o.length is an integer
                Ob.length < 4294967296)              // o.length < 2^32
            {
                return true;                        // Then o is array-like
            }

            else {
                return false;                      // Otherwise it is not
            }
        }
 

在這裡解釋下isFinite函式：isFinite() 函式用於檢查其引數是否是無窮大。

  如果 number 是有限數字（或可轉換為有限數字），那麼返回 true。否則，如果 number 是 NaN（非數字），或者是正、負無窮大的數，則返回 false。

3. 下面就來介紹下這幾種方法

1.Array.prototype.slice.call(obj)

這種方法是借用了陣列原型中的slice方法，返回一個數組。slice方法的內部實現：

Array.prototype.slice = function (start, end) {
            let result = new Array();
            start = start || 0;
            end = end || this.length;  //使用call之後this指向了類陣列物件 
            for (let i = start; i < end; i++) {
                result.push(this[i]);
            }
            return result;
        }

通用的轉換函式

 var toArray = function (Ob) {
            try {
                return Array.prototype.slice.call(Ob);
            } catch (e) {
                var arr = [];
                for (var i = 0, len = s.length; i < len; i++) {
                    arr[i] = s[i];
                }
                return arr;
            }
        }
        let object1 = {
            '0': 3,
            '1': 13,
            '2': 23,
            '3': 33,
            'length': 5,
            'name': 330
        }
        console.log(toArray(object1) + '      ' + 'Array.prototype.slice.call(obj)');

2.2.Array.from()

Array.from()是ES6中新增的方法，可以將兩類物件轉為真正的陣列：類陣列物件和可遍歷（iterable）物件（包括ES6新增的資料結構Set和Map）;

 方法可以將類陣列物件和可迭代物件轉換為陣列。

 類陣列物件上文已提及，何為可迭代物件？

 Array、Set、Map 和字串都是可迭代物件（WeakMap / WeakSet 並不是可迭代物件）

 字串變成了可迭代物件，解決了編碼的問題

  這些物件都有預設的迭代器，即具有 Symbol.iterator 屬性

  可以用 for of 迴圈

 所有通過生成器建立的迭代器都是可迭代物件

  如document.getElementsByTagName("div") 返回的是可迭代物件但不是一個數組

 Array.isArray(document.getElementsByTagName('div')) 返回 false;

 let object3 = {
            '0': 3,
            '1': 13,
            '2': 23,
            '3': 33,
        };

        function* createIterator(obj) {
            for (let value in obj) {
                yield obj[value];
            };
        };

        let iterator = createIterator(object3);  //
        console.log(iterator);
        let arr3 = Array.from(iterator);
        console.log(Array.from(object3))// [3, 13, 23, 33]

        // 預設情況下，開發者定義的物件都是不可迭代物件，但如果給 Symbol.iterator 屬性新增一個生成器，則可以將其變為可迭代物件
        obj[Symbol.iterator] = function* () {
            for (let value in this) {
                yield this[value]
            }
        }
        let arr = Array.from(obj)
        // [3, 13, 23, 33]

        // 判斷物件是否為可迭代物件的方法
        typeof obj[Symbol.iterator] === 'function'
        //把NodeList物件轉換為陣列，然後使用陣列的forEach方法
        let ps = document.querySelectorAll('p');
        Array.from(ps).forEach(p => {
            console.log(p);
        });
        //只要是部署了Iterator介面的資料結構，Array.from都能將其轉換為陣列
        Array.from('zjl');

3. 擴充套件運算子（…）

同樣是ES6中新增的內容，擴充套件運算子（…）也可以將某些資料結構轉為陣列

3.1   arguments物件的轉換

 function foo() {
            var args = [...arguments];
        }

3.2  

NodeList物件的轉換

[...document.querySelectorAll('p')]

4.Object.values(obj)

預設情況下，開發者定義的物件都是不可迭代物件，但提供了返回迭代器的方法

  entries()

  values()

  keys()

  通過使用這些方法，可以返回相關的陣列

 與類陣列物件需要物件有 length 值不同，Object.values(obj) 返回物件自身可列舉屬性值的集

let object4 = {

'0': 3,

'1': 13,

'2': 23,

'3': 33

};

let array4 = Object.values(object4) // [3, 13, 23, 33]

let array41 = Object.keys(object4);//['0','1','2','3']

// let array42=Object.entries(object4);

// console.log(array4);

// console.log(array41);

// console.log(array42);

 大概就是這些了