자바스크립트 중급 7 - 배열 메소드1(Array methods)
*기초 강좌 배열(Array) 메소드: push()-뒤에 삽입 / pop()-뒤에 삭제 / unshift()-앞에 삽입 / shift()- 앞에 삭제
①arr.splice(n,m) : 특정 요소 지움. → n번째 요소부터 m개 지워라.
let arr = [1, 2, 3, 4, 5];
arr.splice(1,2); →1번째(2)부터 2개 지움 → 2,3 삭제
console.log(arr); //[1,4,5]
②arr.splice(n,m,x) : 특정 요소 지우고 추가
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200); → 1번째(2)부터 3개(2,3,4) 지우고 그 자리에 100, 200 추가.
console.log(arr); //[1, 100, 200, 5]
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관"); →1번째 부터 0개이므로 하나도 안지우고 0~1번째 사이에 "대한민국", "소방관" 추가.
//["나는", "대한민국", "소방관", "철수", "입니다"]
③arr.splice() : 삭제된 요소 반환
let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1,2); → 2,3 삭제
console.log(arr); //[1, 4, 5]
console.log(result); //[2, 3]
④arr.slice(n,m) : n부터 m까지 반환 (m-1까지 반환 , m이 없으면 문자열 끝까지)
let arr = [1,2,3,4,5];
arr.slice(1,4); //[2,3,4]
let arr2 = arr.slice();
console.log(arr2); //[1,2,3,4,5] →괄호안에 아무것도 없으면 배열이 복사됨.
⑤arr.concat(arr2, arr3,,) : 합쳐서 새배열 반환
let arr = [1,2];
arr.concat([3,4]); //[1,2,3,4]
arr.concat([3,4], [5,6]); //[1,2,3,4,5,6]
arr.concat([3,4], 5, 6); //[1,2,3,4,5,6]
⑥arr.forEach(fn) : 배열 반복(순회)
let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
.. item : Mike, Tom, Jane / index : 0 , 1 , 2 /arr : users (보통 item,index 두 개만 씀)
});
//forEach
let arr = ["Mike", "Tom", "Jane"];
arr.forEach((name, index) => {
console.log(`${index + 1}.${name}`); //"1.Mike" "2.Tom" "3.Jane"
});
⑦arr.indexOf / arr.lastIndexOf
let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); //2 → 3의 위치
arr.indexOf(3,3); //7 → 인수가 2개일 경우, 두번째 숫자는 시작위치. 즉, 3부터 시작했을 때 맨뒤 3의 위치 반환.
arr.lastIndexOf(3); //7 → 뒤에3의 위치 반환
⑧arr.includes() : 포함여부 확인
let arr = [1,2,3];
arr.includes(2); //true
arr.includes(8); //false
⑨arr.find(fn) / arr.findIndex(fn) : indexOf와 찾는다는 의미는 동일하나, 함수를 연결하여 보다 복잡한 연산 가능
첫번째 true값만 반환하고 끝난다.
만약 없으면 undefined 를 반환.
let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) =>{
return item % 2 === 0;
}); //나머지가 0일 때= 짝수
console.log(result); //2let userList = [
{ name : "Mike", age:30 },
{ name : "Jane", age:27 },
{ name : "Tom", age:10 },
];
const result = userList.find((user)=>{
if(user.age < 19){
return true;
}
return false;
});
console.log(result);let userList = [
{ name : "Mike", age:30 },
{ name : "Jane", age:27 },
{ name : "Tom", age:10 },
];
const result = userList.findIndex((user)=>{
if(user.age < 19){
return true;
}
return false;
});
console.log(result); //2
*arr.filter(fn) → 만족하는 모든 요소를 배열로 반환
const arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item) => {
return item % 2 === 0;
});
console.log(result); //[2,4,6]
*arr.reverse() : 역순으로 재정렬
let arr = [1,2,3,4,5];
arr.reverse(); //[5,4,3,2,1]
*arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
//arr.map()
let userList = [
{ name: "Mike", age: 30},
{ name: "Jane", age: 27},
{ name: "Tom", age: 10},
];
let newUserList = userList.map((user, index) => {
return Object.assign({}, user, {
isAdult: user.age > 19,
});
});
console.log(newUserList);
//join : 각 문자열을 괄호 안의 문자로 이어줌
let arr = ["안녕", "나는", "철수야"];
let result = arr.join("-");
console.log(result);//split : 문자열에서 괄호 안의 문자를 기준으로 나누어서 반환.
const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");
console.log(result);
//split
let str = "Hello, My name is Mike.";
const result = str.split("");
console.log(result);
*Array.isArray: 배열인지 확인(배열:true/ 배열아님: false)
//Array.isArray()
let user = {
name : "Mike",
age : 30,
};
let userList = ["Mike", "Tom", "Jane"];
console.log(typeof user);
console.log(typeof userList);
console.log(Array.isArray(user));
console.log(Array.isArray(userList));