[JavaScript] 자바스크립트 Array 관련

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: 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(); // 사본을 만드는 방법 // ["딸기"]

구문Edit

[element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength)

elementN

JavaScript 배열이 주어진 요소들로 초기화됩니다. 단, 하나의 인수만 Array 생성자에 전달되었고 그것이 수일 때는 예외입니다. (아래를 보십시오.) 이 특별한 경우는 괄호 구문으로 만들어진 배열 값이 아닌 Array 생성자에 의해 만들어진 JavaScript 배열에만 적용됨에 유의하십시오.

arrayLength

만약 Array 생성자에 전달된 인수가 0과 232-1 사이의 정수(끝값 포함) 하나뿐이라면, 생성자는 그 정수만큼의 길이를 가진 새 JavaScript 배열을 반환합니다. 만약 인수가 이 범위 밖의 정수라면, RangeError 예외가 발생합니다.

설명Edit

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. 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); // 6

length 증가.

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

속성Edit

For properties available on Array instances, see Properties of Array instances.

Array.length

값이 1인 Array 생성자의 length 속성입니다.

get Array[@@species]

파생 객체를 생성하는데 사용되는 생성자 함수입니다.

Array.prototype

모든 배열 객체에 속성 추가를 할 수 있습니다.

메소드Edit

For methods available on Array instances, see Methods of Array instances.

Array.from() 

유사 배열 또는 반복 가능한 객체로부터 새로운 배열 인스턴스를 생성합니다.

Array.isArray()

만약 변수가 배열이면 true를 아니면 false를 반환합니다.

Array.observe() 

객체의 Object.observe()와 유사하게 배열에 대한 변경점을 비동기로 관찰합니다. 이것은 발생한 순서대로 변경 스트림을 제공합니다.

Array.of() 

전달인자의 개수나 데이터 타입에 관계없이 새 배열 인스턴스를 생성합니다.

배열 인스턴스Edit

모든 배열 인스턴스는 Array.prototype로부터 상속을 받습니다. 배열 생성자의 프로토타입 객체는 모든 배열 인스턴스에 영향을 주도록 수정될 수 있습니다.

속성

Array.prototype.constructor

객체의 프로토타입을 생성하는 함수를 지정합니다.

Array.prototype.length

배열에서 요소의 개수를 나타냅니다.

Array.prototype[@@unscopables]

with 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.

 

 

 

반응형

 

728x90

 

 

 

메서드

변경자 메서드

변경자 메서드는 배열을 수정합니다:

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 메서드Edit

Array generics 은 비표준이고 사라질 기술이다. 근미래에 제거될 것이다.

때로는 배열 메소드를 문자열이나 다른 배열스러운 객체 (함수 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!");  }

예제Edit

배열 생성

아래 예제는 길이 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

(첫번째 열은 (인덱스))

명세Edit

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

브라우저 호환성Edit

• Desktop
 
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

참조Edit

• JavaScript Guide: “Indexing object properties”
• JavaScript Guide: “Predefined Core Objects: Array Object”
• Array comprehensions
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Typed Arrays

 

 

=================================

=================================

=================================