本文 GitHub github.com/ponkans/F2E 已收錄，有一線大廠前端面試點思維導(dǎo)圖，也整理了很多我的文檔，歡迎Star和完善，大家面試可以參照考點復(fù)習(xí)。文末有福利~~

前言

數(shù)組是JS最常見的一種數(shù)據(jù)結(jié)構(gòu)，我們在開發(fā)中會經(jīng)常用到，并且JS中數(shù)組操作函數(shù)還是非常多的，很容易出現(xiàn)弄混或者概念不清晰，寫下這篇文章就是想來總結(jié)一下，也算是對細節(jié)的一個知識大掃盲！！！

JS中的Array方法

新建數(shù)組

• 常規(guī)方式

  
  let?temp?=?new?Array();
  temp[0]?=?123;
  temp[1]?=?"string";
  temp[2]?=?true;
  console.log(temp[0]);?//?123
  console.log(temp[3]);?//?undefined
  
  let?temp2?=?new?Array(2);//?規(guī)定了數(shù)組的長度為2
  temp2[0]?=?123;
  temp2[1]?=?"string";
  temp2[2]?=?true;?//雖然規(guī)定了數(shù)組長度，但仍可以再次添加元素，定義的數(shù)組大小對此沒有影響
  

• 簡潔方式

• 數(shù)組文本方式

  let?temp?=?[123,?

• 注意！

  • 出于簡潔、可讀性和執(zhí)行速度的考慮，推薦使用最后一種數(shù)組文本方法。

  • 數(shù)組內(nèi)可以存放任意類型的數(shù)據(jù)

  • 數(shù)組元素不賦值，則為undefined

  • 訪問數(shù)組范圍以外的元素時，不會出現(xiàn)越界異常，為undefined

  • 定義了數(shù)組大小，依然可以添加更多的元素

增刪改查

• 棧方法push & pop增刪數(shù)組元素

  這兩個方式都是對數(shù)組尾部進行壓入和彈出操作。

  push(arg1, arg2, …)可以每次壓入一個或多個元素，并返回更新后的數(shù)組長度。

  pop()函數(shù)則每次只會彈出尾部的元素，并返回彈出的元素，若對空數(shù)組調(diào)用pop()則返回undefined。會更改源數(shù)組。

  
  let?temp?=?[123,?"string",?true];
  
  let?push1?=?temp.push(456);?//?插入一個元素
  console.log(push1,?temp);?//?4,?[123,?"string",?true,?456]
  
  let?push2?=?temp.push(789,?"string2",?false);?//?插入多個元素
  console.log(push2,?temp);?//?7,?[123,?"string",?true,?"456",?789,?"string2",?false]
  
  
  let?temp2?=?[123];
  
  let?pop1?=?temp2.pop();
  console.log(pop1,?temp2);//?true,?[];
  
  let?pop2?=?temp2.pop();
  console.log(pop2,?temp2);?//?undefined,?[];
  

• 隊列方法shift & unshift增刪數(shù)組元素

  這兩個方式都是對數(shù)組頭部進行位移與彈出操作。

  unshift(arg1, arg2, …)可以像數(shù)組的頭部添加一個或多個元素，并返回更新后的數(shù)組長度，并把所有其他元素位移到更高的索引。

  shift()方法會刪除首個數(shù)組元素，并返回彈出的元素，并把所有其他元素位移到更低的索引。會更改源數(shù)組。

• delete刪除數(shù)組元素

  JS數(shù)組屬于對象，所以可以使用 JavaScript delete 運算符來刪除，但這種方式會在數(shù)組留下未定義的空洞，所以很少使用。 會更改源數(shù)組。

  let?temp?=?[

• splice增刪數(shù)組元素

  splice(arg1, arg2, arg3, …)第一個參數(shù)定義了新添加元素的位置，第二個參數(shù)定義應(yīng)刪除多少元素，其余參數(shù)定義要添加的元素，并返回一個包含已刪除項的數(shù)組。

  splice還可以在數(shù)組不留空洞的情況下刪除元素。會更改源數(shù)組。

• concat合并數(shù)組

  合并現(xiàn)有數(shù)組來創(chuàng)建一個新的數(shù)組，concat(arg1, arg2, …)不會更改現(xiàn)有數(shù)組，總是返回一個新的數(shù)組，可以使用任意數(shù)量的數(shù)組參數(shù)。不會更改源數(shù)組。

  let?temp1?=?[

• 操作符合并數(shù)組，不會更改源數(shù)組。

  let?temp1?=?[

• slice裁剪數(shù)組

  slice(arg1, arg2) 方法用數(shù)組的某個片段切出新數(shù)組，不會修改源數(shù)組中的任何元素，返回一個新數(shù)組，第一個參數(shù)為元素選取開始位置，第二個參數(shù)為元素選取結(jié)束位置，如果第二個參數(shù)被省略則會切除數(shù)組的剩余部分。不會更改源數(shù)組。

  let?temp?=?[

• Math.max查數(shù)組最大值

  Math.max.apply(arg1,arg2)參數(shù)不支持數(shù)組

  可以用Math.max.apply(null,arr)來獲取數(shù)組中的最大值

• let?temp?=?[

• Math.min查數(shù)組最小值

  Math.min.apply(arg1,arg2)參數(shù)不支持數(shù)組

  可以用Math.min.apply(null,arr)來獲取數(shù)組中的最小值

  let?temp?=?[

• JavaScript方法查數(shù)組最大值

  function?getArrayMaxValue(arr)?{

• JavaScript方法查數(shù)組最小值

  function?getArrayMinValue(arr)?{

• 查找索引

  indexOf(arg1, arg2)方法在數(shù)組中搜索元素值并返回其位置。arg1為搜索元素，arg2可選從哪里開始搜索。負值將從結(jié)尾開始的給定位置開始，并搜索到結(jié)尾。

  lastIndexOf(arg1,arg2) 與 indexOf() 類似，但是從數(shù)組結(jié)尾開始搜索。arg2可選從哪里開始搜索。負值將從結(jié)尾開始的給定位置開始，并搜索到開頭。

  findIndex() 方法返回通過測試函數(shù)的第一個數(shù)組元素的索引。

  let?temp?=?[

• 查找值

  find(function(arg1,arg2,arg3)) 方法返回通過測試函數(shù)的第一個數(shù)組元素的值。arg1為數(shù)組元素值， arg2為數(shù)組元素索引，arg3為數(shù)組本身。

  let?temp?=?[

• 注意！

  • splice和slice容易混淆，記住splice翻譯是拼接，slice翻譯是切片。

  • splice 會返回被刪除元素組成的數(shù)組，或者為空數(shù)組

  • pop,shift會返回那個被刪除的元素

  • push,unshift 會返回新數(shù)組長度

  • pop,push,shift,unshift,splice會改變源數(shù)組

  • indexOf,lastIndexOf,concat,slice 不會改變源數(shù)組

數(shù)組轉(zhuǎn)換

• toString數(shù)組轉(zhuǎn)字符串

  toString()方法把每個元素轉(zhuǎn)換為字符串，然后以逗號連接輸出顯示， 不會更改源數(shù)組。

• join數(shù)組轉(zhuǎn)字符串

  join()方法可以把數(shù)組轉(zhuǎn)換為字符串，不過它可以指定分隔符。

  在調(diào)用 join() 方法時，可以傳遞一個參數(shù)作為分隔符來連接每個元素。

  如果省略參數(shù)，默認使用逗號作為分隔符，這時與toString()方法轉(zhuǎn)換操作效果相同。不會更改源數(shù)組。

  let?temp?=?[

• split字符串轉(zhuǎn)數(shù)組

  split(arg1, arg2)方法是 String 對象方法，與join()方法操作正好相反。該方法可以指定兩個參數(shù)，第一個參數(shù)為分隔符，指定從哪兒進行分隔的標(biāo)記；第二個參數(shù)指定要返回數(shù)組的長度。

  let?temp?=?

• 對象轉(zhuǎn)數(shù)組

  let?temp?=?{

• 數(shù)組轉(zhuǎn)對象

  let?temp?=?[

注意！

toString, join不會改變源數(shù)組

數(shù)組排序

• sort數(shù)組排序

  sort按照字母順序?qū)?shù)組進行排序, 直接修改了源數(shù)組，所以可以不用再將返回值賦給其他變量。

  該函數(shù)很適合字符串排序，如果數(shù)字按照字符串來排序，則 "25" 大于 "100"，因為 "2" 大于 "1"，正因如此，sort()方法在對數(shù)值排序時會產(chǎn)生不正確的結(jié)果。

  可以通過修正比值函數(shù)對數(shù)值進行排序。比較函數(shù)的目的是定義另一種排序順序。比較函數(shù)應(yīng)該返回一個負，零或正值，當(dāng) sort() 函數(shù)比較兩個值時，會將值發(fā)送到比較函數(shù)，并根據(jù)所返回的值(負、零或正值)對這些值進行排序。會更改源數(shù)組。

  "bi",?

• reverse數(shù)組反轉(zhuǎn)

  reverse()反轉(zhuǎn)數(shù)組中的元素，直接修改了源數(shù)組。

  let?temp?=?[

• 注意！

sort,reverse會更改源數(shù)組

數(shù)組迭代

數(shù)組迭代即對每個數(shù)組項進行操作

• Array.forEach()

  forEach(function(arg1,arg2,arg3){})方法為每個數(shù)組元素調(diào)用一次函數(shù)(回調(diào)函數(shù))，arg1為數(shù)組元素值， arg2為數(shù)組元素索引，arg3為數(shù)組本身， 此方法不會更改源數(shù)組，也不會創(chuàng)建新數(shù)組。

  let?temp?=?[

• Array.map()

  map(function(arg1,arg2,arg3){})方法通過對每個數(shù)組元素執(zhí)行函數(shù)來創(chuàng)建新數(shù)組，arg1為數(shù)組元素值， arg2為數(shù)組元素索引，arg3為數(shù)組本身，方法不會對沒有值的數(shù)組元素執(zhí)行函數(shù)，不會更改源數(shù)組，創(chuàng)建一個新數(shù)組。

  let?temp?=?[

• Array.filter()

  filter(function(arg1,arg2,arg3){})方法創(chuàng)建一個包含通過指定條件的數(shù)組元素的新數(shù)組, arg1為數(shù)組元素值， arg2為數(shù)組元素索引，arg3為數(shù)組本身，不會更改源數(shù)組。

  let?temp?=?[

• Array.every()

  every(function(arg1,arg2,arg3){})方法測試數(shù)組的所有元素是否通過了置頂條件。arg1為數(shù)組元素值， arg2為數(shù)組元素索引，arg3為數(shù)組本身。不會更改源數(shù)組。

  let?temp?=?[

• Array.some()

  some(function(arg1,arg2,arg3){})方法測試數(shù)組中是否有元素通過了指定條件的測試。不會更改源數(shù)組。

  let?temp?=?[

• Array.reduce()

  reduce(function(arg1,arg2,arg3,arg4){})接收一個函數(shù)作為累加器(accumulator)，數(shù)組中的每個值(從左到右)開始縮減，最終為一個值。

  arg1上一次調(diào)用回調(diào)返回的值，或者是提供的初始值(initialValue),arg2為數(shù)組元素值， arg3為數(shù)組元素索引，arg4為數(shù)組本身。不會更改源數(shù)組。

  let?temp?=?[

• 普通for循環(huán)

  性能比較好

  let?temp?=?[

• for…in

  let?temp?=?[

• for…of

  for..of 是es6中引進的循環(huán)，主要是為了補全之前for循環(huán)中的以下不足

  let?temp?=?[

• 跳出循環(huán)

  • forEach跳出循環(huán)

    let?temp?=?[1,2,3,4];

  • map跳出循環(huán)

    let?temp?=?[1,2,3,4];

  • filter跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • every跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • some跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • for跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • for…in跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • for…of跳出循環(huán)

    let?temp?=?[1,9,2,3,4];

  • 匯總表格:

• 注意！

  • forEach,map,filter,every,some,reduce這些迭代方法不會改變源數(shù)組

  • some 在有true的時候停止

  • every 在有false的時候停止

其他常用操作

• 檢測數(shù)組

  let?temp1?=?[

• 洗牌算法

  將一個數(shù)組打亂,返回一個打亂的數(shù)組

  let?temp?=?[

• 數(shù)組去重

  let?temp?=?[1,3,5,6,7,9,4,3,1,6];
  let?unique1?=?Array.from(new?Set(temp));
  console.log(unique1);//[1,?3,?5,?6,?7,?9,?4]
  let?unique2?=?[...new?Set(temp)];
  console.log(unique2);//[1,?3,?5,?6,?7,?9,?4]
  let?newArr?=?[];
  for(let?i=0;?i<temp.length;i++){if(newArr.indexOf(temp[i])?===?-1){newArr.push(temp[i]);
  ????}
  }console.log(newArr);//[1,?3,?5,?6,?7,?9,?4]
  --?數(shù)組下標(biāo)判斷法:?如果在arr數(shù)組里面找當(dāng)前的值，返回的索引等于當(dāng)前的循環(huán)里面的i的話，那么證明這個值是第一次出現(xiàn)，所以推入到新數(shù)組里面，如果后面又遍歷到了一個出現(xiàn)過的值，那也不會返回它的索引，indexof()方法只返回找到的第一個值的索引，所以重復(fù)的都會被pass掉，只出現(xiàn)一次的值都被存入新數(shù)組中。?-->

• 數(shù)組去虛值

  虛值有 false, 0，''， null, NaN, undefined

  let?temp?=?[

• 用數(shù)據(jù)填充數(shù)組

  let??arr?=?

• 數(shù)組中獲取隨機值

  根據(jù)數(shù)組長度獲取一個隨機索引。

  let?arr?=?[

硬核的文章像極了愛情，剛開始興奮就要結(jié)束了，非常感謝各位小伙伴能夠看到這里，如果覺得文章還有點東西，求點贊👍 求關(guān)注?? ?求分享👥！

微信搜索公眾號【接水怪】，查看更多接水怪原創(chuàng)~

總結(jié)

以上是生活随笔為你收集整理的易语言数组转文本_前端基础扫盲系列 长达8000字的数组总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。