JavaScript 배열(Array)에 대한 자세한 설명_기본지식
- WBOY원래의
- 2016-05-16 16:06:291275검색
ECMAScript 배열은 다른 언어의 배열과 상당히 다릅니다. ECMAScript의 배열도 순서가 지정된 목록이지만 배열의 각 항목은 모든 유형의 데이터를 보유할 수 있습니다. ECMAScript 배열의 크기는 동적으로 조정될 수 있습니다.
배열을 만드는 두 가지 기본 방법이 있습니다. 첫 번째는 아래와 같이 Array 생성자를 사용하는 것입니다.
var colors = new Array();
배열에 저장할 항목 수를 알고 있는 경우 매개변수를 생성자에 전달할 수도 있으며, 매개변수는 다음과 같이 자동으로 길이 속성의 값이 됩니다.
var colors = new Array(20);
다음 코드와 같이 배열에 포함되어야 하는 항목을 Array 생성자에 전달할 수도 있습니다.
var colors = new Array("red","blue");
또한 아래와 같이 Array 생성자를 사용할 때 new 연산자를 생략할 수도 있습니다.
var colors = Array(20);
배열을 만드는 두 번째 방법은 배열 리터럴 표기법을 사용하는 것입니다. 배열 리터럴은 다음과 같이 쉼표로 구분된 배열 항목을 포함하는 한 쌍의 대괄호로 표시됩니다.
var color = ["빨간색","파란색"];
변수 이름 = [];
var 값 = [1,2,]//IE8과 이전 3개 항목, 나머지 2개 항목은 사용을 권장하지 않습니다
객체와 마찬가지로 Array의 생성자는 숫자 리터럴 표현을 사용할 때 호출되지 않습니다.
배열의 값을 읽어와 설정할 때 다음과 같이 대괄호를 사용하여 해당 값의 0부터 시작하는 숫자 인덱스를 제공합니다.
var colors = ["red","blue"]; //배열 정의
경고(색상[0]); //빨간색
colors[1] = "black" //항목 2 수정
colors[2] = "brown" //세 번째 추가
배열의 항목 수는 아래와 같이 항상 0 이상의 숫자를 반환하는 length 속성에 저장됩니다.
var colors = ["red","blue"]; //배열 정의
var 이름=[];
경고(colors.length); //3
경고(이름.길이) //0
배열의 길이 값이 읽기 전용이 아니라는 점은 주목할 가치가 있습니다. 따라서 이 값을 설정하면 다음과 같이 배열 끝에서 항목을 이동하거나 배열에 항목을 추가할 수 있습니다.
var colors = ["빨간색","파란색"];
colors.length = 1;
경고(색상[1]); //정의되지 않음
길이 속성을 사용하여 배열 끝에 데이터를 쉽게 추가할 수도 있습니다.
var colors = ["빨간색","파란색"];
colors[colors.length] = "black"; //위치 2에
추가 colors[colors.length] = "brown"; //3번째 위치에
추가
1. 감지 어레이
웹페이지 또는 전역 범위의 경우 다음과 같이 instanceof 연산자를 사용할 수 있습니다.
if(배열의 인스턴스 값){
//작업 수행
}
instanceof 연산자의 한계는 전역 범위입니다. 웹 페이지에 여러 프레임이 포함되어 있으면 전역 실행 환경이 두 개 이상 있습니다. 이 문제를 해결하기 위해 ECMAScript5에서는 다음과 같이 사용되는 Array.isArray() 메서드를 추가했습니다.
if(Array.isArray(값)){
//작업 수행
}
2. 변환 방법
배열의 toString() 메서드를 호출하면 배열에 있는 각 값의 문자열 형식을 연결한 쉼표로 구분된 문자열이 반환됩니다. 그리고 valueOf()를 호출하면 여전히 배열이 반환됩니다. 아래와 같이:
var 색상 = ['빨간색', '파란색', '녹색'];
경고(colors.toString()); //빨간색,파란색,녹색
경고(colors.valueOf()); //빨간색,파란색,녹색
경고(색상) //빨간색, 파란색, 녹색
배열로 상속된 toLocalString(), tiString() 및 valueOf() 메서드는 모두 기본적으로 쉼표로 구분된 문자열 형식으로 배열 항목을 반환합니다. 그리고 Join() 메서드를 사용하는 경우 다양한 구분 기호를 사용하여 이 문자열을 작성할 수 있습니다. Join() 메서드는 아래와 같이 구분 기호로 사용되는 문자열인 하나의 매개 변수만 허용합니다.
var 색상 = ['빨간색', '파란색', '녹색'];
Alert(colors.join(',')); //빨간색,파란색,녹색
Alert(colors.join('|')); //빨간색|파란색|녹색
배열의 항목 값이 null이거나 정의되지 않은 경우 값은 Join(), toLocalString(), tiString() 및 valueOf() 메서드의 반환 결과에서 빈 문자열로 표시됩니다.
3. 스택 방식
Javascript는 스택과 같은 동작을 달성하기 위해 특별히 배열에 대한 push() 및 pop() 작업을 제공합니다.
push() 메서드는 원하는 수의 매개변수를 수신하고 이를 배열 끝에 하나씩 추가하고 수정된 배열의 길이를 반환할 수 있습니다. pop() 메서드는 배열 끝의 마지막 항목을 오버플로하고 배열 길이를 줄인 다음 제거된 항목을 반환합니다.
var colors = new Array(); //배열 정의
var count = colors.push("red", "blue"); //두 항목 푸시
경고(개수); //2
count = colors.push("black"); //다른 항목 푸시
경고(개수); //3
var item = colors.pop(); //마지막 항목 팝
경고(항목); //"검은색"
경고(colors.length); //2
4. 대기열 방식
스택 데이터 구조의 액세스 규칙은 LIFO(후입선출)이고, 큐의 액세스 규칙은 FIFO(선입선출)입니다. 대기열은 목록 끝에 항목을 추가하고 맨 앞에 있는 항목을 제거합니다.
shift() 메서드는 배열의 첫 번째 항목을 제거하고 배열의 길이-1인 항목을 반환합니다. push() 및 Shift() 메서드를 결합하면 아래와 같이 배열을 대기열처럼 사용할 수 있습니다.
var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
경고(개수);
var item = colors.shift(); //첫 번째 항목 가져오기
경고(항목); //"빨간색"
경고(color.length); //2
ECMAScript는 배열에 대한 unshift() 메서드도 제공합니다. unshift() 및 Shift() 메서드는 반대 작업을 수행합니다. 즉, 배열 앞에 임의 개수의 항목을 추가하고 새 배열의 길이를 반환합니다. 따라서 unshift() 및 Shift() 메서드를 함께 사용하면 다음과 같이 배열 앞에 새 항목을 추가하고 배열 끝에서 항목을 제거하여 반대 방향의 대기열을 시뮬레이션할 수 있습니다.
var colors = new Array();
var count = colors.push("red", "green");
경고(개수); //2
count = colors.unshift("black"); //다른 항목 푸시
경고(개수); //3
var item = colors.pop(); //마지막 항목 가져오기
경고(항목) //녹색
경고(colors.length) //2
5. 재정렬 방법
배열에는 직접 재정렬하는 데 사용할 수 있는 두 가지 메서드(reverse() 및 sort())가 이미 있습니다. reverse() 메소드는 배열 항목의 순서를 반대로 바꿉니다.
var 값 = [2, 1, 3, 4, 5];
value.reverse();
경고(값); //5,4,3,2,1
기본적으로 sort() 메서드는 배열 항목을 오름차순으로 정렬하고, 각 항목의 toString() 메서드를 호출하고 문자열을 비교하여 정렬 방법을 결정합니다. 배열의 각 항목이 숫자 값인 경우에도 sort() 메서드는 문자열을 비교합니다.
var 값 = [12, 11, 3, 4, 5];
value.sort();
경고(값); //12,11,3,4,5
sort() 메소드에 매개변수로 비교 함수를 전달할 수 있습니다. 다음과 같습니다:
함수 비교(값1, 값2) {
If (값1 반품 -1
} else if (값1 > 값2) {
1을 반환
} 그 밖의 {
0을 반환
}
}
var 값 = [0, 1, 5, 10, 15];
value.sort(비교);
경고(값); //0,1,5,10,15
6. 운영방법
ECMAScript는 배열 작업을 위한 다양한 방법을 제공합니다. 그 중 concat() 메소드는 현재 배열의 모든 항목을 기반으로 새로운 배열을 생성할 수 있습니다.
var colors = ["빨간색", "녹색", "파란색"];
var colors2 = colors.concat("노란색", ["검은색", "갈색"]);
경고(색상); //빨간색,녹색,파란색
경고(색상2); //빨간색,녹색,파란색,노란색,검은색,갈색
Slice() 메서드는 현재 배열의 하나 이상의 항목을 기반으로 새 배열을 생성할 수 있으며, 반환할 항목의 시작 위치와 끝 위치인 하나 또는 두 개의 매개 변수를 받을 수 있습니다. 인수가 하나인 경우 인수로 지정된 위치부터 현재 배열 끝까지의 모든 항목을 반환합니다. 두 개의 매개변수는 지정된 위치에서 시작하는 모든 항목을 반환합니다(끝 위치에 있는 항목은 제외). 슬립() 메서드는 원래 배열에 영향을 주지 않습니다.
var colors=["빨간색","녹색","파란색","검은색","갈색"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
경고(색상2); //녹색,파란색,검은색,갈색
경고(색상3); //녹색,파란색,검은색
Slice() 메소드 삭제: 항목 수에 관계없이 삭제할 수 있습니다. 삭제할 첫 번째 항목의 위치와 삭제할 항목 수라는 2개의 매개변수만 지정하면 됩니다.
Slice() 메소드 삽입: 시작 위치, 0(삭제할 항목 수) 및 삽입할 항목의 3가지 매개변수만 제공하여 지정된 위치에 원하는 수의 항목을 삽입할 수 있습니다.
Slipe() 메소드 대체: 지정된 위치에 원하는 수의 항목을 삽입하고 동시에 원하는 수의 항목을 삭제할 수 있습니다. 시작 위치, 삭제할 항목 수 및 임의의 수라는 3개의 매개변수만 지정하면 됩니다. 삽입할 항목의 수입니다.
var colors = ["빨간색", "녹색", "파란색"];
//삭제
var Removal = colors.slice(0, 1); //항목 1 제거
var colors3 = colors.slice(1, 4);
경고(색상); //녹색,파란색
경고(제거됨); //빨간색
//삽입
제거 = colors.slice(1, 0, "yellow", "orange"); //위치 1부터
삽입 경고(색상); //녹색, 노란색, 주황색, 파란색
경고(제거됨); //빈 배열
//바꾸기
제거 = colors.slice(1, 1,"red","purple"); //위치 1부터
삽입 경고(색상); //녹색,"빨간색","보라색",주황색,파란색
경고(제거됨); //"노란색"
7. 포지션 방법
ECMAScript5는 배열에 대해 indexOf() 및 lastIndexOf()라는 두 가지 위치 메서드를 제공합니다. 두 메서드 모두 찾을 항목과 검색을 시작할 위치를 나타내는 선택적 인덱스라는 두 가지 매개 변수를 받습니다. indexOf() 메서드는 배열의 처음부터 순차적으로 검색하고, lastIndexOf() 메서드는 배열의 끝에서부터 앞으로 검색합니다.
두 메서드 모두 배열에서 찾을 항목의 위치를 반환하고, 찾을 수 없으면 -1을 반환합니다.
var 숫자 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
경고(숫자.indexOf(4)) //3
경고(숫자.lastIndexOf(4)) //5
경고(숫자.indexOf(4, 4)) //5
경고(숫자.lastIndexOf(4, 4)) //3
8. 반복 방법
ECMAScript5는 배열에 대한 5가지 반복 방법을 정의합니다. 각 메소드는 두 개의 매개변수를 허용합니다. 첫 번째는 반복할 함수이고 두 번째는 함수의 범위 개체입니다[선택 사항].
반복 함수는 세 개의 매개변수를 받습니다. 첫 번째는 반복할 배열의 요소 값이고, 두 번째는 반복할 배열의 요소 위치이며, 세 번째는 반복된 배열 자체입니다.
1. Every()는 배열의 각 항목에 대해 지정된 함수를 실행합니다. 함수가 각 항목에 대해 true를 반환하면 true를 반환합니다.
2. filter()는 배열의 각 항목에 대해 지정된 함수를 실행하고 함수가 true를 반환하는 항목의 배열을 반환합니다.
3. forEach()는 배열의 각 항목에 대해 지정된 함수를 실행합니다. 이 메서드는 반환 값이 없습니다. 4. map()은 배열의 각 항목에 대해 지정된 함수를 실행하고 Array
5. some()은 배열의 각 항목에 대해 지정된 함수를 실행합니다. 함수가 항목에 대해 true를 반환하면 true를 반환합니다.
이러한 반복 방법이 지원되는 브라우저는 IE9, Firefox2, Safari3, Opera 9.5, chrome
입니다.
이들 메소드 중 가장 유사한 메소드는 Every()와 some()이며, 둘 다 배열의 항목이 특정 조건을 충족하는지 쿼리하는 데 사용됩니다. Every()의 경우 전달된 함수는 이 메서드가 true를 반환하기 전에 각 항목에 대해 true를 반환해야 하며, 그렇지 않으면 false를 반환합니다. some() 메서드는 전달된 함수가 배열의 특정 항목에 대해 true를 반환하는 한 true를 반환합니다.
var num = [1,2,3,4,5,6,7,8,9];
var EveryResult = num.every(function(item, index, array) {
If(항목 > 2) {
true를 반환합니다.
}
});
경고(everyResult); //false
var someResult = num.some(function(item) {
If(항목 > 2) {
true를 반환합니다.
}
});
경고(someResult); //참
Filter()는 지정된 함수를 사용하여 특정 항목이 반환된 배열에 포함되어 있는지 확인합니다.
var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
If(항목 > 2) {
true를 반환합니다.
}
});
경고(필터결과); //[3,4,5,4,3]
map()도 배열을 반환하며, 이 배열의 각 항목은 원래 배열의 해당 항목에 전달된 함수를 실행한 결과입니다.
var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
If(항목 > 2) {
true를 반환합니다.
}
}); //[2,3,6,8,10,8,6,4,2]
forEach()는 배열의 각 항목에 전달된 함수를 실행합니다. 이 메서드에는 반환 값이 없으며 기본적으로 for 루프를 사용하여 배열을 반복하는 것과 동일합니다.
var num = [1,2,3,4,5,4,3,2,1];
num.forEach(함수(항목) {
//작업 수행
});
9. 병합 방법
ECMAScript5에는 두 가지 새로운 메소드인 ReduceRight() 및 Reduce()가 추가되었습니다. 두 메서드 모두 두 개의 매개 변수를 허용합니다. 첫 번째는 배열을 반복하는 데 사용되는 함수입니다. 이 함수에는 이전 값, 현재 값, 항목 인덱스 및 배열 개체의 네 가지 매개 변수가 있습니다. 그러나 이 함수의 모든 값은 자동으로 첫 번째 매개변수로 다음 항목에 전달됩니다. 두 번째는 첫 번째 함수에서 첫 번째 매개변수의 초기값으로 사용됩니다.
var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
이전 현재를 반환합니다.
});
경고(합계);//15