跳到主要內容

js數組方法大全(下)

# js數組方法大全(下)


記錄一下整理的js數組方法,免得每次要找方法都找不到。圖片有點多,注意流量,嘻嘻!


本期分享




  • forEach()

  • map()

  • filer()

  • every()

  • some()

  • reduce()

  • reduceRight()

  • indexOf()

  • lastIndex()



上期分享




  • join()

  • reverse()

  • sort()

  • concat()

  • slice()

  • splice()

  • push()

  • pop()

  • unshift()

  • shift()

  • toString()

  • toLocaleString()



forEach() --->遍歷



  • 使用熱度:經常用

  • 是否改變原始數組:否

  • 返回:無

  • 參數:



















參數位置 參數類型 是否必選 說明
1 function 三個參數分別是:數組元素、元素的索引、數組本身


  • 說明:該方法無法提前終止運行,如果要提前終止運行,只能使用try塊中,然後拋出一個異常。

  • 小技巧:如果數組是個數組對象形式可以直接操作數組元素改變原始數組本身,因為對象是個引用數據類型嘛!

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var sum =0;
data.forEach(value=>{
sum+=value;
})
log(sum);

data.forEach((v,i,a)=>{
a[i]=v+1;
})
log(data);

var data_post=[{a:1},{a:2}]
data_post.forEach(value=>{
value.a++;
})
log(data_post)


map() --->映射



  • 使用熱度:經常用

  • 是否改變原始數組:否

  • 返回:返回一個新函數

  • 參數:



















參數位置 參數類型 是否必選 說明
1 function 三個參數分別是:數組元素、元素的索引、數組本身


  • 說明:傳遞給map函數應該有返回值,返回值是新數組的元素。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b= data.map(x=>{
return x*x;
})
log(b)


filter() --->過濾



  • 使用熱度:常用

  • 是否改變原始數組:否

  • 返回:返回過濾后的數組

  • 參數:



















參數位置 參數類型 是否必選 說明
1 function 三個參數分別是:數組元素、元素的索引、數組本身


  • 說明:如果返回值是true或者可以轉化為true的值,那麼這個值就是新數組的元素。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b= data.filter(x=>{
return x<3;
})
log(b)


every() --->檢測



  • 使用熱度:不常用

  • 是否改變原始數組:否

  • 返回:true或者false

  • 參數:



















參數位置 參數類型 是否必選 說明
1 function 三個參數分別是:數組元素、元素的索引、數組本身


  • 說明:當且僅當針對數組中的所有元素調用綁定函數都返回true時,它才返回true。

  • 注意:一旦every或者some已經確定了改返回什麼值得時候就不會遍曆數組了。根據數學上的慣例,在空數組調用時,every返回true,some返回false。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b= data.every(x=>{
return x<10;
})
log(b)

var c= data.every(x=>{
return x%2===0;
})
log(c)


some() --->檢測



  • 使用熱度:不常用

  • 是否改變原始數組:否

  • 返回:true或者false

  • 參數:



















參數位置 參數類型 是否必選 說明
1 function 三個參數分別是:數組元素、元素的索引、數組本身


  • 說明:當數組中至少有一個元素調用綁定函數返回true時,它就返回true。

  • 注意:一旦every或者some已經確定了改返回什麼值得時候就不會遍曆數組了。根據數學上的慣例,在空數組調用時,every返回true,some返回false。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b= data.some(x=>{
return x>10;
})
log(b)

var c= data.some(x=>{
return x%2===0;
})
log(c)


reduce() --->簡化



  • 使用熱度:不常用

  • 是否改變原始數組:否

  • 返回:返回一個值

  • 參數:

























參數位置 參數類型 是否必選 作用
1 function 四個參數分別是:初始化值/數組元素、數組元素、元素的索引、數組本身
2 number 供計算的初始化值


  • 說明:第一個參數是到目前為止的簡化操作累計的結果

  • 注意:如果沒有初始化值,第一次調用函數的第一個參數就是第一個數組元素,第二個參數則是第二個數組元素。如果有初始化值,第一次調用函數的第一個參數就是初始化值,二個參數則是第一個數組元素。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b= data.reduce((x,y)=>{
return x+y;
},0)
log(b)

var c= data.reduce((x,y)=>{
return x*y;
},1)
log(c)

var d= data.reduce((x,y)=>{
return x>y?x:y;
},1)
log(d)


reduceRight() --->簡化



  • 使用熱度:不常用

  • 是否改變原始數組:否

  • 返回:返回一個值

  • 參數:

























參數位置 參數類型 是否必選 作用
1 function 四個參數分別是:初始化值/數組元素、數組元素、元素的索引、數組本身
2 number 供計算的初始化值


  • 說明:第一個參數是到目前為止的簡化操作累計的結果。不同於reduce這個僅僅是從右到左計算。

  • 注意:如果沒有初始化值,第一次調用函數的第一個參數就是第一個數組元素,第二個參數則是第二個數組元素。如果有初始化值,第一次調用函數的第一個參數就是初始化值,二個參數則是第一個數組元素。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
