ES6對數(shù)組的拓展(2018-04-17)

Array.of()函數(shù)

? ??函數(shù)作用:將一組值扶镀,轉(zhuǎn)換成數(shù)組。

????傳進去的數(shù)字是:1~5臭觉,最后經(jīng)過Array.of函數(shù)處理蝠筑,得到了一個數(shù)組什乙,而數(shù)組的內(nèi)容就是[1,2,3,4,5]。

Array.from( )函數(shù)

? ??函數(shù)作用:可以將類似數(shù)組的對象或者可遍歷的對象轉(zhuǎn)換成真正的數(shù)組辅愿。

let ele = document.getElementsByTagName('a');
ele?instanceof Array;? //結(jié)果:false点待,不是數(shù)組
ele instanceof Object; //結(jié)果:true弃舒,是對象

????我們調(diào)用getElementsByTagName方法聋呢,得到結(jié)果存到變量ele中,然后對其進行類型判斷徒探,發(fā)現(xiàn)變量ele并不是一個數(shù)組测暗,而是一個對象Array,一個類似數(shù)組的對象Object碗啄,接下來我們用Array.from( )對其進行處理,并再一次進行類型判斷饲宿。

Array.from(ele)instanceof Array;
?//結(jié)果:true胆描,是數(shù)組

? ??這個時候我們運行的結(jié)果是:true昌讲,也就是經(jīng)過Array.from函數(shù)處理返回的結(jié)果短绸,已經(jīng)變成了一個真正的數(shù)組。?Array.from函數(shù)其中一個用處就是將字符串轉(zhuǎn)換成數(shù)組窄驹±植海看下面的案例:

let str = 'hello';
Array.from(str); //結(jié)果:["h", "e", "l", "l", "o"]

find( )函數(shù)

? ??函數(shù)作用:找出數(shù)組中符合條件的第一個元素丈咐。

let arr = [1,2,3,4,5,6];
arr.find(function(value){
????return value > 2;
});
//結(jié)果:value=3

????find()函數(shù)的參數(shù)是一個匿名函數(shù)洞拨,數(shù)組的每個元素都會進入匿名函數(shù)執(zhí)行烦衣,直到結(jié)果為true花吟,find函數(shù)就會返回value的值:3。倘若所有元素都不符合匿名函數(shù)的條件键菱,find( )函數(shù)就會返回undefind经备。

findIndex( )函數(shù)

? ? 函數(shù)作用:返回符合條件的第一個數(shù)組成員的位置侵蒙。

let arr = [7,8,9,10];
arr.findIndex(function(value){
????return value > 8;
});
? ?//結(jié)果:2

????上面的代碼結(jié)果是:2,因為數(shù)組元素中大于8的元素是9算凿,而元素9的位置正式2氓轰,(數(shù)組元素是從0算起)浸卦。倘若所有元素都不符合匿名函數(shù)的條件镐躲,findIndex( )函數(shù)就會返回-1侍筛。

fill( )函數(shù)

? ??函數(shù)作用:用指定的值匣椰,填充到數(shù)組。

let arr = [1,2,3];
? ??arr.fill(4);
????//結(jié)果:[4,4,4]

????經(jīng)過fill( )函數(shù)處理后的數(shù)組arr已經(jīng)變成了[4,4,4]入录;正如函數(shù)名fill(填充)一樣佳镜。所有元素都被填充為數(shù)字4了蟀伸。如果我想只填充部分元素可不可以呢啊掏?可以的迟蜜,fill( )函數(shù)提供了一些參數(shù)娜睛,用于指定填充的起始位置和結(jié)束位置。

let arr = [1,2,3];
? ??arr.fill(4,1,3);
//結(jié)果:[1,4,4]

????上面的代碼中第2個參數(shù)和第3個參數(shù)的意思是:從位置1的元素開始填充數(shù)字4方库,截止到位置3之前薪捍,所以是位置1和位置2的元素被數(shù)字4填充了凳干,得到的結(jié)果:[1,4,4]被济。

entries( )函數(shù)

????函數(shù)作用:對數(shù)組的鍵值對進行遍歷救赐,返回一個遍歷器,可以用for..of對其進行遍歷只磷。

for(let [i,v] of ['a', 'b'].entries())
{
? ??console.log(i,v);
}
//0 "a"
//1 "b"

????上面的代碼中经磅,我們將entries( )函數(shù)返回的一個遍歷器,用for...of進行遍歷钮追,并打印出結(jié)果预厌,能得到數(shù)組的鍵值:0和1,以及對應(yīng)的數(shù)組元素:‘a(chǎn)‘和’b‘元媚。

for...in和for...of的區(qū)別:

? ? 1轧叽、for … in循環(huán)由于歷史遺留問題,它遍歷的實際上是對象的屬性名稱刊棕。一個Array數(shù)組實際上也是一個對象炭晒,它的每個元素的索引被視為一個屬性。當我們手動給Array對象添加了額外的屬性后网严,for … in循環(huán)將帶來意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';

for (var x in a) {
? ? alert(x); // '0', '1', '2', 'name'
}

????for … in循環(huán)將把name包括在內(nèi)翁巍,但Array的length屬性卻不包括在內(nèi)。

? ? 2担扑、for … of循環(huán)則完全修復(fù)了這些問題首有,它只循環(huán)集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';for (var x of a) {
????alert(x); // 'A', 'B', 'C'
}

