Rumah > Artikel > hujung hadapan web > Bina semula tatasusunan

Bina semula tatasusunan

PHPzasal: 2023-09-03 08:37:11669semak imbas

Tatasusunan ialah senarai nilai tersusun, biasanya dibuat untuk menggelungkan nilai yang diindeks secara berangka, bermula pada indeks sifar. Apa yang anda perlu tahu ialah tatasusunan ialah koleksi dalam susunan berangka, bukan objek dengan nama sifat yang dikaitkan dengan nilai yang tidak dalam susunan berangka. Pada asasnya, tatasusunan menggunakan nombor sebagai kunci carian, manakala objek mempunyai nama harta yang ditentukan pengguna. JavaScript tidak mempunyai tatasusunan bersekutu yang benar, tetapi anda boleh menggunakan objek untuk melaksanakan fungsi tatasusunan bersekutu.

Dalam contoh di bawah, saya mempunyai empat rentetan yang disimpan dalam myArray dan saya boleh mengaksesnya menggunakan pengindeksan berangka. Saya membandingkan dan membezakan myArray dengan literal objek yang meniru tatasusunan bersekutu. 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

Contoh: sample133.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>

Tatasusunan boleh menyimpan nilai apa-apa jenis, dan nilai ini boleh dikemas kini atau dipadamkan pada bila-bila masa. 🎜 🎜Jika anda memerlukan cincangan (juga dikenali sebagai tatasusunan bersekutu), objek ialah penyelesaian yang paling hampir. 🎜 🎜Array() hanyalah jenis khas Object(). Iaitu, contoh Array() pada asasnya ialah contoh Object(), dengan beberapa fungsi tambahan (.length dan terbina dalam indeks nombor). 🎜 🎜Nilai yang terkandung dalam tatasusunan biasanya dipanggil elemen. 🎜

Parameter `Array()`

🎜Anda boleh menghantar nilai contoh tatasusunan kepada pembina sebagai argumen yang dipisahkan koma (new Array('foo', 'bar');). Pembina Array() boleh mengambil sehingga 4,294,967,295 argumen. 🎜 🎜Walau bagaimanapun, jika hanya satu hujah dihantar kepada pembina Array(), dan nilai itu ialah integer ('1', '123' atau '1.0'), maka ia akan digunakan untuk menetapkan

 Panjang tatasusunan dan tidak akan digunakan sebagai nilai yang terkandung dalam tatasusunan. 🎜
🎜Contoh: sample134.html🎜
<pre class="brush:javascript;toolbal:false;">
&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;body&gt;&lt;script&gt;

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

&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
</pre>
<hr>
<h2>
<code>Array()

Sifat dan Kaedah 🎜Array() objek mempunyai sifat berikut (tidak termasuk sifat dan kaedah yang diwarisi): 🎜 🎜Sifat (Array.prototype): 🎜

Prototaip

Sifat dan kaedah contoh objek tatasusunan

🎜Kejadian objek tatasusunan mempunyai sifat dan kaedah berikut (tidak termasuk sifat dan kaedah yang diwarisi): 🎜 🎜Sifat instance (var myArray = ['foo', 'bar']; myArray.length;): 🎜

Pembina
Panjang

🎜Kaedah contoh (var myArray = ['foo']; myArray.pop();): 🎜

pop()
push()
Reverse()
shift()
sort()
splice()
nyahshift()
concat()
join()
slice()

Buat tatasusunan

🎜Seperti kebanyakan objek dalam JavaScript, objek tatasusunan boleh dibuat menggunakan operator new bersama-sama dengan pembina Array() atau menggunakan sintaks literal. 🎜 🎜Dalam contoh berikut, saya mencipta tatasusunan myArray1 dengan nilai yang dipratentukan menggunakan pembina Array() dan kemudian mencipta myArray2 menggunakan literal tatatanda . 🎜 🎜Contoh: sample135.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>

🎜Adalah lebih biasa untuk mentakrif tatasusunan menggunakan sintaks literal, tetapi perlu diingat bahawa pintasan ini hanya menyembunyikan penggunaan pembina Array(). 🎜 🎜Malah, tatasusunan literal biasanya semua yang anda perlukan. 🎜 🎜Tidak kira bagaimana tatasusunan ditakrifkan, jika anda tidak memberikan sebarang nilai yang dipratentukan kepada tatasusunan, ia tetap akan dibuat, tetapi ia tidak akan mengandungi sebarang nilai. 🎜

Tambah dan kemas kini nilai dalam tatasusunan

🎜Sesuatu nilai boleh ditambah pada tatasusunan pada bila-bila masa di mana-mana indeks. Dalam contoh berikut, kami menambah nilai pada indeks berangka 50 tatasusunan kosong. Bagaimana dengan semua indeks sebelum 50? Baiklah, seperti yang saya katakan, anda boleh menambah nilai pada tatasusunan pada bila-bila masa di mana-mana indeks. Walau bagaimanapun, jika anda menambah nilai pada indeks berangka 50 tatasusunan kosong, JavaScript akan mengisi semua indeks yang diperlukan sebelum itu dengan nilai undefined. 🎜 🎜Contoh: sample136.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>

🎜Selain itu, memandangkan sifat JavaScript yang dinamik dan fakta bahawa JavaScript tidak ditaip dengan kuat, nilai tatasusunan boleh dikemas kini pada bila-bila masa dan nilai yang terkandung dalam indeks boleh menjadi sebarang nilai undang-undang. Dalam contoh di bawah, saya menukar nilai pada indeks angka 50 kepada objek. 🎜 🎜Contoh: sample137.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>

Panjang dan indeks

🎜Susun nilai indeks bermula dari sifar. Ini bermakna slot angka pertama dalam tatasusunan yang memegang nilai kelihatan seperti myArray[0]. Ini boleh menjadi agak mengelirukan, jika saya mencipta tatasusunan yang mengandungi satu nilai, indeks nilai ialah 0, dan panjang tatasusunan ialah 1. Pastikan anda memahami bahawa panjang tatasusunan mewakili bilangan nilai yang terkandung dalam tatasusunan, dan pengindeksan berangka tatasusunan bermula pada sifar. 🎜 🎜Dalam contoh berikut, nilai rentetan biru terkandung pada indeks berangka 0 dalam tatasusunan myArray, tetapi memandangkan tatasusunan mengandungi satu nilai, panjang tatasusunan ialah 1 . 🎜 🎜Contoh: 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 循环的移动部分较少，而且我相信它们更容易阅读。

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

Atas ialah kandungan terperinci Bina semula tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html Array Object 运算符关联数组多维数组 sort for while 封装构造函数字符串循环继承 Length var undefined 对象 prototype

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Laksanakan kawalan keterlihatan halaman menggunakan HTML5 Page Visibility APIArtikel seterusnya：Laksanakan kawalan keterlihatan halaman menggunakan HTML5 Page Visibility API

Artikel berkaitan

Lihat lagi

Bina semula tatasusunan

Array() 参数

Array() 属性和方法

数组对象实例属性和方法

创建数组

添加和更新数组中的值

长度与索引

Parameter Array()

Sifat dan kaedah contoh objek tatasusunan

Buat tatasusunan

Tambah dan kemas kini nilai dalam tatasusunan

Panjang dan indeks

使用预定义的 length 定义数组

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

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

前后循环数组

结论

Artikel berkaitan

`Array()` 参数

`Array()` 属性和方法

Parameter `Array()`

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