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学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
解析php中call_user_func_array的作用
2013/06/07 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
Python 性能优化技巧总结
2016/11/01 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python实现感知器算法(批处理)
2019/01/18 Python
python3正则模块re的使用方法详解
2020/02/11 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
亮剑观后感600字
2015/06/05 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python