JS數組方法（ES5、ES6）

来源:https://www.cnblogs.com/Faith-Yin/archive/2020/02/25/12360892.html
-Advertisement-
Play Games

1. arr.push() 從後面添加元素，添加一個或多個，返回值為添加完後的數組長度 1 let arr = [1,2,3,4,5] 2 console.log(arr.push(6,7)) // 7 3 console.log(arr) // [1,2,3,4,5,6,7] 2. arr.pop ...


1. arr.push() 從後面添加元素，添加一個或多個，返回值為添加完後的數組長度

1  let arr = [1,2,3,4,5] 
2  console.log(arr.push(6,7)) // 7
3  console.log(arr) // [1,2,3,4,5,6,7]

 

2. arr.pop() 從後面刪除元素，只能是一個，返回值是刪除的元素

1 let arr = [1,2,3,4,5]
2 console.log(arr.pop())  // 5
3 console.log(arr)  // [1,2,3,4]

 

3. arr.shift() 從前面刪除元素，只能是一個，返回值是刪除的元素

1 let arr = [1,2,3,4,5]
2 console.log(arr.shift())  // 1
3 console.log(arr)  // [2,3,4,5]

 

4. arr.unshift() 從前面添加元素，添加一個或多個，返回值是添加完後的數組的長度

1 let arr = [1,2,3,4,5]
2 console.log(arr.unshift(6,7))  // 7
3 console.log(arr)  // [6,7,1,2,3,4,5]

 

5. arr.splice(index,num) 刪除從index（索引值）開始之後的那num個元素，返回值是刪除的元素數組

　　參數：index 索引值，num 個數

1 let arr = [1,2,3,4,5]
2 console.log(arr.splice(2,3))  // [3,4]
3 console.log(arr)  // [1,2,5]

 

7. str.split() 將字元串轉化為數組

1 let str = '12345'
2 console.log(str.split(''))  // ["1","2","3","4","5"]

 

8. arr.concat() 連接兩個數組，返回值是連接後的新數組

1 let arr = [1,2,3,4,5]
2 console.log(arr.concat([6,7]))  // [1,2,3,4,5,6,7]
3 console.log(arr)  // [1,2,3,4,5]

 

9. arr.sort() 將數組進行排序，返回值是排好的數組，預設是按照最左邊的數字進行排序（非數字整體大小）

1 let arr = [40,8,10,5,79,3]
2 console.log(arr.sort())  // [10,3,40,5,79,8]
3 
4 let arr2 = arr.sort((a,b) => a - b)
5 console.log(arr2)  // [3,5,8,10,40,79]
6 
7 let arr3 = arr.sort((a,b) => b - a)
8 console.log(arr3)  // [79,40,10,8,5,3]

 

9. arr.reverse() 將原數組反轉，返回值是反轉後的數組

1 let arr = [1,2,3,4,5]
2 console.log(arr.reverse())  // [5,4,3,2,1]
3 console.log(arr)   // [5,4,3,2,1]

 

10. arr.slice(start, end) 切去索引值start到索引值end（不包含end的值）的數組，返回值是切出去的數組

1 let arr = [1,2,3,4,5]
2 console.log(arr.slice(1,3))   // [2,3]
3 console.log(arr)    // [1,2,3,4,5]

 

11. arr.forEach(callback) 遍曆數組，無返回值

 1 let arr = [1,2,3,4,5]
 2 arr.forEach((value, index, array) => {
 3    console.log(`value--${value}    index--${index}    array--${array}`) 
 4 })
 5 
 6 // value--1    index--0    array--1,2,3,4,5
 7 // value--2    index--1    array--1,2,3,4,5
 8 // value--3    index--2    array--1,2,3,4,5
 9 // value--4    index--3    array--1,2,3,4,5
10 // value--5    index--4    array--1,2,3,4,5

 

12. arr.map(callbak) 遍曆數組(對原數組的值進行操作)，返回一個新數組

1 let arr = [1,2,3,4,5]
2 arr.map( (value, index, array)=>{
3         value = value * 2
4 })   
5 console.log(arr) // [1,4,6,8,10]

 

13. arr.filter(callback) 過濾數組，返回一個滿足要求的數組

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.filter((value, index) => value >2)
3 console.log(arr2)  // [3,4,5]

 

14. arr.every(callback) 根據判斷條件，遍曆數組中的元素，是否都滿足，若都滿足則返回true，反之返回false

1 let arr = [1,2,3,4,5]
2 
3 let arr2 = arr.every((value, index) => i > 2)
4 console.log(arr2)  // false
5 
6 let arr3 = arr.every((value, index) => i > 0)
7 console.log(arr3)  // true

 

15. arr.some(callback) 根據判斷條件，遍曆數組中的元素，是否存在至少有一個滿足，若存在則返回true，反之返回false

