溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript數組有哪些常用方法

發布時間:2021-11-10 10:44:08 來源:億速云 閱讀:182 作者:小新 欄目:開發技術

這篇文章主要介紹了JavaScript數組有哪些常用方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

1、前言

數組方法有太多了,本文記錄一些本人容易記錯的一些數組方法,用于鞏固及復習。
后續會慢慢的將其他數組方法添加進來。
善用數組方法可以使數據處理變的優雅且簡單。

那下面讓我們開始吧:

2、filter()

描述:

filter() 方法創建一個新數組,并將符合條件的所有元素添加到創建的新數組中。

語法:

Array.filter(callback(element, index, array) { // 函數體 }, thisValue)

參數:

callbackthisValue:


參數是否可選描述
參數一callback必選用來測試數組的每個元素的函數。返回 true 表示該元素通過測試,保留該元素,false 則不保留。它接收三個參數。
參數二thisValue可選執行 callback 時,用于 this 的值。
對象作為該執行回調時使用,傳遞給函數。
如果省略了 thisValue ,"this" 的值為 "undefined"

callback的參數列表:


參數是否可選描述
參數一element必選當前元素
參數二index可選當前元素的索引值
參數三array可選調用了 filter 的數組本身

thisValue的參數:

執行 callback 時,用于 this 的值。

返回值:

是一個由 filter() 參數一函數的返回值組成的新數組

示例:

let users = [
  {id: 11, name: "孫悟空"},
  {id: 21, name: "豬八戒"},
  {id: 31, name: "沙和尚"}
];

// 返回前兩個用戶的數組
let filterUsers = users.filter(item => item.id < 31);

console.log(filterUsers.length); // 2

3、map()

描述:

map() 方法創建一個新數組,新數組的每個元素是調用一次給定函數的返回值。

語法:

Array.map(callback(currentValue, index, array) { // 函數體 }, thisValue)

參數:

callbackthisValue


參數是否可選描述
參數一callback必選數組中的每個元素都要運行的回調函數。它接收三個參數。
參數二thisValue可選執行 callback 時,用于 this 的值。
對象作為該執行回調時使用,傳遞給函數。
如果省略了 thisValue ,"this" 的值為 "undefined"

callback的參數列表:


參數是否可選描述
參數一element必選當前元素
參數二index可選當前元素的索引值
參數三array可選調用了 filter 的數組本身

thisValue的參數:

執行 callback 時,用于 this 的值。

返回值:

是一個由原數組每個元素執行回調函數的結果組成的新數組。

示例:

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

4、sort()

描述:

map() 方法在原數組上進行修改更改元素的順序

注:默認排序順序是在將元素轉換為字符串,然后比較它們的UTF-16代碼單元值序列時

語法:

Array.sort( compareFunction )

參數:

compareFunction


參數是否可選描述
參數一compareFunction可選規定排列順序的函數。如果省略,元素按照轉換為的字符串的各個字符的Unicode位點進行排序。

compareFunction的參數列表:


參數是否可選描述
參數一firstEl必選第一個用于比較的元素。
參數二secondEl必選第二個用于比較的元素。

compareFunction返回值

返回一個說明這兩個值順序的數字

  • 若 a 小于 b,在排序后的數組中 a 應該出現在 b 之前,則返回一個小于 0 的值。

  • 若 a 等于 b,則返回 0。

  • 若 a 大于 b,則返回一個大于 0 的值。

返回值:

返回值為排序后的數組,但是返回值通常會被忽略,因為修改了原數組。

示例:

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

5、reduce()

描述:
reduce() 方法為數組中的每一個元素依次執行(升序執行)回調函數,不包括數組中被刪除或從未被賦值的元素。將其結果計算為一個值。

注:reduce() 可以作為一個高階函數,用于函數的 compose。

語法:

Array.reduce(callback(accumulator, currentValue, index, array), initialValue)

參數:

callbackinitialValue


參數是否可選描述
參數一callback必選執行數組中每個數組元素的函數 (如果沒有initialValue初始值那么第一個值不會執行改函數)它接收四個參數。
參數二initialValue可選callback函數的初始值

callback的參數列表:


參數是否可選描述
參數一accumulator必選累計器累計回調的返回值; 它是上一次調用回調時返回的累積值,或initialValue。
參數二currentValue必選當前元素
參數三index可選當前元素的索引值
參數四array可選調用了 reduce() 的數組本身

initialValue的參數:

作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值,則將使用數組中的第一個元素作為初始值。 在沒有初始值的空數組上調用 reduce 將報錯。

返回值:

函數累計處理后的結果
執行完所有callback函數的accumulator參數

注:    我們的 reducer 函數的返回值分配給累計器,該返回值在數組的每個迭代中被記住,并最后成為最終的單個結果值。

示例:

let number = [1, 2, 3, 4];

let result = number.reduce((sum, current) => sum + current, 0);

console.log(result); // 10

6、forEach()

描述:

reduce() 方法為數組中的每一個元素依次執行(升序執行)回調函數,不包括數組中被刪除或從未被賦值的元素。將其結果計算為一個值。

注:reduce() 可以作為一個高階函數,用于函數的 compose。

語法:

Array.forEach(callback(currentValue , index , array), thisValue)

參數:

callbackthisValue


參數是否可選描述
參數一callback必選執行數組中每個數組元素的函數,它接收三個參數。
參數二thisValue可選執行 callback 時,用于 this 的值。
對象作為該執行回調時使用,傳遞給函數。
如果省略了 thisValue ,"this" 的值為 "undefined"

callback的參數列表:


參數是否可選描述
參數一currentValue必選當前元素
參數二index可選當前元素的索引值
參數三array可選調用了 forEach() 的數組本身

thisValue的參數:

執行 callback 時,用于 this 的值。

返回值:

該方法沒有返回值。

示例:

let number = [1, 2, 3, 4];

number.forEach((item, index ,array) =>{
 console.log(item); // 1/2/3/4
});

7、方法列表

方法屬性:

方法改變原數組返回值描述描述
filter()過濾后的新數組過濾器
map()循環后的新數組循環
sort()為排序后的數組排序
reduce()為函數累計處理后的結果累加器
forEach()沒有返回值為undefined循環


感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript數組有哪些常用方法”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女