JavaScript 類數組轉換成數組的三種方式

1. Array.prototype.slice.call()

2. Array.from()

3. 擴展運算符（…）

類數組：屬性值必須是 0,1,2,3... 並且最後要加上長度length

var json = {
    '0': '叄貳壹',
    '1': 'python',
    '2': 'JavaScript',
    length: 3
};

一、Array.prototype.slice.call() 借用了數組原型中的slice方法，返回一個數組

/* 該方法的通用轉換函數 */
var toArray = function(s) {
    try {
        return Array.prototype.slice.call(s);
    } catch (e) {
        var arr = [];
        for (var i = 0, len = s.length; i < len; i++) {
            arr[i] = s[i];
        }
        return arr;
    }
}

1. 例 – 類對象

var json = {
    '0': '叄貳壹',
    '1': 'python',
    '2': 'JavaScript',
    length: 3
};

var toArray = function(s) {
    try {
        return Array.prototype.slice.call(s);
    } catch (e) {
        var arr = [];
        for (var i = 0, len = s.length; i < len; i++) {
            arr[i] = s[i];
        }
        return arr;
    }
}

var jsonArr = toArray(json);
console.log(jsonArr);
/* ["叄貳壹", "python", "JavaScript"] */

2. 例 – 字符串

var helloStr = 'hello';

var toArray = function(s) {
    try {
        return Array.prototype.slice.call(s);
    } catch (e) {
        var arr = [];
        for (var i = 0, len = s.length; i < len; i++) {
            arr[i] = s[i];
        }
        return arr;
    }
}

var helloArr = toArray(helloStr);
console.log(helloArr);

/* ["h", "e", "l", "l", "o"] */

二、Array.from() 是 ES6 新增的內容

Array.from()是ES6中新增的方法，可以將兩類對象轉爲真正的數組：類數組對象和可遍歷（iterable）對象（包括ES6新增的數據結構Set和Map）

1. 例 – 類對象

/* 以下這種方式屬性值必須是 0,1,2,3...  並且最後要加上長度length */

var json = {
    '0': '叄貳壹',
    '1': 'python',
    '2': 'JavaScript',
    length: 3
};

var jsonArr = Array.from(json);
console.log(jsonArr);

/*  ["叄貳壹", "python", "JavaScript"] */

2. 例 – 字符串

/* 該方法也可將字符串轉化爲數組 */
console.log(Array.from('hello'));
/* ["h", "e", "l", "l", "o"] */

三、擴展運算符（…） 是 ES6中新增的內容，可以將某些數據結構轉爲數組

注意：必須天生具備 Symbol.iterator 方法的數據類型纔可以使用，類數組必須自行定義纔可以實現

1. 例 – 字符串

var helloStr = 'hello';

var jsonArr = [...helloStr];
console.log(jsonArr);
/* ["h", "e", "l", "l", "o"] */

2. 例 – 類對象

var json = {
    '0': '叄貳壹',
    '1': 'python',
    '2': 'JavaScript',
    length: 3,
    [Symbol.iterator]: function() {
        // index用來記遍歷圈數
        let index = 0;
        let next = () => {
            return {
                value: this[index],
                done: this.length == ++index
            }
        }
        return {
            next
        }
    }
};

var jsonArr = [...json];
console.log(jsonArr);
/* ["叄貳壹", "python"] */

感謝觀看 期待關注

知乎：叄貳壹

簡書：帶只拖鞋去流浪

關注我，帶你一起寫bug

warning ：未經授權，不得轉載

有問題的小夥伴請在下方留言，喜歡就點個贊吧