你不知道的秘密之JS对象转化为数组的方法

• 方法一 : 利用for in循环遍历对象中的所有属性

  • Tips : 优先以数组下标为属性名查找属性值

    var obj = {
      name: 'liu',
      1: 3,
      age: 18,
      0: 2,
      length: 1,
    }
    var arr = [];
    for (var key in obj) {
    	arr.push(obj[key]);
    }
    console.log(arr);
    // 预期结果 : ['liu', 3, 18, 2, 1]
    // 实际结果 : [ 2, 3, 'liu', 18, 1 ]
    

• 方法二 : obj借用Array.prototype.slice方法

  • Tips : 以数组下标为属性名查找属性值 , 返回length长度的数组

    var obj = {
      name: 'liu',
      1: 3,
      age: 18,
      0: 2,
      length: 1,
    };
    var arr = Array.prototype.slice.call(obj);
    console.log(arr); // [2]
    

• 方法三 : Array.from方法以obj为原型创造新数组

  • Tips : 以数组下标为属性名查找属性值 , 返回length长度的数组

    var obj = {
      name: 'liu',
      1: 3,
      age: 18,
      0: 2,
      length: 1,
    };
    var arr = Array.from(obj);
    console.log(arr); // [2]
    

• 方法四 : 使用Object.keys方法和for of循环

  	var obj = {
  	  name: 'liu',
  	  1: 3,
  	  age: 18,
  	  0: 2,
  	  length: 1,
  	};
  	
  	var keys = Object.keys(obj),
  	  len = keys.length,
  	  arr = [];
  	for (var key of keys) {
  	  arr.push(obj[key]);
  	}
  	console.log(arr);
  	// 预期打印 : [ 'liu', 3, 18, 2, 1 ]
  	// 实际打印 : [ 2, 3, 'liu', 18, 1 ]
  	```
  	
  

• Tips : MDN-doc
  

• 方法五 : obj借用Array.prototype.forEach方法

  • Tips : 以数组下标为属性名查找属性值 , 返回length长度的数组

    var obj = {
      name: 'liu',
      1: 3,
      age: 18,
      0: 2,
      length: 1,
    }
    var arr = [];
    Array.prototype.forEach.call(obj, function (item) {
      arr.push(item);
    })
    console.log(arr); // [ 2 ]
    

• 方法六 : obj借用Array.prototype.map方法

  • Tips : 以数组下标为属性名查找属性值 , 返回length长度的数组

    var obj = {
      name: 'liu',
      1: 3,
      age: 18,
      0: 2,
      length: 1,
    }
    var arr = [];
    Array.prototype.map.call(obj, function (item) {
      arr.push(item);
    })
    console.log(arr); // [ 2 ]