本文實例講述了ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法。分享給大家供大家參考,具體如下:
目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、宜興網(wǎng)站維護(hù)等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
一、Array
Array對象增加了一些新的靜態(tài)方法,Array原型上也增加了一些新方法。
1.Array.from 從類數(shù)組和可遍歷對象中創(chuàng)建Array的實例
類數(shù)組對象包括:函數(shù)中的arguments、由document.getElementsByTagName()返回的nodeList對象、新增加的Map和Set數(shù)據(jù)結(jié)構(gòu)。
//in ES6中 類數(shù)組轉(zhuǎn)換為數(shù)組的方法 let itemElements=document.querySelectorAll('.item'); let items=Array.from(itemElements); items.forEach(function(item){ console.log(item.nodeType); }); //in ES5 類數(shù)組轉(zhuǎn)換數(shù)組的方法 var items=Array.prototype.slice.call(itemElements);
上面的例子中,類數(shù)組對象itemElements對象是不具備數(shù)組方法forEach()的,但可以通過Array.from()方法轉(zhuǎn)換為Array。
Array.from()另一個特性是它的第二個可選參數(shù)mapFunction,該參數(shù)允許你通過一次單獨調(diào)用創(chuàng)建一個新的映射數(shù)組:
let navElements=document.querySelectorAll("nav li"); let navTitles=Array.from(navElements,el=>el.textContent);
2.Array.of方法
該方法表現(xiàn)的很像Array的構(gòu)造函數(shù),它適合只傳一個參數(shù)的情況,因此Array.of是new Array()的更優(yōu)選擇,所以,構(gòu)建數(shù)組的方式,現(xiàn)在有三種:
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返回回調(diào)返回true的第一個元素
2)findIndex返回回調(diào)函數(shù)返回true的第一個元素的下標(biāo)
3)fill用所給參數(shù)‘覆蓋'數(shù)組的元素
[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返回數(shù)字的符號,結(jié)果為1、-1或0 Math.sign(5);//1 Math.sign(-9)//-1 //Math.trunc 返回?zé)o小數(shù)位的數(shù)字 Math.trunc(5.9);//5 Math.trunc(6.8908);//6 //Math.cbrt返回數(shù)字的立方根 Math.cbrt(64);//4
三、擴(kuò)展操作符
擴(kuò)展操作符用于特定地方擴(kuò)展元素,例如:在一個數(shù)組中擴(kuò)展一個數(shù)組的元素。
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]
再如 函數(shù)調(diào)用中的參數(shù)中的應(yīng)用:
let values=[1,2,4]; doSomething(...values); function doSomething(x,y,z){ //x=1.y=2,z=4 } //在ES5中的調(diào)用方式 doSomething.apply(null,values);
正如所看到的,該語法使我們免去使用fn.apply()的麻煩,它很靈活,因為擴(kuò)展操作符可以用在參數(shù)列表中的任意位置。
我們已經(jīng)看到把擴(kuò)展操作符應(yīng)用在數(shù)組和參數(shù)中,事實上,我們可以把它用在所有可比案例的對象中:
let form = document.querySelectorAll('#my-form'). inputs=form.querySelectorAll('input'); selects=form.qurySelectorAll('select'); let allTheThings=[form,...inputs,...selects];
現(xiàn)在,allTheThings是一個包含