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 ：未经授权，不得转载

有问题的小伙伴请在下方留言，喜欢就点个赞吧