1 let arr = [1,2,3,4,5]
2 
3 let arr2 = arr.some((value, index) => i > 2)
4 console.log(arr2)  // true
5 
6 let arr3 = arr.some((value, index) => i > 5)
7 console.log(arr3)  // false

 

16. arr.indexOf() 從前往後查找某個元素的索引值，若有重覆的，則返回第一個查到的索引值，若不存在，返回 -1

1 let arr = [1,2,3,4,5,4]
2 
3 let arr2 = arr.indexOf(4)
4 console.log(arr2)  // 3
5 
6 let arr3 = arr.indexOf(6)
7 console.log(arr3)  // -1

 

17. arr.lastIndexOf()  從後往前查找某個元素的索引值，若有重覆的，則返回第一個查到的索引值，若不存在，返回 -1

1 let arr = [1,2,3,4,5,4]
2 
3 let arr2 = arr.lastIndexOf(4)
4 console.log(arr2)  // 5
5  
6 let arr3 = arr.lastIndexOf(6)
7 console.log(arr3)  // -1

 

18. Array.from()  [ES6]將偽數組變成數組，只要有length的就可以轉成數組

1 let str = '12345'
2 console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
3 
4 let obj = {0:'a',1:'b',length:2}
5 console.log(Array.from(obj))   // ["a", "b"]

 

19. Array.of()  [ES6]將一組值轉換成數組，類似於聲明數組

1 let str = '11'
2 console.log(Array.of(str))   // ['11']
3 
4 等價於 
5 console.log(new Array('11'))   // ['11]

　ps:
　　new Array()有缺點，就是參數問題引起的重載
　　console.log(new Array(2))  // [empty × 2] 是個空數組
　　console.log(Array.of(2))  //  [2]

 

20. arr.find(callback)  [ES6]找到第一個符合條件的數組成員

1 let arr = [1,2,3,4,5,2,4]
2 let arr2 = arr.find((value, index, array) => value > 2)
3 console.log(arr2)   // 3

 

21. arr.findIndex(callback)  [ES6]找到第一個符合條件的數組成員的索引值

1 let arr = [1,2,3,4,5]
2 let arr1 = arr.findIndex((value, index, array) => value > 2)
3 console.log(arr1)  // 2

 

22. arr.includes()  [ES6]判斷數組中是否包含特定的值

let arr = [1,2,3,4,5]

let arr2 = arr.includes(2)  
console.log(arr2)    // ture

let arr3 = arr.includes(9) 
console.log(arr3)    // false

let arr4 = [1,2,3,NaN].includes(NaN)
console.log(arr5)    // true

 

23. arr.fill(target, start, end)  [ES6]使用給定的值，填充一個數組（改變原數組）

　　參數： target – 待填充的元素
　　　　　 start – 開始填充的位置 - 索引
　　　　     end – 終止填充的位置 - 索引（不包括該位置)

let arr = [1,2,3,4,5]

let arr2 = arr.fill(5)
console.log(arr2)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]

let arr3 = arr.fill(5,2)
console.log(arr3)  // [1,2,5,5,5]

let arr4 = arr.fill(5,1,3)
console.log(arr4)  // [1,5,5,4,5]

 

24. arr.keys()  [ES6]遍曆數組的鍵名

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.keys()
3 for (let key of arr2) {
4     console.log(key)   // 0,1,2,3,4
5 }

 

25. arr.values()  [ES6]遍曆數組鍵值

let arr = [1,2,3,4,5]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4,5
}

 

26. arr.entries()  [ES6]遍曆數組的鍵名和鍵值

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.entries()
3 for (let e of arr2) {
4     console.log(e);   // [0,1] [1,2] [2,3] [3,4] [4,5]
5 }

　　entries() 方法返回迭代數組。

　　迭代數組中每個值 前一個是索引值作為 key， 數組後一個值作為 value。

 

27. arr.copyWithin()  [ES6]在當前數組內部，將制定位置的數組複製到其他位置，會覆蓋原數組項，返回當前數組

參數:　　target --必選 索引從該位置開始替換數組項
　　　　 start --可選 索引從該位置開始讀取數組項，預設為0.如果為負值，則從右往左讀。
　　　　 end --可選 索引到該位置停止讀取的數組項，預設是Array.length,如果是負值，表示倒數

 1 let arr = [1,2,3,4,5,6,7]
 2 
 3 let arr2 = arr.copyWithin(1)
 4 console.log(arr2)   // [1, 1, 2, 3, 4, 5, 6]
 5 
 6 let arr3 = arr.copyWithin(1,2)
 7 console.log(arr3)   // [1, 3, 4, 5, 6, 7, 7]
 8 
 9 let arr4 = arr.copyWithin(1,2,4)
10 console.log(arr4)   // [1, 3, 4, 4, 5, 6, 7]

 

28. Array.isArray(value) 判斷一個值是否為數組的方法，若為數組，返回true，反之返回false

 1 let a = 1234
 2 let b = "fsaufh"
 3 let c = {a:1,b:2}
 4 let d = [1,2]
 5 
 6 let mark1 = Array.isArray(a)
 7 console.log(mark1)  // false
 8 
 9 let mark2 = Array.isArray(b)
