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 将json字符串转换为json对象的方法解析
Nov 13 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
如何手写简易的 Vue Router
Oct 10 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 win下Socket方式发邮件类
2009/08/21 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
解析link_mysql的php版
2013/06/30 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
2014元旦晚会策划方案
2014/02/19 职场文书
土地转让协议书范本
2014/04/15 职场文书
表扬稿格式范文
2015/01/16 职场文书
音乐研修感悟
2015/11/18 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Python中的嵌套循环详情
2022/03/23 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技