JS 객체&배열 중급

황지웅·2021년 12월 14일
0

javascript

목록 보기
3/9

배열 중급


배열 메소드

1.arr.forEach(fn):배열의 요소 반복

  • arr.forEach((item,index,arr)=>{}) // 보통 매개변수1,2개만함
  • 배열 자체에변경을 주려할때 이용하기 좋음
  • 루프를 실행하는 도중에 중단시킬 필요가 있는 경우에는 forEach 메소드는 적절하지 않다.(리턴시 계속진행 전달된함수만 그턴에 종료 )
let arr =['Mike','Tom',"Jane"];
arr.forEach((name,index)=>{
  console.log(`${index+1}:${name}`)
})
//1.Mike
//2.Tom
//3.Jane

2.arr.find(fn)/arr.findIndex(fn)

  • 배열안에 객체나 배열이 있는경우 첫번째를 찾을떄 유용
  • 첫번째 true값을 찾아 리턴/첫번째 true값의 인덱스를 리턴
let 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) //{name:"Tom",age:10}
//findexIndex(fn)을사용했다면 resute ===2

3.arr.filter(fn)

  • 값이 true인 것을 찾아 새로운 배열에담아 배열 리턴
let userList=[
  {name:'Mike',age:30},
  {name:'Jane',age:27},
  {name:'Tom',age:10}
];
const result =userList.filter((user)=>{
if(user.age>19)return true;
return false
});
console.log(result) //[{name:'Mike',age:30},{name:'Jane',age:27}]

4.arr.reverse() :역순으로 재정렬

let arr =[1,2,3,4,5];
arr.reverse() ;//[5,4,3,2,1]

5.arr.map(fn): 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

  • argument로 (item,index)를 주로씀
let userList=[
  {name:'Mike',age:30},
  {name:'Jane',age:27},
  {name:'Tom',age:10}
];
let newUserList= arr.map((user)=>{
  Object.assign(user,{isAdult :user.age >19})
})
console.log(newUserList ) //
[
 {name:'Mike',age:30,isAdult:true},
 {name:'Jane',age:27,isAdult:true},
 {name:'Tom',age:10, isAdult:false}
]

6.arr.sort(fn) : 배열 재정렬/배열 자체가 변경됨

let arr=[13,24,6,27,4,21]
arr.sort((a,b)=>{
return a-b
})

7.arr.reduce(fn)

  • (누적 계산값,현재값)
  • 초기값 미설정시 누적계산값은 첫요소로지정
let arr= [1,2,3,4,5]
const result =arr.reduce((prec,cur)=>{
  return prev+cur
},0)
let userList =[
  {name:'M',age:30},
  {name:'T',age:10},
  {name:'J',age:27},
  {name:'S',age:26},
  {name:'Ha',age:42},
  {name:'St',age:60}
]
let result =userList.reduce((prev,cur)=>{
if(cur.age>19){
  prev.push(cur.name)
}
return prev
},[])
console.log(result)//['M', 'J', 'S', 'Ha', 'St']

객체 중급


계산된 프로퍼티

1.객체의 키에 변수나,계산식을 넣을때 사용//객체의 키값이 바뀔때 사용하기 좋음

let a= 'age';
const user ={
	name:'Mike',
   [a]:30 //age :30(계산된 프로퍼티)
}    
const user={
    [1+4] : 5
    ["안녕"+"하세요"] :'Hello' 
}
console.log(user)//{5:5,안녕하세요:Hello"}

객체에서 사용할수 있는 메소드

1.Object.assign():객체 복제

  • 보통의경우
const user ={name :'Mike',age:'30'};
const newUser =Object. assign({},user);
//{}+ {name: 'Mike',age:30}
  • 같은 프로퍼티가 있는경우 덮어씀
const user ={name :'Mike',age:'30'};
const newUser =Object. assign({name : 'jiwoong'},user);
//{}+ {name: 'Mike',age:30}
  • 두개이상도 합칠 수 있다
const user ={name: 'Mike'};
const info1 ={age:30};
const info2 ={gender:'male'};
Object.assignt(user,info1,info2)//{name:'Mike',age:30,gender:'male'}

2.Object.Keys():키 배열 반환

  • 객체의 키를 담은 배열반환
const user ={
	name: 'Mike',
    age:30,
    gender: 'male'
}
Object.keys(user)//['name','age','gender']

3.Object.value():값 배열 반환

  • 객체의 값을 담은 배열 반환
const user ={
	name: 'Mike',
    age:30,
    gender: 'male'
}
Object.values(user)//['Mike',30,'male']

4.Object.entries():키,값 배열을담은 배열 반환

  • 키와 값을 감은 배열을담은 배열을 반환
const user ={
	name: 'Mike',
    age:30,
    gender: 'male'
}
Object.entries(user)//[["name","Mike"],["age",30],["gender",male]]

05.Object.fromEnries() :키/값 배열을 객체로

const arr=
[
    ["name","Mike"],
    ["age",30],
    ["gender","male"]
];
console.log(Object.fromEntries(arr));
//{
    name: "Mike",
    age:30,
    gender:'male'
//}

0개의 댓글