=================================
=================================
=================================
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
JavaScript Array 객체는 리스트와 비슷한 고수준 객체인 배열을 생성하는 데 사용되는 전역 객체입니다.
배열 만들기
var fruits = ['사과', '바나나']; console.log(fruits.length); // 2인덱스로 배열의 항목에 접근하기
var first = fruits[0]; // 사과 var last = fruits[fruits.length - 1]; // 바나나배열의 항목들을 순환하며 처리하기
fruits.forEach(function (item, index, array) { console.log(item, index); }); // 사과 0 // 바나나 1배열 끝에 항목 추가하기
var newLength = fruits.push('오렌지'); // ["사과", "바나나", "오렌지"]배열 끝에서부터 항목 제거하기
var last = fruits.pop(); // 끝에있던 '오렌지'를 제거 // ["사과", "바나나"];배열 앞에서부터 항목 제거하기
var first = fruits.shift(); // 제일 앞의 '사과'를 제거 // ["바나나"];배열 앞에 항목 추가하기
var newLength = fruits.unshift('딸기') // 앞에 추가 // ["딸기", "바나나"];배열 안 항목의 인덱스 찾기
fruits.push('망고'); // ["딸기", "바나나", "망고"] var pos = fruits.indexOf("바나나"); // 1인덱스 위치에 있는 항목 제거하기
var removedItem = fruits.splice(pos, 1); // 항목을 제거하는 방법 // ["딸기", "망고"]인덱스 위치에서부터 여러개의 항목 제거하기
var vegetables = ['양배추', '순무', '무', '당근']; console.log(vegetables); // ["양배추", "순무", "무", "당근"] var pos = 1, n = 2; var removedItems = vegetables.splice(pos, n); // 배열에서 아이템을 제거하는 방법 // pos로 지시된 인덱스값의 위치에서부터 n개의 아이템이 제거된고, // 제거된 아이템들의 배열이 결과값으로 return된다 console.log(vegetables); // ["양배추", "당근"] (원래의 배열 vegetables의 값이 변한다) console.log(removedItems); // ["순무", "무"]
배열 복사하기
var shallowCopy = fruits.slice(); // 사본을 만드는 방법 // ["딸기"]구문
[element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength)elementN- JavaScript 배열이 주어진 요소들로 초기화됩니다. 단, 하나의 인수만
Array생성자에 전달되었고 그것이 수일 때는 예외입니다. (아래를 보십시오.) 이 특별한 경우는 괄호 구문으로 만들어진 배열 값이 아닌Array생성자에 의해 만들어진 JavaScript 배열에만 적용됨에 유의하십시오. arrayLength- 만약 Array 생성자에 전달된 인수가 0과 232-1 사이의 정수(끝값 포함) 하나뿐이라면, 생성자는 그 정수만큼의 길이를 가진 새 JavaScript 배열을 반환합니다. 만약 인수가 이 범위 밖의 정수라면,
RangeError예외가 발생합니다.
설명
배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서는 배열의 길이와 요소들의 타입은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 자바스크립트 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리합니다. 하지만 이 기능이 당신의 목적에 맞지 않는다면, 타입을 가진 배열(typed array)을 사용하는 것을 고려해야 할 지도 모릅니다.
몇몇 사람들은 배열을 연관 배열로 사용해서는 안 된다고 생각합니다. 그 대신에 객체를 사용할 수 있지만, 그것은 그 나름대로 주의가 필요합니다. Lightweight JavaScript dictionaries with arbitrary keys 포스트에 그 예시가 있습니다.
배열 요소에 접근하기
JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열의 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같습니다.
var arr = ['첫 번재 요소입니다', '두 번째 요소입니다']; console.log(arr[0]); // '첫 번재 요소입니다'를 기록 console.log(arr[1]); // '두 번재 요소입니다'를 기록 console.log(arr[arr.length - 1]); // '두 번재 요소입니다'를 기록toString이 속성인 것과 마찬가지로 배열의 요소도 속성입니다. 하지만 아래의 예시같이 배열 요소에 접근하려 하면, 속성 이름이 잘못되었기 때문에 구문 오류가 발생합니다.
console.log(arr.0); // 구문 오류JavaScript 배열과 프로퍼티에 대해서도 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 점 표현으로 참조할 수 없고 대괄호 표현을 사용해서만 참조할 수 있습니다. 만약 '3d'라는 속성을 가진 객체가 있다면, 그 속성은 대괄호 표현으로만 참조할 수 있습니다. 예를 들면,
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; console.log(years.0); // 구문 오류 console.log(years[0]); // 정상 작동renderer.3d.setTexture(model, 'character.png'); // 구문 오류 renderer['3d'].setTexture(model, 'character.png'); // 정상 작동3d 예시에서 '3d'가 따옴표로 둘러싸여야 함에 유의하십시오. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수 있지만(years[2] 대신에 years['2']처럼) 꼭 필요하지는 않습니다. years[2]의 2는 JavaScript 엔진이 toString 변환을 사용해 강제로 문자열로 변환합니다. '2'와 '02'가 years 객체의 서로 다른 두 개의 칸을 가리켜서 다음 예시가 true일 수 있기 때문입니다.
console.log(years['2'] != years['02']);마찬가지로, 객체가 예약어를 속성으로 갖게 되었을 때(!) 그 속성은 대괄호 표현의 문자열 값으로만 접근할 수 있습니다(하지만 Firefox 40.0a2까지는 점 표현으로 접근할 수 있습니다).
var promise = { 'var' : 'text', 'array': [1, 2, 3, 4] }; console.log(promise['array']);length 와 숫자형 속성의 관계
자바스크립트 배열의 length 속성과 숫자형 속성은 연결되어 있습니다. 몇몇 배열 내장 메소드들(예: join, slice, indexOf, 등등.)은 호출되었을 때 배열의 length 속성의 값을 참조합니다. 다른 메소드들(예: push, splice, 등등.) 또한 배열의 length 속성을 업데이트을 유발합니다.
var fruits = []; fruits.push('banana', 'apple', 'peach'); console.log(fruits.length); // 3자바스크립트 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계(bounds)를 넘어간다면, 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다:
fruits[5] = 'mango'; console.log(fruits[5]); // 'mango' console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 6length 증가.
fruits.length = 10; console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 10하지만, length 속성을 감소시키면 요소(element)를 지웁니다.
fruits.length = 2; console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2이것은 Array.length 페이지에 더 설명되어있습니다.
매치 결과를 이용한 배열 생성
정규표현식과 문자열 사이의 매치 결과로 자바스크립트 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 RegExp.exec, String.match, String.replace로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.
// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다. // 일치한 b와 다음 d를 기억하십시오. // 대소문자 구분은 무시됩니다. var myRe = /d(b+)(d)/i; var myArray = myRe.exec('cdbBdbsbz');매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:
| 속성/요소 | 설명 | 예 |
input |
정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다. | cdbBdbsbz |
index |
원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다. | 1 |
[0] |
원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다. | dbBd |
[1], ...[n] |
만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다. | [1]: bB [2]: d |
속성
Array instances, see Properties of Array instances.Array.length- 값이 1인
Array생성자의 length 속성입니다. get Array[@@species]- 파생 객체를 생성하는데 사용되는 생성자 함수입니다.
Array.prototype- 모든 배열 객체에 속성 추가를 할 수 있습니다.
메소드
Array instances, see Methods of Array instances.Array.from()- 유사 배열 또는 반복 가능한 객체로부터 새로운 배열 인스턴스를 생성합니다.
Array.isArray()- 만약 변수가 배열이면 true를 아니면 false를 반환합니다.
Array.observe()- 객체의
Object.observe()와 유사하게 배열에 대한 변경점을 비동기로 관찰합니다. 이것은 발생한 순서대로 변경 스트림을 제공합니다. Array.of()- 전달인자의 개수나 데이터 타입에 관계없이 새 배열 인스턴스를 생성합니다.
배열 인스턴스
모든 배열 인스턴스는 Array.prototype로부터 상속을 받습니다. 배열 생성자의 프로토타입 객체는 모든 배열 인스턴스에 영향을 주도록 수정될 수 있습니다.
속성
Array.prototype.constructor- 객체의 프로토타입을 생성하는 함수를 지정합니다.
Array.prototype.length- 배열에서 요소의 개수를 나타냅니다.
Array.prototype[@@unscopables]with결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.
메서드
변경자 메서드
변경자 메서드는 배열을 수정합니다:
Array.prototype.copyWithin()- 배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
Array.prototype.fill()- 배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.
Array.prototype.pop()- 배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
Array.prototype.push()- 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
Array.prototype.reverse()- 배열의 요소 순서를 반전시킵니다. - 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.
Array.prototype.shift()- 배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.
Array.prototype.sort()- 배열의 요소를 정렬하고 그 배열을 반환합니다.
Array.prototype.splice()- 배열에서 요소를 추가/삭제합니다.
Array.prototype.unshift()- 배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.
접근자 메서드
접근자 메서드는 배열을 수정하지 않고 배열 일부를 반환합니다.
Array.prototype.concat()- 배열과, 인자로 주어진 배열/값을 결합해 새로운 배열을 만들고, 이 새 배열을 반환합니다.
Array.prototype.includes()- 배열에 특정 요소가 포함돼있는지 알아내어 true 또는 false를 적절히 반환합니다.
Array.prototype.indexOf()- 배열에서 지정한 값과 같은 요소의 첫 인덱스를 반환합니다. 없으면 -1을 반환합니다.
Array.prototype.join()- 배열의 모든 요소를 문자열로 변환하여 합칩니다.
Array.prototype.lastIndexOf()- 배열에서 지정한 값과 같은 요소의 마지막 인덱스를 반환합니다. 없으면 -1을 반환합니다.
Array.prototype.slice()- 배열의 일부를 추출한 새 배열을 반환합니다.
Array.prototype.toSource()- 지정한 배열을 나타내는 배열 리터럴을 반환합니다.새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다.
Array.prototype.toString()- 배열과 요소를 반환하는 문자열을 반환합니다.
Object.prototype.toString()메서드를 재정의합니다. Array.prototype.toLocaleString()- 배열과 요소를 나타내는 지역화된 문자열을 반환합니다.
Object.prototype.toLocaleString()메서드를 재정의합니다.
반복 메서드
배열을 처리하는 동안, 각각의 배열요소에 대해 (인자로 주어진) call back 함수를 호출하는 메서드가 몇 개 있습니다. 이러한 메서드들은 메서드의 호출시점에 배열의 길이를 확인한 후, 그 길이까지의 배열요소에 대해서만 call back함수를 수행하며, 콜백 중에 추가된 배열 요소(메서드 호출시점에 확인된 길이보다 더 큰 인덱스값을 갖는 요소들)에 대해서는 call back 함수를 수행하지 않습니다. 만약 메서드의 실행 도중에 배열의 변경(요소의 값 설정 또는 배열요소를 삭제하는 등)이 발생하고, 이런 변경이후에 메서드가 해당 배열 요소에 대해 call back함수를 호출하게 되면 작업 결과에 영향을 줄 수도 있습니다. 이러한 사례들에 있어 메서드들의 구체적인 동작은 잘 정의되어 있지만, 당신의 코드를 읽을 다른 사람들이 혼란스럽지 않게 해야 합니다. 만약 이런 메서드를 이용해 배열을 변경해야한다면, 원본 배열 대신 새로운 배열로 값을 복사하는 방식으로 처리하십시오.
Array.prototype.entries()- 배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.
Array.prototype.every()- 만약 배열의 모든 요소가 제공된 검사 함수를 만족하면 true를 반환합니다.
Array.prototype.filter()- 주어진 필터링 함수의 값의 결과가 참인 경우의 배열 요소들만으로 새로운 배열을 생성하여 반환합니다
Array.prototype.find()- 주어진 테스팅 함수의 요구조건을 만족하는 배열 요소를 반환합니다. 그러한 배열요 요소가 없으면
undefined를 반환합니다. Array.prototype.findIndex()- 주어진 테스트 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 그렇지 않으면 -1이 리턴됩니다.
Array.prototype.forEach()- 배열의 각각의 요소에 함수를 호출합니다.
Array.prototype.keys()- 배열의 각 인덱스에 대한 key들을 가지는 새로운
Array Iterator객체를 반환합니다. Array.prototype.map()- 배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 만든 새로운 배열을 반환합니다.
Array.prototype.reduce()- 배열의 각 값에 대해 왼쪽에서 오른쪽으로 함수를 적용하여 단일 값으로 줄입니다.
Array.prototype.reduceRight()- 배열의 각 값에 대해 오른쪽에서 왼쪽으로 함수를 적용하여 단일 값으로 줄입니다.
Array.prototype.some()- R배열중의 적어도 한 요소가 테스팅 함수를 만족시킨 다면 true를 반환합니다.
Array.prototype.values()- 배열의 요소값들에 대한 Array Iterator 객체를 반환합니다.
Array.prototype[@@iterator]()- 배열의 요소값들에 대한 Array Iterator 객체를 반환합니다.
Array generic 메서드
때로는 배열 메소드를 문자열이나 다른 배열스러운 객체 (함수 arguments같은)에 사용하려 할 수 있다. 이런 방식으로 문자열을 문자의 배열(또는 배열일 아닌 것을 배열처럼) 다룰 수 있다. 예를 들어, 변수
str
에 있는 모든 문자들이 영문자인지 확인하기 위해, 아래와 같이 작성할 수 있다:
function isLetter(character) { return character >= 'a' && character <= 'z'; } if (Array.prototype.every.call(str, isLetter)) { console.log("The string '" + str + "' contains only letters!"); }이 표기법은 다소 경제적이지 못해서, JavaScript 1.6에서 generic 약칭을 도입했다:
if (Array.every(str, isLetter)) { console.log("The string '" + str + "' contains only letters!"); }Generics는 String에 대해서도 사용가능하다.
이것들은 ECMAScript 표준의 일부가 아니어서 비-Gecko브라우저에서는 지원되지 않는다. 표준의 대안으로서, Array.from()을 이용하여 객체를 적절한 배열로 변경할 수 있다; 다만 그 방법들은 구형 브라우저에서는 지원되지 않는다:
if (Array.from(str).every(isLetter)) { console.log("The string '" + str + "' contains only letters!"); }예제
배열 생성
아래 예제는 길이 0의 배열 msgArray 을 생성하고, msgArray[0] 와 msgArray[99] 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.
var msgArray = []; msgArray[0] = 'Hello'; msgArray[99] = 'world'; if (msgArray.length === 100) { console.log('The length is 100.'); }2차원 배열 생성
아래는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.
var board = [ ['R','N','B','Q','K','B','N','R'], ['P','P','P','P','P','P','P','P'], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], ['p','p','p','p','p','p','p','p'], ['r','n','b','q','k','b','n','r'] ]; console.log(board.join('\n') + '\n\n'); // Move King's Pawn forward 2 board[4][4] = board[6][4]; board[6][4] = ' '; console.log(board.join('\n'));결과는 다음과 같습니다:
R,N,B,Q,K,B,N,R P,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , , , , , , , , , , , , p,p,p,p,p,p,p,p r,n,b,q,k,b,n,r R,N,B,Q,K,B,N,R P,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r배열을 사용하여 일련의 값들을 테이블처럼 표시하기
values = []; for (var x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) }; console.table(values)결과는
0 1 0 1 2 2 2 4 8 3 8 18 4 16 32 5 32 50 6 64 72 7 128 98 8 256 128 9 512 162(첫번째 열은 (인덱스))
명세
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. |
| ECMAScript 5.1 (ECMA-262) The definition of 'Array' in that specification. |
Standard | New methods added: Array.isArray, indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Array' in that specification. |
Standard | New methods added: Array.from, Array.of, find, findIndex, fill, copyWithin |
| ECMAScript Latest Draft (ECMA-262) The definition of 'Array' in that specification. |
Living Standard | New method added: Array.prototype.includes() |
브라우저 호환성
참조
- JavaScript Guide: “Indexing object properties”
- JavaScript Guide: “Predefined Core Objects:
ArrayObject” - Array comprehensions
- Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
- Typed Arrays
=================================
=================================
=================================
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 브라우저 터치 이벤트 (터치스크린, 모바일터치스키린 등등) 이벤트 관련 (0) | 2017.11.22 |
|---|---|
| [JavaScript] JavaScript 의 static 구현 관련 (0) | 2017.11.08 |
| [JavaScript] 자바스크립트 Map 관련 (0) | 2017.11.07 |
| [JavaScript] 웹워커 Web Worker 웹에서 멀티 스레드 구현하기 (0) | 2017.11.06 |
| html5 자바스크립트 canvas 풀스크린 스케일링 확대 관련 (2) | 2016.06.21 |
댓글 영역