」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 中的陣列:您需要了解的一切

JavaScript 中的陣列:您需要了解的一切

發佈於2024-11-08
瀏覽:477

Arrays In JavaScript: Everything You Need To Know

JavaScript 中的数组

JavaScript 中的数组最初可能会令人困惑且难以掌握,尤其是在处理高级概念时。我一开始也很难理解 JavaScript 中的数组。在本文中,我的目标是揭开 JavaScript 中数组的神秘面纱,分解您需要了解的所有内容,以便您可以自信地使用它们。

定义

什么是数组

数组是一种存储元素集合的数据结构,每个元素都可以通过索引访问。在许多编程语言中,数组将元素存储在连续的内存位置中。在 JavaScript 中,数组是高级的、类似列表的对象,用于在单个变量中存储多个值。它们是零索引的,这意味着第一个元素位于索引 0 处。

JavaScript 中的数组

由于 JavaScript 是一种动态类型语言,因此数组可以保存不同类型的元素。数组可以包含数字、字符串、布尔值、对象,甚至其他数组。这与 Java 或 C 等静态类型语言不同,在这些语言中,数组通常是同构的,并且必须包含相同数据类型的元素。

为什么使用数组?

数组允许您存储、访问和操作值,从而帮助有效管理数据。它们用于涉及列表或集合的任何内容,例如管理电子商务购物车中的商品或跟踪用户输入。

如何在 JavaScript 中创建数组

在 JavaScript 中创建数组的方法有多种,我将介绍其中的几种:

1.使用数组文字[]

在 JavaScript 中,您可以通过将 [] 分配给变量或常量来简单地创建数组


const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];


请注意,数组的元素之间用逗号分隔,

2. 使用数组构造函数

您还可以使用以下语法创建数组作为本机 JavaScript 数组构造函数的实例:
const myArray = new Array()
Array 构造函数接受一个或多个参数(它们必须是数字),并且根据您传入的参数数量,它的行为会有所不同!
如果您传递一个参数:const myArray = new Array(4),这将创建一个包含 4 个空元素的新数组!

如果传递多个参数: const myArray = new Array(1, 2, 3),这将创建一个分别由 3 个数字 1、2 和 3 组成的数组,与编写 const myArray = [1, 2 类似, 3]!

我知道这看起来很混乱,但相信我,如果你用它们做更多练习,这很容易!

3.使用Array.of方法

数组也可以使用此方法 Array.of 创建,它只会创建一个包含您作为参数传递给它的所有元素的数组。使用 Array.of 和 A​​rray 构造函数之间的区别在于它们在接收一个参数时的行为方式!


const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']


注意 Array.of 在接收一个参数时的行为,与仅创建一个包含 n 个空元素的数组的 Array 构造函数不同,Array.of 仅创建一个包含单个元素(即您传入的元素)的数组!

4.使用Array.from方法

您还可以使用 Array.from(iterable) 方法,该方法接收一个参数,该参数也必须是可迭代的,并从中创建一个数组!例如,您可以将一个集合传递给此方法,并根据该集合的值创建一个数组!


const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);


JavaScript 中的数组操作

我们已经了解了什么是数组以及如何在 JavaScript 中创建数组,现在您可能会问自己的剩余问题是,如何使用和处理数组?
嗯,这个问题问得好!

在 JavaScript 中使用数组的传统方式

传统上,我们使用循环来迭代存储在数组中的元素并使用它们!
以下示例显示如何循环数字数组并显示数组中每个数字的双精度数:


