7일차 TIL 클래스와 배열 내장함수

배열 내장함수

push pop shift unshift concat/join split
forEach/ map /reduce는 잘사용하면 진짜 유용해
indexOf /findIndex /find/filter(함수) find랑 filter랑 무슨 차이?
slice splice

23.forEach

네가지 방식으로 배열요소 순환하기
const f=['mimi' ,'kiki','mom' ,'papa11']

(1)
for(let i=0; i<f.length; i++){
console.log(f[i])
}

(2)
f.forEach(el=> console.log(el))

(3)
f.forEach(function(el){
console.log(el)
})

(4)
function print(family){
console.log(family)
}
f.forEach(print)

24.map은 모든 원소를 바꾸고 싶을 때

const a=[1,2,3,4,6] >>제곱해주라주라
(1)
const aa=a.map(el => el*el)
//빈 배열을 만들 필요도 없음. 새 변수에 바로 넣어줄 수 있음.

(2)
const b=[];
for(let i=0; i<a.length; i++){
b.push(a[i]a[i])
}
(3)
const b=[];
a.forEach(el=> b.push(elel))

const a=[
{
id:1,
text:'mimi'
},
{
id:2,
text:'mom'
}
]

const b= a.map(el=>el.text))
//왜 여기서 대괄호표기법은 안되지?

indexOF
const f=['mimi','kiki','mom']

const a= f.indexOf('mimi')
console.log(a)
//숫자, 문자, 불리언은 indexOf로 충분
//객체, 조건으로 찾을때는 ..? ..findIndex

/findIndex(함수)/find(함수)
const f=[
{
id:1,
name:'mimi',
done:true

},
{
id:2,
name:'ki',
done:true
},
{
id:3,
name:'mom',
done:false
}
]

const a = f.find(el => el.id ===3)
//find(el=>el.id===3)는 해당 객체를 반환

25.filter(함수) 만족하는 배열요소가 주르륵 나옴.

const f=[
{
id:1,
name:'mimi',
done:true

},
{
id:2,
name:'ki',
done:true
},
{
id:3,
name:'mom',
done:false
}
]

const a = f.filter(el => el.done===true)
console.log(a)

26.splice는 기존배열 건드려. slice는 안건드려

const a =[1,2,3,4,5]
const index=a.indexOf(3)
console.log(a.splice(index,2))
console.log(a)

const a =[1,2,3,4,5]
const b=a.slice(1,2)
console.log(b)
console.log(a)

27.shift pop unshift shift

const a=[1,2,3,4]
a.push(5)
a.shift()
a.pop()
a.unshift(0,1)
console.log(a)

concat은 기존배열을 건드리지 않아.
const a = [1,2,3];
const b = [4,5,10];
const c = a.concat(b);
<스프레드문법>
const c = [...a,...b]
concat(c)

join
const a = [1,2,3];
console.log(a.join('랑'))

28,29.reduce. 모든값을 사용해서 연산해야할 때

const a = [1,2,3];
//합 구하기

let sum =0;
a.forEach( el => {
sum+=el
})

const sum = a.reduce((acc,cur,idx,arr) => { return acc+cur},0)

//평균 구하기
const a = [1,2,3,4];

const sum = a.reduce((acc,cur,idx,arr) => { if(idx === arr.length-1){
return (acc+cur)/arr.length
}
return (acc+cur)
},0)
console.log(sum)

//각 원소가 각 몇 개 인지 알려주기

const a = ['a','a','a','b','b','c'];

const sum = a.reduce((acc,cur,idx,arr) => { if(acc[cur]){ //acc안에 있는 cur가 존재하는지 확인.cur a가 오면 acc['a'] acc.a랑 같은거
acc[cur] += 1;
} else{
acc[cur] =1
}
return acc
},{})
console.log(sum)

30.배열내장함수 복습

문제
function countBiggerThanTen(numbers) {
/ 구현해보세요 /
}
const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5

(1)
function countBiggerThanTen(numbers) {
return numbers.reduce((acc, current) => {
if (current > 10) {
return acc + 1;
} else {
return acc;
}
}, 0);

(2)
function countBiggerThanTen(numbers) {
return numbers.filter(n => n > 10).length;
}

(3)
function countBiggerThanTen(numbers) {
/ 구현해보세요 /
let count = 0;
numbers.forEach(n => {
if (n > 10) {
count++;
}
});
return count;
}

클래스

class 31. 객체 생성자

function Animal(type,name,sound){
this.type=type;
this.name=name;
this.sound=sound
this.say=function(){
console.log(this.sound)
}
}

const dog=new Animal('강아지', '치치','왈왈')

dog.say()

//이렇게 하면 인스턴스를 생성할때마다, say가 각각 만들어지므로,
재사용가능한 코드를 만들려면,
this.say=~~여기를 지우고
아래처럼 하면 '함께 재사용 가능' :프로토타입으로 설정해준 것.
Animal.prototype.say=function (){
console.log(this.sound)
}

32. 객체 생성자 상속받긔]

상위객체생성자, 하위객체생성자 이렇게 두개가 있을때,
하위객체가, 상위객체의 내용을 상속받는 것
function Animal(type,name,sound){
this.type=type;
this.name=name;
this.sound=sound
}

Animal.prototype.say=function(){
console.log(this.sound);
}

function Dog(name,sound){
Animal.call(this, '개', name, sound) //this다음은 파라미터들을 의미
}

Dog.prototype=Animal.prototype //프로토타입 공유하도록

const dog=new Dog( '치치','왈왈')

dog.say()

33.es6 class문법은 객체생성자와 프로토타입을 쉽게 사용하려 만들어진 문법

(자바스크립트에서는 클래스 기능이 아예 없었음. 다른 언어 클래스와 아예 똑같진 않음)
extends :특정 클래스를 '상속'받는다 라는 의미
super : 상속받은 클래스의 constructor를 호출함..

class Animal{
	constructor(type,name,sound){      //constructor는 객체생성자 비슷한 함수(생성자란 의미)
	this.type=type;
	this.name=name;
	this.sound=sound;
	}
	
	this.say=function(){  //분홍색 빼고 쓰면 됨.  //클래스 안의 함수는 프로토타입에 자동등록
	console.log(this.sound)                           //따라서 console.log(Animal.prototype.say)라고 하면 
	}                                                         프로토타입에 함수가 설정된게 보임. 
}

const dog = new Animal('강아지', '치치' , '멍멍')
dog.say();

+ 클래스 문법을 사용하면 , 상속을 더 쉽게 함
해보자

class Dog extends Animal{
constructor(name,sound){
super ('개,name, sound)
}
}

const dog = new Dog("멍멍이", '멍멍')
dog.say()

34. 만들어보기

class Food{
  constructor(name){
    this.name=name;
    this.brands = [];
  }
  addBrand(brand){
    this.brands.push(brand)
  }
  print(){
    console.log(`${this.name}를 파는 음식점들`);
    console.log(this.brands.join(', '))
  }
}

const pizza = new Food('피자')
pizza.addBrand("피자헛");
pizza.addBrand("미스터피자")

pizza.print()