中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ES6新特性之數組、Math和擴展操作符用法示例

發布時間:2020-08-26 09:05:11 來源:腳本之家 閱讀:161 作者:晴天碧日 欄目:web開發

本文實例講述了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程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

原阳县| 开化县| 鹤庆县| 苗栗县| 崇明县| 米林县| 嵊泗县| 平昌县| 三原县| 屯昌县| 大连市| 双峰县| 玉屏| 勐海县| 英吉沙县| 保靖县| 汝南县| 安平县| 安泽县| 乐陵市| 蒙山县| 普格县| 定安县| 合江县| 定陶县| 宁阳县| 大同县| 呼和浩特市| 邢台县| 德令哈市| 商洛市| 伊金霍洛旗| 铜川市| 土默特右旗| 辛集市| 工布江达县| 青神县| 高要市| 朔州市| 樟树市| 额敏县|