JavaScript Array(배열) 객체

JavaScript의 배열은 여러 가지 값을 단일 변수에 저장하는 데 사용되는 전역 객체입니다.

배열은 문자열, 숫자, 객체, 함수, 다른 배열 등 모든 데이터 타입을 포함할 수 있습니다.

JavaScript 코드에서 도시 이름을 저장할 수 있다고 가정해 보겠습니다. 도시 이름을 하나씩 변수에 저장하는 것은 다음과 같이 보일 수 있습니다:

　　let city1　= "New Delhi";
　　let city2　= "Mumbai";
　　let city3　= "Jaipur";

하지만, 하나의 나라의 도시 이름을 변수에 저장해야 한다면, 이는 단순히 세 가지가 아니라, 일백 개일 수 있습니다.

이렇게 많은 변수를 사용하고 모든 변수를 추적하는 것은 매우 어려운 작업입니다。

배열은 여러 가지 값을 또는 그룹을 단일 변수에 저장하는 순서 있는 구조를 해결합니다。

배열 생성

JavaScript에서 배열을 생성하는 두 가지 방법이 있습니다：

• 문자열-암시적 생성를 사용합니다. 이는 괄호 []를 사용합니다：

• 간결한 방식-직접 구현new 키워드를 사용하여

초기화된배열 상수fruits 생성배열[]：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

선언은 여러 행에 걸쳐 가능합니다：

let fruits = [
　　"Apple",
　　"Mango",
　　"Banana",
　　"Orange"
];

이제 이렇게 합니다배열 생성자생성된 데이터는 초기화된 new Array()와 동일합니다：

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

이 두 가지 방법 모두 배열을 생성합니다. 그러나문자열-암시적 생성([]) 메서드가 더 일반적이고 선호됩니다. 왜냐하면new Array()생성자 메서드는 불일치하고 예기치 않은 결과가 발생할 수 있습니다.

배열 인덱스

배열에는 이름이 없습니다/값에 대한 튜플이 아니라, 0부터 시작하는 정수를 사용하여 요소에 대한 인덱스를 설정합니다.

이것은 fruits에 할당된 예제 배열입니다：

　　let fruits = ["Apple", "Mango", "Banana", "Orange"];

이것은 fruits 배열의 각 요소에 대한 인덱스 방식의 분석입니다：

배열의 첫 번째 요소는 "Apple"이며, 인덱스 값은 0입니다。

마지막 요소는 "Orange"이며, 인덱스 값은3。

배열의 요소에 접근합니다

좌측 괄호[] 안의 요소의 인덱스 번호를 사용하여 JavaScript 배열의 요소에 접근할 수 있습니다。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0];//　return "Apple"
fruits[2];//　return "Banana"

JavaScript 배열의 인덱스는 0입니다: 배열의 첫 번째 요소의 인덱스는 0이고, 두 번째 요소의 인덱스는1그런 다음 이렇게 합니다。

배열에 존재하지 않는 요소에 접근하려고 시도하면 undefined이 반환됩니다。

fruits[7];//　return undefined

배열 이름을 사용하여 전체 배열에 접근할 수 있습니다。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

배열 length 속성

이를 사용하여length속성을 사용하여 배열에 몇 개의 요소가 있는지 확인할 수 있습니다。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;　　　//　return　4

마지막 요소의 인덱스는 배열의 length 속성 값에서1。

이 예제에서는 length 속성을 사용하여 마지막 요소의 값을 표시합니다：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length　-　1;
fruits[lastIndex];

배열에 요소를 추가합니다

fruits 변수에, 0에서3의 인덱스. 새 요소를 배열에 추가하려면 다음 인덱스에 값을 할당할 수 있습니다.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4]　=　"Guava";

　 　 요소를 추가했을 때 인덱스를 건너뛰게 되면, 빈 문자열('') 값의 요소가 배열에 생성됩니다.

fruits[6]　=　"Strawberry";

사용하여push()메서드는 이러한 문제를 방지할 수 있으며, 이 메서드는 배열의 마지막에 요소를 추가합니다.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

도 사용할 수 있습니다length속성을 사용하여 새 요소를 배열에 추가할 수 있습니다.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length]　=　"Beer";

배열 요소를 수정합니다

할당 연산자를 사용하여 새 값을 할당하면 배열 내의 어떤 값도 덮어 씁니다.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0]　=　"Monkey";

배열은 일반적으로 유사한 데이터 유형의 목록을 결합하는 데 사용되지만, 기술적으로는 어떤 값이나 값의 혼합을 포함할 수 있습니다.

let　myArray　=　[5,　22,　"Arrow",　"Bone",　true,　new　Date()];

배열을 탐색합니다

우리는 다음과 같이 사용할 수 있습니다for와length속성을 사용하여 전체 배열을 탐색할 수 있습니다.

이 예제에서는 과일 배열을 생성하고, 각 인덱스 번호와 각 값이 문서에 출력되도록 합니다:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　txt　=　"";
//배열의 길이를 탐색합니다
for　(let　i　=　0;　i　<　fruits.length;　i++; col
txt　+=　i　+　"　=　"　+　fruits[i]　+　"<br>";
}

