ES6新增的數(shù)組知識(shí)實(shí)例小結(jié)
本文實(shí)例講述了ES6新增的數(shù)組知識(shí)。分享給大家供大家參考,具體如下:

1.JSON數(shù)組格式轉(zhuǎn)換
JSON的數(shù)組格式就是為了前端快速的把JSON轉(zhuǎn)換成數(shù)組的一種格式,json數(shù)組格式如下:
let json = {
'0': '男',
'1': '女',
length:3
}
這就是一個(gè)標(biāo)準(zhǔn)的JSON數(shù)組格式,跟普通的JSON對(duì)比是在最后多了一個(gè)length屬性。只要是這種特殊的json格式都可以輕松使用ES6的語法轉(zhuǎn)變成數(shù)組。
把上邊的JSON代碼使用Array.from(xxx)來轉(zhuǎn)換成數(shù)組,代碼如下:
let json = {
'0': '男',
'1': '女',
length: 2
}
let arr = Array.from(json)
console.log(arr)
結(jié)果為:
["男", "女"]
上述中的length的值等于json中的除length:2以為的總和,若值多余實(shí)際,在數(shù)組中則會(huì)出現(xiàn)undefined。如下:

結(jié)果為:

2.Array.of()方法
它負(fù)責(zé)把一堆文本或者變量轉(zhuǎn)換成數(shù)組。在開發(fā)中我們經(jīng)常拿到了一個(gè)類似數(shù)組的字符串,需要使用eval來進(jìn)行轉(zhuǎn)換,會(huì)拖慢我們的程序。這時(shí)候我們就可以使用Array.of方法。比如:
let arr =Array.of(3,4,5,6); console.log(arr);
結(jié)果為:

當(dāng)然它不僅可以轉(zhuǎn)換數(shù)字,字符串也是可以轉(zhuǎn)換的。
let arr =Array.of('es6',1,'開發(fā)');
console.log(arr);
結(jié)果為:

3.find( )實(shí)例方法
所謂的實(shí)例方法就是并不是以Array對(duì)象開始的,而是必須有一個(gè)已經(jīng)存在的數(shù)組,然后使用的方法。也即實(shí)例方法是針對(duì)已存在的數(shù)組的。
在find方法中我們需要傳入一個(gè)匿名函數(shù),函數(shù)需要傳入三個(gè)參數(shù)
- value:表示當(dāng)前查找的值。
- index:表示當(dāng)前查找的數(shù)組索引。
- arr:表示當(dāng)前數(shù)組。
在函數(shù)中如果找到符合條件的數(shù)組元素就進(jìn)行return,并停止查找。相關(guān)代碼如下:
let arr=[0,1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 6;
}))
返回結(jié)果為:7。說明找到了符合條件的值,并進(jìn)行返回了,如果找不到會(huì)顯示undefined
4.fill( )實(shí)例方法
fill()也是一個(gè)實(shí)例方法,它的作用是把數(shù)組進(jìn)行填充,它接收三個(gè)參數(shù),第一個(gè)參數(shù)是填充的變量,第二個(gè)是開始填充的位置,第三個(gè)是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('es',2,5);
console.log(arr);
結(jié)果為:

上邊的代碼是把數(shù)組從第二位到第五位用es進(jìn)行填充。
5.數(shù)組的遍歷--for…of循環(huán)
(1)輸出數(shù)組內(nèi)容
let arr=['男','女']
for (let item of arr){
console.log(item);
}
結(jié)果為:男、女。
(2)輸出數(shù)組索引
let arr=['男','女']
for (let index of arr.keys()){
console.log(index);
}
輸出值為:
0、1
(3)同時(shí)輸出數(shù)組的內(nèi)容和索引--entries()方法
let arr=['男','女']
for (let [index,val] of arr.entries()){
console.log(index+":"+val);
}
結(jié)果為:

6.entries( )實(shí)例方法
entries()實(shí)例方式生成的是Iterator形式的數(shù)組,那這種形式的好處就是可以讓我們?cè)谛枰獣r(shí)用next()手動(dòng)跳轉(zhuǎn)到下一個(gè)值。如下代碼:
let arr=['男','女'] let list=arr.entries(); console.log(list.next().value); console.log(list.next().value);
結(jié)果為:

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 淺談ES6新增的數(shù)組方法和對(duì)象
- ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))
- ES6中數(shù)組array新增方法實(shí)例總結(jié)
- 詳解es6新增數(shù)組方法簡便了哪些操作
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析
- ES6新特征數(shù)字、數(shù)組、字符串
- ES6數(shù)組的擴(kuò)展詳解
- ES6新特性七:數(shù)組的擴(kuò)充詳解
- ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法示例
- ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
相關(guān)文章
詳談js中數(shù)組(array)和對(duì)象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對(duì)象(object)的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開...2007-08-08
JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
本文給大家總結(jié)了javascript函數(shù)的一些注意要點(diǎn)及js匿名函數(shù),主要知識(shí)點(diǎn)有:函數(shù)的基本語法、函數(shù)的參數(shù)、函數(shù)的重載相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11
el-tree限制選中個(gè)數(shù)的實(shí)例
這篇文章主要介紹了el-tree限制選中個(gè)數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解,對(duì)于大家學(xué)習(xí)javascript中的return知識(shí)有所幫助,感興趣的朋友一起學(xué)習(xí)吧2015-11-11
Bootstrap的aria-label和aria-labelledby屬性實(shí)例詳解
這篇文章主要介紹了Bootstrap的aria-label和aria-labelledby屬性實(shí)例詳解,需要的朋友可以參考下2018-11-11

