일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 웹 게임을 만들며 배우는 리액트
- 타자 게임 만들기
- react
- 리액트
- 모던자바스크립트
- 인프런
- googleColaboratory
- Concurrently
- node.js로 로그인하기
- props
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 거북이 대포 게임
- vs code 내 node
- 계산맞추기 게임
- Colaboratory 글자 깨짐
- Do it 자바스크립트 + 제이쿼리 입문
- react오류
- spring-boot
- Python
- DB Browser
- intellij
- Spring-Framework
- 노드에 리액트 추가하기
- JS 개념
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- 자바스크립트
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- 모두의 파이썬
- 따라하며 배우는 노드 리액트 기본 강의
- node.js 설치
- Today
- Total
프로그래밍 삽질 중
slice, concat, forEach + 원본을 바꾸는 매서드, 바꾸지 않는 매서드 본문
slice, concat, forEach + 원본을 바꾸는 매서드, 바꾸지 않는 매서드
평부 2022. 7. 20. 17:48*출처 : https://ko.javascript.info/array-methods
* arr.slice([start], [end])
- start 인덱스부터 end 인덱스까지의 요소를 복사한 새로운 배열 반환
- start, end가 둘 다 음수 일때 배열 끝에서 요소 개수 의미
- str.slice와 유사한데 차이점 : 서브 배열(subarray) 배열 반환
- arr.slice()는 인수를 하나도 넘기지 않고 호출하여 arr의 복사본을 만들 수 있음
let arr = ['t', 'o', 'p', 'g', 'u', 'n'];
console.log(arr.slice(1, 3)); //['o', 'p']
console.log(arr.slice(-2)); //['u', 'n']
* arr.concat(arg1, arg2...);
- 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용
- concat 메서드는 배열의 모든 요소를 복사하고 item을 추가해 새로운 배열을 만든 후 이를 반환
- arg1, arg2가 배열이면 이 배열의 인수를 기존 배열에 더함
let arr = [1, 2];
console.log(arr.concat([3, 4])); //[,1, 2, 3, 4];
console.log(arr.concat([3, 4], [5, 6]); //[,1, 2, 3, 4, 5, 6];
console.log(arr.concat([3, 4], 5, 6)); //[,1, 2, 3, 4, 5, 6];
* arr.forEach()
- 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌(반복문 같음)
- arr.forEach(function(item, index, arr) {}
const arr = ['topgun', 'navy', 'captin', 'maverick'];
arr.forEach((item, index, array) => {
console.log(`item : ${item} / index: ${index} / array : ${array[index]}`);
});
//결과
item : topgun / index: 0 / array : topgun
item : navy / index: 1 / array : navy
item : captin / index: 2 / array : captin
item : maverick / index: 3 / array : maverick
* arr.includes(item, from)
- 인덱스 from 부터 시작해 item이 있는지 검색하는데 해당 요소를 발견하면 숫자로 반환
- 요소의 위치를 정확히 알고 싶은 게 아니라 요소가 배열 내에 존재하는 지 여부만 확인
let topGun1 = ['maverick', 'goose', 'iceman'];
let topGun2 = ['maverick', 'iceman'];
console.log(topGun1.indexOf('maverick')); //0 (true)
console.log(topGun2.indexOf('goose')); //-1 (false)
* 원본을 바꾸지 않는 배열 매서드
= concat, slice, every, map, find, findIndex, includes
* 원본을 바꾸는 배열 매서드
= push, pop, unshift, shift, splice, sort
* 카드 뒤집기에서 slice, concat, forEach 사용
//concat
const total = 12;
const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink'];
let colorCopy = colors.concat(colors);
console.log(colorCopy); //2개씩 뒤집기 위해 colors는 6가지지만 colorCopy는 12개
//concat & splice
const shuffled = [];
const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink'];
let colorCopy = colors.concat(colors);
for(let i=0; colorCopy.length > 0; i+= 1) {
const randomIndex = Math.floor(Math.random() * colorCopy.length);
shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1));
}
console.log(shuffled); //12개의 색상값들이 랜덤하게 섞임
//forEach
document.querySelectorAll('.card').forEach((card, index) => {
setTimeout(() => {
card.classList.add('flipped'); //flipped 부분은 css 부분
}, 1000 + 100 * index); //1초 -> 1.1초 -> 1.2초 ...
})
setTimeout(() => {
document.querySelectorAll('.card').forEach((card) => {
card.classList.remove('flipped');
})
}, 5000);
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
자바스크립트 개념 5가지 정리 - 추가 중 (0) | 2022.07.21 |
---|---|
Let's Get IT 자바스크립트 프로그래밍 - 카드 짝 맞추기 (0) | 2022.07.20 |
Let's Get IT 자바스크립트 프로그래밍 - 텍스트 RPG (0) | 2022.07.20 |
Let's Get IT 자바스크립트 프로그래밍 - 틱택토게임, 컴퓨터랑 하기 (0) | 2022.07.15 |
Let's Get IT 자바스크립트 프로그래밍 - 반응속도 테스트, 상위 5개만 보여주기 (0) | 2022.07.14 |