JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript:如何獲取數組中元素的數量

簡介

數組用於存儲有序的值集合。這些值可以是相同數據類型或多種數據類型的組合 - 整數、浮點數、字符串、布爾值、對像等等。

在 JavaScript 中使用數據或使用 API 時,使用 JavaScript 獲取數組中的元素數量是一種常見操作。這可以通過使用 length 來完成 屬性或遍歷數組併計算元素。

使用內置length 屬性

獲取數組中元素總數的標準方法是使用內置的 length 屬性:

let myArray = [99, 101.5, "John Doe", true, { age: 44 }];
let total = myArray.length;
console.log(total); // Output: 5

// Alternatevly:
let total = [99, 101.5, "John Doe", true, { age: 44 }].length;
console.log(total); // Output: 5

注意: length 指的是數組長度的緩存值,在創建數組時計算。因此,您 通過調用 length 迭代數組 顯式的,也不是隱式的。這可確保 length 可以擴展到任意級別,並且不會影響您的應用程序的性能,例如您在手動循環時感受到的影響。

在 JavaScript 中使用循環

JavaScript 循環也可用於計算數組的長度,方法是遍歷數組並為數組中的每個元素將計數器變量加一。這主要用於當您想要對元素本身或特定元素執行某些操作時,因為我們正在遍歷數組中的所有元素。

注意: 與前面描述的 length 相比,這種方法更難 但是,它本身非常簡單。值得注意的是,更長的數組需要更長的迭代時間,而 length 返回具有恆定查找時間的緩存值。

for 循環

let myArray = [99, 101.5, "John Doe", true, { age: 44 }];

// Counter variable
let total = 0;

for (let i = 0; i < myArray.length; i++) {
    total++;
}

console.log(total); // Output: 5

for...in 循環

let myArray = [99, 101.5, "John Doe", true, { age: 44 }];

let total = 0;
for (i in myArray) {
    total++;
}

console.log(total); // Output: 5

獲取數組中唯一元素的個數

JavaScript 中的數組可以包含多個不同數據類型的元素,這些元素可能包含一些重複項。如果我們想獲得唯一元素的數量,我們可以使用 Set() 構造函數。

它創建了一個 set 出作為其參數傳遞的數組。因此,它可以幫助我們刪除重複項並僅返回唯一元素(集合是唯一元素的集合)。刪除重複項後,我們可以使用 length 屬性來獲取唯一元素的數量。

提示: 如果您想了解更多關於如何在 JavaScript 中從數組中刪除重複項,您應該閱讀如何在 JavaScript 中從數組中刪除重複項!

例如,假設我們有一個名稱數組,共有 7 個元素,其中 6 個是唯一的。我們可以先獲取唯一元素,然後使用length 獲取長度的屬性:

let names = ["John", "Dan", "Jane", "Sam", "Alisa", "John", "Pete"];
let uniqueNames = [...new Set(names)];
let totalPeople = uniqueNames.length;

console.log(totalPeople); // Output: 6

注意: 這也適用於循環。在我們獲得存儲在新數組中的唯一元素後,我們所要做的就是像之前所做的那樣循環併計算元素。

如果一個數組包含其他數組作為元素怎麼辦?

正如我們之前所說,JavaScript 中的數組可以包含多種數據類型的元素——包括 Array 數據類型。起初這可能有點令人困惑,但是當您掌握 length 屬性計算那些 子數組 ,您將能夠毫無問題地處理這種情況。

第一個可能想到的方法是使用 length 屬性:

let myArray = [["John", "Pete"], [90, 2], [], [34, 45, 2], [9,4], "John Doe", true, [19]];
let total = myArray.length;

console.log(total); // Output: 8

注意 length 屬性將每個子數組視為一個元素。它不考慮子數組的內容——無論是空的還是有大量元素的,都算作原始數組的一個元素(本例中為myArray )。

獲取包含其他數組的數組中的元素個數

現在讓我們學習如何計算所有元素的數量 在數組中 - 包括那些元素在子數組元素中 .我們可以使用幾種方法,例如 for 循環或 for...in 等。

我們將首先初始化 totalLength 為0,然後創建一個函數(myLength() ) 它將用於循環遍歷數組併計算其元素的數量。首先,我們需要遍歷原始數組並考慮它的每個元素。如果元素不是數組,我們只需增加 totalLength 乘以 1。另一方面,如果當前元素是一個數組(原始數組的子數組),我們將遞歸調用 myLength 計算其元素個數的方法:

let myArray = [["John", "Pete"], [90, 2], [], [34, 45, 2], [9,4], "John Doe", true, [19]];

let totalLength = 0;
const myLength = (array) => {
    // For each element of the `myArray`
    for (let i in array) {
        // If the element is an array
        // recursively call `myLength` to calculate
		// the length of the current element
        // Otherwise, just increment the `totalLength`
        if (Array.isArray(array[i])) {
            myLength(array[i]);
        } else {
            totalLength++;
        }
    }
};

myLength(myArray);
console.log(totalLength); // Output: 12

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

或者,您可以簡單地調用 flat() myArray 上的方法 ,它通過遞歸地將所有元素連接成一維數組來展平它,然後調用 length 在新數組上:

console.log(myArray.flat().length) // Output: 12

根據條件計數

就像我們之前提到的,我們還可以根據某些條件計算數組中元素的數量。例如,假設我們有一個由對象組成的學生數組,每個對像都包含學生姓名和分數:

const students = [
    { name: "John Doe", score: 70 },
    { name: "Jane Doe", score: 40 },
    { name: "Sarah Jane", score: 33 },
    { name: "John Tough", score: 84 },
    { name: "Jabes Tough", score: 64 }
];

我們可以通過遍歷每個元素併計算通過預定義條件的學生來統計得分超過 60 的學生總數:

let total = 0;

students.forEach((student) => {
    if (student.score >= 60) {
        total++;
    }
});

console.log(total); // Output: 3

這也適用於其他迭代方法,如 for 循環:

let total = 0;

for (let i = 0; i < students.length; i++) {
    if (students[i].score >= 60) {
        total++;
    }
}

console.log(total); // Output: 3

結論

在本文中,我們學習瞭如何獲取數組中元素的數量,並且我們看到了可以保證我們獲取數組長度的各種場景以及我們如何實現每個場景。


Tutorial JavaScript 教程
  1. JavaScript 如何在幕後工作?

  2. NPM 依賴 vs dev 依賴,如何決定?

  3. JavaScript 閉包的秘密生活

  4. ETL:使用 Node.js 轉換數據

  5. LeetCode 121. 買賣股票的最佳時機(javascript 解決方案)

  6. 使用 GraphQL、Hasura 和 React 構建黑客新聞克隆 - 第 1 部分

  7. 使用 Nuxt、Vuex 和 Firebase 構建用戶帳戶

  1. 一個超級簡單的無限滾動實現

  2. 但究竟什麼是服務器?什麼是 API?

  3. 鏈接元素加載

  4. Angular 反應式編程的 JUICE

  5. 正則表達式:刪除除字母和分隔符之外的所有內容

  6. 訓練機器學習模型以預測代碼片段中的編程語言

  7. 使用單個命令在 Next.js 服務器旁邊運行一個工作器

  1. 使用 node-memwatch 解決 NodeJS 內存洩漏問題

  2. JavaScript 數組檢查 |示例代碼

  3. Swift 和 JavaScript 比較片段 - 閉包

  4. 檢測兩個圓之間的碰撞並將它們相互滑動