자바스크립트의 배열을 메서드를 정리해 봅니다.
Array 추가/삭제
Array.push()
배열의 마지막 요소를 추가해 줍니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
number_arr.push(6);
console.log(number_arr); // [ 1, 2, 3, 4, 5, 6 ]
Output :
[1, 2, 3, 4, 5, 6]
Array.unshift()
배열의 가장 첫번째 요소를 추가해 줍니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
number_arr.unshift(6);
console.log(number_arr); // [ 6, 1, 2, 3, 4, 5 ]
Output :
[6, 1, 2, 3, 4, 5]
Array.pop()
배열의 가장 마지막 요소를 삭제 합니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
let pop = number_arr.pop();
console.log(number_arr); // [ 1, 2, 3, 4 ]
console.log(pop); // 5
Output :
[1, 2, 3, 4]
5
Array.shift()
배열에서 가장 첫번째 요소를 삭제합니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
let shift = number_arr.shift();
console.log(number_arr); // [ 2, 3, 4, 5 ]
console.log(shift); // 1
Output :
[2, 3, 4, 5]
1
Array.slice()
기존 배열은 변하지 않고, 해당 요소를 반환 합니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
// Syntax : Array.slice(시작위치, 끝위치)
let sp = number_arr.slice(1, 3); // 2번째 부터 3번째 까지 반환합니다.
console.log(number_arr); // [1, 2, 3, 4, 5]
console.log(sp); // [2, 3]
sp = number_arr.slice(2);
console.log(sp); // [3, 4, 5]
Output :
[1, 2, 3, 4, 5]
[2, 3]
[3, 4, 5]
Array.splice()
지정한 위치의 배열을 삭제 합니다.
let number_arr = [ 1, 2, 3, 4, 5 ];
// Syntax : Array.splice(시작위치, 삭제할갯수, 추가_할_아이템...)
let sp = number_arr.splice(1, 2); // 2번째 요소부터 2개를 삭제 합니다.
console.log(number_arr); // [ 1, 4, 5 ]
console.log(sp); // [2, 3]
let sp2 = number_arr.splice(1, 0, 7, 8, 9); // 2번재 요소 위치에 0개를 지우고 7,8,9를 추가해 줍니다.
console.log(number_arr); // [1, 7, 8, 9, 4, 5]
console.log(sp2); // undefined : 0개를 삭제해서 값이 없습니다.
Output :
[1, 4, 5]
[2, 3]
[1, 7, 8, 9, 4, 5]
[]
Array.concat()
배열을 합쳐 줍니다.
let num1 = [ 1, 2, 3];
let num2 = [4,5,6];
let combine = num1.concat(num2);
console.log(combine); // [1, 2, 3, 4, 5, 6]
let num3 = [7, 8, 9];
combine = num1.concat(num2, num3);
console.log(combine); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Output :
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.of()
함수의 인수로 새 인스터스 배열을 만들어 줍니다.
let ar = Array.of(1, 2, 3)
console.log(ar); // [1, 2, 3]
let ch = Array.of("짜장", "짬뽕");
console.log(ch); // ["짜장", "짬뽕"]
Output :
[1, 2, 3]
[ “짜장”, “짬뽕”]
Array 반복
Array.forEach()
배열의 요소를 순차적으로 반복해 줍니다.
let vl = [ 'one', 'two', 'three' ];
vl.forEach((e) => {
console.log(e); // one, two, three를 차례대로 출력
})
Output :
one
two
three
2번째 인자는 요소의 인덱스를 돌려 줍니다.
let vl = [ 'one', 'two', 'three' ];
vl.forEach((e, i) => {
console.log(e, i);
})
Output :
one 0
two 1
three 2
Array.values()
배열의 요소를 새로운 반복형 객체로 만들어 줍니다.
let vl = [ 'one', 'two', 'three' ];
let iterator = vl.values();
console.log(iterator.next().value); // one
console.log(iterator.next().value); // two
console.log(iterator.next().value); // three
console.log(iterator.next().value); // undefined
Output :
one
two
three
undefined
let vl = [ 'one', 'two', 'three' ];
let iterator = vl.values();
for (let i of iterator) {
console.log(i);
}
console.log(iterator.next().value); // undefined : 위에서 모두 반복해서 없음.
Output :
one
two
three
Array.entries()
배열의 요소를 키(key)와 값(value)로 짝지어진 반복형 객체로 만들어 줍니다.
let vl = [ 'one', 'two', 'three' ];
let iterator = vl.values();
for (let i of iterator) {
console.log(i);
}
Output :
[0, "one"]
[1, "two"]
[2, "three"]
Array 찾기
Array.some()
배열중에서 요소가 조건식에 맞는게 1개라도 있으면 true를 반환합니다.
console.log([2, 5, 8, 1, 4].some((e) => e > 5));
console.log([2, 5, 8, 1, 4].some((e) => e > 9));
Output :
true
false
Array.every()
배열의 요소가 모두 조건식에 맞아야 true를 반환합니다.
console.log([2, 5, 8, 1, 4].every((e) => e < 9));
console.log([2, 5, 8, 1, 4].every((e) => e > 4));
Output :
true
false
Array.find()
배열에서 조건식에 맞는 첫번째 요소를 반환합니다.
console.log([2, 5, 8, 1, 4].find((e) => e < 9));
console.log([2, 5, 8, 1, 4].find((e) => e > 4));
Output :
2
5
2번째 값은 배열의 index, 3번째는 현재 배열을 입니다.
console.log([2, 5, 8, 1, 4].find((e, i) => e > 3 && i < 2));
Output :
5
Array.findIndex()
배열에서 조건식에 맞는 첫번째 요소의 인덱스를 반환합니다.
console.log([2, 5, 8, 1, 4].findIndex((e) => e < 9));
console.log([2, 5, 8, 1, 4].findIndex((e) => e > 4));
Output :
0
1
Array.filter()
배열에서 조건식에 맞는 요소들을 배열로 반환합니다.
console.log([2, 5, 8, 1, 4].filter((e) => e < 9));
console.log([2, 5, 8, 1, 4].filter((e) => e > 4));
Output :
[ 2, 5, 8, 1, 4 ]
[ 5, 8 ]
Array.indexOf()
배열에서 요소의 위치를 찾는다. 찾을수가 없으면 -1을 반환합니다.
두번째 값을 찾을 시작 위치 입니다.
console.log([2, 5, 8, 1, 4].indexOf(2));
console.log([2, 5, 8, 1, 4].indexOf(8));
console.log([2, 1, 8, 1, 4].indexOf(1, 3));
Output :
0
2
3
Array 변환하기
Array.fill()
배열을 요소를 채워 줍니다.
let arr = [1, 2, 3, 4];
arr.fill(7); // 모두 7로 채워 넣는다.
console.log(arr);
Output :
[ 7, 7, 7, 7 ]
시작 지점을 정해서 채워 줄 수 있습니다. 시작 위치는 원하는 위치의 -1을 해서 넣어 줍니다.
let arr = [1, 2, 3, 4];
arr.fill(7, 1); // 2번째 부터 끝까지 7로 채움, 0부터 시작이다.
console.log(arr);
Output :
[ 1, 7, 7, 7 ]
시작과 끝 지점을 지정해서 채워 줄 수 있습니다. 끝 지점은 위치를 넣어 줘야 합니다.
let arr = [1, 2, 3, 4];
arr.fill(7, 1, 3); // 2번째 부터 3번째 까지 7로 채움
console.log(arr);
Output :
[ 1, 7, 7, 4 ]
Array.copyWithin()
지정한 위치에 값을 복사해서 넣어 줍니다.
첫번째는 복사할 위치, 두번째는 시작위치 (기본값:0), 세번째는 끝위치(기본값: array.length)
var array = [ 1, 2, 3, 4, 5, 6, 7 ];
console.log(array.copyWithin(1, 3, 5));
Output :
[ 1, 4, 5, 4, 5, 6, 7 ]