[javascript] ECMAScript6의 배열과 새롭게 추가된 기능

[모던자바스크립트]

 

10. 4. 1 비구조화 할당

:비구조화 할당은 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장입니다.

 

배열의 비구조화

See the Pen [javascript] 배열의 비구조화 할당 by jeongahlee (@jeongahlee) on CodePen.

 

 

 

객체의 비구조화 할당(Object Destructuring)

 

//1. 기본적인 사용법

var {a: x, b: y} = {a:1, b:2};
console.log(x,y)  // 1 2

 

See the Pen [javascript] 객체의 비구조화 할당 by jeongahlee (@jeongahlee) on CodePen.

 

 

반복 가능한 객체의 비구조화 할당

 

var [a,b,c] = "ABC";

function* createNumbers(from,to){

 while(from <= to) yield from++;

}

var [a,b,c,d,e]  = createNumbers(10,15)

// a= 10, b=11, c=12, d=13,e=14

 

중첩된 자료 구조의 비구조화 할당

:중첩된 객체나 배열에도 비구조화 할당을 적용할 수 있습니다.

 

var [a, [b,c]] = [1,[2,3]]; // var a=1, b=2, c=3

var {s:x, b: {C:y,d:z}} = {a:1,b:{c:2,d:3}} ; 

//var x=1, y=2, z=3

 

var person = {name: "Tom", age: 17, hobby: ["Tennis","Music"]};

var {name, age, hobby:[hobby1]} = person;

// var name= "Tom", age = 17, hobby1 = "Tennis"

 

 

 

10.4.2 전개 연산자

: ...은 전개 연산자(spread operator) 라고 합니다.  

전개 연산자는 반복가능한(이터러블한) 객체를 반환하는 표현식 앞에 표기를 하며, 이를 통해 반복 가능한 객체를 배열 리터럴 또는 함수의 인수 목록으로 펼칠 수 있습니다. 

[..."ABC"] // ["A","B","C"] 

f(..."ABC") // f("A","b","C")

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

f(...[1,2,3]) // f(1,2,3)

 

See the Pen [javascript] 전개 연산자 by jeongahlee (@jeongahlee) on CodePen.

 

 

 

10.4.3 ArrayBuffer와 형식화 배열

: 연속된 데이터 영역(버퍼)를 조작하기 위해 만들어진 객체입니다.

이를 활용하면 배열고 이미지 데이터를 빠르게 읽고 쓸 수 있는데, 원래는 웹 프라우저에서 WebGL을 사용하여 3차원 그래픽을 구현할 용도로 만들어진 것들입니다. ArrayBuffer를 확보하여 DataView와 형식화 배열은 버퍼에서 뷰를 제공합니다. 버퍼의 뷰는 버퍼를 읽고 쓸 때 사용합니다. DataViw를 사용하면 뷰를 ArrayBuffer보다 세밀하게 제어할 수도 있습니다.



ArrayBuffer는 바이트로 구성된 배열로, 다른 언어에서는 종종 "바이트 배열"이라고 부릅니다. ArrayBuffer에 담긴 정보를 직접 수정하는 것은 불가능하지만, 대신 형식화 배열이나 DataView 객체를 통해 버퍼를 특정 형식으로 나타내고, 이를 통해 버퍼의 내용을 읽거나 쓸 수 있습니다.

 

ArrayBuffer 생성자

: 메모리에 고정길이를 가진 인접한 영역을 확보합니다. 단, 메모리에 영역을 확보하는 역할만 할 뿐 버퍼를 조작하는 메서드는 제공하지 않습니다. 버퍼를 조작하려면 형식화 배열 (TypedArray 객체) 또는 DataView객체를 사용해야 합니다.

 

DataView는 버퍼에 임의 데이터를 읽고 쓰기 위해 getter/setter API를 제공하는 저레벨 인터페이스입니다.
또한, 바이트 순서를 제어할 수 있습니다. 기본으로 big-endian이고 getter/setter 메서드로 little-endian으로 설정될 수 있습니다.

