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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 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多个版本的分析解释
2011/07/21 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
php基础教程
2015/08/26 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python中的闭包总结
2014/09/18 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
为什么使用接口?
2014/08/13 面试题
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
大学生村官承诺书
2014/03/28 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
上班迟到检讨书
2015/05/06 职场文书
任命书格式范文
2015/09/22 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技