本文實例講述了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()的麻煩,它很靈活,因為擴展操作符可以用在參數列表中的任意位置。
我們已經看到把擴展操作符應用在數組和參數中,事實上,我們可以把它用在所有可比案例的對象中:
新聞熱點
疑難解答
圖片精選