时间:2021-05-28
本文实例讲述了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用所给参数‘覆盖'数组的元素
二、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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了es6数组之扩展运算符操作。分享给大家供大家参考,具体如下:扩展运算符(spread)是三个点(…)。它好比rest参数的逆运算,将一个数组转为用
前言本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性。rest参数的形式为:...变量名;扩展运
本文实例讲述了ES6新特性之Symbol类型用法。分享给大家供大家参考,具体如下:Symbol类型1.为了避免属性名的冲突,ES6新增了Symbol类型。Sym
本文实例讲述了ES6扩展运算符用法。分享给大家供大家参考,具体如下:扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值,扩展运算符有以
本文实例讲述了ES6(ECMAScript6)新特性之模板字符串用法。分享给大家供大家参考,具体如下:ES6引入了一种新型的字符串字面量语法,我们称之为模板字符