우리는 다음과 같이도 사용할 수 있습니다Array.forEach()메서드:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　result　=　document.getElementById("result");
fruits.forEach(function(element)　{
result.innerHTML　+=　element　+　"<br>";
});

우리는 다음과 같이 사용할 수도 있습니다for...of루프를 사용하여 JavaScript 배열을 탐색하는 것은 JavaScript의 새로운 기능입니다:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　result　=　document.getElementById("result");
for　(let　x　of　fruits)　{
result.innerHTML　+=　x;
}

for...of루프는 배열 요소의 인덱스 번호를 검색하지 않지만, 일반적으로 더 간단하고 간결한 배열 탐색 방법입니다.

다차원 배열

다차원 배열은 하나나 여러 개의 배열을 포함한 배열입니다.

　　let points = [
　　　[35,　28,　29,　31],
　　　[33,　24,　25,　29]
　　];

JavaScript는 깊이가2、3、4、5또는 더 많은 수준의 다차원 배열. 그러나 많은 사람들에게는 세 수준 이상의 배열을 관리하는 것이 어렵습니다.

배열의 차원은 선택할 요소에 필요한 인덱스 수를 나타냅니다.

• 이차원 배열을 선택하려면 두 개의 인덱스가 필요합니다.

• 삼차원 배열을 선택하려면 세 개의 인덱스가 필요합니다.

이차원 배열은 테이블로 볼 수 있으며, 첫 번째 [ ]는 행이고, 두 번째 [ ]는 열입니다.

points[0][1];　　　//　return　28
points[1][0];　　　//　return　33

이 예제에서는, 두차원 배열을 생성하고 각 인덱스 번호와 각 값을 문서에 출력합니다:

let points = [35,　28,　29,　31],33,　24,　25,　29];
let row;
let col;
; row = 0;　2; row++; col
　　　; col <　4; col = 0;++; col
　　) {
　　　}
}

물론, document.write(row, col, points[row][col]);를 사용할 수도 있습니다.length행과 열의 크기를 가져오는 속성:

let points = [
　　　[10,　12,　14,　16,　18],
　　　[20,　22,　24,　26],
　　　[30,　32,　34],
　　　[32,　34]
];
points.length;//　return　4　(총 행)
points[0].length;//　return　5
points[1].length;//　return　4
points[2].length;//　return　3
points[3].length;//　return　2

대부분의 경우2차원 배열이면 충분합니다. 그러나 필요한 경우3차원 배열

JavaScript 배열은 객체입니다

JavaScript에서 배열은 특별한 객체입니다.

typeof JavaScript의 연산자는 배열을 "Object"로 반환합니다.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;　　　//　return "object";

new Array()의 사용을 피하도록 하세요.

new Array() 생성자를 사용하지 않아야 합니다.

반대로, 가능한 한 은답 생성 방식을 사용하여 배열을 생성해야 합니다. 즉, 직접 대괄호 [] 방식을 사용하는 것이 더 일반적이고 인기가 많습니다.

다음 두 개의 다른 문장을 통해 scores라는 이름의 새로운 빈 배열을 생성하려면

　　let scores = new Array();　　//　이 방법을 권장하지 않습니다
　　let scores = [];　　　　　//　추천 방법

다음 두 개의 다른 문장을 통해 배열을 생성하려면5개의 숫자를 포함한 새로운 배열:

let scores = new Array(2,　5,　10,　28,　10);　//　이 방법을 권장하지 않습니다
let scores = [2,　5,　10,　28,　10];　　//　추천 방법

new Array() 생성자는 불일치할 수 있으며, 예상치 못한 결과를 초래할 수 있습니다:

let scores = new Array(10,　25);　　//　두 개의 요소를 포함한 배열을 생성하려면10와25) 배열
let scores = new Array(10);　　//　콘텐츠를 포함한 배열을 생성하려면10undefined 값의 배열

변수가 배열인지�断하기 - Array.isArray()

그러면 알겠지만, JavaScript typeof 연산자는 배열을 "Object"로 반환합니다.

일반적인 문제는:변수가 배열인지 알아보는 방법은 무엇인가요?

이 문제를 해결하기 위해 ECMAScript 5새로운 메서드를 정의했습니다Array.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

객체가 주어진 생성자로 생성된 경우 instanceof 연산자를 사용하여 true를 반환할 수 있습니다:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
　　　//　실행할 문장
}

함수에 배열 전달

아래의 예제에서는 함수에 배열을 전달하겠습니다:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
　　for (let elem of arg) {
　　document.write(elem, "<br>");
　　}
}

함수에서 배열 반환

아래의 예제에서는 함수에서 배열을 반환하겠습니다:

function myFunc() {
　　let fruits = ["Apple", "Mango", "Banana", "Orange"];
　　return fruits;
}
let myArray = myFunc();
document.write(myArray);