JavaScript에서 배열을 파괴합니다(휴식 및 스프레드도 추가됨)

JavaScript의 훌륭한 기술과 기능은 객체를 분해하는 기능입니다.

이 기사에서는 배열로 무엇을 할 수 있는지 살펴볼 것입니다.

이 기능을 최대한 활용하려면 코드를 잘라내어 붙여넣고(또는 직접 만들어) here에서 사용해 보십시오.

파괴란 무엇인가?

좋은 질문입니다! 간단히 말해서:

It is an expression that gives us the programmer the ability to get value from the array and save them as variables.

이 배열에서 첫 번째와 두 번째 숫자를 원할 수 있으므로 현명하게 다음을 수행합니다.

const arrayOfNumbers = [4, 6, 2, 11, 16]

const firstNumber = arrayOfNumbers[0] //4
const secondNumber = arrayOfNumbers[1] //6

그러나 이것은 장황합니다! 세 번째와 다섯 번째도 원한다면 어떻게 됩니까?

배열을 분해하자

const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, second, third, fourth, fifth] = arrayOfNumbers
console.log(fourth)//11

따라서 const 또는 let으로 시작합니다.

사용할 변수의 이름을 지정한 다음 그 주위에 대괄호를 넣습니다(배열이기 때문에 의미가 있습니다).

그런 다음 실제 배열과 같은지 확인하십시오!

일반적인 방법으로 변수에 액세스할 수 있습니다.

모든 숫자를 원하지 않으면 어떻게 됩니까? 더 빠른 방법이 있습니까?

예, 배열의 값에 변수 이름을 지정하는 대신 공백으로 두어 건너뛸 수 있습니다. 여전히 쉼표가 필요하거나 JavaScript가 어떻게 알 수 있습니까!

const arrayOfNumbers = [4, 6, 2, 11, 16]
//I just want the third and fifth number
const [third] = arrayOfNumbers

console.log(third, fifth)// 4,6 -- oh no! This doesnt work!

const [, , third, , fifth] = arrayOfNumbers
console.log(third,fifth) // 2,16

글쎄요, 실제로 첫 번째 숫자와 배열의 나머지 숫자를 원합니다. 어떻게 해야 합니까?

글쎄, 당신은 실제로 당신 자신의 질문에 대답했습니다!

REST 매개변수를 사용합니다. 이것은 파괴하려는 어레이의 마지막 요소여야 합니다.

const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, ...others] = arrayOfNumbers
console.log(others) //[6,2,11,16]

const [first, ...others,fifth] = arrayOfNumbers
console.log(fifth) //Syntax error, Rest element must be last element

중첩 배열은 어떻습니까? 우리는 해체할 수 있습니까?

당근 빠따 지!

코드를 보자!

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, two, three, four, five, six, seven, eight, nine,ten,eleven,twelve] = nestedArray
console.log(three) // 4
console.log(eight) // undefined

오 이런... 제대로 작동하지 않습니다. 여기서 '삼'은 사실 '4'입니다.
왜요? 0 = 0, 1 = 1, 2는 =[2,3]이므로 3 = 4입니다.

그래서 우리는 "two"를 분해할 필요가 있지만, 이것은 실제로 꽤 쉽습니다.

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, [two, three], four, [five, six, [seven, eight], nine,ten],eleven,twelve] = nestedArray
console.log(three) //3
console.log(eight) //8

여기에는 여러 배열이 있으므로 여러 REST 연산자를 사용할 수 있습니다.

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(rest) //[8]
console.log(restTwo) //[9,10]
console.log(restThree) //[11,12]

그들은 모두 배열의 특정 수준에서 마지막 요소라는 주요 기준을 충족합니다.
추신. 원하는 대로 'rest' 변수를 호출할 수 있습니다!

나머지 변수는 배열로 가지고 있지만 숫자만 원합니다!

이를 수행하는 방법에는 여러 가지가 있지만 훌륭한 방법은 ...을 다시 사용하는 것입니다!

보여드리겠습니다:

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(...rest, ...restTwo, ...restThree) //8 9 10 11 12

이렇게 하면 어레이가 확장되지만 제한 사항이 있습니다.

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
const spread = ...restThree
console.log(spread);// unexpectedToken

이것은 허용되지 않습니다!

그러나 SPREAD 연산자를 사용하여 다른 훌륭한 작업을 수행할 수 있습니다.

어레이 결합

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray

// Usual method of merging an array CONCAT
const sequenceInAnArray = rest.concat(restTwo).concat(restThree)
console.log(sequenceInAnArray) //[8, 9, 10, 11, 12]

// USE OF SPREAD!
rest = [...rest, ...restTwo, ...restThree] 
console.log(rest) //[8, 9, 10, 11, 12]

이것은 매우 강력한 사용법이며 자주 사용됩니다. 데이터를 병합하는 좋은 방법입니다. 그래도 나머지는 LET인지 확인하십시오!

어레이 복사

새 배열을 만들고 원래 배열을 변경하지 않는 좋은 방법은 슬라이스 기능을 사용하는 것입니다(다른 기능도 있음).

SPREAD 연산자를 사용하여 배열을 복사할 수도 있습니다.

let pleaseCopyMe = ['a', 'b', 'c']
let okThen = [...pleaseCopyMe]
console.log(okThen)
console.log(pleaseCopyMe === okThen) // false! As they have different memory refernces

끝까지 가길 잘했다. 보상으로 그는 훌륭한 팁입니다!

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a)//?
console.log(b)//?