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>子節點的二維數組。