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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
浅谈react useEffect闭包的坑
Jun 08 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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python星号*与**用法分析
2018/02/02 Python
python中rb含义理解
2020/06/18 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
数学系个人求职信范文
2014/01/30 职场文书
家长学校实施方案
2014/03/15 职场文书
高一新生军训方案
2014/05/12 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
应用外语系自荐信
2014/06/26 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
全陪导游词
2015/02/04 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
Linux中各个目录的作用与内容
2022/06/28 Servers