[자바스크립트 ES6+ 기본] 14. Array 오브젝트

from()

• 첫 번째 파라미터의 오브젝트를 Array 오브젝트로 변환

const like = {0:"zero", 1:"one", length:2};
const list = Array.from(like);
log(list);

log(Array.from("ABC"));

// [zero, one]
// [A, B, C]

function args(){
  return Array.from(arguments);
};
log(args(1, 2, 3));

// [1, 2, 3]

// <li class=sports>축구</li>
// <li class=sports>농구</li>
const nodes = document.querySelectorAll(".sports");
const show = (node) => log(node.textContent);
Array.from(nodes).forEach(show);

// 축구
// 농구

• 두 번째 파라미터에 함수 작성opt
  • 이터러블 오브젝트를 전개할 때마다 호출

const like = {0:"zero", 1:"one", length:2};
log(Array.from(like, value => {
  return value + "변경";
}));

// [zero변경, one변경]

• 세 번째 파라미터에 오브젝트 작성opt
  • 호출된 함수에서 this로 참조

const like = {0: 10, 1: 20, length:2};
log(Array.from(like, function(value){
  return value + this.plus;
}, {plus: 70}));

// [80, 90]

---

of()

• 파라미터 값을 Array로 변환, 반환

const result = Array.of(1, 2, 3);
log(result);
log(Array.of());

// [1, 2, 3]
// []

• 파라미터에 변환 대상 값을 작성
  • 콤마로 구분하여 다수 작성 가능

---

배열 엘리먼트 복사

copyWithin()

• 범위 값을 복사하여 같은 오브젝트에 설정

• 두 번째 파라미터의 인덱스부터 복사하여

  • 첫 번째 파라미터 인덱스부터 순서대로 설정(대체)

const list = ["A", "B", "C", "D", "E"];
const copy = list.copyWithin(1, 3);
log(list);
log(copy);

// [A, D, E, D, E]
// [A, D, E, D, E]

• 세 번째 파라미터의 인덱스 직전까지 복사

const list = ["A", "B", "C", "D", "E"];
list.copyWithin(0, 2, 4);
log(list);

// [C, D, C, D, E]

• 복사 시작 인덱스와 끝 인덱스를 작성하지 않으면 배열 전체 복사

const list = ["A", "B", "C", "D", "E"];
list.copyWithin(3);
log(list);

// [A, B, C, A, B]

