ES6新特性之数组、Math和扩展操作符用法示例
本文实例讲述了ES6新特性之数组、Math和扩展操作符用法。分享给大家供大家参考，具体如下：
一、Array
Array对象增加了一些新的静态方法，Array原型上也增加了一些新方法。
1.Array.from从类数组和可遍历对象中创建Array的实例
类数组对象包括：函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。
//inES6中类数组转换为数组的方法
letitemElements=document.querySelectorAll('.item');
letitems=Array.from(itemElements);
items.forEach(function(item){
console.log(item.nodeType);
});
//inES5类数组转换数组的方法
varitems=Array.prototype.slice.call(itemElements);
上面的例子中，类数组对象itemElements对象是不具备数组方法forEach()的，但可以通过Array.from()方法转换为Array。
Array.from()另一个特性是它的第二个可选参数mapFunction,该参数允许你通过一次单独调用创建一个新的映射数组：
letnavElements=document.querySelectorAll("navli");
letnavTitles=Array.from(navElements,el=>el.textContent);
2.Array.of方法
该方法表现的很像Array的构造函数，它适合只传一个参数的情况，因此Array.of是newArray()的更优选择，所以，构建数组的方式，现在有三种：
letx=newArray(3);//[undefined,undefined,undefined] lety=Array.of(8);//[8] letz=[1,2,3];
3.Array的find，findIndex,fill方法
1)find返回回调返回true的第一个元素
2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖'数组的元素
[5,3,4,10,1].find(n=>n===10);//10 [5,3,4,10,1].findIndex(n=>n===10);//2 [5,3,4,10,1].fill(7);//[7,7,7,7,7] [5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]
二、Math
Math对象新增了几个新方法：
//Math.sign返回数字的符号，结果为1、-1或0 Math.sign(5);//1 Math.sign(-9)//-1 //Math.trunc返回无小数位的数字 Math.trunc(5.9);//5 Math.trunc(6.8908);//6 //Math.cbrt返回数字的立方根 Math.cbrt(64);//4
三、扩展操作符
扩展操作符用于特定地方扩展元素，例如：在一个数组中扩展一个数组的元素。
letvalues=[1,2,4]; letsome=[...values,8];//[1,2,4,8] letmore=[...values,8,...values];//[1,2,4,8,1,2,4]
再如 函数调用中的参数中的应用：
letvalues=[1,2,4];
doSomething(...values);
functiondoSomething(x,y,z){
//x=1.y=2,z=4
}
//在ES5中的调用方式
doSomething.apply(null,values);
正如所看到的，该语法使我们免去使用fn.apply()的麻烦，它很灵活，因为扩展操作符可以用在参数列表中的任意位置。
我们已经看到把扩展操作符应用在数组和参数中，事实上，我们可以把它用在所有可比案例的对象中：
letform=document.querySelectorAll('#my-form').
inputs=form.querySelectorAll('input');
selects=form.qurySelectorAll('select');
letallTheThings=[form,...inputs,...selects];
现在，allTheThings是一个包含