ES6新特性之数组、Math和扩展操作符用法示例
本文实例讲述了es6新特性之数组、math和扩展操作符用法。分享给大家供大家参考,具体如下:
一、array
array对象增加了一些新的静态方法,array原型上也增加了一些新方法。
1.array.from 从类数组和可遍历对象中创建array的实例
类数组对象包括:函数中的arguments、由document.getelementsbytagname()返回的nodelist对象、新增加的map和set数据结构。
//in es6中 类数组转换为数组的方法 let itemelements=document.queryselectorall('.item'); let items=array.from(itemelements); items.foreach(function(item){ console.log(item.nodetype); }); //in es5 类数组转换数组的方法 var items=array.prototype.slice.call(itemelements);
上面的例子中,类数组对象itemelements对象是不具备数组方法foreach()的,但可以通过array.from()方法转换为array。
array.from()另一个特性是它的第二个可选参数mapfunction,该参数允许你通过一次单独调用创建一个新的映射数组:
let navelements=document.queryselectorall("nav li"); let navtitles=array.from(navelements,el=>el.textcontent);
2.array.of方法
该方法表现的很像array的构造函数,它适合只传一个参数的情况,因此array.of是new array()的更优选择,所以,构建数组的方式,现在有三种:
let x=new array(3);// [undefined,undefined,undefined] let y=array.of(8);//[8] let z=[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
三、扩展操作符
扩展操作符用于特定地方扩展元素,例如:在一个数组中扩展一个数组的元素。
let values=[1,2,4]; let some=[...values,8];//[1,2,4,8] let more=[...values,8,...values];//[1,2,4,8,1,2,4]
再如 函数调用中的参数中的应用:
let values=[1,2,4]; dosomething(...values); function dosomething(x,y,z){ //x=1.y=2,z=4 } //在es5中的调用方式 dosomething.apply(null,values);
正如所看到的,该语法使我们免去使用fn.apply()的麻烦,它很灵活,因为扩展操作符可以用在参数列表中的任意位置。
我们已经看到把扩展操作符应用在数组和参数中,事实上,我们可以把它用在所有可比案例的对象中:
let form = document.queryselectorall('#my-form'). inputs=form.queryselectorall('input'); selects=form.quryselectorall('select'); let allthethings=[form,...inputs,...selects];
现在,allthethings是一个包含<form>节点、<input>子节点和<select>子节点的二维数组。
希望本文所述对大家ecmascript程序设计有所帮助。
上一篇: 验方给你介绍
下一篇: 慢性鼻炎患者护鼻两步