javascript - ES6(1) 배열

Immutable array 만들기

const list = [1, 2, 3]
list2 = [].concat(list, 4)

console.log(list2) // [1,2,3,4]
console.log(list) // [1,2,3]

string에 새로운 메소드

let str = "hello"
let matchStr = "h"

console.log(str.startsWith(matchStr)) // true

console.log(str.includes("h")) // true

startsWith

인자의 string이 객체의 시작 string과 같으면 true반환(endsWith도 있음)

includes

객체가 인자의 string을 가지고 있으면 true 반환

for of

const data = [1,2,undefined, null, ""]

Array.prototype.getIndex = function(){}

for(let idx in data){
  console.log(data[idx]) // 1 2 undefined null   [Function]
}

for in은 객체 순회용 근데 배열도 순회 가능하다. for in의 문제점은 자신이 가지고 있지 않은 데이터까지 포함해서 출력한다. Array.protype 객체에 getIndex란 함수를 만들면 data 배열은 상위 배열(객체)가 가진 속성까지 다 출력한다.

const data = [1,2,undefined, null, ""]

Array.prototype.getIndex = function(){}

for(let val of data){
  console.log(val) // 1 2 undefined null   
}

for of를 하면 잘 나온다. string도 문자 단위로 출력한다.

spread operator

let arr = [1,2,3]
let newArr = [...arr]

console.log(newArr) // [1,2,3]
console.log(arr) // [1,2,3]
console.log(arr === newArr) // false

spreae 연산자는 배열을 복사하는데 참조는 같지 않다.

spread operator 활용

let arr = [1,2,3, 100, 200]
let newArr = ["a", ...arr, "b"]

console.log(newArr) // [ 'a', 1, 2, 3, 100, 200, 'b' ]

쉽게 배열에 추가를 할 수 있다.

let arr = [100, 200 ,300]

function sum(a,b,c){
  return a + b +c
}

console.log(sum.apply(null, arr)) // 600
console.log(sum(...arr)) // 600

배열 요소를 개별적으로 함수 처리를 할 때 apply를 이용하여 배열을 인자로 주고 함수를 실행했다. spread 연산자는 더 쉽게 할 수 있다.

Array.from()

function addMark() {
    let newArr = []

    for (let i = 0; i < arguments.length; i++) {
        newArr.push(arguments[i] + "!")
    }
    console.log(newArr) // [ '1!', '2!', '3!', '4!' ]
}

addMark(1, 2, 3, 4)

arguments를 이용해서 addMark로 들어오는 인자를 for문으로 순회하여 !를 찍어서 출력하고 배열로 만들었다. map을 이용하면 더 간단하다.

function addMark(){
 let newArr = Array.from(arguments)
 let newData = newArr.map(v => {return v + "!"})
 console.log(newData) // [ '1!', '2!', '3!', '4!' ]
}

addMark(1,2,3,4) 

여기서 arguments는 배열이 아니기 때문에 map을 사용하지 못한다 그래서 Array.from을 이용해서 배열로 바꿔주고 사용하면 된다!

출처 : https://www.inflearn.com/course/es6-%EA%B0%95%EC%A2%8C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/lecture/6973?speed=1.5