JavaScriptを破壊するマスタリング

良い日の人々、この記事ではJavaScriptの破壊について詳細に話をするつもりです.ところで、一体何が破壊されているのか.破壊することは、配列またはオブジェクトから値への値をアンパックするプロセスを記述するのに用いられるだけの空想的な語です.破壊は、JavaScriptのES 6フレーバーのクールな機能であり、これは多く使用されて見ている可能性があります.この記事の最後までには、JavaScriptで破壊がどのように動作しているかについての基本的な理解を得て、あなたのコードでそれを使用することができます.あなたがすでに破壊について多くを知っているならば、私がそうしなかった地域で主題をはっきりさせるコメントまたは2を残して自由に感じてください.それでは、ダイブしましょう.

破壊は何か
以前に述べたように、破壊はオブジェクトまたは配列から値をアンパックにするプロセスです.JavaScriptには、JavaScriptにECMAスクリプト6が付属している構文アップグレードを使用してJavaScriptに破壊を導入しました.オブジェクトの名前を呼び出す際の退屈な反復処理を廃止して、オブジェクト内の値を取得したいときにキーを複数回削除したり、配列内の値を削除したりします.ここでは、破壊する前に、オブジェクトや配列のプロパティを抽出するために使用します.

const hero = {
    name: 'john doe',
    age: 25,
    gender: 'male',
    email: '[email protected]'
}

const name = hero.name
const age = hero.age
const gender = hero.gender
const email = hero.email


// or 
const arr = ['superman', 'batman', 'cyborg', 'aquaman']

const superman = arr[0]
const batman = arr[1]

これは、オブジェクト内のキーまたは配列内に格納された値を取得する標準的な古い方法です.このようなやり方をするのは結構良いことだが、それに関連する欠点がある.

私たちは、キーまたは値を取り出したいときはいつでも、オブジェクト名または配列名を繰り返す必要があります.

私たちのコードの不必要なラインも、理由のない私たちのコードを膨らませて、延長するのにかかります.

これに対処するために、破壊は導入されました、そして、残りは魔法のようです.どのように4行から5行のように撮影することができますだけで1行、私たちのコードを短く、きれいに保つことができます.破壊の2種類があります
を破壊しているアレイ
物を破壊しているオブジェクト

アレイ破壊
我々の手を汚しているアレイで破壊させましょう

const arr = [1, 2, 3]

const [num1, num2, num3] = arr

console.log(num1, num2, num3) // 1, 2, 3

そして、それは、私たちが首尾よく上記の配列を破壊しました、コードの3行のように私たちが現在したことが現在1つでされたものであるように、私たちが単に私たちが角括弧で破壊している配列の中にある値を保持したいと思う変数を包むように配列を構造化するために.我々が上記したように.注意すべきことは、配列内の値が破壊構文を使用するときに、どのように配置するかに基づいて変数に破壊されることです

const arr = [1, 2, 3]

const [num1, num2, num3] = arr

// num1 = arr[0]
// num2 = arr[1]

console.log(num1, num2, num3) // 1, 2, 3

あなたがそれを逃したincase、破壊のこの方法は、assingment破壊と呼ばれています.上の例では、配列が3つの値を保持していると仮定していますが、1つのクールなことについては、配列から構造体を削除することができます.

const arr [ 1, 2, 3, 4, 5, 6, 7 ]

const [num1, num2, num3] = arr

console.log(num1, num2, num3) //1 , 2, 3

また、1つのアイテムをスキップすることができますし、次に行くか、複数の項目をスキップします.配列からその値を取得することにあまり興味がないならば、単に特定の値をスキップする前に、単に変数を使わないコンマを使います.

const arr = [ 1, 2, 3, 4, 5, 6, 7 ]

const [num1, num2, , num4] = arr

console.log(num1, num2, num3) //1 , 2, 4

私たちは、我々がdestructedしなかった残りの値から配列をつくることもできます、我々はこれを達成するために広げられた構文を使用します.それは、我々が新しい配列に分解しなかった配列の残っているものを何でもとります.

const arr = [ 1, 2, 3, 4, 5, 6, 7 ]

const [num1, num2, ...rest] = arr