ArrayBuffer()
새로운 ArrayBuffer 객체를 생성합니다.

ArrayBuffer() 생성자

 

ArrayBuffer 속성

ArrayBuffer.lengthArrayBuffer 
생성자의 길이 속성으로, 값은 1입니다.

get ArrayBuffer[@@species]
파생 객체를 생성할 때 사용할 생성자 함수입니다.

ArrayBuffer.prototype
모든 ArrayBuffer 객체에 속성을 추가할 수 있습니다.

get ArrayBuffer[@@species]

 

 

ArrayBuffer 메서드

ArrayBuffer.isView()
주어진 매개변수가형식화 배열객체 또는DataView와 같은ArrayBuffer의 뷰면true를, 아니면false를 반환합니다.


ArrayBuffer.transfer()
주어진 버퍼의 내용으로 새로운 버퍼를 만들고, 그 길이를 지정한 길이만큼 자르거나 확장(0 초기화)한 후 반환합니다.

ArrayBuffer.transfer()

ArrayBuffer.isView()

 

ArrayBuffer 인스턴스

:모든 ArrayBuffer 인스턴스는 ArrayBuffer.prototype을 상속합니다.

 

속성

ArrayBuffer.prototype.constructor

객체의 프로토타입을 생성하는 함수를 지정합니다. 초깃값은 내장 ArrayBuffer 생성자입니다.

 

 

ArrayBuffer.prototype.byteLength 

Read onlyArrayBuffer의 바이트 길이입니다. 처음 생성 시 정해지며 변경할 수 없습니다.

 

ArrayBuffer.prototype.byteLength

 

메서드

ArrayBuffer.prototype.slice()

ArrayBuffer를 지정한 위치에서 잘라낸 새로운 ArrayBuffer를 반환합니다.

ArrayBuffer.prototype.slice()

 

 

 

다음 코드는 8바이트 버퍼를 생성하고, Int32Array 뷰로 그 버퍼를 참조합니다.

 

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);

 

 

 

See the Pen [javascript] ArrayBuffer by jeongahlee (@jeongahlee) on CodePen.

 

 

 

 

 

 

형식화 배열(TypeArray객체)

: ArrayBuffer가 확보한 버퍼를 데이터의 저장 장소로 이용하여 데이터의 빠른 읽기와 쓰기를 구현한 객체입니다.또한 배열같은 객체이고 원시(raw) 이진 데이터에 액세스하기 위한 메커니즘을 제공합니다.

자바스크립의 배열은 Array객체입니다. Array 객체는 배열 요소의 추가와 삭제를 동적으로 할 수 있고 다양한 메서드를 이용할 수 있어 편리하지만 배열 요소를 읽고 쓰는 속도가 느리다는 단점이 있습니다. 

 

형식화 배열을 Array객체인 일반배열과의 차이점

• 형식화 배열 요소의 개수는 제한적이다.
• 형식화 배열은 길이가 고정되어 있으며 요소를 추가하거나 삭제할 수 없다.
• 형식화 배열에서는 Array.prototype의 메서드를 사용할 수 없다. 하지만 TypedArray.prototype이 제공하는 메소드는 사용 할 수 있다.
• 형식화 배열을 생성하면 모든 요소가 0으로 초기화 된다.

 

 

버퍼 및 뷰: 형식화 배열 구조

:JavaScript 형식화 배열은 구현을 버퍼 및 뷰로 나눕니다.

버퍼 (ArrayBuffer 객체에 의해 구현됨)는 데이터 부분(chunk, 덩어리)을 나타내는 객체입니다

뷰는 문맥(context, 즉 데이터 형, 시작 오프셋 및 요소 수)을 제공해 데이터를 실제 형식화 배열로 바꿉니다.

형식화 배열 뷰는 자체 설명형 이름이 있으며 Int8, Uint32, Float64 등과 같은 모든 일반 숫자 형을 위한 뷰를 제공합니다.