网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

ES6新特性之数组、Math和扩展操作符用法示例

本文实例讲述了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是一个包含

节点、子节点和