220315

배열함수

filter: 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만드는 함수.
원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다.

const arr = [0, 1, 2, 3, 4, 5];
const new_arr = arr.filter((arr_item) => {
  return arr_item > 3;
});

console.log(new_arr); // [4, 5]

map: 배열에 속한 항목을 변환할때 많이 사용한다.
어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만든다.
원본 배열은 값이 변하지 않음.

const arr = [0, 1, 2, 3, 4, 5];
const new_arr = arr.map((arr_item) => {
	return arr_item +1;
});
console.log(new_arr); // [1, 2, 3, 4, 5, 6]
console.log(arr); // [0, 1, 2, 3, 4, 5]

concat: 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수.
(원본 배열은 변하지 않음)

const arr_01 = [0, 1, 2, 3];
const arr_02 = [3, 4, 5];

const merge = arr_01.concat(arr_02);
console.log(merge); // [0, 1, 2, 3, 3, 4, 5]

중복항목을 제거하고 싶을때는

const arr_01 = [0, 1, 2, 3];
const arr_02 = [3, 4, 5];
const merge = [...new Set([...arr_01, ...arr_02])];
// set은 중복되지 않는 값을 가지는 리스트.
console.log(merge); // [0, 1, 2, 3, 4, 5]

from: 배열로 만들거나 어떤 것을 복사해서 새로운 배열로 만들때

const a = "something";
const a_arr = Array.from(a);
console.log(a_arr); // ['s', 'o', 'm', 'e', 't', 'h', 'i', 'n', 'g']

const b = Array.from('someone', (item, index) => {return index});
console.log(b); // [0, 1, 2, 3, 4, 5, 6]

dApp을 리액트를 사용하여 작업하고 있다.
라우팅해서 페이지를 나누다보니
css가 한번 엉키면 한 곳을 건드리면 다른 곳에서 바뀐다.
처음부터 기획을 잘 해야 수정도 자유로울 것 같다.