重新建構一個數組-js教程-PHP中文網

首頁

web前端

js教程

重新建構一個數組

PHPz

Sep 03, 2023 am 08:37 AM

數組構建重新建構數組重組

重新建構一個數組

陣列是一個有順序的值列表，通常是為了循環遍歷數字索引值而建立的，從索引零開始。您需要知道的是，數組是按數字順序排列的集合，而不是具有與非數字順序的值關聯的屬性名稱的物件。本質上，陣列使用數字作為查找鍵，而物件則具有使用者定義的屬性名稱。 JavaScript 沒有真正的關聯數組，但可以使用物件來實現關聯數組的功能。

#在下面的範例中，我將四個字串儲存在 myArray 中，我可以使用數字索引存取它們。我將 myArray 與模仿關聯陣列的物件文字進行比較和對比。

範例：sample133.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	console.log(myArray[0]); // Logs blue using the 0 index to access the string in myArray.

	// Versus

	var myObject = { // aka an associative array/hash, known as an object in JavaScript.
		'blue': 'blue',
		'green': 'green',
		'orange': 'orange',
		'red': 'red'
	};

	console.log(myObject['blue']); // Logs blue.

</script></body></html>

陣列可以保存任何類型的值，並且這些值可以隨時更新或刪除。

如果您需要哈希（也稱為關聯數組），物件是最接近的解決方案。

Array() 只是 Object() 的一種特殊型別。也就是說， Array() 實例基本上是 Object() 實例，帶有幾個額外的函數（.length 和內建數字索引）。

陣列中包含的值通常稱為元素。

`Array()` 參數

您可以將陣列實例的值作為逗號分隔的參數傳遞給建構函式 (new Array('foo', 'bar');)。 Array() 建構子最多可以使用 4,294,967,295 個參數。

但是，如果只有一個參數發送到Array() 建構函數，並且該值為整數（'1'、'123' 或'1.0'），則它將用於設定數組的length，並且不會用作數組中包含的值。

範例：sample134.html

<!DOCTYPE html><html lang="en"><body><script>

	var foo = new Array(1, 2, 3);
	var bar = new Array(100);

	console.log(foo[0], foo[2]); // Logs '1 3'.
	console.log(bar[0], bar.length); // Logs 'undefined 100'.

</script></body></html>

`Array()` 屬性與方法

Array() 物件具有以下屬性（不包括繼承的屬性和方法）：

屬性（Array.prototype）：

原型

陣列物件實例屬性與方法

陣列物件實例具有以下屬性和方法（不包括繼承的屬性和方法）：

實例屬性 (var myArray = ['foo', 'bar']; myArray.length;):

建構子
長度

實例方法 (var myArray = ['foo']; myArray.pop();):

pop()
#push()
#反向()
#shift()
#sort()
#splice()
#unshift()
#concat()
#join()
#slice()

#建立數組

與 JavaScript 中的大多數物件一樣，可以使用 new 運算子結合 Array() 建構子或使用文字語法來建立陣列物件。

在以下範例中，我使用 Array() 建構子建立具有預先定義值的 myArray1 數組，然後使用文字表示法建立 myArray2。

範例：sample135.html

<!DOCTYPE html><html lang="en"><body><script>

	// Array() constructor.
	var myArray1 = new Array('blue', 'green', 'orange', 'red');

	console.log(myArray1); // Logs ["blue", "green", "orange", "red"]

	// Array literal notation.
	var myArray2 = ['blue', 'green', 'orange', 'red'];

	console.log(myArray2); // logs ["blue", "green", "orange", "red"]

</script></body></html>

更常見的是使用文字語法定義數組，但應該注意的是，這個快捷方式只是隱藏了 Array() 建構函數的使用。

實際上，陣列文字通常就是您所需要的。

無論數組是如何定義的，如果您沒有向數組提供任何預定義值，它仍然會被創建，但不會包含任何值。

新增和更新數組中的值

可以隨時將值新增到陣列的任何索引處。在下面的範例中，我們為空數組的數字索引 50 新增一個值。 50之前的所有指數呢？嗯，就像我說的，您可以隨時在任何索引處向數組添加值。但是，如果您在空數組的數字索引 50 中新增一個值，JavaScript 將使用 undefined 值填入其先前的所有必要索引。

範例：sample136.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [];
	myArray[50] = 'blue';
	console.log(myArray.length); /* Logs 51 (0 is counted) because JS created values 0 to 50 before "blue".*/

</script></body></html>

