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