const numbers = [1, 2, 3, 4];
for (let i = 0; i 

使用现代 JavaScript 数组方法语法

JavaScript 附带了许多开箱即用的数组方法(高阶函数),所有数组实例都可以通过 Array.prototype 对象访问它们,我们使用 JavaScript 提供的这些方法来操作和处理存储在数组中的数据!我们甚至可以创建自己的数组方法(我们将在下一章中讨论)

它们是高阶方法,因为它们将其他函数作为参数并使用这些函数来操作存储在数组中的数据!

那些数组方法也分为两类:

  1. Mutating: 这些循环遍历数组,在应用回调函数时,它们还会改变原始数组!
  2. Non-mutating: 这些迭代数组并应用回调函数,但它们不会改变原始数组,而是返回新数组

1.forEach()方法

forEach() 是一个数组高阶方法,用于循环数组的元素并对每个元素应用回调函数,而无需修改原始数组或创建新数组!

回调函数的语法通常是匿名函数(通常在所有其他方法中都相同):


function (currentElement[, index, targetArray]) {}


这意味着在每次迭代中,数组方法都可以访问迭代中的当前元素(currentElement),它是数组索引中的索引(可选),以及对正在其中执行该方法的目标数组的引用targetArray 也是可选的。但是你可以随意调用这些参数,你只需要注意它们的位置。


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});


2.map()方法

就像 forEach 映射一样,也是迭代数组元素并对每个元素应用回调函数的另一种方式,但与 forEach 映射不同的是,它是非变异方法,因此它创建并返回新数组迭代并且不改变原数组!


const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);


3.filter()方法

filter() 方法用于通过删除不需要的元素来过滤数组,这是非变异方法,它返回一个新数组!
对于每次迭代,filter() 内的回调必须返回一个布尔值,指示当前元素是否包含在新的过滤数组中


const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]


4.reduce()方法

reduce() 方法与上面的有点不同。将其视为一种通过对每个元素逐一应用函数来将数组中的所有元素组合成单个值的方法。它从数组的所有元素返回一个值,当您想要从数组的所有元素获取单个值(例如总和、平均值、最大值或最小值等)时,您将使用它!

语法也不同
Array.reduce(函数(累加器, 元素[, 索引, targetArray]) [, 初始值])

该方法有两个参数,第一个参数是回调函数,就像其他方法一样,第二个参数是累加器变量的初始值。第二个参数是可选的,如果没有提供,则reduce将使用数组的第一个元素作为accumulator

的初始值

累加器保存每次迭代时回调函数返回的结果,迭代结束后将是reduce返回的最终结果!

让我们尝试从数字数组中求和:


const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);


4.slice()方法

slice() 是 JavaScript 中另一个有用的数组方法,用于提取数组的一小部分! slice() 通过复制现有数组的一部分而不修改原始数组来创建新数组。

slice()方法的语法如下:
Array.slice(startIndex, endIndex) startIndex 表示提取的起点,包含在内;endIndex 表示提取的结束元素,可选且不包含。如果未提供,切片方法会将数组从 startIndex 复制到数组末尾!


const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']


5. splice()方法

splice()是JavaScript中的数组方法,用于添加、删除和替换数组中的元素。 splice() 通过添加、删除或替换数组中的元素来更改数组的内容。

splice()方法的语法如下:
Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)
这可能看起来令人困惑,但是,让我尝试解释一下:
index 表示数组中开始删除元素的索引,并且包含在内。
elementsToRemove 表示要从数组中删除的索引中的元素数量,如果只想添加新元素,可以在此位置提供 0。
newElement1、newElement2 等。这些可以是您想要在数组中添加的任意数量的元素,它们将替换您在数组中指定的 elementsToRemove 元素!

说了这么多,我们看一个例子:


const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']


fruits.splice(1, 1, "pineapple") 这意味着从索引 1 开始,删除 1 个元素并添加 'pineapple'
如果我们只想在数组中添加菠萝而不用它替换其他值,我们可以将其写为
Fruits.splice(1, 0, "pineapple") 这会在索引1处的元素之后添加菠萝,并且不会从此数组中删除任何其他元素。

结论