• copyWithin() 함수 특징
  • shoallow copy(얕은 복사
  • 같은 배열 안에서 이동하는 개념
  • 배열의 엘리먼트 수가 변동되지 않음

const list = ["A", {B: "가"}, "C"];
log(list.copyWithin(0, 1));

// [{B: 가}, C, C]

• 배열 안에서 엘리먼트를 이동은
  • 엘리먼트를 왼쪽, 오른쪽으로 이동하는 것
  • 처리 속도가 빠름

---

Generic

• 스펙에서 아래 문장을 볼 수 있음

  • copyWithin function is intentionally generic
  • ES7 스펙, 22.1.3.3 copyWithin()
  • MDN copyWithin()

• generic 사용 형태

const like = {0: 10, 1: 20, 2: 30, length: 3};
log(Array.prototype.copyWithin.call(like, 1, 0));

// {0: 10, 1: 10, 2: 20, length: 3}

• generic이 뜻하는 것은?
  • copyWithin()이 Array 메소드이므로 Array 오브젝트가 처리 대상이지만
  • generic은 Array 오브젝트가 아닌 Array-like, 이터러블 오브젝트를 처리할 수 있다는 것을 뜻함

---

같은 값, 인덱스 검색

find()

• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출
  • 콜백 함수에서 true를 반환하면 find()를 종료하면서
  • 현재 처리중인 엘리먼트 값을 반환

const list = ["A", "B", "C"];
const cb = (value, index, all) => value === "B";
const result = list.find(cb);
log(result);

// B	

const list = ["A", "B", "C"];
const cb = (value, index, all) => value === 77;
const result = list.find(cb);
log(result);

// undefined

const list = ["A", "B", "C"];
function cb(value, index, all){
  return value === "A" && value === this.check;
};
const result = list.find(cb, {check:"A"});
log(result);

// A

• 파라미터: 엘리먼트, 인덱스, 배열 전체

findIndex()

• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출
  • 콜백 함수에서 true를 반환하면 findIndex()를 종료하면서
  • 현재 처리중인 엘리먼트의 인덱스를 반환

const list ["A", "B", "C"];
const cb = (value, index, all) => value === "B";
log(list.findIndex (cb));

// 1

cosnt list = ["A", "B", "C"];
const cb = (value, index, all) => value === 77;
const result = list.findIndex(cb);
log(result);

// -1

• 파라미터: 엘리먼트, 인덱스, 배열 전체

---

대체, 포함 여부

fill()

• 범위 값을 지정한 값으로 설정, 반환

• 설정 방법

  • 시작 인덱스부터 끝 인덱스 직전까지
  • 첫 번째 파라미터 값으로 설정(대체)

const list = ["A", "B", "C"];
list.fill("책", 1);
log(list);

// [A, 책, 책]

const list = ["A", "B", "C", "D"];
list.fill("책", 1, 3);
log(list);

// [A, 책, 책, D]

const list = ["A", "B", "C"];
list.fill("책");
log(list);

// [책, 책, 책]

• Generic 함수

const like = {0:"A", 1:"B", 2:"C", length: 3};
log(Array.prototype.fill.call(like, "책", 1));

// {0: A, 1: 책, 2: 책, length: 3}

includes()

• 대상 배열에
  • 첫 번째 파라미터 값이 있으면 true, 없으면 false 반환
  • 두 번째 파라미터는 선택이며 비교 시작 인덱스 작성

const list = [10, 20, 30];
log(list.includes(10));
log(list.includes(50));
log(list.includes(10, 1));

// true
// false
// false

• 제너릭 함수

const like = {0: 10, 1:, 20, 2: 30, length: 3};
log(Array.prototype.includes.call(like, 20));

// true

---

배열 차원 변환

flat()

• 배열 차원을 변환하고 새로운 배열로 설정하여 반환
  • 파라미터의 대상 깊이에 따라 변환이 다름

const list = [1, 2, [3, 4]];
const result = list.flat();
log(result);
log(list);

// [1, 2, 3, 4]
// [1, 2, [3, 4]]

• 파라미터에 0을 작성한 경우

const list = [1, 2, [3, 4]];
log(list.flat(0));

// [1, 2, [3, 4]]

• 파라미터에 1보다 큰 값을 작성

const list = [1, 2, [3, 4, [5, 6]]];
log(list.flat(2));

// [1, 2, 3, 4, 5, [6]]

• 빈 엘리먼트를 삭제

const list = [1, 2, . . . [3, 4]];
log(list.length);
const change = list.flat();
log(change);
log(change.length);

// 6
// [1, 2, 3, 4]
// 4

flatMap()

• flat()와 기본 기능은 같음

• 배열을 반복하면서 콜백 함수 호출

  • 파라미터: 엘리먼트, 인덱스, 배열 전체
  • 콜백 함수에서 반환한 값을 배열로 전환

const list = [10, 20];
const cb = (element, index, all) => {
  return element + 5;
};
log(list.flatMap(cb));
log(list.map(cb));

// [15, 25]
// [15, 25]

• map()과 차이

const list = [10, 20];
const cb = (element, index, all) => {
  return [element + 5];
};
log(list.map(cb));
log(list.flatMap(cb));

// [[15], [25]]
// [15, 25]

---

Array 이터레이터 오브젝트 생성

entries()

• Array 오브젝트를 Array 이터레이터 오브젝트로 생성, 반환

• 배열의 엘리먼트를 [key, value] 형태로 변환

  • Array 이터레이터 오브젝트 구조

const iterator = ["A", "B"].entries();
log(iterator.next().value);
log(iterator.next().value);

// [0, A]
// [1, B]

• for-of 문으로 전개

const iterator = ["A", "B"].entries();
for (const property of iterator) {
  log(property);
};

// [0, A]
// [1, B]

// 분할 할당
const iterator = ["A", "B"].entries();
for (const [key, value] of iterator) {
  log(`${key}: ${value}`);
};

// 0: A
// 1: B

• 이터레이터는 다시 반복할 수 없음

const iterator = ["A", "B"].entries();
for (const [key, value] of iterator){
  log(`${key}: ${value}`);
};
for (const property of iterator){
  log("다시 전개");
};
log(iterator.next());

// 0: A
// 1: B
// {value: undefined, done: true}

keys()

• Array 오브젝트를 Array 이터레이터 오브젝트로 생성, 반환
  • entries()와 같으며
  • [key, value] 형태에서 value는 반환하지 않고 key만 반환
• 배열 인덱스가 key가 됨

const iterator = ["A", "B"].keys();
log(iterator.next());
log(iterator.next());
log(iterator.next());

// {value: 0, done: false}
// {value: 1, done: false}
// {value: undefined, done: true}

const iterator = ["A", "B"].keys();
for (const property of iterator) {
  log(property);
};

// 0
// 1

values()

• Array 오브젝트를 Array 이터레이터 오브젝트로 생성, 반환

• [key, value] 형태에서

  • key는 반환하지 않고 value만 반환

• 배열의 엘리먼트 값이 value가 됨

const iterator = ["A", "B"].values();
log(iterator.next());
log(iterator.next());
log(iterator.next());

// {value: A, done: false}
// {value: B, done: false}
// {value: undefined, done: true}

const iterator = ["A", "B"].values();
for (const property of iterator) {
  log(property);
};

// A
// B

• [Symbol.iterator]() 사용

const check = Array.prototype.values === Array.prototype[Symbol.iterator];
log(check);

const iterator = ["A", "B"][Symbol.iterator]();
for (const property of iterator) {
  log(property);
};

// true
// A
// B

• 값이 연동됨

let list = ["A", "B"];
let iterator = list.values();
list[0] = "연동";
log(iterator.next());
log(iterator.next());

// {value: 연동, done: false}
// {value: B, done: false}