>웹 프론트엔드 >JS 튜토리얼 >JavaScript_JavaScript의 배열 관련 지식에 대한 자세한 설명

JavaScript_JavaScript의 배열 관련 지식에 대한 자세한 설명

WBOY
WBOY원래의
2016-05-16 15:48:251392검색

배열 생성

js에서 배열 선언은 다음과 같은 방법으로 수행할 수 있습니다.

var arr = [];  // 简写模式
var arr = new Array(); // new一个array对象
var arr = new Array(arrayLength); // new一个确定长度的array对象

주의해야 할 점:

  • 세 번째 방법은 배열의 길이를 선언하지만 실제 배열의 길이는 가변적입니다. 즉, 길이를 5로 지정하더라도 지정된 길이를 벗어나도 요소가 저장될 수 있으며 그에 따라 배열의 길이도 변경됩니다.
  • 또한 한 가지 분명히 짚고 넘어가야 할 점은
  • js는 약한 유형의 언어입니다. 즉, 배열의 요소 유형이 동일할 필요는 없습니다.

배열에서 일관되지 않은 요소 유형의 예를 들어보세요.

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0; i < arr.length; i ++) {
  console.log(arr[i]);
}

배열 요소 액세스

자바스크립트 배열의 인덱스 값도 0부터 시작합니다. 배열 이름 첨자를 통해 배열 요소에 직접 액세스할 수 있습니다.

샘플 코드는 다음과 같습니다.

var arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr[1]);

또한, 배열 순회를 위해 연속 for 루프 모드를 사용하는 것이 권장되며, for-in은 권장되지 않습니다. 구체적인 이유로 JavaScript에서 배열을 통한 루프

를 참조하세요.

배열 순회를 위한 샘플 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

참고:

위 코드에서 작은 최적화는 배열의 크기를 미리 획득하여 탐색할 때마다 배열 크기를 쿼리할 필요가 없도록 하는 것입니다. 매우 큰 어레이의 경우 특정 효율성을 향상시킬 수 있습니다.

배열 요소 추가

배열에 새 요소를 추가하는 방법에는 push, unshift, splice의 세 가지 방법이 있습니다. 아래에서는 이 세 가지 방법을 각각 소개하겠습니다.
푸시

push 메소드는 배열 끝에 요소를 추가합니다. 샘플 코드는 다음과 같습니다.

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}


실행 결과는 다음과 같습니다.

1
2
3

변속 해제

unshift 메소드는 배열의 헤드에 요소를 추가합니다. 샘플 코드는 다음과 같습니다.

var arr = [];
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}


실행 결과는 다음과 같습니다.

3
2
1

접속

splice 메소드는 배열의 지정된 위치에 새 요소를 삽입하고 이전 요소는 자동으로 순차적으로 뒤로 이동됩니다. splice의 함수 프로토타입은 다음과 같습니다.

array.splice(index, howMany, element...)

howMany는 삭제할 요소 수를 나타냅니다. 단지 요소를 추가하는 경우에는 이때 HowMany를 0으로 설정해야 합니다.

샘플 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4];

arr.splice(1, 0, 7, 8, 9);

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}


실행 결과는 다음과 같습니다.

1
7
8
9
2
3
4


배열 요소 삭제

배열에 요소를 추가하는 것과 유사하게 배열의 요소를 삭제하는 방법에는 팝, 시프트, 스플라이스의 세 가지가 있습니다. 다음으로 이 세 가지 기능의 사용법을 각각 설명하겠습니다.

pop 메소드는 배열의 마지막 요소를 제거합니다. 푸시와 팝의 조합으로 스택과 유사한 배열(선입, 후출) 기능을 구현할 수 있습니다. 샘플 코드는 다음과 같습니다.

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

while (arr.length != 0) {
  var ele = arr.pop();
  console.log(ele);
}


교대

shift 메서드는 첫 번째 요소를 제거하고 배열의 요소는 자동으로 앞으로 이동합니다. (이 방법은 확실히 효율성 문제에 해당하며 시간 복잡도는 O(n)입니다.)

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

while (arr.length != 0) {
  var ele = arr.shift();
  traverseArray(arr);
}

결과는 누구나 스스로 판단할 수 있습니다.
접속

배열 요소를 추가할 때 splice에 대해 이야기했습니다. 이 함수 프로토타입에는 인덱스부터 삭제되는 요소 수를 나타내는 HowMany 매개변수가 있습니다.
샘플 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4, 5, 6, 7];

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

arr.splice(1, 3);
traverseArray(arr);

실행 결과는 다음과 같습니다.

1
5
7


배열 복사 및 가로채기

예를 들어 코드는 다음과 같습니다.

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;

이때 arr2는 arr1 배열의 주소만 힙 메모리에 저장하고, 배열 생성을 위해 힙 메모리에 메모리를 재적용하지 않습니다. 따라서 arr2를 수정하면 동시에 arr1에도 영향을 미칩니다. 그렇다면 배열을 복사해야 한다면 어떻게 될까요? 이는 학습해야 할 슬라이스 및 연결 기능으로 이어집니다.
슬라이스

여기의 슬라이스는 Python 구문의 슬라이스와 동일하며 둘 다 배열 슬라이스를 반환합니다. 슬라이스 함수 프로토타입은 다음과 같습니다.

array.slice(begin, end)

시작부터 끝까지 모든 요소를 ​​반환합니다. 시작은 포함되지만 끝은 포함되지 않습니다.
기본 시작은 기본적으로 0부터 시작됩니다. 기본 끝은 배열의 끝입니다.

따라서 다음 코드를 통해 배열을 복사할 수 있습니다.

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice();
arr2[2] = 10000
function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

traverseArray(arr1);
traverseArray(arr2);


실행 결과는 다음과 같습니다.

1
2
3
4
1
2
10000
4


연결

concat 메소드는 새로운 배열을 생성한 후 이를 호출하는 객체(이것이 가리키는 객체)에 요소를 넣고 모든 매개변수의 배열 유형 매개변수와 비배열 유형 매개변수 자체의 요소를 넣습니다. 여기에 새 배열 순서대로 넣고 배열을 반환합니다.

샘플 코드는 다음과 같습니다.

var alpha = ["a", "b", "c"];
var number = [1, 2, 3]

// 新数组为["a", "b", "c", 1, 2, 3]
var complex = alpha.concat(number);

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