리액트 기초반 1주차(2)
2022. 1. 22. 15:43ㆍ코딩공부/React
JavaScript Array 내장함수
- map
배열에 속한 항목을 변환할 때 사용
어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어줌
콜백함수를 배열의 길이만큼 반복해줌
원본 배열은 변하지 않는다.
const array_num = [0, 1, 2, 3, 4, 5];
// 파라미터는 배열의 요소들(하나하나 들어옴)
const new_array = array_num.map((array_item) =>{
return array_item + 1; // 요소요소들에 +1을 해줌
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);
for문 -> map
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
for (let i = 0; i < animals.length; i++) {
let animal = animals[i];
if (animal === "고양이") {
count += 1;
}
}
console.log(count);
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
animals.map((animal) => {
if (animal === "고양이") {
count += 1;
}
});
console.log(count);
- filter
어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어줌. 원본 배열은 변하지 않는다.
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);
for문 -> filter
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);
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
let cats = animals.filter((animal) => {
return animal.indexOf("고양이") !== -1;
});
console.log(cats);
- concat
배열과 배열을 합치거나 배열에 특정 값을 추가해줌. 원본 배열은 변하지 않는다.
중복은 제거해 주지 않아서 다른 내장함수와 함께 사용해서 제거해줘야한다
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로,
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];
// new 앞에 ...을 빼주면 결과가 [Set(6)]이 나온다. 리스트형이기 때문
// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge); // [0,1,2,3,4,5]
- from
쓰임새가 다양하다.
1. 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때(유사배열은 배열의 내장함수를 못쓰니까 유사배열을 배열로 만듬)
2. 새로운 배열을 만들 때(초기화) 주로 사용한다.
// 배열화 하자!
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 num_array = Array.from(my_name, (item, index) => {return index});
console.log(num_array) // [0, 1, 2, 3, 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]
'코딩공부 > React' 카테고리의 다른 글
코딩앙마 React Js 이벤트 처리 (0) | 2022.01.24 |
---|---|
코딩앙마 React JS CSS 작성법 (0) | 2022.01.22 |
코딩앙마 React JS 컴포넌트, JSX (0) | 2022.01.22 |
코딩앙마 React JS crate-react-app (0) | 2022.01.22 |
리액트 기초반 1주차(1) (0) | 2022.01.22 |