프론트엔드스쿨 - js 배열 10/5

정다솔·2021년 10월 5일
0

📌배열은 모든 데이터를 다 포함할 수 있어

✅ join() : 배열 -> string으로 변환

  • join() 가로안에 구분자 넣음(옵션)
  • 구분자를 포함하여 string으로 변환
    const fruits = ['apple','banna','orange']; 를 string으로 변환하려면 fruits.join(); 한다.

✅ split() : string -> 배열로 변환

  • split() 가로안에는 구분자와 리턴받을 배열의 크기를 넣을 수 있음. 구분자로는 string 또는 정규표현식을 사용 할 수 있다.
  • const fruits ='🍎,🍈,🍒,🍊'; 를 배열로 변환하려면fruits.split(','); 한다.
    만약 사과랑 메론만 받고 싶으면, fruits.split(',',2); 하면 된다.
  • split은 구분자를 꼭 전달해야한다. 그렇지 않으면 문자 전체가 배열하나에 들어오게 된다.

✅ reverse() : 배열의 순서를 거꾸로 변환

  • const array=[1,2,3,4,5];을 거꾸로 출력하려면, array.reverse(); 해주면 된다. 그러면
    [5,4,3,2,1]로 출력된다.
  • reverse는 배열 자체를 변환 시킴

✅ splice() : 배열에서 선택한 데이터를 삭제하고, 그 데이터 값을 return

  • const array=[1,2,3,4,5]; 에서 1,2를 삭제하려면 array.splice(0,2);해주면된다. 그러면
    [3,4,5]가 남는다. splice(삭제할 첫번째 숫자, 몇개를 삭제할 것인지)
  • splice는 배열 자체에서 데이터를 삭제함

✅ slice(start index, end index) : 배열에서 선택한 데이터들로 새로운 배열을 생성

  • const array=[1,2,3,4,5]; 에서 3,4,5로만 이루어진 새로운 배열을 만드려면 const result = array.slice(2,5);하면 된다. result는 [3,4,5]가 되고 array는 그대로 [1,2,3,4,5]이다.
  • slice(시작인덱스, 뽑아내고싶은 마지막인덱스 +1)
let desc ="abcdefg";
desc.slice(2);
desc.slice(0,5);
desc.slice(2,-2); // index 2부터 뒤에서 2까지

<결과>
"cdefg"
"abcde"
"cde"

✅ concat(arr1,arr2) : 배열 합쳐서 새배열 반환

let arr=[1,2];
arr.concat([3,4]);

<결과>
[1,2,3,4]

✅ find() : 배열에서 조건에 맞는 첫번째 요소를 return

  • true가 return되면 바로 함수 멈춤
  • predicate
  • callback함수를 받는다(내가 callback함수를 만들어서 전달해야한다)
  • callback함수는 blooean type을 return
  • find(this, value, index, object)=>blooean
class Student{
  constructor(name,age,enrolled,score){
    this.name=name;
    this.age=age;
    this.enrolled=enrolled;
    this.score=score;
  }
}  
const students=[
  new Student('A',29,true,45),
  new Student('B',28,false,80),
  new Student('C',30,true,90),
  new Student('D',40,false,66),
  new Student('E',18,true,88),
];

Q. 90점인 학생 찾기

const result = students.find(function(student,index){
	return student.score === 90;
});
console.log(result);

true값을 찾으면 find함수는 멈추고 그 값을 return함
위 코드를 이렇게 축약 할 수 있음

const result = students.find((student) => student.score === 90);
console.log(result);

function을 쓸 필요없고 arrow를 쓰고, arrow일때 한문장이면 중괄호, return, 세미콜론 생략 가능

✅ filter() : return 값이 true인 아이들만 모아서 새로운 배열 생성

Q. 수업에 등록한 학생들 찾기

const result = students.filter(function(student){
	return student.enrolled;
});
console.log(result);

위 코드를 이렇게 축약 할 수 있음

const result = students.filter((student) => student.enrolled);
console.log(result);

✅ map() : 배열안에 있는 요소들을 콜백함수에서 가공되어진 return값들로 대체! 즉 값을 변환

Q. 학생들의 점수만 뽑아내기

const result = students.map((student) => student.score);
console.log(result);
  • callback 함수에서 value명 의미있게/알아볼 수 있게 작성

✅ some() : 배열의 요소 중 콜백함수가 return해주는 값에서 true가 있는지 없는지 확인. 하나의 값만 true면 그때 함수 종료

  • 학생들 점수 중 50점보다 낮은 학생 찾기
const result = students.some((student) => student.score < 50);
console.log(result);

✅ every() : 배열의 모든 요소들이 조건에 충족해야 true를 반환. 하나라도 아니라면 false

const result2 = !students.every((student) => student.score >= 50);
console.log(result2);
  • 이 결과는 false가 나옴
  • console.log(!ture) 결과는 false나옴

✅ reduce(prev,curr) :

  • 인자를 함수로 받음
  • 콜백함수가 return하는 값은 누적된 값을 return
  • return되는 curr값이 prev로 들어가서 연결됨
  • 0부터 시작
  • 학생들의 평균 구하기
const result = student.reduce((prev,curr) =>{
	console.log(prev);
    console.log(curr);
    return prev + curr.score;
},0);
let arr=[1,2,3,4,5];
const result = arr.reduce((pre,curr) => {
	return pre+curr;
},0);
console.log(result);
let result=userList.reduce((pre,curr) => {
	if(cur.age > 19){
    	pre.push(cur.name);
    }
    return pre;
},[]);

✅ sort() : 배열 안의 원소를 정렬하는 함수

  • 문자정렬
  • 배열 정렬
  • 배열 자체가 변경
  • 숫자는 문자열로 정렬되서 제대로 정렬 안됨. 함수로 비교처리해줘야함

const fruit=['orange','apple','banana'];
를 오름차순으로 정렬하고 싶다면, fruit.sort();해주면 apple,banana,orange로 정렬된다.

  • 숫자정렬 : 숫자는 아스키 문자 순서로 정렬되어 1,2,3 처럼 정렬되지 않음.
    const score=[4,11,2,10,3,1];를 오름차순으로 정렬시키려면, score.sort(function(a,b){ return a-b; }); 해주면 된다.
    score.sort((a,b) => a-b); arrow function을 사용하여 이렇게 쓸 수도 있다.
    score.sort((a,b) => b-a); 이건 내림차순이다.
let arr=[27, 8, 5, 13];
function fn(a,b){
	return a-b;
}
arr.sort(fn);
consol.log(arr);
/*arr.sort((a,b) => {
	return a-b;
});*/

✅ forEach() :

  • 배열의 모든 수 합치기
  • for, for of
let arr=[1,2,3,4,5];
let result=0;
arr.forEach((num) =>{
	result+=num;
});
console.log(arr);

✅ substring(n,m) : n과 m 사이 문자열 반환

  • n과 m 바꿔도 동작함
  • 음수는 허용하지 않음. 0으로 인식
let desc="abcdefg";
desc.substring(2,5); // cde
desc.substring(5,2); //cde
모두 동일한 문자열을 return

✅ substr(n,m) : n부터 시작해서 m개를 가져옴

let desc="abcdefg";
desc.substr(2,4); // cdef
desc.substr(-4,2); // de
모두 동일한 문자열을 return

✅ trim() : 문자열의 앞 뒤 공백 제거

✅ .includes() : 문자가 있으면 true, 없으면 false반환

profile
정다솔
풀스택 개발자를 꿈꾸는
이전 포스트

프론트엔드스쿨 layout - grid 10/5

다음 포스트

프론트엔드스쿨 js - Math

0개의 댓글