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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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 引用文件技巧
2010/03/02 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
JS删除字符串中重复字符方法
2014/03/09 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
护理专业的自荐信
2013/10/22 职场文书
优秀教师获奖感言
2014/01/31 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
小学生新年寄语
2014/04/03 职场文书
家长通知书家长评语
2014/04/17 职场文书
居安思危观后感
2015/06/11 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL