{オブジェクト}と[配列]の可用性の向上

ショートカット属性名
ショートカット属性名は、オブジェクトの文字コードを容易に記述するために生成される構文です.ショートカット属性名を使用すると、新しいオブジェクトを簡単に作成できます.

const name = 'sangku';
const obj = {
  age: 21,
  name, // (1)
  getName() {return this.name}, // (2)
};
console.log(obj);

(1)新しく作成したオブジェクトの属性値の一部が既に変数として存在する場合は、変数名を簡単に記入するだけでよい.属性名が変数名と同じになります.

属性値が

(2)の場合、関数キーは必要なく、関数名を書くだけです.属性名が関数名と同じになります.

ショートカット属性名が使用されていないコードとショートカット属性名が使用されているコードの比較

function person1(age, name) {
  return { age: age, name: name};
}
function person2(age, name) {
  return { age, name };
}
person1(30, 'sangku'); // { age: 30, name: 'sangku' }
person2(30, 'sangku'); // { age: 30, name: 'sangku' }

ショートカット属性名を使うと、コードを簡単に書くことができ、読みやすさもいいです!
また、コンソールに出力してデバッグする場合にも便利です.

const name = 'sangku';
const age = 30;
console.log('name =', name, 'age =', age); // name = sangku, age = 30
console.log({name, age}) // { name: sangku, age: 30 }

計算された属性名(property names)
オブジェクトの属性名を動的に決定するために現れる文法です!

function obj1(key, value) { // (1)
  const obj = {};
  obj[key] = value;
  return obj;
}
function obj2(key, value) {  // (2)
  return {[key]: value}
}

計算した属性名を使って、(2)のように簡潔に同じ関数を記述できます!
計算された属性名は、次のように構成部品のステータス値を変更するために使用できます.

class Btn extends React.Component {
  state = {
    count1: 0,
    count2: 0,
    count3: 0,
  };
// ...
  onClick = indedx => {
    const key = `cout${index}`;
    const value = this.state[key];
    this.setState({[key]: value + 1});
  };
}

setStateを呼び出すと、計算された属性名を使用できます.計算された属性名を使用しないと、コードが複雑になります...!

展開演算子
展開演算子は、配列またはオブジェクトのすべてのプロパティを解放するときに使用される構文です.
パラメータの多い関数を呼び出すときに役立ちます.👍

Math.max(1, 3, 5, 7); // (1)
const numbers = [1, 3, 5, 7];
Math.max(...numbers); // (2)

パラメータを

(1)方式で動的に渡すことはできません.4つの変数を使用すると、値は動的に伝達されますが、パラメータは常に4つに固定されます.

(2)展開演算子を使用して、関数のパラメータを動的に渡すことができます.

展開演算子は配列やオブジェクトのコピーにも役立ちます👍

const arr1 = [1, 2, 3];
const obj1 = { age: 30, name: 'sangku' };
const arr2 = [...arr1]; // (1)
const obj2 = {...obj1}; // (1)
arr2.push(4); // (2)
obj2.age = 100; // (2)

(1)展開演算子を使用して、新しいオブジェクトと配列を生成します.

(2)展開演算子を使用して新しいオブジェクトを作成します.プロパティの追加や変更は元のオブジェクトには影響しません.

配列で展開演算子を使用すると、順序が保持されます.

[1, ...[2, 3], 4] // [1, 2, 3, 4] (1)
new Date(...[2020, 6, 24]); // 2202년 6월 24일 (2)

(1)配列文字では、展開演算子を使用して展開演算子の前後の順序を維持します.

(2)関数の引数は、定義されたパラメータ順に入力する必要があるため、順序を保持する展開演算子の性質を利用することができる.たとえば、日付作成者のパラメータ順に日付データを管理すると、簡単に日付オブジェクトを作成できます.

また、展開演算子を使用すると、2つの異なる配列またはオブジェクトを簡単にマージできます.

const obj1 = { age: 30, name: 'sangku' };
const obj2 = { hobby: 'soccer' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3) // { age: 30, name: 'sangku', hobby: 'soccer' }

But、このコードでobj 1とobj 2が同じ名前の属性を持っている場合、どうなりますか?
ES 6から重複する属性名を許可!

const obj1 = { x: 1, x: 2, y: 'a' }; // { x: 2, y: 'a' } (1)
const obj2 = { ...obj1, y: 'b' }; // { x: 2, y: 'b' } (2)

(1)を使用して属性名を繰り返すと、最終結果は最後の属性名の値となります.

(2)で繰り返される属性名と展開演算子を使用すると、前のオブジェクトに影響を与えることなく、オブジェクトの特定の属性値を変更するときに新しいオブジェクトを作成できます.

非構造配列
配列非構造化(構造分解割り当て)は、配列の複数の属性値を識別子に簡単に割り当てることができる構文です.

const arr = [1, 2];
const [a, b] = arr;
console.log(a, b); // 1 2

配列の属性値は、左の変数に順次入力されます.
このように新しい変数に割り当てるか、既存の変数に割り当てることができます.

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

配列が構造化されていない場合にデフォルト値を定義することもできます.配列の属性値が次のコードで定義されていない場合は、定義されたデフォルト値を指定します.そうでない場合は、元の属性値を指定します.

const arr = [1];
const [a = 10, b = 20] = arr;
console.log(a); // 1(속성값)
console.log(b); // 20(기본값)

の最初の変数の属性値が存在するため、デフォルト値10ではなく、属性値をそのまま割り当てます.

の2番目の変数の属性値は定義されていないため、デフォルト値は20です.

配列非構造化を使用すると、2つの変数の値を簡単に交換できます.

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

