编写时间：2019-08-21
更新时间：2019-08-21

作者：鬼小妞

备注： 本文整理了类数组转换成数组、对象转换成数组的方法

状态：已完成、待整合2019-08-21

类数组转换成数组

  • [].slice.call(arguments) 或 Array.prototype.slice.call(arguments)
  • Array.from(arguments)
  • [...xxx]

对象转换成数组

  • Array.from(object)
  • Object.values(object)
  • Object.keys(object)
  • Object.entries(object)
  • 使用 for…in…构建函数

类数组转换成数组

  • [].slice.call(arguments) 或 Array.prototype.slice.call(arguments)
  • Array.from(arguments)
  • [...xxx]

以下给出各方法例子

1 [].slice.call(arguments)或Array.prototype.slice.call(arguments)

ES5 方法

例1

var foo = function() {
    var arr = [].slice.call(arguments)
    var result = Object.prototype.toString.call(arr)
    console.log(arr) //[]
}()
复制代码

例2

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
复制代码

例3

除了使用 Array.prototype.slice.call(arguments)，你也可以简单的使用 [].slice.call(arguments) 来代替。另外，你可以使用 bind 来简化该过程。

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
复制代码

2 Array.from(arguments)



Array.from(arguments)是ES6的方法

Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg)

使用Array.from, 值需要对象有length属性(维数组对象，可迭代对象), 就可以转换成数组

例1

const arrayLike = {
  length: 5
}
let arr2 = Array.from(arrayLike)
//[undefined, undefined, undefined, undefined, undefined]
复制代码

例2 数组去重合并

function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));                     // [1, 2, 3]

复制代码

3 [...xxx] 扩展运算符

ES6中的扩展运算符...也能将某些数据结构转换成数组，这种数据结构必须有便利器接口。

但是展开运算符只能将某些数据结构转换成数组, 因为本质是调用遍历器接口（Symbol.iterator ），如果一个对象没有部署这个接口，就无法转换 --- 阮一峰ES6

// arguments对象
function foo() {
  var args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]
复制代码

兼容写法

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();
复制代码

对象转换成数组

  • Array.from(object)
  • Object.values(object)
  • Object.keys(object)
  • Object.entries(object)
  • 使用 for…in…构建函数

尽量不使用Array.from把对象转换为数组

对于需要把对象的key属性名转换为数组的，推荐使用Object.keys(object)；

对于需要把对象的value值转换为数组的，推荐使用Object.values(object)；

对于需要把对象可枚举属性的键值对转换为每一个数组的，推荐使用Object.values(object)；

1 Array.from(object)

和上文提到的Array.from(arguments)类似，可以点击查看上文查看使用，或者到MDN查看详细使用说明

注意

  • object中必须有length属性，返回的数组长度取决于length长度 ，如果没有length属性，那么转换后的数组是一个空数组。
  • key 值必须是数值型或字符串型的数字，比如{1:"bar"}或{"1":"bar"}而不是{"name":"bar"}
  • 给出的对象长度length必须大于最大key值，否则，key值大于length的项，不在Array.from返回的浅拷贝数组里

例1 对象没有length值

const obj = { 1: 'bar', 2: 42 }; 
Array.from(obj) //[]
复制代码

例2 对象有length值

const obj = { 1: 'bar', 2: 42 ,length:4}; 
Array.from(obj) //[undefined, "bar", 42, undefined]
复制代码

例3 对象有length值，但key 值不是数值

const obj = { name: 'bar', age: 42 ,length:2}; 
Array.from(obj) //[undefined,undefined]
复制代码

例4 对象有length值，key 值是数值，且key值在length内

const obj = { 1: 'bar', 2: 42 ,length:4}; 
Array.from(obj) //[undefined, "bar", 42, undefined]
复制代码

例4 对象有length值，key 值是数值，且key值不在length内

const obj = { 8: 'bar', 6: 42 ,length:4}; 
Array.from(obj) //[undefined, undefined, undefined, undefined]
复制代码

例5 正确完整的例子

const obj = { 8: 'bar', 6: 42 ,length:4}; 
Array.from(obj) //[undefined, undefined, undefined, undefined]
复制代码

2 Object.values(object)

与Array.from不同的是Object.values不需要length属性，返回一个对象所有可枚举属性值

//返回结果根据对象的values大小从小到大输出
const obj = { 100: 'a', 2: 'b', 7: 'c' };  
Object.values(obj)  
// ["b", "c", "a"] 
复制代码



3 Object.keys(object)

返回一个对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致

//返回结果根据对象的values大小从小到大输出
const obj = { 100: 'a', 2: 'b', 7: 'c' };  
Object.keys(obj)  
// ["2", "7", "100"] 
复制代码



4 Object.entries(object)

返回一个给定对象自身可枚举属性的键值对数组

const obj = { foo: 'bar', baz: 42 }; 
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
复制代码



5 for…in…

for…in… 返回对象key

//返回对象key
function getObjectKeys(object) {
  let keys = []
  for(let property in object)
    keys.push(property)
    return keys
}

const obj = { foo: 'bar', baz: 42 }; 
console.log(getObjectKeys(obj)); 
复制代码



for…in… 返回对象value

//返回对象value
function getObjectValues(object) {
  let values = []
  for(let property in object)
    values.push(object[property])
    return values
}

const obj = { foo: 'bar', baz: 42 }; 
console.log(getObjectValues(obj)); 
复制代码



其他 ---js 获取对象属性长度

const obj = { name: 'bar', age: 42}; 

// 获取可枚举属性的长度
Object.keys(obj).length
// 带有不可枚举属性
Object.getOwnPropertyNames(obj).length
复制代码

for…in 只遍历对象自身的和继承的可枚举的属性 Object.keys() 返回对象自身的所有可枚举的属性的键名 JSON.stringify() 只串行化对象自身的可枚举的属性 Object.assign() 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性