JavaScript數(shù)組拓展(js數(shù)組form, of, copyWithin, find, fill, includes方法介紹)

Array.from

Array.from 方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組類似數(shù)組的對(duì)象(所謂類似數(shù)組的對(duì)象,本質(zhì)特征只有一點(diǎn)桂肌,即必須有l(wèi)ength屬性狰闪。因此,任何有l(wèi)ength屬性的對(duì)象表制,都可以通過Array.from方法轉(zhuǎn)為數(shù)組) 和 可遍歷的對(duì)象(ES6新增的數(shù)據(jù)結(jié)構(gòu) Set和Map)

在ES5模式的時(shí)候我們一般將一個(gè)類數(shù)組變成一個(gè)數(shù)組的做法是

     var arrayLike = {'0':'a','1':'b','2':'c',length:3};     
     var arr1 = Array.prototype.slice.call(arrayLike);

但在ES6中給我們提供了一個(gè)新的方法就是Array.from()

     var arrayLike = {'0':'a','1':'b','2':'c',length:3}; 
     var arr2 = Array.from(arrayLike);

第二個(gè)參數(shù)

Array.from()還支持第二個(gè)參數(shù), 作用為類似于數(shù)組的map方法, 用來對(duì)每個(gè)元素進(jìn)行處理然后放入返回的數(shù)組之中.

var arr1 = [1,2,3];
var arr2 = Array.from(arr1, function(value, index, arr){
    return value+10;
});
console.log(arr2);//11 12 13

Array.of

由于在ES5的時(shí)候, 使用構(gòu)造方法即new Array(), 無法創(chuàng)建單元素的數(shù)組, Array.of彌補(bǔ)了這一點(diǎn).

var arr = new Array(3);
console.log(arr);//[undefined * 3]

var arr1 = Array.of(3);
console.log(arr1);//[3]

var arr2 = Array.of(1,2,3);
console.log(arr2);//[1,2,3];

數(shù)組實(shí)例的copyWithin()

數(shù)組實(shí)例的copyWithin方法 在當(dāng)前數(shù)組內(nèi)部健爬,將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有成員),然后返回當(dāng)前數(shù)組么介。也就是說娜遵,使用這個(gè)方法,會(huì)修改當(dāng)前數(shù)組壤短。

參數(shù)介紹:

名稱 功能
target(必需) 從該位置開始替換數(shù)據(jù)设拟。
start(可選) 從該位置開始讀取數(shù)據(jù),默認(rèn)為0久脯。如果為負(fù)值纳胧,表示倒數(shù)。
end(可選) 到該位置前停止讀取數(shù)據(jù)帘撰,默認(rèn)等于數(shù)組長(zhǎng)度跑慕。如果為負(fù)值,表示倒數(shù)

例:

     var arr = [1,2,3,4,5,6,7,8,9];
     arr.copyWithin(0,3,6);  
     console.log(arr);//4,5,6,4,5,6,7,8,9

find( )

數(shù)組實(shí)例的find方法摧找,用于找出第一個(gè)符合條件的數(shù)組成員核行。它的參數(shù)是一個(gè)回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)蹬耘,直到找出第一個(gè)返回值為true的成員芝雪,然后返回該成員。如果沒有符合條件的成員综苔,則返回undefined

     var arr = [1,5,10,15];
     var num = arr.find(function(value,index,arr) {
           return value > 9;
     });
     alert(num);//10

findIndex( )

數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似惩系,返回第一個(gè)符合條件的數(shù)組成員的位置,如果所有成員都不符合條件休里,則返回-1蛆挫。

     var index = arr.findIndex(function (value, index, arr) {
        return value > 9;
     })
     alert(index);//2

fill( )

fill方法使用給定值,填充一個(gè)數(shù)組妙黍。

     var arr = ['a','b','c'];
     alert(arr.fill(7));//7,7,7     
     alert(new Array(3).fill(7));//7,7,7     

     // fill方法還可以接受第二個(gè)參數(shù)和第三個(gè)參數(shù)棺聊,用于指定填充的起始位置和結(jié)束位置 下面代碼表示要拂,fill方法從1號(hào)位開始,向原數(shù)組填充7漂问,到5號(hào)位之前結(jié)束。
     console.log(new Array(8).fill(7,1,5));//(8) [undefined × 1, 7, 7, 7, 7, undefined × 3]

includes( )

Array.prototype.includes方法返回一個(gè)布爾值口四,表示某個(gè)數(shù)組是否包含給定的值.

在ES5我們查找一個(gè)數(shù)組是否含有某個(gè)元素時(shí), 使用的是indexOf( )方法.

var arr = [1,2,3,4,NaN];
console.log(arr.indexOf(2));//輸出: 1

console.log(arr.indexOf(NaN));//輸出: -1;
//原因: 在系統(tǒng)底層indexOf是循環(huán)遍歷arr數(shù)組采用'==='絕對(duì)等于來判斷是否含有該元素.

console.log(arr.includes(1))//輸出: true

console.log(arr.include(NaN))//輸出: true
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子捉撮,更是在濱河造成了極大的恐慌,老刑警劉巖妇垢,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巾遭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡闯估,警方通過查閱死者的電腦和手機(jī)灼舍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涨薪,“玉大人骑素,你說我怎么就攤上這事「斩幔” “怎么了献丑?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)侠姑。 經(jīng)常有香客問我创橄,道長(zhǎng),這世上最難降的妖魔是什么结借? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任筐摘,我火速辦了婚禮,結(jié)果婚禮上船老,老公的妹妹穿的比我還像新娘咖熟。我一直安慰自己,他們只是感情好柳畔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布馍管。 她就那樣靜靜地躺著,像睡著了一般薪韩。 火紅的嫁衣襯著肌膚如雪确沸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天俘陷,我揣著相機(jī)與錄音罗捎,去河邊找鬼。 笑死拉盾,一個(gè)胖子當(dāng)著我的面吹牛桨菜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼倒得,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼泻红!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起霞掺,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤谊路,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后菩彬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缠劝,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年骗灶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剩彬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡矿卑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沃饶,到底是詐尸還是另有隱情母廷,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布糊肤,位于F島的核電站琴昆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏馆揉。R本人自食惡果不足惜业舍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望升酣。 院中可真熱鬧舷暮,春花似錦、人聲如沸噩茄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绩聘。三九已至沥割,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凿菩,已是汗流浹背机杜。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留衅谷,地道東北人椒拗。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像会喝,于是被迫代替她去往敵國和親陡叠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子玩郊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

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

  • 1.Array.from Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對(duì)象(array-lik...
    趙然228閱讀 665評(píng)論 0 0
  • 三,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)枉阵,只要將碼點(diǎn)放入大括號(hào)译红,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,534評(píng)論 0 8
  • 刀 怒斬雪翼雕 山 豪邁沖云霄 火 翻騰再燃燒 海 掀起萬丈濤 風(fēng) 吹不過云煙 花 飄不過天邊 雪 滴落在心間 月...
    小富哥閱讀 4,553評(píng)論 0 0
  • 粗糧含有豐富的不可溶性纖維素兴溜,有利于保障消化系統(tǒng)正常運(yùn)轉(zhuǎn)侦厚。它與可溶性纖維協(xié)同工作,可降低血液中低密度膽固醇和甘油三...
    米克先生閱讀 320評(píng)論 1 1
  • Showing /Users/lvchengbo/jdstore/app/views/common/_navbar...
    大貓城堡閱讀 198評(píng)論 0 0