>  기사  >  웹 프론트엔드  >  JavaScript 배열에 대해 당신이 몰랐던 3가지

JavaScript 배열에 대해 당신이 몰랐던 3가지

黄舟
黄舟원래의
2017-02-23 13:27:46940검색

프로그래밍 언어에서 배열(Array)은 매우 일반적으로 사용되는 함수로 여러 값을 동시에 저장할 수 있는 특수 변수입니다. 그러나 JavaScript와 관련하여 배열의 성능에 대해 더 자세히 알아볼 내용이 있습니다.

이 기사에서는 JavaScript 배열의 흔하지 않은 세 가지 기능에 대해 설명합니다.

1. 배열에 맞춤 속성 추가

인터넷에서 JavaScript 배열의 정의를 검색하면 거의 모든 사람이 동일하다는 것을 알 수 있습니다. 배열의 정의도 마찬가지입니다. 객체입니다.

사실 JavaScript로 처리하는 모든 것은 객체로 간주될 수 있습니다. JavaScript에는 기본 유형과 객체 유형이라는 두 가지 데이터 유형이 있지만 기본 유형은 기본적으로 객체 유형에 포함됩니다.

배열, 함수 및 날짜는 모두 JavaScript의 사전 정의된 객체이며 모두 메소드, 속성 및 각각의 표준화된 구문을 포함합니다.

JavaScript 배열에는 다음과 같은 세 가지 속성이 있습니다.

1 배열의 인덱스도 해당 속성입니다.

2 내장 속성

3 자신만의 속성을 추가할 수 있습니다.

처음 두 속성은 모두에게 잘 알려져 있고 매일 사용할 수도 있지만 여기서는 몇 마디 간단히 말씀드리고 추가하는 방법에 대해 말씀드리고 싶습니다. 배열에 대한 사용자 정의 속성.

인덱스를 속성으로 사용

JavaScript 배열은 var ary = ["orange","apple","lychee"];와 같은 대괄호 구문을 사용할 수 있습니다.

배열 요소의 인덱스는 기본적으로 속성이며 해당 속성의 이름은 항상 음수가 아닌 정수입니다.

배열의 인덱스 요소 쌍은 객체의 키 값 쌍과 유사합니다. 인덱스는 배열 객체의 고유한 속성으로, 다른 내장 속성과 달리 ary[3] = "peach";와 같이 대괄호를 통해 개별적으로 구성할 수 있습니다.

내장 속성

배열에는 array.length와 같은 내장 속성이 있습니다. 길이 속성에는 배열의 길이를 나타내는 정수 값이 포함됩니다.

일반적으로 내장 속성은 배열과 같은 미리 정의된 JavaScript 객체에서 찾을 수 있는 경우가 많습니다. 기본 제공 속성과 기본 제공 메서드를 결합하여 다양한 요구 사항을 충족하도록 일반 객체를 사용자 정의합니다.

내장 속성에 액세스할 때 object.key 또는 object["key"]라는 두 가지 구문을 사용할 수 있습니다. 즉, 배열의 길이를 가져올 때 ary["length"]를 쓸 수 있습니다.

배열 객체에 대한 사용자 정의 속성 생성

이제 배열에 사용자 정의 속성을 추가하는 방법에 대해 알아보겠습니다. 배열은 다양한 종류의 값을 다양한 인덱스에 저장하는 미리 정의된 객체입니다.

일반적으로 배열에 사용자 정의 속성을 추가할 필요가 없습니다. 이러한 이유로 JavaScript를 처음 배웠을 때 배열에 속성을 추가할 수 있다고 말한 사람은 아무도 없었습니다. 실제로 일반 객체와 동일한 방식으로 배열에 키-값 쌍을 추가하려는 경우 해당 목적으로 일반 객체를 사용할 수도 있습니다. 그러나 이것이 전혀 특별한 경우가 없다는 것은 아닙니다. 어떤 경우에는 배열이 객체라는 사실을 활용하여 하나 이상의 사용자 정의 속성을 추가할 수 있습니다.

예를 들어 요소의 "종류" 또는 "클래스"를 식별하는 배열에 사용자 정의 속성을 추가할 수 있습니다. 자세한 내용은 아래 예를 참조하세요.

 var ary = ["orange","apple","lychee"];

ary.itemClass = "fruits";

console.log(ary + " are " + ary.itemClass);

배열에 추가하는 사용자 정의 속성은 모두 셀 수 있습니다. 즉, for...in 및 기타 루프를 통해 선택할 수 있습니다.

2. 배열 요소를 통한 반복

"나는 이것을 오랫동안 알고 있었습니다." 예, 배열 요소를 인덱싱하는 방법을 이미 알고 있습니다. 그러나 "배열 요소를 통한 반복"이라는 진술이 약간 추상적이라고 느낄 수도 있습니다. 왜냐하면 우리가 실제로 반복하는 것은 배열의 인덱스이기 때문입니다.

배열 인덱스는 음수가 아닌 정수로 구성되므로 일반적으로 0부터 시작하여 배열의 전체 길이까지 정수 값을 반복한 다음 반복된 값을 사용하여 특정 인덱스.

그러나 ECMAScript6의 등장 이후 더 이상 인덱스에 신경 쓰지 않고 배열 값을 직접 반복할 수 있으며, 이 작업은 for...of 루프를 사용하여 완료할 수 있습니다.

배열에서 for...of 루프는 인덱스 순서에 따라 배열 요소를 반복할 수 있습니다. 즉, 인덱스의 반복을 제어하고 그에 따라 기존 배열 값을 얻을 수 있습니다. 주어진 인덱스에 이 루프는 모든 배열 요소를 반복하여 사용하려는 경우에 유용합니다.

 var ary = ["orange","apple","lychee"];

for (let item of ary){

  console.log(item);

}

For comparison, with the regular for loop, we get the indices instead of the values as output.

 

var ary = ["orange","apple","lychee"];

for (var item = 0; item < ary.length; item++){

  console.log(item);

}

3. 요소의 개수가 길이와 같지 않습니다

일반적으로 배열의 길이를 말할 때 길이는 배열 값의 개수, 또는 배열에 대해 수동으로 설정한 길이입니다. 그러나 실제로 배열의 길이는 배열 내부의 가장 큰 기존 인덱스에 따라 달라집니다.

长度是一个非常灵活的属性。无论你是否曾实现调整了数组的长度,只要你不断的给数组添加新的值,它的长度也会随之增长。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

在上面的例子中,你可以看到我给数组的索引5只指定了一个值,之后长度变成了6。现在,如果你觉得给index 5添加一个值,数组就会自动创建索引0-4,那么你的推测就出现了错误。数组中并没有应经存在的索引0-4。你可以使用in operator来查看。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

console.log(0 in ary);

上面的ary数组被我们成为稀疏数组(sparse array),这个数组的索引不会持续的被创建,而且索引之间有空气。sparse数组的对立面为密集数组(dense array)。密集数组的索引会被持续的创建,其元素的数量等于其长度。

数组的长度属性也可以用来缩短数字,确保数组中索引的最大数量永远小于数组本身,因为在默认情况下,长度的数值永远会大于索引数量的最高值。

在下面的例子中,你可以看到,我利用减少ary数组长度的方式,社区了索引5中的元素。

var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

ary.length = 2;

console.log(ary.length);

console.log(ary[5]);

 以上就是关于JavaScript数组,你所不知道的3件事的内容,更多相关内容请关注PHP中文网(www.php.cn)! 



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.