ES6新特性之数组、Math和扩展操作符用法示例


Posted in Javascript onApril 01, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
手机端转换rem适应
Apr 01 #Javascript
ES6新特性之变量和字符串用法示例
Apr 01 #Javascript
ES5学习教程之Array对象
Apr 01 #Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 #Javascript
js实现音频控制进度条功能
Apr 01 #Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 #Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 #Javascript
You might like
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python 中的 else详解
2016/04/23 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python面向对象进阶学习
2019/05/21 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python 获取计算机的网卡信息
2021/02/18 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
导游词之张家口
2019/12/13 职场文书