你真的了解JS中的數組嗎?——數組API的總結

2020-12-05 大前端細摳圖

在JS中,數組是一個非常重要的知識點,不管是在面試還是在日常工作中,都非常需要;而該文章,不去深究數據的定義方法等,而只是總結相應的API並簡單的介紹相應方法的應用;如下圖所示,是我本篇文章介紹的相應的數組方法。

數組的增刪改查

arr.push(a,b):在數組arr的最後面增加元素a,b,返回變化後的數組長度

根據定義,可以自己寫一個push方法

arr.unshift(a,b) 在數組arr的首位依次增加a,b;並返回新數組的長度

重寫unshift

splice()增加/刪除數組

arr.splice(數組要開始操作的位數,要操作的長度,從操作完最後一位開始增加數據);

其中:如果只填前兩個參數,則會導致數組刪除;而如果有多於兩個參數,同時第二個參數為0的話,就相當於是在要操作的位數開始添加數據。返回值為數組,數組中的值是刪除的參數。如下圖所示:

splice中第一個參數還可以是負數,-1表示最後一位,-2表示倒數第二位,-3表示倒數第三位....

slice(a,b) 將數組內容從下標a到b([a,b)(包括了a,但不包括b))的值複製給一個新數組(a,b如果是負號,則是從右往左開始算起,-1是右起第一個,和splice一樣),並且返回該新數組;如果a,b符號相同的情況下,a的值大於b會導致無法複製出任何值

reverse() 返回一個新數組,新數組與原數組的元素位置首尾顛倒。

concat:連接兩個數組形成一個新數組

變成字符串toString()和join()

toString(),將數組變成字符串,分隔符是逗號,不會變;

join(),將數組變成字符串,分隔符是括號內的值,可以變,默認是逗號;同時如果數組中元素是undefined或者null的話,會被處理位空字符串

另外還有將字符串變成數組的方法split()

arr.split(a,b),a一定是arr的分隔符才行,b代表的是要截取的長度

arr.pop();刪除arr的最後一位,並且返回出去,如果arr是空數組,則返回undefined。

arr.shift()刪除arr的第一位,並且返回出去,如果arr是空數組,則返回undefined。

forEach(function(item,index,array){},thisPoint),循環數組的每一項,第一個參數是一個函數,函數有三個默認值,第一個參數是每次循環的元素,第二個參數是循環的該元素的下標,第三個參數是該數組;而第二個參數是改變的this的指向的,如果不填,默認是指向window;返回的是undefined

重寫forEach

filter(function(item,index,array){},thisPoint);和forEach類似,傳入的參數一致,但是其返回是一個數組;同時該數組保存傳入的函數執行後返回值為true的該數組參數,如果函數返回的是false,則返回的是空。即可以作為一個篩選。

其中,有一個bug,即用filter同時數組元素是引用值,會影響到原數組的元素中的值。

重寫filter

map 映射

很多和filter一樣,只是其返回值不同,類型都是數組,但是map中數組的值是函數執行後返回的每個值,即map可以在函數中修改相應的值並返回出去形成一個新數組(會有深拷貝的問題);而filter返回的數組的值是函數執行後返回值為true時該數組的值。

重寫map

reduce/reduceRight遍歷數組

相當於filter和map的優點集合,即可以返回一個篩選好的自定義的值;而不是像filter一樣,只能返回篩選好的只有原數組中有的值,並且不像map一樣返回不能篩選的修改的值。

reduce(function(prev,cur,index,arr){},initialValue,thisPoint);從左往右遍歷數組數據。

其中:

第一個傳入的值是:一個函數,這個函數是有四個參數

prev 上次循環的數據,每次都必須返回出去,作為下次循環的初始值,並且最後返回出去作為最終值。

Cur 本次循環的數據

Index 本次的數據的索引值

Arr 整個data

第二個傳的值是初始值 initialValue,即第一次循環時需要的初始值

第三個傳的值是改變的this指向的。

重寫reduce

