编写时间:2019-08-21
更新时间:2019-08-21作者:鬼小妞
备注: 本文
整理
了类数组转换成数组、对象转换成数组的方法状态:
已完成、待整合
2019-08-21
类数组转换成数组
[].slice.call
(arguments) 或Array.prototype.slice.call
(arguments)Array.from
(arguments)-
[...xxx]
展开运算符
对象转换成数组
类数组转换成数组
[].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) //[]
}()
复制代码
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 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把对象转换为数组
对于需要把对象的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的属性,只拷贝对象自身的可枚举的属性