data.reduceRight((x,y)=>{
log(y)
return x+y;
},0)


indexOf() --->搜索



  • 使用熱度:經常用

  • 是否改變原始數組:否

  • 返回:返回數組索引或者-1

  • 參數:

























參數位置 參數類型 是否必選 作用
1 * 要搜索的數組元素
2 number 從數組哪個索引開始搜索


  • 說明:如果能搜索到結果將返回第一個索引,如果搜索不到就返回-1

  • 注意:如果第二個參數是負數,指的是從數組元素末尾的偏移量位置開始向後搜索,而不是到偏移量位置就截止搜索了,這裡是很容易和splice弄混的。

  • 實例如下:


var log=console.log;
var data=[1,2,3,4,5];
var b=data.indexOf(1,-5);
log(b);


lastIndexOf() --->搜索



  • 使用熱度:經常用

  • 是否改變原始數組:否

  • 返回:返回數組索引或者-1

  • 參數:

























參數位置 參數類型 是否必選 作用
1 * 要搜索的數組元素
2 number 從數組哪個索引開始搜索


  • 說明:和indexOf不同的是lashIndexOf是反向搜索

  • 注意:因為是反向搜索,當第二個參數是負數的時候,就是指從末尾偏移量的位置向前搜索

  • 實例如下:


var log=console.log;
var data=[1,2,3,2,5];
var b=data.lastIndexOf(2,-3)
log(b)

var c=data.lastIndexOf(1,-5)
log(c)

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?



網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!



※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光



※想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師"嚨底家"!!



Orignal From: js數組方法大全(下)

留言

這個網誌中的熱門文章

有了四步解題法模板,再也不害怕動態規劃!(看不懂算我輸)

導言 動態規劃問題一直是算法面試當中的重點和難點,並且動態規劃這種通過空間換取時間的算法思想在實際的工作中也會被頻繁用到,這篇文章的目的主要是解釋清楚 什麼是動態規劃 ,還有就是面對一道動態規劃問題,一般的 思考步驟 以及其中的注意事項等等,最後通過幾道題目將理論和實踐結合。 什麼是動態規劃 如果你還沒有聽說過動態規劃,或者僅僅只有耳聞,或許你可以看看 Quora 上面的這個 回答 。 How to explain dynamic 用一句話解釋動態規劃就是 " 記住你之前做過的事 ",如果更準確些,其實是 " 記住你之前得到的答案 "。 我舉個大家工作中經常遇到的例子。 在軟件開發中,大家經常會遇到一些系統配置的問題,配置不對,系統就會報錯,這個時候一般都會去 Google 或者是查閱相關的文檔,花了一定的時間將配置修改好。 過了一段時間,去到另一個系統,遇到類似的問題,這個時候已經記不清之前修改過的配置文件長什麼樣,這個時候有兩種方案,一種方案還是去 Google 或者查閱文檔,另一種方案是借鑒之前修改過的配置,第一種做法其實是萬金油,因為你遇到的任何問題其實都可以去 Google,去查閱相關文件找答案,但是這會花費一定的時間,相比之下,第二種方案肯定會更加地節約時間,但是這個方案是有條件的,條件如下: 之前的問題和當前的問題有着關聯性,換句話說,之前問題得到的答案可以幫助解決當前問題 需要記錄之前問題的答案 當然在這個例子中,可以看到的是,上面這兩個條件均滿足,大可去到之前配置過的文件中,將配置拷貝過來,然後做些細微的調整即可解決當前問題,節約了大量的時間。 不知道你是否從這些描述中發現,對於一個動態規劃問題,我們只需要從兩個方面考慮,那就是 找出問題之間的聯繫 ,以及 記錄答案 ,這裏的難點其實是找出問題之間的聯繫,記錄答案只是順帶的事情,利用一些簡單的數據結構就可以做到。 概念 上面的解釋如果大家可以理解的話,接    動態規劃 算法是通過拆分問題,定義問題狀態和狀態之間的關係,使得問題能夠以遞推(或者說分治)的方式去解決。它的幾個重要概念如下所述。    階段: 對於一個完整的問題過程,適當的切分為若干個相互聯繫的子問題,每次在求解一個子問題...

