반응형
0. Javascript Array-
1. Map
- map은 배열에 속한 항목을 변환할 때 많이 사용한다.
- 어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어준다.
- 즉, 원본 배열은 값이 변하지 않는다.
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.map((array_item) =>{
return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값
console.log(new_array);
// 원본 배열은 그대로 있다.
console.log(array_num);
2. Filter
- filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수이다. (True, False)
- 원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다.
const array_num = [0, 1, 2, 3, 4, 5];
// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
// 특정 조건을 만족할 때만 return 하면 된다.
// return에는 true 혹은 false가 들어가야 한다.
return array_item > 3;
});
console.log(new_array);
// [4, 5]
3. Concat
- 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수.
- 원본 배열은 변하지 않는다.
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = array_num01.concat(array_num02);
console.log(merge);
//[0, 1, 2, 3, 3, 4, 5]
- concat은 중복 항목을 제거해주지 않는다. 다른 내장함수와 함께 사용해서 제거해야 한다.
4. Set
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = [...new Set([...array_num01, ...array_num02])];
// [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 새로운 배열에 넣어주겠단 말
console.log(merge);
// [0, 1, 2, 3, 4, 5]
- Set은 자바스크립트의 자료형 중 하나로, 중복되지 않는 값을 가지는 리스트.
- ... <- 이 점 3개는 스프레드 문법.
5. From
- 배열을 생성할 때 보통 사용함
- 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
- 새로운 배열을 만들 때 (초기화한다고도 표현)
// 배열화
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);
// ["m","e","a","n","0"]
// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열
const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array);
//[0, 1, 2, 3, 4]
// 새 배열을 만들기 (=> 빈 배열을 초기화)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요.
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array);
// [0,1,2,3]
유사배열
- [ 값 ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 배열
- DOM nodelist 등
반응형
배열에서 고양이가 몇 마리인지 세기
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
for (let i = 0; i < animals.length; i++) {
let animal = animals[i];
if (animal === "고양이") {
count += 1;
}
}
console.log(count);
Map 으로 변경
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
animals.map((animal) => {
if (animal === "고양이") {
count += 1;
}
});
console.log(count);
고양이들만 새 배열에 넣기
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
let cats = [];
for (let i = 0; i < animals.length; i++) {
let animal = animals[i];
// indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 것.
// 파라미터로 넘겨준 텍스트가 없으면 -1을 반환.
// 즉 아래 구문은 고양이라는 단어를 포함하고 있는지 검사.
if (animal.indexOf("고양이") !== -1) {
cats.push(animal);
}
}
console.log(cats);
Filter 로 변경
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
let cats = animals.filter((animal) => {
return animal.indexOf("고양이") !== -1;
});
console.log(cats);
특정 과일 개수 세기
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
let fruit = fruit_list[i];
if (fruit == '딸기') {
count += 1;
}
}
console.log(count);
Map 으로 수행
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((f)=>{
if(f == "딸기") count += 1
})
console.log(count)
반응형
'프로그래밍 언어 > Javascript ES6' 카테고리의 다른 글
JS ES6 - Scope, =, Spread, 삼항연산자 (0) | 2021.08.26 |
---|---|
JS ES6 - Class (0) | 2021.08.26 |
댓글