form 转化为真正的数组
先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作;
var inputObjs=document.getElementsByTagName('input'); for(var i=0;i
这样写肯定是没有问题的,但是我们知道很多操作数组的方法比for循环好用多了,比如es5的forEach方法就很好用;但是能直接用吗?不能!因为dom对象集合不是一个真正得Array数组类型,直接使用会报错的;
var inputObjs=document.getElementsByTagName('input'); inputObjs.forEach(); //inputObjs.forEach is not a function
尽管如此我们还是可以用,不能直接用可以间接用,使用js强大的对象冒充功能即可;
var inputObjs=document.getElementsByTagName('input'); console.info(inputObjs); //[]length: 0__proto__: HTMLCollection console.info([].slice.call(inputObjs)); //[]length: 0__proto__: Array[0]
这样转化为真正的数组之后就可以随便调用数组的方法啦;这种方法固然可行,但是不太容易理解而且太过于“曲折”,es6给我们提供了一个更为简单直接的方法,form,使用起来很简单:
var inputObjs=document.getElementsByTagName('input'); console.info(inputObjs); //[]length: 0__proto__: HTMLCollection console.info(Array.from(inputObjs)); //[]length: 0__proto__: Array[0]
结果是一样的但是语义上更加贴切也更容易理解,是不是很好用啊!当然这些还不够,不仅仅是类数组任何数据类型都能使用此方法转化为数组,但是不同的类型效果是不一样的,测试如下:
let str='google'; console.log(Array.from(str)); //["g", "o", "o", "g", "l", "e"] let num=234; console.log(Array.from(num)); //[] let bol=false; console.log(Array.from(bol)); let obj={foo:'foo',bar:'bar'}; console.log(Array.from(obj)); //[] let superObj={0:'foo',1:'bar',length:2}; console.log(Array.from(superObj)); //["foo", "bar"]
这里列出了不同的数据类型调用该方法后的结果,值得留意的是字符串和一些特殊对象是可以转化为有内容的数组的,特殊的对象是指内容按照数字键值对排列,并且有length属性的对象;这种对象是可以使用for循环的,而字符串也是可以使用for循环来得到每一个字符的,所以归结为一句话,能使用for循环输出内容的使用from方法就不是一个空数组;在这里提醒一下,使用过jQuery的小伙伴可以留意一下,当你使用选择器选择元素返回的jquery对象是什么结构的?其实就是我们例子中最后一个的结构,具体可以参考我的jQuery源码分析系列文章
of 将值转化为数组
创建数组有两种方法一种是构造函数式:
let arr=Array(1,2,3);
另一种是最常用的字面量创建:
let arr=[1,2,3];
Array.of方法其实是对第一个种方式的补充,用法如下:
console.log(Array.of(1,2,3)); //[1,2,3]
貌似跟跟构造方法一样的效果,那这个方法为什么还有存在的必要呢?看下面的例子就明白了:
console.log(Array()); //[] console.log(Array(1)); //[undefined] console.log(Array(1,2)); //[1,2]
在这个例子中参数数量的不同其代表的意义不一样,只有一个参数时,参数表示的是长度,大于1一个参数时表示的元素,会引起混淆,但是Array.of方法就不会存在此问题吗,因为其参数始终表示的元素:
console.log(Array.of()); //[] console.log(Array.of(1)); //[1] console.log(Array.of(1,2)); //[1,2]
copyWithin 数组内部数据复制替换
copyWithin方法主要作用是数组内部值的替换,该方法接受三个参数,分别表示开始复制位置、结束复制位置和插入位置,示例如下:
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]// 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将2号位到数组结束,复制到0号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 对于没有部署TypedArray的copyWithin方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
以上所述是小编给大家介绍的ES6中的数组扩展方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!