[Javascript]Array

배열

배열은 순서를 갖는 리스트와 비슷한 객체이다. 각 요소(item)에 맞는 번호(index)가 있고 언제는지 메서드를 통해 수정이 가능하다.

배열 요소 추가

let cities = [];

cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]

빈 배열에 원하는 요소를 원하는 순서에 추가 할수가 있다. 위 cities 배열은 0번부터 2번까지 요소가 있지만 5번째에 요소를 추가하려면 cities[5] = "제주도";를 사용한다. 그러면 cities = ["서울", "대전", "대구", undefined, undefined, "제주도"]이 출력된다.

indexOf

배열의 값을 주면 지정된 요소위치를 찾아 반환한다. 요소가 없으면 -1을 반환한다.

indexOf('찾을 요소')
indexOf('찾을 요소', 검색 시작할 번호)

검색 시작할 번호가 1보다 작으면 전체 배열 검색된다.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison')); // 1


console.log(beasts.indexOf('bison', 2)); // 4 (두번째 요소인 camel부터 검색)

console.log(beasts.indexOf('giraffe')); // -1

unshift

배열의 맨 끝에 요소를 추가하는 방법

let arr = ['a', 'b', 'c'];

arr.push('d'); 
// arr = ['a', 'b', 'c', 'd'];

push

배열의 맨 앞에 요소를 추가하는 방법

let arr = ['a', 'b', 'c'];

arr.unshift('d'); 
// arr = ['d', 'a', 'b', 'c']

slice

배열의 원하는 지점(시작,끝)까지 복사본을 새로운 객체로 반환한다. 원본 배열은 수정되지 않는다.

slice(시작 요소, 끝 요소)

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let arr1 = arr.slice(3, 5); // [4, 5]
let arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5]
let arr3 = arr.slice(-3); // [8, 9, 10]
let arr4 = arr.slice(-3, 9); // [8, 9]
let arr5 = arr.slice(10); // []
let arr6 = arr.slice(4); // [5, 6, 7, 8, 9, 10]
let arr7 = arr.slice(undefined); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr8 = arr.slice(5, -4); // [6]
let arr9 = arr.slice(2, 15); // [3, 4, 5, 6, 7, 8, 9, 10]

splice

배열을 분리하거나 삭제 추가할 떄 사용한다. 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 원본 배열 자체를 수정한다.

splice(시작 요소, 제거 요수 갯수,배열에 추가할 요소(item1,item2))

제거할 요소 수가 0이거나 0보다 작으면 어떤 요소도 삭제되지 않는다. 추가할 요소가 있으면 시작요소 다음에 추가된다. 반환된 배열은 빈배열로 반환된다.

splice(시작요소,0,추가할 요소)

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(10, 2, 'a', 'b', 'c');

console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1); // [11, 12]

arr.splice는 10번째 요소(11)부터 2개 요소를 삭제하고 'a','b','c'를 추가한다.
그리고 분리된 변수는 arr1에 담긴다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(-13, 1);

console.log(arr); // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr1); // [1]

-를 넣으면 뒤에서부터 요소를 읽는다 -13이면 1부터 1개요소를 삭제한다는 뜻이다.
삭제된 요소는 arr1에 담긴다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(3);

console.log(arr); // [1, 2, 3]
console.log(arr1); // [4, 5, 6, 7, 8, 9, 10, 11, 12]

let arr2 = arr1.splice(6, 4);

console.log(arr1); // [4, 5, 6, 7, 8, 9]
console.log(arr2); // [10, 11, 12]

첫번째처럼 삭제할 요소가 생략된 경우 시작요소보다 뒤에 있는 요소들은 전부 삭제되고 arr1으로 분리할 수 있다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(5, 0, 'add');

console.log(arr); // [1, 2, 3, 4, 5, "add", 6, 7, 8, 9, 10, 11, 12]
console.log(arr1); // []

제거할 요소 수가 0이거나 0보다 작으면 어떤요소도 삭제되지 않으며 'add'요소를 추가한다.

shift

배열의 첫번째 요소 삭제하고 삭제된 요소를 반환함

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);// [2, 3]

console.log(firstElement);//1

삭제된 곳은 undefined가 아니라 배열이 한칸씩 앞당겨진다.

pop

배열의 첫번째 요소 삭제하고 삭제된 요소를 반환함

const array1 = [1, 2, 3];

array1.pop();

console.log(array1);// [1, 2]

concat

두개의 배열을 하나로 합쳐 하나의 배열로 반환한다.

var alpha = ['a', 'b']

var alpha2 = ['c', 'd', 'e']

var str = alpha.concat( alpha2 );

console.log(str); // ['a', 'b', 'c', 'd', 'e']

join

배열의 모든 요소를 연결해 하나의 문자열로 만든다.

arr.join('구분할 문자')

()안에 아무것도 쓰지 않으면 ,로 구분짓게 되며 배열마다 구분지을 문자를 ''안에 쓰면 해당 문자로 문자열을 만든다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

forEach

주어진 함수를 배열 요소 각각에 대해 실행한다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});

0부터 10까지 element에 순서대로 대입하여 함수를 실행한다.

let fruits = ['사과', '바나나'];

fruits.forEach(function (item, index) {
  console.log(item, index)
})
// 사과 0
// 바나나 1

item과 index를 순서대로 대입하여 함수를 실행할 수도 있다.

map

배열내에 모든 요소들에대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

모든 요소들에 2를 곱해 새로운 map1의 배열은 반환한다. 기존에 있던 array1 배열의 값은 수정되지 않는다.

Array() , Array.of()

새로운 배열 인스턴스를 만든다.

Array(3) // [ , , ]
Array.of(3) // [3]

Array(3)은 length가 3인 빈 배열을 생성하고 Array.of(3)는 3의 item을 가진 배열을 생성한다.

for...of

배열에서 각 요소들을 순서대로 반복할 수 있다.

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}//'a','b','c'