FrontEnd/Javascript
JS 유용한 배열 메서드 정리. forEach, map, reduce, find, filter 등등
NandaNanda
2024. 2. 5. 13:35
// forEach는 map과는 다르게 반환값이 없음. 따라서 return해도 undefined가 나옴.
let answer=[3,2,1,4];
let attempt=[1,2,3,4];
let strike=0;
let ball=0;
for(let i=0;i<attempt.length;++i){
let idx=answer.indexOf(attempt[i])
if(idx>-1){
if(idx==i){
strike+=1;
continue;
}
ball+=1;
}
}
attempt.forEach((value, idx)=>{
let index=answer.indexOf(value);
if(index>-1){
if(idx==index){
strike+=1;
}
else{
ball+=1;
}
}
});
let arr2=[1,2,3,4,5];
/*
아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어져서 나오면 생략할 수 있다는 것이다
*/
// let result=arr2.reduce((acc,cur)=>acc+cur);
// let result=arr2.reduce((acc,cur)=>{return acc+cur});
// let result=arr2.reduce((acc,cur)=>{acc+=cur; return acc});
// console.log("result: "+result)//15
console.log(result);
//map은 기본적으로 아래와 같이 반환값이 있다. 재밌게도 return을 통해 나오는 것이 배열의 각 인자에 대응하는 반환값이다. 이 인자들이 합쳐져서 결과적으로는 map은 새로운 배열을 반환한다.
let arr=[1,3,5,7];
let newArray=arr.map((value,index)=>{
console.log(value, index);
return value+1;
});
console.log(arr); //[1,3,5,7]
console.log(newArray); //[2,4,6,8]
let userList=[{name:"mike", age:30}, {name: "tom", age:10}, {name: "kile", age:15}, {name:"susan",age:32},{name:"steve",age:43}];
let result2=userList.map((value, idx)=>{
return Object.assign({}, value,{isAdult: value.age>19, idx:idx});
});
//위에서 중괄호와 return이 붙여져 사용되었으므로 간단히 아래와 같이 표현가능
/*
let result2=userList.map((value, idx)=>Object.assign({}, value,{isAdult: value.age>19, idx:idx}));
*/
console.log(result2);
console.log(userList);//기존의 userList는 변경되지 않았음
let arr2=[1,2,3,4,5];
/*
아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어져서 나오면 생략할 수 있다는 것이다
*/
// let result=arr2.reduce((acc, cur)=>acc+cur);
// let result=arr2.reduce((acc, cur)=>{return acc+cur});
// let result=arr2.reduce((acc, cur)=>{acc+=cur; return acc});
// console.log("result: "+result)//15
console.log(result);
let userList=[{name:"mike", age:30}, {name: "tom", age:10}, {name: "kile", age:15}, {name:"susan",age:32},{name:"steve",age:43}];
//reduce를 사용하여 성인만 출력하기.(아래와 같이 reduce는 반환값을 가지고 초기값도 가질수 있다. 필요한 객체들만을 모아주기 위해 빈배열을 초기값으로 두었다)
//만약 return 문이 없다면 돌아는 가지만 원하는 것을 얻지 못한다. 초기값이 없어도 돌아는 가지만 원하는 것을 얻지 못한다.
let result2=userList.reduce((accu, cur)=>{
if(cur.age>19){
accu.push(cur);
}
return accu;
},[]);
console.log(result2);
/*
[
{ name: 'mike', age: 30 },
{ name: 'susan', age: 32 },
{ name: 'steve', age: 43 }
]
*/
//배열을 객체로 바꾸는데 사용될 수 있는는 reduce
//경우에 따라 return 문을 생략할 수도 있지만 여기서는 중괄호와 return 이 떨어져 있으므로 생략하면 오류남. 중괄호와
//return이 붙어있으면 생략가능함!!!
arr=[ 'Joe', 'Han', 'Trump', 'Bush' ];
let obj=arr.reduce((a,c,i)=>{a[i]=c; return a}, {});
console.log(obj);
결과: { '0': 'Joe', '1': 'Han', '2': 'Trump', '3': 'Bush' }
// find()함수는 배열에 객체가 들어있어 indexOf로는 원하는 값을 얻을 수 없을때 사용된다. (단 찾고자 하는 모든 객체를 찾아주지않고 가장 먼저 발견된
//하나의 객체만을 반환해 준다). findIndex의 경우 조건에 맞는 객체의 인덱스를 반환해줌. find, findIndex모두 조건에 맞는 값이 없으면 undefined를 반환함.
let userList2=[{name:"Mike",age:30}, {name:"Jane",age:34},{name:"koko",age:14},{name:"lala",age:12}];
let result3=userList2.find((user)=>{
if(user.age<19){
return true;
}
return false;
});
console.log(result3);
//find와 달리 배열에 조건을 만족하는 모든 객체를 가지고 싶다면 filter를 쓰면 된다. filter, find모두 해당하는 조건에 맞는 데이터이면 return값으로
// true를 주고 그렇지 않으면 false를 준다.
let arr4=[1,2,3,4,5,6];
const result=arr4.filter((item)=>{
return item%2===0;
});
console.log(result); //[2,4,6]
//배열 =>문자열 join을 사용하고(default는 쉼표임), 문자열 => 배열 로 변환할 때는 split을 사용한다.
let arr=["Hi","I'm","Joe"];
let str=arr.join("");
console.log(str);
let str2="a,b,c,d"
let arr2=str2.split(" ");
console.log(arr2);
// //배열 =>문자열 join을 사용하고(default는 쉼표임. 즉 쉼표를 넣어가면서 문자열을 만든다는 것이다. join의 인자를 문자열 중간중간에 넣어가면서
문자열이 만들어지는 것임),
let arr=["Hi","I'm","Joe"];
let str=arr.join("");
console.log(str);
// 문자열 => 배열 로 변환할 때는 split을 사용한다(split의 인자를 문자열에서 찾아 그것을 기준으로 배열의 각인자가 만들어 지는것).
let str2="a,b,c,d"
let arr2=str2.split(",");
console.log(arr2);
//JS에서는 배열, 객체모두 그 타입이 Object이기 때문에 어떤것이 배열인지 구분하기 위해서 isArray배열을 사용함.
let user={name:"mike",age:15};
let arr=[1,2,3,4];
console.log(typeof user);
console.log(typeof arr);
console.log(Array.isArray(user));
console.log(Array.isArray(arr));