reduceRight 和reduce是一個功能,只是其是倒序,是從右往左遍歷數據,而reduce是從左往右遍歷數據

重寫reduceRight

every(function(item,index,array){},thisPoint)遍歷數組,function返回false就終止

some(function(item,index,array){},thisPoint)遍歷數組,function返回true就終止

排序

sort()返回一個數組,該數組默認是按升序將原數組排序,即如果未傳參,則默認按ASCII碼的升序來排列;

如果傳參,就要傳一個函數,該函數有兩個參數a,b,如果該函數的返回值是正數那函數會默認發生改變;

即如果需要按升序排列的話,就需要a<b;而如果需要按降序排序的話,則需要a>b,

ES6

構造器上

Array.of(n) 就是生成數值為n的一個數組[n],Array.of(m,n)是數組[m,n]

解決Array(3) 是[,,,],即三個空元素而不是生成一個元素為3的數組;

Array.from(arraylike,mapFn,thisArg),返回一個數組。

將類數組arraylike轉換成數組,然後執行map方法的函數,thisArg是mapFn函數的this指向(可以達到依賴注入的效果)。

原型上

Arr.fill(value,start,end);start和end是開始索引值,默認是0,end是結束索引值,默認是最後一位;即數組arr從下標start到end用value替換掉,返回的是修改後的數組;

注意

start數大於end數的話,會不做任何處理

該替換的計數是包含start位而不包含end位

負數是從往左算,第一位是-1

如果傳入的參數不合法,變成0,不報錯;

keys()/value()/entries()

數組中的:

Keys() 返回一個包含數組中每個索引鍵的可迭代的Array Iterator對象,不是返回數組

value() 返回一個包含數組中每個索引值的可迭代的Array Iterator對象,不是返回數組

entries()返回一個包含數組中每個索引鍵值對的可迭代的Array Iterator對象,不是返回數組

因為返回是可以迭代的對象,可以用for of的方式進行迭代,也可以用返回值的next方法進行迭代。

注意:對象也有該三個方法,是放在構造器上的;返回的卻是數組,

arr.copyWithin(target,start,end),將該數組的start位開始到end位結束([start,end))的元素複製到該數組的以target位開始的位置,並形成一個新數組返回出去。

findIndex()/indexOf()/includes()

arr.findIndex(function())找到arr中符合function條件的第一個成員的索引,並返回出來,如果沒有則返回-1;與之對應的還有find方法,find是返回相應的元素,沒有則返回undefined;

arr.indexOf(『元素』):判斷數組中是否有該元素,如果有則返回相應的第一個成員的索引,沒有則返回-1;

arr.includes(『元素』):判斷數組中是否有該元素,如果有則返回true,沒有則返回false

如下所示。

當然這三個也有一些特別需要注意的,即NaN 的區別:

indexOf是嚴格的按照 === 來判斷的,即無法判斷NaN的位置,而另外兩種ES6方法則可以找到NaN的位置

