javascript 类数组转数组的五种姿势

什么是类数组

拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)

var aDivs = document.querySelectorAll('div'); // 类数组

function hello (){  

console.log(arguments);//类数组

   console.log(arguments.length);

}

hello(1);

var arr = {'1':'哈哈','2':'呼呼','4':'嘿嘿',length:5};// 类数组

var str=Array.prototype.join.call(a,'+');//'+哈哈+呼呼++嘿嘿'//非类数组示例

var noArr = {'1':2};   //没有length属性就不是类数组

2.不具有数组所具有的方法

shift,unshift,splice,slice,concat,reverse,sort...

为什么要转换类数组为数组

由于类数组不具有数组所具有的操作数组的方法,将类数组转换为数组之后就能调用如shift,unshift,splice,slice,concat,reverse,sort等这些强大的方法。

如何转换 类数组=>数组

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>爱问医康</title>

</head>

<body>

    <img id="hitarea" src="http://imgdev.cdn.chspu.com/2018/06/27/a40052fa.jpg" />

    <div ></div>

    <div ></div>

</body>

<script src="test.js"></script>

</html>

第一种 Array.prototype.slice.call(arguments)

var aDivs = document.querySelectorAll('div');

console.log("是否是數組 =>",aDivs instanceof Array);

var newArr = Array.prototype.slice.call(aDivs);

console.log(newArr);

console.log("是否是數組 =>",newArr instanceof Array);

 

image.png

第二种 Array.prototype.concat.apply([],aDivs)

var aDivs = document.querySelectorAll('div');

console.log(aDivs);

console.log("是否是數組 =>",aDivs instanceof Array);

var newArr3 = Array.prototype.concat.apply([],aDivs);

newArr3.push(1);

console.log(newArr3);

console.log("是否是數組 =>",newArr3 instanceof Array);

 

image.png

第三种 Array.prototype.splice.apply()

var aDivs = document.querySelectorAll('div');

console.log(aDivs);

console.log("是否是數組 =>",aDivs instanceof Array);

var resultArr = [];

var argumentsArr=[0,0];

for (var i = 0; i < aDivs.length; i++) {

  argumentsArr.push(aDivs[i]);  

}

Array.prototype.splice.apply(resultArr,argumentsArr);

console.log(resultArr);

console.log("是否是數組 =>",resultArr instanceof Array);

 

image.png

第四种 新建一个数组,然后直接push进去(这样感觉是在作弊啊 【偷笑脸】)

var aDivs = document.querySelectorAll('div');

console.log(aDivs);

console.log("是否是數組 =>",aDivs instanceof Array);

var resultArr = [];

for (var i = 0; i < aDivs.length; i++) {

  resultArr.push(aDivs[i]);  

}

console.log(resultArr);

console.log("是否是數組 =>",resultArr instanceof Array);

 

image.png

第五 Array.from(aDivs)

完结

总结
明显Array.prototype.slice.call(arguments),这种方式优势明显。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值