? ? 3、然而轴捎,更好的方式是直接使用iterable內(nèi)置的forEach方法秦驯,它接收一個函數(shù)葱蝗,每次迭代就自動回調(diào)該函數(shù)。以Array為例:

var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){? ?
? ??// element: 指向當前元素的值
? ? // index: 指向當前索引
? ? // array: 指向Array對象本身? ?
?? alert(element);
});

????注意,forEach()方法是ES5.1標準引入的,你需要測試瀏覽器是否支持。

keys( )函數(shù)

? ? 函數(shù)作用:對數(shù)組的索引鍵進行遍歷访诱,返回一個遍歷器哀峻。

for(let index of ['a', 'b'].keys())
{
? ??console.log(index);
}
//0
//1

values( )函數(shù)

????作用:對數(shù)組的元素進行遍歷漾峡,返回一個遍歷器且预。

for(let value of ['a', 'b'].values())
{
? ??console.log(value);
}
//a
//b

數(shù)組推導(dǎo)?

????數(shù)組推導(dǎo):用簡潔的寫法涮拗,直接通過現(xiàn)有的數(shù)組生成新數(shù)組。

? ? 舉個例子:加入我們有一個數(shù)組,我在這個數(shù)組的基礎(chǔ)上首妖,每個元素乘以2舌仍,得到一個新數(shù)組节芥。

? ? 我們看看傳統(tǒng)的實現(xiàn)方法:

var arr1 = [1,2,3,4];
var arr2 = [];
for(let i=0;i<arr1.length;i++){
????//每個元素乘以2后魄幕,push到數(shù)組arr2
? ??arr2.push(arr1[i]*2);
}
console.log(arr2);
//結(jié)果:[2,4,6,8]

????傳統(tǒng)的方式翼抠,除了以上的方式量愧,我們還可以用forEach方法實現(xiàn)。但我們現(xiàn)在介紹的主要是利用ES6提供的新寫法:數(shù)組推導(dǎo)。

var arr1 = [1, 2, 3, 4];
? ?var arr2 = [for(i ofarr1) i* 2];
? ?console.log(arr2);
? ?//結(jié)果: [ 2, 4, 6, 8 ]

????在數(shù)組推導(dǎo)中,for..of后面還可以加上if語句赌朋,我們看來看看代碼案例:

var array1 = [1, 2, 3, 4];
var array2 = [for(i ofarray1)if(i>3) i];
console.log(array2);
//結(jié)果: [4]

????在上面代碼中逾冬,我們不再是對數(shù)組的元素乘以2愈诚,而是用if做了個判斷:數(shù)組的元素要大于3。所以運行的結(jié)果是:[ 4 ]际插。


????總結(jié):ES6為數(shù)組帶來了很多很實用的方法:Array.of( )、Array.from( )膝擂、find( )总珠、findIndex( )搏讶、fill( )月弛、entries( )厉萝、values(),此外還有一個更簡潔的語法:數(shù)組推導(dǎo)舞肆,能讓我們更方便地生成一個新數(shù)組椿胯。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市嘶炭,隨后出現(xiàn)的幾起案子睡陪,更是在濱河造成了極大的恐慌晋控,老刑警劉巖赡译,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異不铆,居然都是意外死亡蝌焚,警方通過查閱死者的電腦和手機裹唆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來只洒,“玉大人许帐,你說我怎么就攤上這事”锨矗” “怎么了成畦?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長涝开。 經(jīng)常有香客問我循帐,道長,這世上最難降的妖魔是什么舀武? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任拄养,我火速辦了婚禮,結(jié)果婚禮上奕剃,老公的妹妹穿的比我還像新娘衷旅。我一直安慰自己,他們只是感情好纵朋,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布柿顶。 她就那樣靜靜地躺著,像睡著了一般操软。 火紅的嫁衣襯著肌膚如雪嘁锯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天聂薪,我揣著相機與錄音家乘,去河邊找鬼。 笑死藏澳,一個胖子當著我的面吹牛仁锯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播翔悠,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼业崖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蓄愁?” 一聲冷哼從身側(cè)響起双炕,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎撮抓,沒想到半個月后妇斤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年站超,在試婚紗的時候發(fā)現(xiàn)自己被綠了荸恕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡顷编,死狀恐怖戚炫,靈堂內(nèi)的尸體忽然破棺而出剑刑,到底是詐尸還是另有隱情媳纬,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布施掏,位于F島的核電站钮惠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏七芭。R本人自食惡果不足惜素挽,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狸驳。 院中可真熱鬧预明,春花似錦、人聲如沸耙箍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辩昆。三九已至阅酪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間汁针,已是汗流浹背术辐。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留施无,地道東北人辉词。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像猾骡,于是被迫代替她去往敵國和親瑞躺。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Javascript有很多數(shù)組的方法卓练,有的人有W3C的API隘蝎,還可以去MDN上去找,但是我覺得API上說的不全襟企,M...
    頑皮的雪狐七七閱讀 4,063評論 0 6
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile麗語閱讀 3,827評論 0 6
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)嘱么,也就是一...
    悟名先生閱讀 4,118評論 0 13
  • 1、新的聲明方式 以前我們在聲明時只有一種方法顽悼,就是使用var來進行聲明曼振,ES6對聲明的進行了擴展几迄,現(xiàn)在可以有三種...
    令武閱讀 996評論 0 7
  • 青海旅游必備青海旅游
    醉青海閱讀 305評論 0 1