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

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

WBOY
풀어 주다: 2016-05-16 15:48:25
원래의
1391명이 탐색했습니다.

배열 생성

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);

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