// puts the rest of arr into rest

console.log(num1, num2, rest) 
// 1, 2, [3, 4, 5, 6, 7]

また、配列の破壊を使用して、変数の値を交換することもできます.通常、破壊することなく、3番目の変数と多くの不要なコードが必要になりますが、破壊はすべての問題を除きます.

const num1 = 1
const num2 = 2

console.log(num1, num2) // 1, 2

[ num1, num2 ] = [ num2, num1 ]

console.log(num1, num2) // 2, 1

多くのパラメータを受け入れる関数を使用すると、単純に1つのパラメータだけを受け入れるように書き換えることができます.

// original function without destructuring
function doSomething(param1, param2, param3, param4) {
    // do something with param1, param2, param3, param4
    console.log(param1, param2, param3, param4)
}

// using destructuring
function doSomething(params){
    const [param1, param2, param3, param4] = params
    console.log(param1, param2, param3, param4)
}

// dealing with functions that returns multiple values
function returnManyStuffs(arg){
    const val = arg
    return [
        () => arg,
        (_val) => val = _val
    ]
}

const [val, setVal] = returnManyStuffs(10)

console.log(val) // 10

あなたが未定義の何かを構造化したいならば、どうですか?

const arr = [ 12, 24 ]

const [num1, num2, num3=48] = arr

console.log(num1, num2, num3)

オブジェクトの破壊
我々は、我々が配列でしたように、オブジェクトで破壊している割り当てをすることができます

const subject = {
    name: 'maths',
    creditUnit: 2,
    lecturer: 'mr Smart'
}

const { name, creditUnit, lecturer } = subject

console.log(name, creditUnit, lecturer) // maths, 2, mr Smart

オブジェクトが破壊する1つのものは、変数の名前は、オブジェクトの構造を変更しようとしているキーの名前と一致する必要があります.しかし、時々、その名前で変数を持っているかもしれないので、我々のコードに誤りを投げてしまうかもしれません.

const subject = {
    name: 'maths',
    creditUnit: 2,
    lecturer: 'mr Smart'
}

const { name: subjectName, creditUnit, lecturer } = subject

console.log( subjectName, creditUnit, lecturer ) // maths, 2, mr Smart

また、オブジェクトの残りのプロパティを別のオブジェクトにパックすることもできます

const subject = {
    name: 'maths',
    creditUnit: 2,
    lecturer: 'mr Smart',
    materials: {
        textBook: 'intro to maths',
        graphBook: 'some graph'
    }
}

const { name, creditUnit, ...others} = obj

console.log(name, creditUnit, others )
// maths, 2, { lecturer: 'mr Smart', materials: { textBook: 'intro to maths', graphBook: 'some graph'}}

また、オブジェクトを受け入れ、関数内のオブジェクトを構造化するために関数を書き換えることもできます.オブジェクトを使用して関数から複数の値を返すこともできます.

function doSomething(params){
    const { val1, val2, val3 } = params
    // do something with val1, val2, val3
}

function makeObj(){
    return { name: 'foo', job: 'coding'}
}

const { name, job } = makeObj()

console.log(name, job) // foo coding

我々はまた、オブジェクトに未定義の何かを変更しようとしているデフォルト値incaseを提供することができます.

const obj = { name: 'john', age: 25}

const { name, age, job = 'coding' } = obj

console.log(name, age, job) // john, 25, coding

深い構造
深く入れ子になったオブジェクトや配列を変更することもできます

const club = { 
    name: 'liverpool',
    location: 'england',
    coach: 'jurgen klopp',
    stadium: {
        name: 'anfield',
        location: 'mersyside' 
    },
    squad: {
        captain: 'jordan henderson',
        goalies: ['becker', 'adrian']
    }
}

const {  
    stadium: {
        name: stadiumName
    },
    squad: {
        captain,
        goalies
    }
} = club

console.log( stadiumName, captain ) // anfield, jordan henderson, ['becker', 'adrian']

これは、この記事のために、私はあなたがこの便利な、下記のコメントを残して自由にポストを好むことを願っています.あなたはhereの破壊についての詳細を読むことができるか、あなたがhereに向かうことができるビデオを見ることを好むならば