JavaScriptの破壊と構文拡張

こんにちは、今日私は、私がJavaScriptでdestructureと広げられたオペレーターについて学んだものについて共有するつもりです

破壊構文

最初にJavaScriptのDeStructured演算子について説明します.この演算子は、配列またはオブジェクトから変数を抽出するために使用されます
以下を明確に理解するための例を見てみましょう

// let us declare an array here
let arr = [2, 1, 3, 5];

/*
 suppose we want to store the individual numbers into
 variables we can use destructure operator 
*/

const [a] = arr;
console.log(a); // [output]: 2 

const [l, m, n] = arr;
console.log(`${l} ${m} ${n}`); // [output]: 2 1 3

const [p,q,r,s] = arr;
console.log(`${p} ${q} ${r} ${s}`); // [output]: 2 1 3 5

const [z,x,c,v,b] = arr;
console.log(b); // [output]: undefined // as there are only 5 elements in array

あなたが見ることができるように、破壊されている間、変数の数が配列の要素の数より多いならば、我々は配列からどんな数の要素も分解することができます

const student = {name: 'Krishna', age:21, rollNo: '21JK15'};

const {name} = student;
console.log(name); // [output]: Krishna

const {age, rollNo} = student;
console.log(`${age} ${rollNo}`); // [output]: 21 21JK15

const {marks} = student;
console.log(marks); // [output]: undefined

上で見ることができるように、破壊はオブジェクトの特性を抽出するのに用いられて、オブジェクトに存在しない特性を抽出するのに使用されます

拡大構文

私がこの構文についてわかったことは、関数への引数を渡すために使うことができるか、または配列を拡張するのに使うことができるか、またはオブジェクトをここでは見当たらないことです
JavaScriptでは.スプレッド演算子として3ドット

function addNums(a, b) {
   return a+b;
}

const nums = [1,2];

console.log(addNums(...nums)); // [output]: 3

上の例では、スプレッド演算子が関数に引数を渡すのに使われることがわかります

const arr1 = [1,2];
const arr2 = [3,4];


const arr3 = [...arr1, ...arr2]; // concat two arrays
const arr4 = [...arr1, 7, 8]; // append new elements to array at last
const arr5 = [7, 8, ...arr1]; // append to the front of array

上の例では、スプレッド演算子が配列

let student = {name:'Krishna', age:21};

student = {...student, marks: 85};
console.log(student); // [output]: {name:'Krishna', age:21, marks:85}

上の例では、オブジェクトに新しいプロパティを追加するには、スプレッド演算子を使用します

let student = {name:'Krishna', age:21};

student = {...student, age:18}; // wii modify the age to 18
console.log(student); // [output]: {name:'Krishna', age:18}

student = {name:'Krishna', age:21};

student = {age:18, ...student}; // wrong way to modify object
console.log(student); // [output]: {name:'Krishna', age: 21}

上記のように、オブジェクトを変更する2番目のメソッドが間違っていることをスプレッド演算子を使用してオブジェクトのプロパティを変更することもできます