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.

この配列から1番目と2番目の数字が欲しいと思います.

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

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

しかし、これは長いワイン!あなたが3番目と5番目のものを望むならば、何が起こりますか.
配列の構造を変更します

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

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

私たちはconstから始めます.

私たちは、私たちが使用したい変数名を指定します.次に、角括弧を置きます.

あなたがそれを実際の配列に等しいことを確認してください!

通常の方法で変数にアクセスできます.

私がすべての数字を必要としないならば、何が起こりますか、より速い方法がありますか？

はい、変数の配列に値を与える代わりに、空白を残してスキップできます.あなたはまだコンマ、またはどのように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

よく、実際に私は最初の番号と残りの配列をしたいですか？

さて、あなたは実際に自分の質問に答えている!
残りのパラメータを使用します.これは、あなたがdestructureするつもりである配列の最後の要素でなければなりません

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

……それはまったくうまくいかない」ここの3 'は実際に' 4 'です.
なぜ?まあ0 = 0、1 = 1、2は= [ 2 , 3 ]であるので、3 = 4です.今すぐに自分でテスト!
それで、我々は「2」を分解する必要があります

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]

それらはすべて、配列の特定のレベルの最後の要素であるそれらの主な基準を満たします.
あなたは好きなように';残り';変数を呼び出すことができます.

あなたは、残りの変数を配列としているが、私はちょうど数字が欲しい！

これを行うには多くの方法がありますが、大きなものは…を使用しています.再び!
お見せしましょう

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

これは許されない!
しかし、スプレッド演算子で他の偉大なことを行うことができます.

結合アレイ

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 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)//?