> 웹 프론트엔드 > JS 튜토리얼 > 배열 재구성

배열 재구성

PHPz
풀어 주다: 2023-09-03 08:37:11
원래의
715명이 탐색했습니다.

배열 재구성

배열은 순서가 지정된 값 목록으로, 일반적으로 인덱스 0부터 시작하여 숫자로 인덱스된 값을 반복하기 위해 생성됩니다. 알아야 할 것은 배열은 숫자 순서가 아닌 값과 연관된 속성 이름을 가진 객체가 아니라 숫자 순서로 된 컬렉션이라는 것입니다. 기본적으로 배열은 숫자를 조회 키로 사용하는 반면 객체는 사용자 정의 속성 이름을 갖습니다. JavaScript에는 실제 연관 배열이 없지만 객체를 사용하여 연관 배열의 기능을 구현할 수 있습니다.

아래 예에서는 myArray 中,我可以使用数字索引访问它们。我将 myArray에 저장된 4개의 문자열을 연관 배열을 모방하는 객체 리터럴과 비교하고 대조합니다.

예: Sample133.html

으아아아

배열은 모든 유형의 값을 보유할 수 있으며 이러한 값은 언제든지 업데이트되거나 삭제될 수 있습니다.

해시(연관 배열이라고도 함)가 필요한 경우 객체가 가장 가까운 솔루션입니다.

Array() 只是 Object() 的一种特殊类型。也就是说, Array() 实例基本上是 Object() 实例,带有几个额外的函数(.length 및 내장된 숫자 인덱스).

배열에 포함된 값을 일반적으로 요소라고 합니다.


Array() 매개변수

배열 인스턴스의 값을 쉼표로 구분된 인수(new Array('foo', 'bar');)로 생성자에 전달할 수 있습니다. new Array('foo', 'bar');)。 Array() 생성자는 최대 4,294,967,295개의 매개변수를 사용할 수 있습니다.

그러나 하나의 인수만 Array() 构造函数,并且该值为整数('1'、'123' 或 '1.0'),则它将用于设置 数组的length 생성자에 전송되고 해당 값이 정수('1', '123' 또는 '1.0')인 경우 배열의 길이를 설정하는 데 사용되며 배열에 포함된 값으로 사용되지 않습니다.

예: Sample134.html

으아아아

Array() 속성 및 메서드

Array() 개체에는 다음과 같은 속성이 있습니다(상속된 속성 및 메서드 제외):

속성(Array.prototype):

  • 原型

Array 객체 인스턴스 속성 및 메서드

Array 객체 인스턴스에는 다음과 같은 속성과 메서드가 있습니다(상속된 속성과 메서드 제외).

인스턴스 속성(var myArray = ['foo', 'bar']; myArray.length;):

  • 构造函数
  • 长度

인스턴스 메소드(var myArray = ['foo']; myArray.pop();):

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

배열 만들기

JavaScript의 대부분의 객체와 마찬가지로 배열 객체는 new 运算符结合 Array() 생성자와 함께 new 연산자를 사용하거나 리터럴 구문을 사용하여 생성할 수 있습니다.

다음 예에서는 Array() 构造函数创建具有预定义值的 myArray1 数组,然后使用文字表示法创建 myArray2 생성자를 사용하여 미리 정의된 값으로 myArray1 배열을 만든 다음 리터럴 표기법을 사용하여 myArray2를 만듭니다.

예: Sample135.html

으아아아

리터럴 구문을 사용하여 배열을 정의하는 것이 더 일반적이지만 이 단축키는 단순히 Array() 생성자의 사용을 숨긴다는 점에 유의해야 합니다.

사실 일반적으로 배열 리터럴만 있으면 됩니다.

배열을 어떻게 정의하든 사전 정의된 값을 배열에 제공하지 않으면 계속 생성되지만 값이 포함되지 않습니다.


배열에 값 추가 및 업데이트

언제든지 어떤 인덱스에서든 값을 배열에 추가할 수 있습니다. 다음 예에서는 빈 배열의 숫자 인덱스 50에 값을 추가합니다. 50 이전의 모든 지수는 어떻습니까? 글쎄요, 제가 말했듯이, 언제든지 어떤 인덱스에서나 배열에 값을 추가할 수 있습니다. 그러나 빈 배열의 숫자 인덱스 50에 값을 추가하면 JavaScript는 그 앞에 필요한 모든 인덱스를 undefined 값으로 채웁니다.

예: Sample136.html

으아아아

또한 JavaScript의 동적 특성과 JavaScript가 강력한 형식이 아니라는 점을 고려하면 배열 값은 언제든지 업데이트될 수 있으며 인덱스에 포함된 값은 어떤 합법적인 값이라도 될 수 있습니다. 아래 예에서는 숫자 인덱스 50의 값을 객체로 변경합니다.

예: Sample137.html

으아아아

길이 및 인덱스

0부터 시작하는 인덱스 값을 배열합니다. 이는 값을 보유하는 배열의 첫 번째 숫자 슬롯이 myArray[0]와 같다는 것을 의미합니다. 단일 값을 포함하는 배열을 생성하는 경우 값의 인덱스는 0이고 배열의 길이는 1이므로 다소 혼란스러울 수 있습니다. 배열의 길이는 배열에 포함된 값의 개수를 의미하며, 배열의 수치적 인덱싱은 0부터 시작된다는 점을 꼭 이해하시기 바랍니다.

다음 예에서 문자열 값 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