2つの変数は値を交換するために、一般的に3番目の変数を使用します.しかし,配列非構造化を用いると,3番目の変数だけでなく,1行の短いコードとして実現できる.
配列内の属性値を無視して操作する場合は、スキップした数を入力するだけです.

const arr = [1, 2, 3];
const [a, , c] = arr;
console.log(a) // 1
console.log(c) // 3

カンマの数以外の部分を並べ替えることもできます.

const arr = [1, 2, 3];
const [first, ...res1] = arr; // (1)
console.log(rest1); // [2,3];
const [a, b, c, ...rest2] = arr; // (2)
console.log(rest2) // []

(1)非構造化を配列する場合...変数名を同時に入力すると、残りのすべての属性値が新しい配列として作成されます.

(2)に属性値が残っていない場合は、空の配列が作成されます.

オブジェクト非構造化
配列と同様に、オブジェクトの複数の属性値を変数の構文に簡単に割り当てることができます.

const obj = { age: 30, name: 'sangku' };
const { age, name } = obj;
console.log(age); // 30
console.log(name); // sangku

オブジェクトは、カッコを使用して非構造化されます.配列非構造化では配列順序が重要であるが,オブジェクト非構造化では並べ替えに意味がない.したがって,age,nameの順序が変わっても結果は同じである.

配列非構造化では、左側の変数の名前は任意に決定できますが、オブジェクト非構造化では、既存の属性名を使用する必要があります.

const obj = { age: 30, name: 'sangku' };
const { age, name } = obj; // (1)
const { name, age } = obj; // (2)
const { a, b } = obj; // undefined

オブジェクト構造分解割当では,順序は無意味であるため,(1),(2)の結果は同じである.

存在しない属性名

を使用する場合は、未定義を指定します.

オブジェクトの非構造化では、属性名とは異なる名前(別名)を使用して変数を作成できます.これは、重複する変数名を回避したり、より具体的な変数名を作成したりする良い方法です.

const obj = { age: 30, name: 'sangku' };
const { age: AGE, name } = obj;
console.log(AGE); // 30
console.log(age); // 참조에러

属性名のage値をAGEに割り当てる.

AGEという名前の変数のみが割り当てられ、年齢変数は割り当てられません.

オブジェクトの非構造化では、デフォルト値を定義することもできます.配列が構造化されていないなどの属性値が定義されていない場合は、デフォルト値を入力します.

const obj = { age: undefined, name: null, grade: 'A' };
const { age = 0, name = 'noName', grade = 'F' } = obj;
console.log(age); // 0 (1)
console.log(name); // null (2)
console.log(grade); // A

(1)ageは定義されていないので、デフォルトです.したがって、年齢は0です.

(2)のプロパティ値がnullの場合、デフォルト値は含まれません.したがって、nameはnullです.

デフォルト+別名を定義することもできます.

const obj = { age: undefined, name: 'sangku' };
const { age: AGE = 30, name } = obj;
console.log(AGE); // 30

関数の戻り値をデフォルト値にすることもできます!

function getDegfaultAge() {
  console.log('hello');
  return 0;
}
const obj = { age: 30, grade: 'B' };
const { age = getDefaultAge(), grade } = obj; // hello 출력되지않음
console.log(age); // 30

関数も同様で、デフォルト値を使用する場合にのみ関数が呼び出されます.

ageの属性値はundfefinedではないため、デフォルト値は使用されず、getDefaultAgent関数も呼び出されません.

オブジェクトの非構造化で使用されていない他のプロパティは、個別のオブジェクトとして作成することもできます.

const obj = { age: 30, name: 'sangku', grade: 'A' };
const {age, ...rest} = obj;
console.log(age); // 30
console.log(rest); // { name: 'sangku', grade: 'A' }

残りの属性は、

と同様に非構造化された配列で独立したオブジェクトに分離される.

文では、オブジェクトを要素とする配列を巡回するときに、オブジェクトの非構造化を使用するのが便利です.👍

const poeple = [{ age: 30, name: 'sangku' }, { age: 29, name: 'sangjae' }];
for (const { age, name } of people) {
  // ...
}

非構造化は、オブジェクトと配列が重なるときに使用できます.

const obj = { name: 'sankgu', do: { name: 'frontend' } };
const {
  name,
  do: { name: position }
} = obj;
console.log(name); // sangku
console.log(position); // frontend
console.log(do) // 참조 에러

の3つの単語が出現したが,非構造化の結果positionという変数しか生成されなかった.

非構造化では、デフォルト値の定義は変数単位ではなくモード単位として適用されます.

const [{ prop: x } = { prop: 123 }] = []; // (1)
console.log(x); // 123
const [{ prop: x } = { prop: 123}] = [{}]; // (2)
console.log(x); // undefined

(1)コードでは、{props:x}はアレイの最初の要素を指し、{prop:123}はデフォルト値を定義します.最初の要素が存在しないため、デフォルト値が割り当てられます.

の結果は、変数xにデフォルト値に定義された123が含まれている.

(2)配列の最初の要素が存在するため、デフォルト値は指定されません.

の最初の要素にはpropという属性名は存在しないため、xはundefinedとして割り当てられる.

オブジェクトの非構造計算を使用する属性名

const index = 1;
const { [`key${index}`]: value } = { key1: 123 };
console.log(value);

オブジェクトの非構造計算の属性名を使用する場合は、逆エイリアスを入力する必要があります.

も、単純に別名に変数名を入力することはできません.

const obj = {};
const arr = [];
({ foo: obj.prop, bar: arr[0] } = {foo: 123, bar: true});
console.log(obj); // {prop: 123}
console.log(arr); // [true];