10 console.log(mark2)  // false
11 
12 let mark3 = Array.isArray(c)
13 console.log(mark3)  // false
14 
15 let mark4 = Array.isArray(d)
16 console.log(mark4)  // true

 

29. arr.join(separate) 把數組中的所有元素放入一個字元串，separate表示分隔符，可省略，預設是逗號

1 let arr = [1,2,3,4,5]
2 console.log(arr.join()) // 1,2,3,4,5
3 console.log(arr.join("-"))  // 1-2-3-4-5

 

30. arr.flat(pliy)  [ES6]對數組內嵌套的數組“拉平”，就是把數組中的數組的元素挨個拿出來，放數組元素所在位置，返回一個新的數組，不會影響到原來的數組

　　參數：pliy表示拉平的層數，預設是1層，想無限拉平可以傳入Infinity關鍵字

1 let arr = [1, 2, [3, [4, 5]]]
2 console.log(arr.flat(2))  // [1, 2, 3, 4, 5]
3 
4 let arr2 = [1,[2,[3,[4,5]]]]
5 console.log(arr2.flat(Infinity))  // [1,2,3,4,5]

 

31. arr.flatMap()  [ES6]對原數組的每個成員執行一個函數，相當於執行Array.prototype.map(),然後對返回值組成的數組執行flat()方法。該方法返回一個新數組，不改變原數組。只能展開一層數組。

1 // 相當於 [[2, 4], [3, 6], [4, 8]].flat()
2 [2, 3, 4].flatMap((x) => [x, x * 2])
3 // [2, 4, 3, 6, 4, 8]

 

32. arr.toString() 將數組轉換為字元串並返回。數組中的元素之間用逗號分隔。

1 let  arr = ["Banana", "Orange", "Apple", "Mango"]
2 console.log(arr.toString())  // Banana,Orange,Apple,Mango

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS中this的幾種情況
    1.給元素的某個事件行為綁定方法，事件觸發，方法執行，此時方法中的this一般都是當前元素本身： <div id="div"></div> div.onclick = function() { console.log(this); //=><div id="div"></div> }; div.ad ...
  • 解決React路由URL中hash(#)部分的顯示 、browserHistory打包後瀏覽器刷新頁面出現404的問題
    摘要 在React項目中，我們需要採用它的路由庫React-Router來進行頁面跳轉，React會根據路由URL來判斷是哪個頁面。常見的的URL有兩種顯示方式，一種是hashHistory的形式，形如：localhost:3000/#/free-lesson的路由，另一種是browserHisto ...
  • 戲說前端之CSS編碼規範
    前言 項目啟動時 css 應該註意哪些問題 文件名規範 文件名建議用小寫字母加中橫線的方式。為什麼呢？因為這樣可讀性比較強，看起來比較清爽，像鏈接也是用這樣的方式，例如 那為什麼變數名不用小寫字母加小劃線的方式，如：family_tree，而是推薦用駝峰式的familyTree？C語言就喜歡用這種方 ...
  • 隨著頁面滾動，數字自動增大的jquery特效
    首先為了截出gif圖，我下載了一個小工具 GifCam： https://www.appinn.com/gifcam/ 隨著頁面滾動，數字自動增大的jquery特效 主要就是依賴這個腳本script.js // JavaScript Document $.fn.countTo = function ...
  • wow.js wow.min.js animate.css animate.min.css
    奉獻給下載不到源碼的小伙伴，下載到的請忽視 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX, __bind = function(fn, me){ retur ...
  • 網頁延遲載入動畫的實現-WOW.js
    網頁內容一開始不顯示，隨著滑鼠下拉延遲顯示，還有時間差 一開始覺得好難好複雜好高大上，直到我發現 wow.js …… 首先是演示地址：https://www.delac.io/wow/ 嗯，狗子確實很可愛 接下來是下載：http://www.downyi.com/downinfo/37040.htm ...
  • $.getJSON獲取json數據失敗
    首先簡單介紹下 $.ajax $.get $.post $.getJSON 的區別和用法 $.ajax中有一個type屬性，專門用來指定是get請求還是post請求的分別對應的就是$.get和$.post getJSON()和get是一樣的，都是get請求區別是，getJSON專門請求json數據的 ...
  • CSS中的聖杯佈局與雙飛翼佈局
    一，聖杯佈局 1,什麼是聖杯佈局? 所謂聖杯佈局就是用於實現一個兩側寬度固定，中間寬度自適應的三欄佈局 2，構建聖杯佈局的步驟： 2.1，添加一個容器，在這個容器中添加放三個盒子（左、中、右）； 2.2，設置兩側盒子（左、右）的寬度 ，使其寬度固定； 2.3，設置中間盒子的寬度為100%，這是中間盒 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類