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程序设计有所帮助。
相关文章
- 这篇文章主要介绍了详解ES6实现类的私有变量的几种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-10
- 下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-04-16
- 这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-21
- Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法...2016-01-08
- 这篇文章主要介绍了一些JavaScript常用字符串与数组扩展函数,整理了一些简单而使用率又高的操作String与Array的函数,需要的朋友可以参考下...2016-04-25
- 本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点,可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。...2021-05-08
- 这篇文章主要介绍了thinkPHP中多维数组的遍历方法,以简单实例形式分析了thinkPHP中foreach语句的使用技巧,需要的朋友可以参考下...2016-01-12
- GTID(Global Transaction ID)是对于一个已提交事务的编号,并且是一个全局唯一的编号。下文给大家介绍MySQL 5.6 GTID新特性实践,感兴趣的朋友一起看看吧...2016-10-20
- 这篇文章主要介绍了ES6新特性之变量和字符串用法,结合具体实例形式分析了ES6中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下...2017-04-03
ES6(ECMAScript 6)新特性之模板字符串用法分析
这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下...2017-04-03- 这篇文章主要介绍了ES6函数实现排它两种写法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-14
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下...2017-05-27- JavaScript数组去重是前端面试酷爱的问题,问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多,到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据,随着数据越多效率很明显的就体验了出来。下面来一起看看吧。...2016-10-25
- 本文通过三种方法给大家介绍js数组去除重复的方法,实用性非常高,感兴趣的朋友一起学习吧...2016-04-24
- 下面小编就为大家带来一篇JavaScript数组去重的两种方法推荐。小编觉得听错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看...2016-04-06
- 这篇文章主要给大家介绍了关于ES6学习教程之Promise用法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-23
- 这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下...2017-04-03
- 这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-10
- 下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20
- 这篇文章主要介绍了ES6 Promise对象概念与用法,简单分析了Promise对象的基本状态与三种重要方法,并结合实例形式给出相关使用技巧,需要的朋友可以参考下...2017-04-03