> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 배열 기초 소개_기본 지식

자바스크립트 배열 기초 소개_기본 지식

WBOY
풀어 주다: 2016-05-16 15:10:51
원래의
1188명이 탐색했습니다.

Javascript는 마법의 언어이며 배열도 똑같이 독특합니다. 불순물을 제거하고, 본질을 추출하고, 일반적으로 사용되는 모범 사례를 요약합니다. 오류가 있으면 지적해주세요.

자바스크립트 배열은 객체의 특성을 지닌 배열과 유사한 객체입니다. 속성 이름이 작고 연속된 정수인 경우 배열을 사용해야 하며, 그렇지 않으면 개체를 사용해야 합니다.

배열 소스

모든 배열은 배열에서 구성됩니다. 생성자 속성을 테스트해 보겠습니다.

var arr = [];
arr.constructor === Array; // true
arr.constructor === Array.prototype.constructor; // true
로그인 후 복사

배열 생성

//数组字面量方式
var arr1 = [1, 2, 3]; // [1,2,3]

//构造函数方式
var arr2 = new Array();    // [] 空数组
var arr3 = new Array('9');   // ["9"] 一个字符串元素
var arr4 = new Array(9);    // [] 数组长度length为9
var arr5 = new Array([9]);   // [[9]] 相当于二维数组
var arr6 = new Array(1, 2, 3); // [1, 2, 3]
var arr7 = new Array(1, function f(){}, {o : 6}, null,undefined,true);
// 数组可以存储任意混合数据类型

로그인 후 복사

arr4의 작동 방식으로 인해 하나의 숫자 매개변수만 Array 생성자에 전달되면 생성자는 길이 속성이 설정된 빈 배열을 반환합니다. 따라서 짧고 간결한 배열 리터럴 방식을 사용하는 것이 좋습니다.

객체가 배열인지 감지

var arr1 = [1, 2, 3];
typeof(arr1); // object
로그인 후 복사

typeof가 유형을 올바르게 감지하지 못한다는 것은 잘 알려져 있습니다.

arr1 instanceof Array; //true
로그인 후 복사

instanceof 메서드는 웹 페이지 내에서 문제가 없습니다. 다른 웹 페이지가 중첩되면 두 개의 전역 범위가 생기고 서로 호출할 때 감지에 문제가 발생합니다.

Array.isArray(arr1); // true
로그인 후 복사

Array.isArray()는 ECMAScript5의 새로운 메서드이며 결함이 없습니다. 유일한 문제는 IE8 브라우저가 이를 지원하지 않고, IE9 브라우저가 엄격 모드에서 이를 지원하지 않는다는 점이다.

Object.prototype.toString.apply(arr1).slice(8, -1); // Array
로그인 후 복사

마지막 방법이 유형을 감지하는 가장 좋은 방법입니다.

배열 길이

배열의 길이도 그 속성입니다. 길이를 늘려도 범위를 벗어난 오류가 발생하지 않습니다.
길이 값은 배열의 가장 큰 정수 속성 이름에 1을 더한 값과 같습니다.

var arr1 = [];
arr1[9] = 1; // 长度为10,只包含一个元素的数组
로그인 후 복사

이름이 길이보다 크거나 같은 속성을 삭제하려면 작은 값을 설정하세요.
길이 값을 0으로 설정하면 배열을 지우는 것과 같습니다.

var arr2 = [1, 2, 3, 4, 5];
arr2.length = 3; // [1, 2, 3]
arr2.length = 0; // []
로그인 후 복사

배열 순회

배열을 순회하려면 for in 루프를 사용하여 배열을 순회하지 마세요. 왜냐하면 for in은 프로토타입 체인의 모든 속성을 순회하지만 그렇게 많이 필요하지는 않기 때문입니다. for 루프를 사용하는 것이 좋습니다.

var arr1 = [1, 2, 3];
arr1.test = 9;

//for in 方式
for(var prop in arr1){
  cosole.log(prop, arr1[prop]);
}
// 输出如下
// 0 1
// 1 2
// 2 3
// test 9

//for循环方式
for(var i = 0, len = arr1.length; i < len; i++){
  console.log(arr1[i]);
}
//输出如下
// 1
// 2
// 3

로그인 후 복사

for in 메소드에는 hasOwnProperty 함수를 사용하여 제거할 수 있는 추가 테스트 값이 있지만 이는 for 루프 메소드보다 훨씬 느립니다.
배열 길이를 캐싱하는 것은 필수 단계이며 각 액세스마다 성능 오버헤드가 있습니다(최신 브라우저는 이 측면을 최적화했습니다).

요약

Array에 대한 기본 지식에 대한 간략한 소개입니다. 이쯤 되면 Array에 대해 좀 더 포괄적으로 이해할 수 있습니다. 다음 기사에서는 Array 메서드를 소개합니다.

Javascript에는 이해하기 어려운 부분이 많지만, 오랜 기간 공부하면서 천천히 사랑에 빠졌습니다(지금은 사랑할 여자가 없기 때문입니다).

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