首页 行业资讯 宠物日常 宠物养护 宠物健康 宠物故事
您的当前位置:首页正文

如何用slice将类数组转换成数组

2020-11-27 来源:画鸵萌宠网

这篇文章分两部分,第一部分是slice()的使用,第二部分是用slice将类数组转换成数组,有需要的朋友可以参考一下,希望对你有所帮助。

第一部分:

官方文档说:slice是用来截取选取数组的,可传入一个或两个参数,返回值是新数组,不会影响原数组。
先new了Array一个数组 str

 var str = new Array();
 str[0] = 1;
 str[1] = 2;
 str[2] = 3;
 str[3] = 4;
 str[4] = 5;

返回值是选取的新数组,原数组是不会被修改的。

如果是一个参数就是从何处开始(下标)选取到数组的末尾。

var strs = str.slice(2);
console.log(strs); // [3, 4, 5]
console.log(str); // [1, 2, 3, 4, 5]

如果传入二个参数就是从第一个参数(下标)开始选取到第二个参数(下标)结束,但是不包括第二个参数

var strs = str.slice(2,4);
console.log(strs); // [3, 4]

如果传入的是负数,规定从数组的尾部开始算起,-1指最后一个元素,-2指倒数第二个元素,以此类推

var strs = str.slice(-2);
console.log(strs); // [4, 5]

如果传入两个负数,和上面一样 不过都是都从数组的尾部开始。

var strs = str.slice(-4,-1);
console.log(strs); // [2, 3, 4]

如果传入两个参数,第二个参数小于第一个参数,那么结果为空数组(负数也同理)。

var strs = str.slice(-1,1); 
console.log(strs); // [ ]

好了 上面就是slice函数的使用方式

不过在实践中一般是用来将类数组转换成数组。

这是我之前写的一串HTML代码用来获取类数组

 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>

结果如下:

var NodeList = document.querySelectorAll("div");
console.log(NodeList); //NodeList(10) [div, div, div, div, div, div, div, div, div, div]
NodeList = [].slice.call(NodeList);
console.log(NodeList) //(10) [div, div, div, div, div, div, div, div, div, div]

第一行是先获取一串类数组
第二行是在控制台输出类数组
第三行是转换类数组(需要用变量来接受)或者Array.prototype.slice.call(NodeList)也是可以的,两个是同理
第四行是在控制台输出转换过的数组。
不知道你学会了没?我也不知道学会没,反正我自己敲了好几遍,哈哈。

显示全文