重新建構一個數組-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中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中，提供了比標準WordPress主題搜索功能更精緻的搜索體驗。令人驚訝的是簡單！您將能夠將搜索限制為Y

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

示例顏色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期進行了最新信息和新示例。在此JSON示例中，我們將研究如何使用JSON格式將簡單值存儲在文件中。使用鍵值對符號，我們可以存儲任何類型的

10個jQuery語法熒光筆Mar 02, 2025 am 12:32 AM

增強您的代碼演示文稿：10個語法熒光筆針對開發人員在您的網站或博客上共享代碼段的開發人員是開發人員的常見實踐。選擇合適的語法熒光筆可以顯著提高可讀性和視覺吸引力。 t

8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局：8 ESTISSEL插件jQuery大大簡化了網頁佈局。本文重點介紹了簡化該過程的八個功能強大的JQuery插件，對於手動網站創建特別有用

10 JavaScript和JQuery MVC教程Mar 02, 2025 am 01:16 AM

本文介紹了關於JavaScript和JQuery模型視圖控制器（MVC）框架的10多個教程的精選選擇，非常適合在新的一年中提高您的網絡開發技能。這些教程涵蓋了來自Foundatio的一系列主題

什麼是這個＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象，但具體取決於函數的調用方式。沒有當前對象時，this 指代全局對象。在 Web 瀏覽器中，它由 window 表示。調用函數時，this 保持全局對象；但調用對象構造函數或其任何方法時，this 指代對象的實例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前，這句話可

See all articles