数组是 JavaScript 中的一项基本且多功能的功能,提供了存储和操作数据集合的基本结构。从使用文字的简单数组创建到 Array.of() 和 Array.from() 等更高级的方法,JavaScript 数组提供了一系列处理不同类型数据的方法。通过循环或现代方法(如 forEach()、map()、filter()、reduce()、slice() 和 splice() 掌握数组操作,您可以有效地执行复杂的操作。理解这些数组特性是精通 JavaScript 的关键,让您能够编写出更干净、更简洁、更强大的代码。

版本聲明 本文轉載於:https://dev.to/victor_mugisha/arrays-in-javascript-5cnl?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用PHP從XML文件中有效地檢索屬性值?
    如何使用PHP從XML文件中有效地檢索屬性值?
    從php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...
    程式設計 發佈於2025-03-20
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    在嘗試為JavaScript對象創建動態鍵時,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號: jsobj ['key''i] ='example'1; 在JavaScript中,數組是一...
    程式設計 發佈於2025-03-20
  • 為什麼我的CSS背景圖像出現?
    為什麼我的CSS背景圖像出現?
    故障排除:CSS背景圖像未出現 ,您的背景圖像儘管遵循教程說明,但您的背景圖像仍未加載。圖像和样式表位於相同的目錄中,但背景仍然是空白的白色帆布。 而不是不棄用的,您已經使用了CSS樣式: bockent {背景:封閉圖像文件名:背景圖:url(nickcage.jpg); 如果您的html,cs...
    程式設計 發佈於2025-03-20
  • 大批
    大批
    [2 數組是對象,因此它們在JS中也具有方法。 切片(開始):在新數組中提取部分數組,而無需突變原始數組。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    程式設計 發佈於2025-03-20
  • 如何使用組在MySQL中旋轉數據?
    如何使用組在MySQL中旋轉數據?
    在關係數據庫中使用mySQL組使用mySQL組進行查詢結果,在關係數據庫中使用MySQL組,轉移數據的數據是指重新排列的行和列的重排以增強數據可視化。在這裡,我們面對一個共同的挑戰:使用組的組將數據從基於行的基於列的轉換為基於列。 Let's consider the following ...
    程式設計 發佈於2025-03-20
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。要解決此問題並確保在後續頁面訪問中執行腳本,Firefox用戶應設置一個空功能。 警報'); }; alert('inline Alert')...
    程式設計 發佈於2025-03-20
  • Python讀取CSV文件UnicodeDecodeError終極解決方法
    Python讀取CSV文件UnicodeDecodeError終極解決方法
    在試圖使用已內置的CSV模塊讀取Python中時,CSV文件中的Unicode Decode Decode Decode Decode decode Error讀取,您可能會遇到錯誤的錯誤:無法解碼字節 在位置2-3中:截斷\ uxxxxxxxx逃脫當CSV文件包含特殊字符或Unicode的路徑逃...
    程式設計 發佈於2025-03-20
  • 如何在Java字符串中有效替換多個子字符串?
    如何在Java字符串中有效替換多個子字符串?
    在java 中有效地替換多個substring,需要在需要替換一個字符串中的多個substring的情況下,很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    程式設計 發佈於2025-03-20
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-03-20
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符在postgresql中提取最後一行,您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: id dat...
    程式設計 發佈於2025-03-20
  • 可以在純CS中將多個粘性元素彼此堆疊在一起嗎?
    可以在純CS中將多個粘性元素彼此堆疊在一起嗎?
    [2这里: https://webthemez.com/demo/sticky-multi-header-scroll/index.html </main> <section> { display:grid; grid-template-...
    程式設計 發佈於2025-03-20
  • 如何使用FormData()處理多個文件上傳?
    如何使用FormData()處理多個文件上傳?
    )處理多個文件輸入時,通常需要處理多個文件上傳時,通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    程式設計 發佈於2025-03-20
  • 如何使用Regex在PHP中有效地提取括號內的文本
    如何使用Regex在PHP中有效地提取括號內的文本
    php:在括號內提取文本在處理括號內的文本時,找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數,如下所示: 作為替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式來搜索特...
    程式設計 發佈於2025-03-20
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-03-20
  • 如何限制動態大小的父元素中元素的滾動範圍?
    如何限制動態大小的父元素中元素的滾動範圍?
    在交互式接口中實現垂直滾動元素的CSS高度限制問題:考慮一個佈局,其中我們具有與用戶垂直滾動一起移動的可滾動地圖div,同時與固定的固定sidebar保持一致。但是,地圖的滾動無限期擴展,超過了視口的高度,阻止用戶訪問頁面頁腳。 $("#map").css({ margin...
    程式設計 發佈於2025-03-20

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3