arr.splice(n, m) : 배열의 특정 요소 지움
- n번째 요소부터 m개 삭제
- idx는 0부터 시작
- 기존 배열이 변경됨
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // idx 1 부터 2개 삭제
console.log(arr);
// arr = [1, 4, 5]arr.splice(n, m, x) : 배열의 요소 지우고 특정 요소 추가
- idx n번째 요소부터 m개 삭제 후, x 추가
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, '가', '나');
console.log(arr);
// [1,"가","나",4,5]
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 0, '가', '나');
// m = 0일 경우, 아무 요소도 지우지 않고 새로운 요소 추가 가능
console.log(arr);
// [1,"가","나",2,3,4,5]arr.splice() : 삭제된 요소를 결과로 반환
- splice를 사용하면 기존 배열은 특정 요소가 삭제된 채로 변경되고, 삭제된 요소를 결과로 반환함
let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);
console.log(arr); // [1,4,5]
console.log(result); // [2, 3]arr.slice(n, m)
- idx n부터 m까지 반환
- m은 포함하지 않고 m바로 앞까지임
- m을 입력하지 않을 경우 배열 끝까지를 의미
- 기존 배열을 변경하지 않음
- n, m값을 입력하지 않을 시, 배열이 복사됨
let arr = [1, 2, 3, 4, 5]
let arr2 = arr.slice(1, 4);
let arr3 = arr.slice(); // n, m값이 없을 시 배열 복사
console.log(arr); // [1,2,3,4,5]
console.log(arr2); // [2,3,4]
console.log(arr3) // [1,2,3,4,5]arr.concat(arr2, arr3 ...)
- 기존 배열에 새 배열을 합쳐서 결과 반환
- 기존 배열을 변경하지 않음
- 전달받은 요소를 하나의 배열로 합쳐서 반환함
let arr1 = [1, 2];
let arr2 = ['가', '나'];
let arr3 = ['a', 'b'];
let result = arr3.concat(arr1, arr2);
console.log(arr3); // ["a","b"]
console.log(result); // ["a","b",1,2,"가","나"]
console.log(arr1.concat([3, 4], [5, 6])); // [1,2,3,4,5,6]
console.log(arr1.concat([3, 4], 5, 6)); // [1,2,3,4,5,6]arr.forEach(fn)
- 배열 반복
- 함수를 인수로 받음 --> fn(해당요소, 인덱스, 해당 배열 자체)
let users = ['Mike', 'Jane', 'Tom'];
// (1) 일반 함수 사용
users.forEach(function(e, i){
console.log(`${i}. ${e}`);
})
/*
"0. Mike"
"1. Jane"
"2. Tom"
*/
// (2) 화살표함수 사용
users.forEach((item, index, arr) => {
console.log(item, index, arr);
});
/*
"Mike" 0 ["Mike","Jane","Tom"]
"Jane" 1 ["Mike","Jane","Tom"]
"Tom" 2 ["Mike","Jane","Tom"]
*/
users.forEach((e, i) => {
console.log(`${i}. ${e}`);
});
/*
"0. Mike"
"1. Jane"
"2. Tom"
*/arr.indexOf() / arr.lastIndexOf()
- 배열에서 인수로 받은 요소를 발견하면 해당 요소의 idx반환
- 인수로 받은 요소가 없으면 -1반환
- 인수가 두 개인 경우, 두 번째 인수 = 시작 위치
let arr = [1, 2, 3, 4, 3, 4, 5, 6, 7];
console.log(arr.indexOf(3));
// 2
console.log(arr.indexOf(3, 3));
// 4
// idx 3부터 탐색 시작 -> 두 번째 3만 탐색됨
console.log(arr.lastIndexOf(3));
// 4
// 끝에서부터 탐색하여 뒤에 있는 3이 먼저 탐색됨arr.includes(keyword, index)
- 배열에 인수로 받은 요소의 포함 여부 확인
let arr = [1, 2, 3, 4, 5, 6, 7, [8, 9]];
let arr2 = [8, 9];
console.log(arr.includes(3)); // true
console.log(arr.includes(111)); // false
console.log(arr.includes([3, 4])); // false
console.log(arr.includes([8, 9])); // false
console.log(arr.includes(arr2)); // falseincludes()의 인수로 배열이나 변수는 받을 수 없나?
- 배열의 특정 idx의 값 확인하려면 두 번째 인수로 idx를 넘겨준다.
let arr = [1, 2, 3, 4, 5, 6, 7, [8, 9]];
console.log(arr.includes(1, 0)); // true
console.log(arr.includes(1, 1)); // false
arr.find(fn) / arr.findIndex(fn)
- 함수를 인자로 받아 복잡한 연산을 통해 요소를 찾을 수 있음
- 첫 번째 true값을 결과로 반환하고 종료됨
- 만약 찾는 값이 없다면 undefined를 반환
let arr = [1, 2, 3, 4, 5];
let result = arr.find((item) => {
console.log('item == ', item);
return item % 2 === 0;
});
console.log(result);
/*
"item == " 1
"item == " 2
2
*/- 예시2 (미성년자 찾기)
let userList = [
{name: 'Mike', age: 30},
{name: 'Lisa', age: 15},
{name: 'Stasy', age: 9},
];
// 미성년자 찾기
let result = userList.find((user, idx) => {
if(user.age < 20){
return true;
// true가 되면 해당 요소(user)을 result로 반환함
}
return false;
});
console.log(result); // {name: "Lisa", age: 15}
console.log(result.name); // "Lisa"
let result = userList.findIndex((user, idx) => {
if(user.age < 20){
return true;
// true가 되면 해당 요소(user)을 result로 반환함
}
return false;
});
console.log(result); // 1arr.filter(fn)
- 조건에 만족하는 모든 요소를 배열로 모아서 반환함
let userList = [
{name: 'Mike', age: 30},
{name: 'Lisa', age: 15},
{name: 'Stasy', age: 9},
];
// 미성년자 찾기
let result = userList.filter((user, idx) => {
if(user.age < 20){
return true;
}
return false;
});
console.log(result);
// [{name: 'Lisa', age: 15}, {name: 'Stasy', age: 9}]arr.reverse() : 배열을 역순으로 재정렬
- 기존 배열을 변경함
let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr);
// [5, 4, 3, 2, 1]let arr = [1, 2, 3, 4];
let arr2 = arr.reverse();
arr[0] = 100;
console.log(arr); // [100,3,2,1]
console.log(arr2); // [100,3,2,1]
console.log(arr === arr2) // truearr.map(fn)
- 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
let userList = [
{name: 'Mike', age: 30},
{name: 'Lisa', age: 15},
{name: 'Stasy', age: 9},
];
// isAdult라는 프로퍼티를 추가한 새로운 배열 생성할 것
let result = userList.map((user, index)=>{
// Object.assign(초기 객체, 복사할 객체, 추가할 객체)
return Object.assign({}, user, {
id: index + 1,
isAdult: user.age > 19,
});
});
console.log(result);
/*
[
{name: 'Mike', age: 30, id: 1, isAdult: true}
{name: 'Lisa', age: 15, id: 2, isAdult: false}
{name: 'Stasy', age: 9, id: 3, isAdult: false}
]
*/join
- 배열을 합쳐서 새로운 문자열 생성
- join의 인수로 전달되는 값이 구분자임. 이 구분자가 각 배열의 값 사이에 들어감.
- 아무것도 입력하지 않으면 , 가 추가되어 합쳐짐
let arr = ['안녕', '나는', '성원이야'];
let result = arr.join();
let result2 = arr.join('☆');
console.log(result);
console.log(result2);
// "안녕,나는,성원이야"
// "안녕☆나는☆성원이야"
console.log(arr);
// ['안녕', '나는', '성원이야']split()
- 문자열을 나눠서 배열로 만들어줌
- 인수로 받은 값을 기준으로 문자열을 나눔
- 인수로 ('')을 받으면 모든 글자 기준으로 나눠서 배열에 추가됨. 띄어쓰기도 하나의 값으로 배열에 추가됨.
const users = "Mike, Jane, Tom, Jason";
const result = users.split(', ');
const result = users.split(',');
const result3 = users.split('');
console.log(result);
// ["Mike","Jane","Tom","Jason"]
console.log(result2);
// ["Mike"," Jane"," Tom"," Jason"]
console.log(users);
// "Mike, Jane, Tom, Jason"
console.log(result3);
// ["M","i","k","e",","," ","J","a","n","e",","," ","T","o","m",","," ","J","a","s","o","n"]
Array.isArray()
- 배열 유무 확인
- typeof는 객체와 배열을 구분하지 못함 (모두 객체라고 표시)
// 객체
let user = {
name : "Mike",
age : 30,
};
// 배열
let userList = ["Mike", "Tom"];
console.log(typeof user); // "object"
console.log(typeof userList); // "object"
console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true기존 배열 변경
: .splice(), .reverse()