計算機本地文件快要滅絕了

   編者按: 文件是数字世界的基石,是我們基本的工作單位。但是,隨着互聯網的雲化、平台化、服務化,文件日益變得可有可無。這樣一種改變究竟好不好呢?喜歡懷舊的 Simon Pitt 開始回顧各種文件的好處,哪怕這讓他顯得不合時宜。原文發表在 medium 上,標題是:Computer Files Are Going Extinct   我喜歡文件。我喜歡對文件重命名、移動、排序,改變它們在文件夾中的显示方式,去備份文件,將之上傳到互聯網,恢復它們,對其進行複製,甚至還可以對文件進行碎片整理。作為信息存儲方式的一種隱喻,在我看來文件是很出色的。我喜歡把文件當作一個工作單位。如果我要寫篇文章,文章會放在文件裏面。如果我要生成圖像,圖像會保存進文件裏面。    謳歌 files.doc   文件是擬物化的。這是個很花哨的詞,只是用來表示文件是反映現實物品的一個数字概念。比方說,Word 文檔就像一張紙,躺在你的辦公桌上(desktop)。JPEG 就像一幅畫,等等。它們每個都有一個小圖標,圖標的樣子看起來像它們所代表的現實物品。一堆紙,一個畫框,一個馬尼拉文件夾。真的挺很迷人的。   我喜歡文件的一點是,不管裏面有什麼,跟文件的交互方式總是一致的。我上面提到的那些東西——複製、排序、碎片整理——我可以對任何文件進行那些處理。文件可能是圖像、遊戲的一部分、也可能是我最喜歡的餐具清單。碎片整理程序不在乎它是什麼。它不會去判斷內容。   自從我開始在 Windows 95 裏面創建文件以來,我就一直都很喜歡文件。但是我注意到我們已經開始慢慢地遠離把文件當作基本工作單位的做法。 Windows95。我的計算機    services.mp3 的興起   十幾歲的時候,我開始痴迷於收集和管理数字音樂:我收藏 MP3 文件。一大堆的 128 kbps MP3 文件。如果你足夠幸運,有自己的 CD 刻錄機的話,就可以將它們刻錄到 CD 上,然後在朋友之間傳遞。一張 CD 可以容納 700 MB。這相當於將近 500 張軟盤!   我會仔細端詳我的收藏,然後煞費苦心地給它們添加上 IDv1 和 IDv2 音樂標籤。隨着時間的流逝,大家開始開發可以在雲端自動獲取曲目列表的工具,這樣你就可以檢查和驗證 MP3 的質量。有時候我甚至會去聽那些該死的東西,儘管...

純電動 Mini Cooper SE 將成為中國國產車,年產 16 萬輛

BMW 集團與中國長城汽車合資,將於江蘇建立新廠,專門投入生產 MINI Cooper SE 和部分長城品牌電動車,預計於 2022 年完工並投入生產,每年將可生產 16 萬輛電動車。 靈動可愛的 Mini Cooper,在許多車迷心中都有著特殊的地位,今年 7 月發表了首款純電動版本的 Mini Cooper SE 之後,獲得熱烈迴響,預訂數量已接近 8 萬台,顯示大家對於純電 Mini 的熱愛,因為油電版的 Mini Cooper Countryman 的全球總銷售量也才 3 萬出頭。 Mini Cooper SE 之前公布了官方定價,最低從 27,900 歐元起算,美國售價約 29,900 美元。相比現有的三門款,只貴了一成左右。然而,三年後,中國消費者將有機會買到最便宜的電動 Mini。 電動 Mini Cooper SE 最低價是 27,900 歐元,扣掉全額補助最低可以到 24,400 歐元。 BMW 集團與中國長城汽車集團於 2018 年宣布,將組建合資公司光束汽車,投入在中國的電動車生產計畫,而現在他們正式宣布啟動計畫,於江蘇張家港打造一個新工廠,全部投入電動車的製造,包括了 Mini Cooper SE 和其他長城汽車旗下的電動車。 目前的電動 Mini 只在英國牛津工廠製造,不難想像當產能轉移到中國後,Mini Cooper SE 的價格將有機會進一步調降,來競爭全球最大的電動車市場。這座屬於合資公司光束汽車的新工廠,採用一個新的產銷模式,由 BMW 和長城共同合作開發、設計、製造新產品,但是銷售通路完全沿用原本的品牌渠道。 換句話說,2020 年到 2022 年銷售的電動 Mini,將會是英國製造,而 2022 年後就會有中國製造版本開賣,考量到 Mini 在中國每年約有 30 萬輛的銷售額,同時油電版的 Coutryman 銷量更佔了全球將近五分之一,無怪乎 BMW 會想在最接近主要市場的地方蓋工廠囉。 外型完美復刻油車版 最後,簡單介紹一下 Mini Cooper SE 這台車。Mini 在電動化的路上,盡力保持著跟經典造型一致的設計,畢竟大家愛的就是它的設計。電動版的 Mini 車頭、車身跟車屁股都多了一個黃色的插頭標誌,車頭的氣壩則變成封閉式設計,除此之外,幾乎看不出來差別,連馬達...