类数组对象、类数组对象转化为数组的多种方式
类数组对象
在javascript中,数组是一个特殊的对象,其属性名为正数组,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承一些用于进行数组操作的方法,而对于一个普通的对象来说,如果它的所有属性名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为"类数组对象"
如:
var obj ={0:42,1:52,2:63,length:3}
与普通对象不同的是,类数组对象拥有一个特性:可以在类数组对象上应用数组的一些操作方法。
类数组对象转化为数组的多种方式
方法一 : for in&for of
let obj = {
'one': 4,
'two': 2,
'three': 7,
'four': 9,
'length':4
}
let arrEmpty = [];
for (let i in obj) {
arrEmpty.push(obj[i]);
}
console.log(arrEmpty); //[4,2,7,9]
// for(let i of obj){
// console.log(obj[i]);// obj is not iterable
// }
//for of 不能用于对象;二者都可遍历数组
//for of 中i代表数组中每一项的值
//for in 中i代表数组中的索引;代表对象中的每一项的属性名
方法二 : Object.key()&Object.values()
var arr1 = Object.keys(obj);
//Object.keys把对象属性名集合放进数组
console.log(arr1); //['one','two','three','four']
var arr2= Object.values(obj);
//Object.values把对象属性值集合放进数组
console.log(arr2); //[4,2,7,9]
方法三 : Array.from()
let obj1 = {
'0': 4,
'1': 2,
'2': 7,
'3': 9,
'length': 4
}
var arr5 = Array.from(obj1);
console.log(arr5);
//Array.from()把对象转化为数组,
//必需条件:1.属性名必须为数值;2.必须带有length值
方法四 : 扩展运算符
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
let oDivs = document.getElementsByTagName('div');
console.log(typeof oDivs); //object
console.log(oDivs instanceof Array); //false
oDivs = [...oDivs];
console.log(oDivs);//[div, div, div, div, div]
console.log(typeof oDivs); //object
console.log(oDivs instanceof Array); //true
</script>
方法五 : Array.prototype.slice.call()
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane', 'john', 'Mary'],
'length': 4
}
let list = Array.prototype.slice.call(arrayLike);
console.log(list);//["tom", "65", "男", Array(3)]
//当对象中没有length属性时,返回空数组
let obj2 = {
'未完成': 5,
'已完成': 8,
'待确认': 4,
'已取消': 6,
'length': 4
};
let arr3 = Array.prototype.slice.call(obj2);
console.log(arr3);
// 作用对象有length属性,但属性名不为正数组,返回length长度的空数组