es6 배열 의 확장 연산 자 조작 사례 분석

본 논문 의 사례 는 es6 배열 의 확장 연산 자 조작 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
확장 연산 자(spread)는 세 개의 점(...)입 니 다.이것 은 rest 매개 변수의 역 연산 과 같 아서 하나의 배열 을 쉼표 로 구 분 된 매개 변수 서열 로 바 꿉 니 다.

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]

이 연산 자 는 주로 함수 호출 에 사용 된다.

function push(array, ...items) {
 array.push(...items)
}
function add(x, y) {
 return x + y
}

const numbers = [4, 38]
add(...numbers) // 42

위의 코드 에서 array.push(items)와 add(numbers)두 줄 은 모두 함수 호출 입 니 다.모두 확장 연산 자 를 사 용 했 습 니 다.이 연산 자 는 하나의 배열 을 매개 변수 시퀀스 로 바 꿉 니 다.
확장 연산 자 는 정상 적 인 함수 파라미터 와 결합 하여 사용 할 수 있어 매우 유연 하 다.

function f(v, w, x, y, z) {}
const args = [0, 1]
f(-1, ...args, 2, ...[3])

확장 연산 자 뒤에 표현 식 을 배치 할 수 있 습 니 다.

const arr = [
 ...(x > 0 ? ['a'] : []),
 'b'
]

확장 연산 자 뒤에 빈 배열 이 있 으 면 아무런 효과 가 없습니다.

[...[], 1]

확장 연산 자 를 괄호 에 넣 으 면 자바 스 크 립 트 엔진 은 함수 호출 이 라 고 생각 합 니 다.만약 이때 함수 호출 이 아니라면,잘못 보고 할 것 이다.

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

위의 두 가지 상황 은 모두 오 류 를 보고 할 수 있 습 니 다.확장 연산 자가 있 는 괄호 는 함수 호출 이 아니 라 세 번 째 상황 console.log(...[1,2])는 오 류 를 보고 하지 않 습 니 다.이 때 는 함수 호출 이기 때 문 입 니 다.
다음은 확장 연산 자가 apply 방법 을 대체 하 는 실제 적 인 예 입 니 다.Math.max 방법 을 사용 하여 배열 의 최대 요 소 를 구 하 는 쓰기 방법 을 간소화 합 니 다.

// ES5   
Math.max.apply(null, [14, 3, 77])

// ES6   
Math.max(...[14, 3, 77])

//    
Math.max(14, 3, 77)

위의 코드 에 서 는 자바 스 크 립 트 가 배열 의 최대 요 소 를 구 하 는 함 수 를 제공 하지 않 기 때문에 Math.max 함 수 를 사용 하여 배열 을 하나의 매개 변수 시퀀스 로 바 꾸 고 최대 값 을 구 할 수 밖 에 없습니다.확장 연산 자가 생기 면 바로 Math.max 를 사용 할 수 있 습 니 다.
또 다른 예 는 push 함 수 를 통 해 한 배열 을 다른 배열 의 끝 에 추가 하 는 것 입 니 다.

// ES5    
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2)
// ES6   
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
arr1.push(...arr2)

위 코드 의 ES5 쓰기 에서 push 방법의 매개 변 수 는 배열 이 될 수 없 기 때문에 apply 방법 을 통 해 push 방법 을 사용 할 수 밖 에 없습니다.확장 연산 자가 있 으 면 배열 을 push 방법 으로 직접 전달 할 수 있 습 니 다.
다음은 또 다른 예 다.

// ES5
new (Date.bind.appy(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1])

확장 연산 자 적용
1)복사 배열
배열 은 복합 적 인 데이터 형식 으로 직접 복사 하면 바 텀 데이터 구 조 를 가리 키 는 지침 만 복사 하 는 것 이지 새로운 배열 을 복제 하 는 것 이 아니다.

const a1 = [1, 2]
const a2 = a1 
a2[0] = 2
a1 // [2, 2]

위의 코드 에서 a2 는 a1 의 복제 가 아니 라 같은 데 이 터 를 가리 키 는 또 다른 지침 으로 a2 를 수정 하면 a1 의 변 화 를 직접적 으로 초래 할 수 있다.
ES5 는 변 칙 적 인 방법 으로 만 배열 을 복사 할 수 있다.

const a1 = [1, 2]
const a2 = a1.concat()

a2[0] = 2 
a1 //[1, 2]

ES6 표기 법

const a1 = [1, 2]
//   1
const a2 = [...a1]
//   2
const [...a2] = a1

2)병합 배열
확장 연산 자 는 배열 을 합 친 새로운 쓰기 방법 을 제공 합 니 다.

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
// ES5     
arr1.concat(arr2, arr3)
// ES6     
[...arr1, ...arr2, ...arr3]

그러나 이 두 가지 방법 은 모두 얕 은 복사 이 므 로 사용 할 때 주의해 야 한다.

const a1 = [{foo: 1}]
const a2 = [{bar: 2}]
const a3 = a1.concat(a2)
const a4 = [...a1, ...a2]

a3[0] === a1[0] // true
a4[0] === a1[0] // true

위의 코드 에서 a3 와 a4 는 두 가지 다른 방법 으로 합 쳐 진 새로운 배열 이지 만 그들의 구성원 들 은 모두 원래 의 배열 구성원 에 대한 인용 이다.이것 은 바로 얕 은 복사 이다.만약 에 원래 의 배열 의 구성원 을 수정 하면 새로운 배열 에 동기 화 된다.
3)해체 할당 과 결합
확장 연산 자 는 구조 할당 값 과 결합 하여 배열 을 만 드 는 데 사용 할 수 있 습 니 다.

// ES5 
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

다음은 다른 예 이다.

const [first, ...rest] = [1, 2, 3, 4, 5]
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = []
first // undefined
rest // []

확장 연산 자 를 배열 할당 에 사용 하면 매개 변수의 마지막 자리 에 만 놓 을 수 있 습 니 다.그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.

const [...butLast, last] = [1, 2, 3, 4, 5];
//   

const [first, ...middle, last] = [1, 2, 3, 4, 5];
//   

(4)문자열
확장 연산 자 는 문자열 을 진짜 배열 로 바 꿀 수도 있다.

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Iterator 인 터 페 이 스 를 배치 하지 않 은 유사 한 배열 의 대상 에 대해 서 는 확장 연산 자 를 실제 배열 로 바 꿀 수 없습니다.

let arrayLike = {
 '0': 'a',
 '1': 'b',
 length:２
}

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

위의 코드 에서 array Like 는 배열 과 유사 한 대상 이지 만 Iterator 인 터 페 이 스 를 배치 하지 않 으 면 연산 자 를 확장 하 는 것 이 잘못 되 었 습 니 다.이 때 Array.from 방법 으로 array Like 를 진짜 배열 로 바 꿀 수 있 습 니 다.
확장 연산 자 내 부 는 데이터 구조의 Iterator 인 터 페 이 스 를 호출 하기 때문에 Iterator 인터페이스 가 있 는 대상 만 있 으 면 확장 연산 자 를 사용 할 수 있 습 니 다.예 를 들 어 Map 구조 등 입 니 다.

let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.