ch10.Array.Taek.md

ch10 배열의 기능 개선

• 새로운 생성 메소드
• 유용한 편의 메소드
• 타입 배열 만드는 능력

10.1 배열 만들기

• Array.prototype.slice().call()

• [].slice().call()

• Array.from()

• Array.of()

• [...args]

10.1.1 Array.of() 메소드

let items = new Array(2); // length: 2로 초기화
items = new Array("2"); // length: 1, items[0] = "2" 로 초기화
items = new Array(1, 2); // length: 2, items[0] = 1, items[0] = 2

• Array.of()
  • Array 생성자와 유사하게 동작하지만
    • 숫자 값 하나가 전달 된 경우에도 특별하게 처리하지 않는다.

function createArray(arrayCreator, value) {
    return arrayCreator(value);
}

let items = createArray(Array.of, value);

• value가 숫자가 아니라는 것을 보장하지 못하면 Array를 전달하는 것은 위험하다.

10.1.2 Array.from() 메서드

• Transfer non-Array Object to Array Object was difficult in es5

to convert Array-Like Object, arguments, to Array Object in es5 as below

function makeArray(arrayLike) {
    var result = [];
    for (var i = 0; len = arrayLike.length; i < len; i++) {
        result.push(arrayLike[i]);
    }
    return result;
}

function doSomething() {
    var args = makeArray(arguments);
    // args 변수 사용
}

with Array.prototype.slice.call();

function makeArray(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}

function doSomething() {
    var args = makeArray(arguments);
    // args 변수 사용
}

In es6, you can use Array.from() method

function doSomething() {
    var args = Array.from(arguments);
    // args 변수 사용
}

매핑 변환

• __두 번째 인자__Array.from()에 두 번째 인자로 매핑 함수를 제공할 수 있다.

function translate() {
    return Array.from(arguments, (value) => value + 1);
}

let numbers = translate(1, 2, 3);
console.number(numbers); // 2, 3, 4

It is like a map.

var x = [1, 2, 3].map(value => value + 1);

• 세 번째 인자: 매핑 함수의 this 값을 나타내는 세 번째 인자를 선택적으로 전달할 수도 있다.

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
};

function translate() {
    return Array.from(arguments, helper.add, helper)
}

let numbers = translate(1, 2, 3);
console.log(numbers); // 2, 3, 4

이터러블에서 사용하는 방식

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};

let number2 = Array.from(numbers, (value) => value + 1);
console.log(number2);

객체가 유사 배열이고 이터러블이라면, Array.from()에서 변환 값을 결정할 때 이터레이터가 사용된다.

10.2 배열의 새로운 메서드

• 새로운 메서드
  • find()
  • findIndex()
    • 어떤 값을 가지는 배열의 사용을 돕기 위한 메서드
  • fill()
  • copyWithin()
    • 숫자만 사용하도록 es6에 도입된 배열 형태인 타입 배열의 사용례에서 영향을 받았다.

10.2.1 find()와 findIndex() 메서드

• es5
  • indexOf()
  • lastIndexOf()
    • 하나의 값만 검색 가능했다.
• es6
  • find()
    • return value;
  • findIndex()
    • 두 개의 인자를 받는다. (parameters)
    • callback
      • 배열 요소
      • 배열 요소의 인덱스
      • 배열
        • same as map() and forEach() do
      • return true if array element satisfies the defined condition
    • this which will be used in callback above // optional
    • return index

let numbers = [25, 30, 35, 40, 45];

console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

• These mathods are appropriate in finding an Array element that satisfies a condition

10.2.2 fill() 메서드

• override Array values with a recieved value

let numbers = [1, 2, 3, 4];
numbers.fill(1);

console.log(numbers.toString()); // 1,1,1,1

numbers.fill(0, 1, 3);
console.log(numbers.toString()); // 1,0,0,1

• can use start and end of index

• negative number

  • -1 === array.length - 1

10.2.3 copyWithin() 메서드

let numbers = [1, 2, 3, 4];

// 배열 인덱스 2에서 시작하는 값에 붙여넣음 >>> numbers[2] == 3
// 배열 인덱스 0에서 시작하는 값을 복사
// 인덱스 1에서 값 복사를 멈춤
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1, 2, 1, 4

10.3 타입 배열

• 특수한 목적을 가지고 만들어짐
  • 숫자 타입과 동작하도록 설계
  • canvas >> WebGL 속도 개선

10.3.1 숫자 데이터 타입

• 자바스크립트 부동소수점 숫자 표현을 저장
  • 64비트 사용하는 IEEE 754
• 타입 배열은 여덟 가지 다른 숫자 타입의 저장 공간과 조작을 허용한다.
  • 검색 lol

10.3.2 배열 버퍼

• 모든 타입 배열은 버퍼에 기초
• 배열 버퍼는 지정된 수의 바이트를 포함하는 메모리 장소

let buffer = new ArrayBuffer(10); // 10바이트 할당
console.log(buffer.byteLength); // 10

let buffer2 = buffer.slice(4, 6);
console.log(buffer2.byteLength); // 2

• can use slice()

벼열 버퍼는 항상 만들어질 때 명시한 정확한 바이트 수를 나타낸다.
배열 버퍼에 포함된 데이터는 변경할 수 있지만 배열 버퍼의 크기는 절대 변경할 수 없다.

10.3.3 뷰와 함께 배열 버퍼 조작하기

• 배열 버퍼: 메모리 장소
• 뷰: 메모리를 조작하는 데 사용할 인터페이스

...

아 지루해서 다음에 다시 정리.. lol..........

타입 배열이 왜 필요한지 잘 모르겠다....... lol~