重新建構一個數組
- PHPz原創
- 2023-09-03 08:37:11556瀏覽
陣列是一個有順序的值列表，通常是為了循環遍歷數字索引值而建立的，從索引零開始。您需要知道的是，數組是按數字順序排列的集合，而不是具有與非數字順序的值關聯的屬性名稱的物件。本質上，陣列使用數字作為查找鍵，而物件則具有使用者定義的屬性名稱。 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中文網其他相關文章！