此外，考慮到 JavaScript 的動態特性以及 JavaScript 不是強類型的事實，陣列值可以隨時更新，索引中包含的值可以是任何合法值。在下面的範例中，我將數字索引 50 處的值變更為一個物件。

範例：sample137.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [];
	myArray[50] = 'blue';
	myArray[50] = { 'color': 'blue' }; // Change object type from string to Object() object.
	console.log(myArray[50]); // Logs 'Object {color="blue"}'.

	// Using brackets to access the index in the array, then the property blue.
	console.log(myArray[50]['color']); // Logs 'blue'.

	// Using dot notation.
	console.log(myArray[50].color); // Logs 'blue'.

</script></body></html>

長度與索引

陣列從零開始索引值。這意味著數組中保存值的第一個數字槽看起來像 myArray[0]。這可能有點令人困惑，如果我建立一個包含單一值的數組，則該值的索引為 0，而數組的長度為 1。請確保您了解數組的長度表示數組中包含的值的數量，而數組的數字索引從零開始。

在下列範例中，字串值blue 包含在myArray 陣列中的數字索引0 處，但由於該陣列包含一個值，因此該陣列的長度為1 。

範例：sample138.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue'] // The index 0 contains the string value 'blue'.
	console.log(myArray[0]); // Logs 'blue'.
	console.log(myArray.length); // Logs 1.

</script></body></html>

使用预定义的 `length` 定义数组

正如我之前提到的，通过将单个整数参数传递给 Array() 构造函数，可以预定义数组长度或其将包含的值的数量。在这种情况下，构造函数会抛出一个异常，并假设您要设置数组的长度，而不是用值预先填充数组。

在下一个示例中，我们设置了预定义长度为 3 的 myArray 数组。同样，我们配置数组的长度，而不是向其传递要存储在 0 索引处的值。

示例：sample139.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = new Array(3);
	console.log(myArray.length); // Logs 3 because we are passing one numeric parameter.
	console.log(myArray[0]); // Logs undefined.

</script></body></html>

提供预定义的 length 将为每个数字索引（最多指定的长度）提供 undefined 的关联值。

您可能想知道是否可以创建一个仅包含一个数值的预定义数组。是的，它是通过使用文字形式 var myArray = [4].

设置数组长度可以添加或删除值

数组对象的 length 属性可用于获取或设置数组的长度。如前所示，设置长度大于数组中包含的实际值数会将 undefined 值添加到数组中。您可能没想到的是，您实际上可以通过将长度值设置为小于数组中包含的值的数量来从数组中删除值。

示例：sample140.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];
	console.log(myArray.length); // Logs 4.
	myArray.length = 99;
	console.log(myArray.length); // Logs 99, remember we set the length, not an index.
	myArray.length = 1; // Removed all but one value, so index [1] is gone!
	console.log(myArray[1]); // Logs undefined.

	console.log(myArray); // Logs '["blue"]'.

</script></body></html>

包含其他数组的数组（又名多维数组）

由于数组可以保存任何有效的 JavaScript 值，因此数组可以包含其他数组。完成此操作后，包含封装数组的数组将被视为多维数组。访问封装的数组是通过括号链接完成的。在下面的示例中，我们创建一个包含一个数组的数组文字，在其中创建另一个数组文字，在其中创建另一个数组文字，其中包含索引 0 处的字符串值。

示例：sample141.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [[[['4th dimension']]]];
	console.log(myArray[0][0][0][0]); // Logs '4th dimension'.

</script></body></html>

这个代码示例相当愚蠢，但您会明白数组可以包含其他数组，并且您可以无限期地访问封装的数组。

前后循环数组

循环数组的最简单且可以说是最快的方法是使用 while 循环。

在下面的代码中，我们从索引的开头循环到结尾。

示例：sample142.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	var myArrayLength = myArray.length; // Cache array length to avoid unnecessary lookup.
	var counter = 0; // Set up counter.

	while (counter < myArrayLength) { // Run if counter is less than array length.
		console.log(myArray[counter]); // Logs 'blue', 'green', 'orange', 'red'.
		counter++; // Add 1 to the counter.
	}

</script></body></html>

现在我们从索引末尾循环到开头。

示例：sample143.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	var myArrayLength = myArray.length;
	while (myArrayLength--) {                // If length is not zero, loop and subtract 1.
		console.log(myArray[myArrayLength]);  // Logs 'red', 'orange', 'green', 'blue'.
	}

</script></body></html>

结论

现在，如果您想知道为什么我没有在这里显示 for 循环，那是因为 while 循环的移动部分较少，而且我相信它们更容易阅读。

关于数组的这篇文章就这样结束了。

以上是重新建構一個數組的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。