相關焦點

  • 了解什麼是數組,如何應用數組,只需1分鐘就可以秒變數組大神!
    Hi,大家好,有很多的小夥伴在私信提問能不能說說什麼是Excel數組,因為不了解什麼是數組,因此對數組公式感覺非常神秘和陌生。由於大部分人都對數組公式很陌生,我一直都在思考如何和大家介紹這個,讓所有人都可以學會的入門資料,鑑於此情此景,本文應景而生,希望本文對你的Excel的水平提高有幫助。同時希望大家交流有錯漏的請給予斧正。
  • 像數組又不是數組:JS函數的參數列表到底是什麼?
    在之前介紹模擬函數重載效果的時候,我們看到JS中的函數中,其實有一個「隱形」的東西來存儲實參所有的實參,這個東西就是arguments對象。但在實際使用過程中它的使用方式和數組簡直一模一樣,用起來感覺就是數組,沒有任何毛病,但實際上它並不是一個數組。
  • 程序江湖事——JS數組的知己知彼
    本篇主要介紹數組的基本使用,有興趣的朋友可以了解一下!最後有「彩蛋」——一個通過技術反思生活之人的獨白。程序江湖所有發生的事情絕非偶然,所有發生的事情也會真相大白;它不是依靠像柯南一樣的神秘偵探,而是它本身就具有像柯南一樣的搜尋能力。
  • Excel中的高科技:數組公式之數組常量
    Excel中的高科技:數組公式之數組常量大家好,我是@愛玩電腦,不會IT高科技,只講電腦小知識。上次給大家講了辦公軟體Excel數組公式的一些基礎知識,見:Excel中的高科技:數組公式。今天接著給大家講講辦公軟體Excel中的數組公式相關的數組常量的基礎知識。好了,我們開始進入主題吧。演示的作業系統為Windows10,辦公軟體為Excel2007。一、創建數組常量在Excel中,數組並不是必須存儲在單元格中,也可以存儲在內存中。
  • NumPy數組中的廣播機制及結構化數組
    前面講過,在NumPy中,如何通過用表示數組各個維度長度的元素(也就是數組的型)把數組轉換成多維數組。因此,若兩個數組的各維度兼容,也就是兩個數組的每一維等長,或其中一個數組為一維,那麼廣播機制就適用。如果這兩個條件都不能滿足,NumPy就會拋出異常,說這兩個數組不兼容。執行完代碼之後,我們就得到了兩個數組:4x4的數組以及一個一行四列的數組。
  • LeetCode數組類知識點&題型總結
    數組(array)就是典型的順序存儲,而鍊表就是典型的非順序存儲。數組通常用於存儲一系列相同類型的數據。當我們在創建數組時,會在內存中劃分出一塊連續的內存用於存儲數據,插入數據時,會將數據按順序存儲在這塊連續的內存中,讀取時通過訪問數組的索引迅速取出。數組名就是一個指針,指向這段內存的起始地址。通過數組的類型,編譯器知道在訪問下一個元素的時候需要在內存中後移多少個字節。
  • 手把手教你學Numpy——常用API合集
    基本統計方法在日常的工作當中,我們經常需要通過一系列值來了解特徵的分布情況。比較常用的有均值、方差、標準差、百分位數等等。前面幾個都比較好理解,簡單介紹一下這個百分位數,它是指將元素從小到大排列之後,排在第x%位上的值。我們一般常用的是25%,50%和75%這三個值,通過這幾個值,我們很容易對於整個特徵的分布有一個大概的了解。
  • EXCEL中數組的應用專題之一:數組公式是如何輸入的
    在EXCEL的應用中,數組是經常用到的一個知識點,在實際工作中,巧妙的利用數組可以在實際的工作中可以得心應手,配合必要的函數和公式,可以讓你的工作變得簡單高效。數組公式就是可以同時進行多重計算並返回一種或多種結果的公式。比一般的公式要複雜些,理解上要和普通的公式加以區別。必要時要藉助VBA的思想來來考慮問題,因為數組公式的應用在很多的時候和VBA是一樣的。
  • sizeof/strlen—字符數組/字符串的長度你真的懂嗎?附代碼
    這是一個很容易混淆的點,字符串與字符數組,sizeof與strlen,直接看代碼:字符數組、字符串的長度>說明:sizeof運算符指出的是整個數組的長度:15位元組strlen返回的是存儲在數組中的字符串的長度,而非數組本身長度strlen只計算可見字符,而不會包含結束字符
  • JavaScript數組 - 引用詳解
    這就是因為數組是一個引用的數據類型數組:複合數據類型/引用數據類型注意:函數運行的內存空間是預先分配好的;一旦被分配好內存空間,就不能進行改變了所有的複合數據類型都不直接存儲在我們的函數中,它是存儲在堆段在堆段,我們可以想用多少內存,就隨時分配多少內存;但是在函數中是預先分配好的,不能修改在我們上面例子中,一開始聲明的數組
  • 動態規劃:關於01背包問題,你該了解這些!(滾動數組)
    昨天動態規劃:關於01背包問題,你該了解這些!中是用二維dp數組來講解01背包。今天我們就來說一說滾動數組,其實在前面的題目中我們已經用到過滾動數組了,就是把二維dp降為一維dp,一些錄友當時還表示比較困惑。
  • 怎麼理解php中的數組?php的數組創建和使用方法是什麼?
    php數組的定義數組就是值類型相同的變量的集合,在PHP中的一種常用的複合數據類型,數據可以存放很多的數據,可以存儲任何類型的數據。我們可以把變量當做一個包含值得盒子,那麼可以把數組當做當成一個帶有隔層的盒子,每一層都可以存放一個值。
  • 5張圖帶你了解Numpy包所有的數組操作
    圖1 Numpy對數組操作的函數功能組成在工作或者學習中,我們經常要變化數組的類型。目前Numpy包可以實現浮點數數組轉換、改變數組類型、轉換成矩陣、轉換成單個值等功能,也可以在變換的過程中檢查數組元素是否含有NAN(非數),也可以將數組在內存中的排列變得連續以實現更多的功能。
  • Java基礎篇——數組詳解
    使用數組可以將同一類型的數據存儲在連續的內存位置。數組中各元素的類型相同,通過下標的方式來訪問數組中的元素,下標從0開始。由此得出,數組具有以下基本特點:數組的長度是確定的,數組一旦被創建,它的大小就是不可以改變的。
  • 單片機的C語言中數組的用法
    數組是由具有相同類型的數據元素組成的有序集合。數組是由數組名來表示的,數組中的數據由特定的下標來唯一確定。引入數組的目的,是使用一塊連續的內存空間存儲多個類型相同的數據,以解決一批相關數據的存儲問題。數組與普通變量一樣,也必須先定義,後使用。數組在C51語言的地位舉足輕重,因此深入地了解數組是很有必要的。
  • VBA中動態數組的創建及利用
    在今後更加嚴峻的存量殘殺世界中,為自己的生存進行知識的儲備,特別是新知識的儲備。為後疫情時代做的必要準備。今日繼續和大家分享VBA編程中常用的常用「積木」過程代碼。這些內容大多是我的經驗的記錄,來源於我多年的經驗。
  • PHP函數in_array()如何檢查數組中的值
    PHP函數in_array()如何檢查數組中的值 PHP函數in_array()可以幫助我們輕鬆的完成對數組中某個值的檢查。我們下面就舉一個例子來幫助大家理解PHP函數in_array()的具體應用。
  • Excel函數large、與數組在實際案例中的聯合運用
    圖一在之前的四篇文章當中,我們先後了解了數組的相關概念,數組之間的簡單加法、乘法運算,數組的乘積求和運算,一維水平數組和一維縱向數組之間的運算,單個數值與一維數組之間的運算,一維數組與二維數組之間的運算以及二維數組之間的運算
  • js中的循環與跳出
    在日常工作中經常遇到需要跳出當前循環的場景,但是每次查詢過後沒多久就忘記了,循環時也是使用map一把梭,趁著休息,在這裡總結一下js中的循環方法以及如何跳出當前循環。本文略去了一些方法的傳入參數以及返回參數,做了一些精簡,如果需要詳細了解方法的使用可以去MDN上詳細查詢。
  • 「LeetCode算法精講」數組中的最短無序連續子數組(Python)
    題目內容給定一個整數數組,你需要尋找一個連續的子數組,如果對這個子數組進行升序排序,那麼整個數組都會變為升序排序。你找到的子數組應是最短的,請輸出它的長度。示例 1:輸入: [2, 6, 4, 8, 10, 9, 15] 輸出: 5 解釋: 你只需要對 [6, 4, 8, 10, 9] 進行升序排序,那麼整個表都會變為升序排序。說明:輸入的數組長度範圍在 [1, 10,000]。輸入的數組可能包含重複元素 ,所以升序的意思是<=。