언어/JavaScript
indexOf, includes, 배열, splice, slice, find, filter, map, join, reduce, 전개구문
홍시_코딩기록
2023. 11. 4. 16:23
제목이 굉장히 길어졌지만
내가 보려고 남기는 자바스크립트
1. 문자열 메소드
*indexOf, includes
function hasCola(str) {
if (str.indexOf("콜라") > -1) {
console.log("금칙어가 있습니다.");
} else {
console.log("통과");
}
}
function hasCola(str) {
if (str.includes("콜라")) {
console.log("금칙어가 있습니다.");
} else {
console.log("통과");
}
}
hasCola("사이다가 짱"); //통과
hasCola("콜라가 최고"); //금칙어가 있습니다.
hasCola("콜라"); //금칙어가 있습니다.
- "콜라"가 있으면 0보다 크고 "콜라"가 없으면 -1이 나오기 떄문에 조건에 >-1이 필요함
- includes를 사용하면 true false로 값이 나오기 때문에 조건 없어도 됨
2. 배열
* splice, slice
/ arr.splice(m, n) // 특정요소 지움
// arr.splice(m, n, x) // 특정요소 지우고 추가
let arr2 = [1,2,3,4,5];
let result = arr2.splice(1,2);
console.log(arr2); // [1, 4, 5]
console.log(result); // [2, 3] 삭제된 요소 반환
let arr3 = [1,2,3,4,5];
let result2 = arr3.slice(1,4);
console.log(result2); //[2,3,4]
console.log(arr3); // [1, 2, 3, 4, 5]
- splice는 원본 배열을 수정하고 slice는 원본 배열을 수정하지 않음
* find()
const findArr = [1,2,3,4,5,6];
const findResult = findArr.find((item) => {
return item % 2 ===0;
})
console.log(findResult); //2 짝수인 조건에 만족하는 첫 번째 요소만 반환
const userList = [
{name: 'mike', age: 30},
{name: 'fike', age: 15},
{name: 'dike', age: 10},
]
const findIndex = userList.findIndex((user) => {
if (user.age < 19) {
console.log(user);
return true;
}
return false;
});
console.log(findIndex); //{name: 'fike', age: 15} 1 조건에 만족하는 첫 번째 요소만 반환
- find는 조건에 맞는 첫번 째 요소만 반환
* filter()
const filter = userList.filter((user) => {
if (user.age < 19) {
console.log(user);
return true;
}
return false;
});
console.log(filter); // {name: 'fike', age: 15} {name: 'dike', age: 10} 해당하는 모든 요소 반환!
- find와 다르게 해당하는 모든 요소를 반환!
* map()
const userList = [
{name: 'mike', age: 30},
{name: 'fike', age: 15},
{name: 'dike', age: 10},
]
const mapUserList = userList.map((user, index) => {
return {
...user,
id: index,
adult: user.age > 19
}
});
console.log(userList); //기존 배열은 그대로!
console.log(mapUserList);
// {name: 'mike', age: 30, id: 0, adult: true}
// {name: 'fike', age: 15, id: 1, adult: false}
// {name: 'dike', age: 10, id: 2, adult: false}
- map은 기존 배열을 수정하지 않음
- ...user 전개구문 사용하여 기존 배열 가져옴.
*join()
const joinArr = ['2023','02','20'];
const joinArray = joinArr.join('-');
console.log(joinArray);//2023-02-20
*reduce()
/*
인수로 함수를 받음
reduce((누적 계산값, 현재값) => {
return 계산값
});
*/
//배열의 모든 수 합치기
const reduceArr = [1,2,3,4,5];
const reduce = reduceArr.reduce((prev, cur) => {
return prev + cur;
}, 0); //초기값 0 안써도 상관없음
console.log(reduce); //15
const reduceList = [
{name: 'mike', age: 20},
{name: 'bb', age: 10},
{name: 'gg', age: 5},
{name: '4r', age: 50},
{name: 'hh', age: 40},
];
const reduce2 = reduceList.reduce((prev, cur) => {
if (cur.age > 19) {
prev.push(cur.name);
}
return prev;
}, [])
console.log(reduce2); // ['mike', '4r', 'hh']
3. 전개구문
//... 전개구문!
const arr10 = [1,2,3];
const arr20 = [4,5,6];
const arr30 = [...arr20,...arr10]; //4, 5, 6, 1, 2, 3]
console.log(arr30);