Daily Front_Minhhk

[JS] 배열(push,pop / unshift,shift) + (for in/for of, slice/splice/split, concat, join) 본문

Code개발일지

[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가지 방법

  1. concat() 함수
  2. ... spread operator (전개 연산자)
  3. 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
}
😵‍💫 오늘도 여기서 마무리,, 내일은 객체!
미리 걱정 하지 말랬는데
다음주와 다다음주~~ 걱정이 된 다?