2022. 6. 20. 14:40ㆍReact/한입 크기로 잘라 먹는 리액트(React.js)
const arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
arr.forEach(function (elm) {
console.log(elm);
});
arr.forEach((elm) => console.log(elm));
for문을 이용하여 배열을 나타낼 수 있지만,
forEach문을 사용해서 함수를 나타낼 수 있는데 위의 두 방법과 같이 나타낼 수 있다.
그럼, 배열 값에 값을 곱하려면 어떻게 나타낼 수 있을까?
먼저 기본적으로 push를 사용해서 넣을 수 있다.
const arr = [1, 2, 3, 4];
const newArr = [];
arr.forEach(function (elm) {
newArr.push(elm * 2);
});
console.log(newArr);
이것을 map을 나타내서 나타낼 수도 있다.
const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
return elm * 2;
});
console.log(newArr);
숫자를 포함하는지 안하는지도 확인이 가능하다.
1. forEach함수 사용
const arr = [1, 2, 3, 4];
let number = 3;
arr.forEach((elm) => {
if (elm === number) {
console.log(true);
}
});
2. includes 함수 사용
console.log(arr.includes(number));
하지만 숫자, 문자의 비교일 경우 false를 출력한다.
3. indexOf 함수를 사용하여 포함 숫자가 어디에 있는지 찾을 수 있다.
만약 없는 숫자라면 -1을 출력한다.
4. 문자의 경우 findIndex를 사용하여 비교 가능하다.
const arr = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" }
];
console.log(arr.findIndex((elm) => elm.color === "green"));
그러나 아래와 같이도 표현할 수 있다.
const arr = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" },
{ color: "blue" }
];
console.log(
arr.findIndex((elm) => {
return elm.color === "blue";
})
);
그리고, 똑같은 문자가 두개라면 첫번째 문자의 위치를 출력한다.
이렇게도 나타낼 수 있다.
const arr = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" },
{ color: "blue" }
];
const idx = arr.findIndex((elm) => {
return elm.color === "blue";
});
console.log(idx);
배열 필터링
1. filter함수를 이용하여 출력하면 된다.
const arr = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
{ num: 3, color: "blue" },
{ num: 4, color: "green" },
{ num: 5, color: "blue" }
];
console.log(arr.filter((elm) => elm.color === "blue"));
배열을 자를 수 있는 내장함수
1. slice
const arr = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
{ num: 3, color: "blue" },
{ num: 4, color: "green" },
{ num: 5, color: "blue" }
];
console.log(arr.slice(0, 2));
이렇게 두개의 항목을 출력하는데,
첫번째 인자 begin, 두번째 인자 end라고 하는데,
slice는 end -1까지 함
붙이기
1. concat 사용하기
const arr1 = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
{ num: 3, color: "blue" }
];
const arr2 = [
{ num: 4, color: "green" },
{ num: 5, color: "blue" }
];
console.log(arr1.concat(arr2));
배열 정렬
1. sort는 원본 배열 정렬
let chars = ["나", "다", "가"];
chars.sort();
console.log(chars);
숫자 정렬
숫자 정렬을 sort를 사용해 하려고 했지만, sort는 문자열 중심이기 때문에 앞에 숫자가 0먼저, 1먼저, 2먼저, 3 이렇게 정렬이 된다.
이렇게 만들면 정상적으로 숫자도 정렬이 된다.
배열 내 모든것을 함치는 것
1. join 함수 사용
'React > 한입 크기로 잘라 먹는 리액트(React.js)' 카테고리의 다른 글
3-2. 삼항 연산자(조건문 한 줄로 끝내기) (0) | 2022.06.21 |
---|---|
3-1. Truthy & Falsy (0) | 2022.06.21 |
2-11. 반복문 (0) | 2022.06.17 |
2-10. 배열 (0) | 2022.06.17 |
2-9. 객체 (0) | 2022.06.17 |