Basic of JS 2

2021.04.08
let=変数の保存に使用
const=定数を保存するために使用され、宣言されると値を変更できません.
他のコードブロックは同じ名前で使用できます.

const a = 1;
if (true) {
  const a = 2;
  console.log('if문 안의 a 값은 ' + a);
}
console.log('if문 밖의 a 값은 ' + a);

結果は以下の通りです.

"if문의 안의 a 값은 2"
"if문 밖의 a 값은 1"

nullとundefined

null:この値はいっそ「なし」です.
未定義:値はまだ「OK」ではありません.

let criminal;
console.log(criminal);

このように変数を宣言して値を入力しない場合、コンソールにはundefinedという値が表示されます.

比較演算子==と==

==と==は、両方の値が等しいかどうかを比較する比較演算子です.ただし、詳細機能に違いがあります.==詳細なタイプチェックは行われません.
たとえば、==を使用して、数字1と文字「1」を同じ値と見なします.

const a = 1;
const b = '1';
const equals = a == b;
console.log(equals);
결과: true

また、0とfalseも同じ値とみなされます.

const a = 0;
const b = false;
const equals = a == b;
console.log(equals);
결과: true

またundefinedとnullも同じ値とみなされる.

const a = null;
const b = undefined;
const equals = a == b;
console.log(equals);
결과: true

2つの値を比較した後に一致するかどうかは、==ではなく==を使用します.使用するとエラーの確率が高くなります.

矢印関数

関数は、functionキーではなく=>文字で作成できます.矢印の左側はパラメータで、右側はコードブロックです.

const add = (a, b) => {
  return a + b;
};
console.log(add(1, 2));

コードブロック内で直接returnを使用する場合は、次のように略すことができます.

const add = (a, b) => a + b;
console.log(add(1, 2));

矢印関数と一般関数の最大の違いは、2つの関数が指すthisのscopeが異なることです.https://poiemaweb.com/es6-arrow-functionを参照してください.
簡単に言えば、関数のthisが呼び出しメソッドのオブジェクト(関数のインスタンスを構築する)を指すようにする場合は、that=thisとします.このように変数として宣言するか、関数が終了した後に宣言します.bind(this)を使用したり使用したりする方法があります.
逆に、矢印関数のこのようなバインディングオブジェクトの決定は、関数の親スキャンを決定するLexicalScopeと同様である.簡単に言えば,通常の関数のように処理過程を与える必要はなく使用できる.しかし、これは勝手に使えるという意味ではないことを知っておく必要があります.詳細については、リンクを参照してください.

オブジェクト

変数(JS-let)または定数(JS-const)を使用すると、オブジェクトは1つの名前に複数の値を入れることができます.like JSON Object.

const dog = {
  name: '멍멍이',
  age: 2
};

console.log(dog.name);
console.log(dog.age);

結果は以下の通りです.

멍멍이
2

鍵にスペースが必要な場合は、次のように使用します.

const sample = {
  'key with space': true
};

デフォルトでは、関数からパラメータを取得して使用する場合は、次の操作を行います.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

このときprint関数を表示すると、クエリパラメータが入力するhero内部の値のたびにheroが表示されます.オブジェクトの非構造化割り当てという構文を使用して、コードをより短く、より美しく記述できるように入力しています.この構文は「分解オブジェクト構造」とも呼ばれます.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

const { alias, name, actor } = hero;

このコードは、オブジェクトから値を抽出し、新しい定数として宣言します.
これに基づいて、パラメータレベルでオブジェクトの非構造化割り当てを行うことができます.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

以下のようにきれいにできます.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};
dog.say();

関数がオブジェクトに入ると、thisはそのオブジェクトが属するオブジェクトを指します.この場合、関数は無名の匿名関数として使用できます.前述したように、関数をオブジェクトに入れると、矢印関数をオブジェクトに入れると、正常に機能しません.なぜなら、関数として宣言された関数thisは、その属するオブジェクトを正しく指し、矢印関数はそうではないからです.

整列

const objects = [{ name: '멍멍이' }, { name: '야옹이' }];

console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

以下に示すように、オブジェクトを配列に配置することもできます.

繰り返し文-breakとcontinue

for (let i = 0; i < 10; i++) {
  if (i === 2) continue; // 다음 루프를 실행
  console.log(i);
  if (i === 5) break; // 반복문을 끝내기
}

iが2の場合は元のコンソールに続きますロゴを作りますが、コードを実行せずに3にジャンプします.すなわち、この位置で停止して次のリングに移行する.
iは5日に中断し、重複文を終了して終了する.
基本ですが、使い方を熟知しておきましょう.

配列-組み込み関数

https://learnjs.vlpt.us/basics/09-array-functions.html

Java ScriptのScopeについて

Scopeとは、変数または関数を宣言するときに、その変数または関数の有効範囲を指します.Scopeには3種類あります.

グローバルScope:コードのすべての範囲に適用されます.

機能(関数)Scope:関数でのみ使用できます.

Block(ブロック)Scope:if、for、switchなどの特定のブロックでのみ使用できます.

const value = 'hello!';

function myFunction() {
  console.log('myFunction: ');
  console.log(value);
}

function otherFunction() {
  console.log('otherFunction: ');
  const value = 'bye!';
  console.log(value);
}

myFunction();
otherFunction();

console.log('global scope: ');
console.log(value);

上記のコードの結果は次のとおりです.

コードの最上位行で宣言された値は、グローバルScopeとして宣言された値です.Global Scopeとして宣言された値は、どこでも使用できます.そのためmyFunctionで利用できます.
otherFunctionは関数の内部で「bye!」新宣言これにより、valueという名前の値は、otherFunctions内部でのみ有効なFunctionScopeとして再指定されます.このように設定された値は、以前グローバル範囲として宣言された値を変更することなく、otherFunctionで新しい値が生成されます.

Java ScriptのScope-Holistとは?

Hoistingとは、JavaScriptで宣言されていない関数/変数に「引く」ことができるJavaScriptで使用できるJavaScriptの動作を指します.

myFunction();

function myFunction() {
  console.log('hello world!');
}

上のコードではmyFunction関数を生成する前に呼び出されます.ただし、関数は宣言されていませんが、コードは正常に動作します.これはjavascriptエンジンがコードを解釈する過程で最初に生成されたと考えられるためである.
意図的に誘発する必要はなく,防止するのがよい方法だ.

を選択します。

モードとは、下の画像のように、既存のコンテンツが現れる情報ボックスのような形式を隠すUIである.デフォルトでは、存在すると既存のコンテンツが隠されるため、styleのdisplay:none、flexで制御されます.事前に敷いて、人に見られないようにして、必要なときに展示の形で使います.