JavaScript(関数の詳細)

19549 ワード
JavaScript callback こんごう テキストリンク

2021-05-26-Javascript


匿名関数と宣言関数の違い


反復文とfor反復文のどちらもよく使われますが、使用状況は少し異なります.
反復文は条件を中心として反復する場合,for反復文は回数を中心とする場合や配列を中心として反復する場合に用いられる.
しかし匿名関数と宣言関数の使用状況は似ている.基本的には、自分で開発するときは私が気持ちよく、みんなで開発するときはみんなで気持ちよくすればいいです.しかし,最近では多くの開発者がセキュリティなどの理由で匿名関数を用いる傾向にある.なぜこんなことになったのか簡単に書きたいのですが、何か違いがあるからです.

匿名関数の使用


コードが連続コード実行中にローを読み出すと、匿名関数が生成されます.
したがって,コードは上から下へ順に実行され,noNameという変数「2次面匿名関数」に対して実行される.呼び出した関数が割り当てられます.
// 변수 선언
let noName;

// 익명 함수 선언
noName = () => console.log("1번째 익명 함수입니다.");
noName = () => console.log("2번째 익명 함수입니다.");

// 함수 호출
noName();
実行結果
2번째 익명 함수입니다.

宣言関数の使用


宣言関数は、連続コードの実行前に作成されます.
したがって、宣言関数が同じブロックである場合、関数をどこで呼び出すかは関係ありません.宣言関数を作成する前に呼び出されても、関数は作成された状態であるため、実行時に問題は発生しません.
// 선언적 함수를 호출
isName();

// 선언적 함수를 2번 생성
function isName() {
  console.log(`1번째 선언적 함수이다.`);
}

function isName() {
  console.log(`2번째 선언적 함수이다.`);
}
実行結果
2번째 선언적 함수이다.
宣言関数の名前が入力された順序と同じである場合、宣言関数も上書きされるため、コードを実行すると上記の結果が表示されます.

宣言関数と匿名関数の組合せ


2つの状況を組み合わせてコードを記述する
// 익명 함수를 2번 생성

func = () => console.log("익명 함수입니다.");

function func() {
  console.log("선언적 함수입니다.");
}

// 함수 호출
func();
実行結果
익명 함수입니다.
宣言関数を最初に作成し、順序のゴドラープロセスを開始し、匿名関数を生成します.上記のコードが記述されている場合、「匿名関数」はコードの順序に関係ありません.「」を出力します.
※匿名関数は読み出しコードと同じ順序で関数を宣言しますが、宣言関数は読み出しコードとは異なる順序で関数を宣言します.同じ名前で関数を上書きするのは危険です.だから安全に使う匿名関数のほうが好きです.

ブロックで宣言関数を同時に使用しない


宣言関数は、スクリプトタグや関数などで区切られた空間のコードブロックを取得するときに最初に生成されます.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    func();

    function func() {
      console.log('1번째 선언적 함수입니다.');
    }
  </script>
</head>
<body>
  <script>
    function func() {
      console.log('2번째 선언적 함수입니다.');
    }
  </script>
</body>
<script>
  func();
</script>
</html>
実行結果
1번째 선언적 함수입니다.
2번째 선언적 함수입니다.
このようにブロックを分割する場合、宣言関数の実行フローを予測することはさらに困難になる.
予期せぬ問題が発生するため、より多くの匿名関数が使用されます.

キー(Key)


  • コールバック関数とは、パラメータとして渡される関数です.

  • 矢印関数は、匿名関数を簡略化するために作成された関数生成構文です.
    ()関数は{}として作成され、関数に戻り値()のみがある場合は値として使用できます()

  • インスタントコール関数は、変数名の競合を防止するためにコードを安全に使用する方法です.

  • 「より多くのJavaScript構文要件を生成する厳格なパターンは、エラーを減らす方法です.」文字列「use strict」を使用してブロックの一番上に配置できます

    • 質問の確認

  • filter関数のコールバック関数部分を入力します.
  • ホールプッシュマン抽出
  • 100以下の数万抽出
  • 5は、残り0の数
    • のみを抽出する.
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76];
numbers = numbers  
  .filter((value) => value % 2 === 1)  
  .filter((value) => value < 100)  
  .filter((value) => value % 5 === 0);
console.log(numbers);
    実行結果
    [ 25, 75 ]
    次のコードを配列内のforEachメソッドを使用する形式に変更します:
  • 繰り返し文
    const array = ['사과', '배', '귤', '바나나']
console.log('# for in 반복문')
for (const i in array) {	
  console.log(i)
}
console.log('# for of 반복문')
for (const i of array) {	
  console.log(i)
}
    実行結果
    # for in 반복문
0
1
2
3
# for of 반복문
사과
배
귤
바나나
    const array = ["사과", "배", "귤", "바나나"];

console.log("# for in 반복문");
array.forEach((arr, i) => console.log(i));

console.log("# for of 반복문");
array.forEach((arr, i) => console.log(arr));
    • [Mock] Google 5