ベース、クリーンアップ、ES 6(通常作成)

再学習と制作の過程で、
復習や基本スキルの手帳を再整理し、

ES6

var, let, const

var >> let , const
varのグローバル変数の乱発、繰り返し宣言可能、変数反発などの問題を解決します.
再割り当て可能なlet、
定数の定数概念のconst
ただし、オブジェクトと配列をconstと宣言しても、要素を変更できます!

String LiteralまたはTemplate Literal

+演算子を使用しなくても、文字または変数の記号を追加できます.
const val01 = 'Dan';
const val02 = 'Kim';

ES5

console.log('My name is ' + val01 + ' ' + val02 + '.');
"My name is Dan Kim."

ES6

console.log( My name is ${val01} ${val02}. );
"My name is Dan Kim."

Spread Operator

オブジェクトまたは配列を結合してコピーする場合「...」の文法
let arr1 = [1,2,3];
let arr2 = [4,5,6];
の条件で、各配列を結合する構文は次のとおりです.

  let arr = arr1.concat(arr2); 
  // arr = [ 1, 2, 3, 4, 5, 6 ]

  let arr = arr1.push(...arr2) 
  // arr = [ 1, 2, 3, 4, 5, 6 ]

  let arr = [...arr1, ...arr2]; 
  // arr = [ 1, 2, 3, 4, 5, 6 ]

配列をコピーする構文は、次のとおりです.
let arr1 = [1, 2, 3];

  let arr2 = arr1;
  arr2.push(4);
  //arr2 = [1,2,3,4]
  //arr1 = [1,2,3,4]

ES 6構文が現れる前に.

  let arr2 = arr1.slice();
  arr2.push(4);
  //arr2 = [1,2,3,4]
  //arr1 = [1,2,3]

  let arr2 = arr1.map(( a )=> a );
  arr2.push(4);
  //arr2 = [1,2,3,4]
  //arr1 = [1,2,3]

Spread Operator

  let arr2 = [...arr1];
  arr2.push(4)
  //arr2 = [1,2,3,4]
  //arr1 = [1,2,3]

こんなに簡単に書けます.
実際の会員収入または複数の入力でよく使用されます.
オブジェクトのプロパティを上書きすることで、オブジェクトの原理を更新します.

(리액트 code)
let [joinInfo, setJoinInfo] = useState({
	email : "",
   	username : "",
   	password : ""
});

const SetJoinOnChange = (e)=>{
      let arr = { ...joinInfo, [e.target.name] : e.target.value }
      setJoinInfo(arr)
}

onChangeという関数を簡単に作成するだけです.

<input type="email" name="email" onChange={(e)=>{SetJoinOnChange(e)}}/>
<input type="text" name="username" onChange={(e)=>{SetJoinOnChange(e)}}/>
<input type="password" name="password onChange={(e)=>{SetJoinOnChange(e)}}/>

各入力のonChangeイベントハンドラとして、SetJoinOnChangeが再使用され、キー値に対応する値が変更されたSetStateが適切になります.
不変性を維持し、Spread Operatorを使用する理由には、メモリの浪費が含まれます.
const test1 = { b : 'c' }
const test2 = { a : test1 }
const test3 = { ...test2 }
test2.a === test3.a //true
test2 === test3 //false
結果として、新しいオブジェクトが作成されると、他のオブジェクトとして扱われます.
=メモリの割り当て

optional chaining

useEffectなどのメッセージを受信した後にstateを変更する場合があります
再レンダリング時の初期状態値は
1.対象ではなく、
2.配列ではなくmapなどを実行できません
状況が出てきたら.
if()ドアを挿入する卑猥なコードになる必要はありません!ううう

forEach VS map

結論:単純重複であればfor()、
配列をループするには、forEach()、
シーケンス図をループして新しいシーケンス図を取得する場合()

構造分解の割り当て

forなどのキー値を抽出する構造分解配分が何であるかが分からない場合に用いる、
オブジェクト構造の分解をさらに割り当てる

また、また

1つの構造分解式で2つの変数の値を交換できます!!