일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- UX
- react
- User Flow
- UI
- 자바스크립트#JS#var#let#const#undefined#null
- js
- dom
- removeCookie
- JS#3일차달리자#초반인데#시간금방~
- 자바스크립트#JS#slice#splice
- 헷갈린다~
- ㄷㅌ
- 내장고차함수
- slice/splice/split
- Beesbeesbees
- cmarket
- for~in/for~of
- 노드교과서
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- CSS
- children vs childrenNodes
- redux상태유지
- @redux-toolkit
- variable#function
- https://www.daleseo.com/js-array-slice-splice/
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- toString#String
- https://developer-talk.tistory.com/299
- 자바스크립트
- 자바스크립트#조건문#문자열
- Today
- Total
Daily Front_Minhhk
[JS] 배열(push,pop / unshift,shift) + (for in/for of, slice/splice/split, concat, join) 본문
[JS] 배열(push,pop / unshift,shift) + (for in/for of, slice/splice/split, concat, join)
Minhhk 2022. 11. 3. 16:47배열인지 아닌지 확인하기
let word = [’a’, ’b’, ’c’, ’d’];
type of 를 사용하면 object 라고 나온다.
근데 진짜 객체인지 배열인지 구분이 어렵다.
Array.isArray(word) 함수이다.
배열이면 true , 아니면 false를 출력한다.
let word = [’a’, ’b’, ’c’, ’d’];
console.table(world)
배열의 요소 추가 및 삭제
배열 뒤를 조작 시 ??
world.push(’e’) 를 하면 word = [’a’, ’b’, ’c’, ’d’, ‘e’] ⇒ 뒤쪽에 추가
world.pop() 을 하면 word = [’a’, ’b’, ’c’, ’d’, ‘e’] ⇒ 뒤쪽 삭제
앞을 조작 시??
world.shift() 를 하면 word = [’b’, ’c’, ’d’] 가 된다 ⇒ 앞쪽 삭제
world.unshift(’e’) 을 하면 word = [ ‘e’, ’a’, ’b’, ’c’, ’d’] 가 된다 ⇒ 앞쪽에 추가
👩🏻🎓 빈 배열 시,,, if (arr.length ===0) 그리고 if(arr === ‘’)
둘다 반복문으로 사용 되는데요 하나는 객체를 탐색하고 나머지 하나는 배열 요소를 탐색합니다.
for ...in
for ...of
for ...in (객체 순환)
var obj = {
a: 1,
b: 2,
c: 3
};
for (var item in obj) {
console.log(item) // a, b, c
}
위처럼 객체의 프로퍼티가 나오는것을 확인해 볼 수 있습니다.만약 for ...of 를 쓴다면?
var obj = {
a: 1,
b: 2,
c: 3
};
for (var item of obj) {
console.log(item) // Uncaught TypeError: obj is not iterable
}
for ...of (배열 순환)
var arr = [1, 2, 3];
for (var item of arr) {
console.log(item); // 1, 2, 3
}
배열 순환이 아주 잘 되는군요.그렇다면 for ...in 을 하게 되면 어떻게 될까요?
var arr = [1, 2, 3];
for (var item in arr) {
console.log(item); // 0, 1, 2
}
사실 자바스크립트에서는 배열도 객체이기 때문에 그 객체의 키값에 해당하는게 나오는데요.
배열로 따지면 index라고 생각하면 되겠네요.
즉, 두가지로 요약할 수 있겠는데
for ...in // 객체 순환
for ...of // 배열 값 순환
concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
배열 합치기 3가지 방법
- concat() 함수
- ... spread operator (전개 연산자)
- push() 함수와 spread operator
참조 링크,,, https://hianna.tistory.com/397
slice, splice, split 차이점
slice()** **메서드는 어떤 배열의 begin부터 end까지(end미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
원본 배열은 바뀌지 않습니다.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
split() 메서드는 [String](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String>) 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]
join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
정처기 보면 서 JAVA로 보았던 피보나치를 보았다,, 여기선 배열로 리턴 하는 것!
피보나치 란?
0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1.
그 다음 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합!!
function fibonacci(num) {
let fibo = []
for(i=0; i<=num; i++){
if(i===0){
fibo.push(0)
} else if(i===1){
fibo.push(1)
} else { // i=2
fibo.push(fibo[i-2]+fibo[i-1]) // 기억하자 i-2 i-1
}
}
return fibo
}
function fibonacci(num) {
let fibo = []
for(i=0; i<=num; i++){
if(i===0 || i===1){
fibo.push(i)
}
else { // i=2
fibo.push(fibo[i-2]+fibo[i-1]) // 기억하자 i-2 i-1
}
}
return fibo
}
😵💫 오늘도 여기서 마무리,, 내일은 객체!
미리 걱정 하지 말랬는데
다음주와 다다음주~~ 걱정이 된 다?
'Code개발일지' 카테고리의 다른 글
[JS] 원시자료형(stack) / 참조자료형(heap) (0) | 2022.11.07 |
---|---|
[JS] 객체 (0) | 2022.11.04 |
[LINUX] 기본적인 명령어 외 nvm,npm / RWE(읽기 쓰기 실행) (0) | 2022.11.02 |
[간단정리] innerText 와 textContent 차이점 / Number와 parseInt 차이점 (0) | 2022.11.01 |
[CSS, JS] 계산기에 기능 추가하기! (2) | 2022.11.01 |