Javascriptデフォルト(2)

▼▼▼▼▼map()実施

// definition
Array.prototype.myMap = function(callback) {
    arr = [];
    for (var i = 0; i < this.length; i++)
        arr.push(callback(this[i], i, this));
    return arr;
};

//tests
var arrs = ['dic tanin', 'boo radley', 'hans gruber'];
var numbers2 = [1, 4, 9];

var goodT = arrs.myMap(function(n) {
    return n;  // arrs배열을 mymap함수에 적용시킨다.
});

var squareRoot = numbers2.myMap(function(num) {
    return Math.sqrt(num);  // 제곱근을 구하는 함수 생성
});

console.log(goodT); // [ 'dic tanin', 'boo radley', 'hans gruber' ]
console.log(squareRoot); // [ 1, 2, 3 ]

実行コンテキストを理解するJavaScript操作手順

変数、関数宣言、およびパラメータ付きアクティブオブジェクト

を作成します.

Scope Chainの作成と初期化

変数初期化:変数値に定義されていない

を割り当てる

このバインディング

コードの解釈と実行
割当て

変数値:実際の値

を変数に割り当てる

▼♂変数初期化プロセス

宣言

変数:変数をアクティブオブジェクト

に割り当てます.

変数初期化:変数値に定義されていない

を割り当てる

変数割当実績:変数に実績値を割り当てる

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

非同期運転のsettimeout例

console.log("1");
function exec() {
  setTimeout(function() {
    console.log("2");
  }, 3000);
  setTimeout(function() {
    console.log("3");
  }, 0);
  console.log("4");
  setTimeout(function() {
    console.log(5);
  }, 1000);
}
console.log(exec());
// 위 코드 실행 결과 : 1, 4, 3, 5, 2

settimeoutの遅延が0であっても、実行コンテキストが異なるため、まず1、4が出力されます.

for文系settimeout

var i;
for (i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 5, 5, 5, 5, 5
  }, 1000);
}

上のコードを実行すると、0、1、2、3、4と推測されがちですが、実際にはfor文の実行がすべて終了するとsettimeoutのコールバック関数が実行されるので、数字5が出力されます.

▼▼♂argumentsオブジェクト

関数呼び出し時に渡される実際のパラメータ値の配列

// 아래 함수 정의에 포함된 인자 값은 2개
function add(a, b) {
  console.dir(arguments);
}
console.log(add(1)); // Arguments(1), 0: 1
console.log(add(1, 2)); // Arguments(2), 0: 1, 1: 2
console.log(add(1, 2, 3)); // Arguments(3), 0: 1, 1: 2, 2: 3

パラメータの使用:メソッドに渡すパラメータの数が分からない場合、

が使用されます.

function sum() {
  for (var i = 0, result = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}
console.log(sum(1,2,3)); // 6
console.log(sum(1,2,3,4,5,6)); // 21

注:パラメータにはlengthプロパティとargument[i]と同じインデックスがありますが、配列ではありません.
これらのオブジェクトは、類似配列のオブジェクト(array-like-object)と呼ばれます.

⛹️‍♂️ apply() & call()

パラメータ()に適用されます.実際の配列メソッドはcall()を使用して使用できます.

// apply() 적용 전
function sum() {
  console.log("arguments length : " + arguments.length);
  arguments.push(100); // Uncaught TypeError: arguments.push is not a function
  console.dir(arguments); // Arguments(3)
}
sum(1,2,3);
// 함수명.apply(대상, 인자 배열);
// apply() 적용 후
function sum() {
  var args1 = Array.apply(arguments);
  args1.push(100); // 0: 100
  console.dir(args1); // Array(1)

  var args2 = Array.prototype.slice.apply(arguments);
  args2.push(100); // 3: 100
  console.dir(args2); // Array(4)
}
sum(1,2,3);

apply(),call()メソッドが最終的に使用されます.apply()の関数を呼び出します.次に、呼び出し関数のパラメータ値にapply()に渡されるパラメータ配列を追加し、最後の実行結果のみをターゲットに接続します.

function user(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
}
user.apply(window, ['kevin', 'durant']); // user.call(window, 'John', 'Doe'); 와 같음

console.log(window.firstName); // 'kevin'
console.log(window.lastName); // 'durant'

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

は、通常、関数内部でグローバルスキャン(window)にアクセスするために使用される.

// 함수 선언식
var text = 'global';
function binding() {
  var text = 'local';
  console.log(this.text); // 'global'
  console.log(this); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
}
binding();

// 함수 표현식
var text = 'global';
var binding = function() {
  var text = 'local';
  console.log(this.text); // 'global'
  console.log(this); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
}
binding();

オブジェクトのプロパティで関数を宣言し、この関数を使用してオブジェクトにアクセスします.

var text = 'global';
var binding = {
  text: 'local',
  printText: function () {
    console.log(this.text); // 'local'
    console.log(this); // {text: "local", printText: ƒ}
  }
};
binding.printText();

関数の内部関数では、グローバルオブジェクト(ウィンドウ)にアクセスできます.

var text = 'global';
var binding = {
  text: 'local',
  printText: function () {
    console.log(this.text); // local
    var innerFunc = function () {
      console.log(this.text); // global
    };
    innerFunc();
  }
};
binding.printText();

▼▼▼▼▼▼▼▼スコフチェーンの理解例

グローバルスキャンと関数スキャンの区別

var a = 1;
var b = 2;
function func() {
  var a = 10;
  var b = 20;
  console.log(a); // 10
  console.log(b); // 20
}
func();
console.log(a); // 1
console.log(b); // 2

の下には、内部関数innerfuncから外部関数funcへの変数があります.

var a = 1;
function func() {
  var a = 2;
  function innerfunc() {
    return a;
  }
  console.log(innerfunc()); // 2
}
func();

次の例では、func 1の実行コンテキストがグローバルであることに注目します.

var a = 1;
function func1() {
  return a;
}
function func2(func1) {
  var a = 2;
  console.log(func1()); // 1
}
func2(func1);

π

外部関数の実行が終了してコンテキストに戻るが、内部関数で終了する外部関数のスキャン方法:スキャン方式

にアクセスできる.

関数は、ライフサイクルが終了した外部関数の変数

を参照する.

function func() {
  var a = 1;
  var cl = function () {
    console.log(a);
  };
  return cl
}
var result = func();
console.dir(result); // [[Scope]] 에서 Closure 함수임을 확인 가능
result();

コード

は、入力された値に基づいてテンプレートに異なる成果物を生成する

var str = [
  'hello ',
  '',
  ' world'
];

function completeSentence(name) {
  str[1] = name;
  return str.join('');
}
completeSentence('js'); //"hello js world"

モジュールを

以上のコードに適用する場合、

function completeSentence(name) {
  var str = [
    'hello ',
    '',
    ' world'
  ];
  return function () {
    str[1] = name;
    return str.join('');
  };
}
var result = completeSentence('js');
result();

ビット関数をさらに機能単位に分割すると、

.

function completeSentence(name) {
  var str = [
    'hello ',
    '',
    ' world'
  ];
  // 입력된 문자열로 문장을 완성하는 기능
  var complete = function () {
    str[1] = name;
    return str.join('');
  };
  // 문장 완성 기능을 클로져로 빼는 역할
  var closure = function () {
    return complete();
  };
  return closure;
}
var result = completeSentence('js');
result();  // "hello js world"

▼▼▼▼▼▼▼▼▼▼▼▼

モジュールを使用すると、javaまたは他の言語のように属性とメソッドの範囲を定義できます.

// 클로져로 Java 클래스와 유사하게 모듈화한 예제
var Module = (function() {
    var privateProperty = 'foo';
    function privateMethod(args) {
      console.log('private method');
    }

    return {
        publicProperty: '',
        publicMethod: function(args) {
          console.log("public method"); //undefined
        },
        privilegedMethod: function(args) {
          return privateMethod(args);
        }
    };
})();

Module.privilegedMethod(); // private method

💪板橋隊長のブログを参考にしました.

▼♂▼▼▼▼▼追加学習

**1. join()

:配列内の要素を接続し、値にします.**

構文:var str 1=arr.join();
アレイ内の要素を値にします.エレメントの区分はカンマ(,)で、エレメントの区分を別の文字にする場合は()に希望する文字を入れることができます.

例

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var jbAry = [ 'Lorem', 'Ipsum', 'Dolor' ];
      var jbStr1 = jbAry.join();
      var jbStr2 = jbAry.join( ' / ' );
      document.write( '<p>' + jbStr1 + '</p>' );
      document.write( '<p>' + jbStr2 + '</p>' );
    </script>
  </body>
</html>

2. slice()

:beginからendのコピーを新しい配列オブジェクトに返します.つまり、元の配列は変更されません.

構文:slice(start[,end]);
startのインデックス
-定義されていない場合は0からslice
-負の値を指定した場合:配列の末尾の長さを表します.slice(-2)は、配列の最後の2つの要素を抽出します.
-指定した配列の長さが等しいかそれ以上の場合:空の配列を返します.
インデックスの終了
-指定されていない場合:スライスをアレイの最後に
-負の値を指定した場合:配列の末尾の長さを表します.slice(2,-1)3番目の要素から2番目の要素へ抽出
-指定した配列の長さが等しいかそれ以上の場合:配列の末尾に抽出
戻り値:抽出要素を含む新しい配列

3. splice()

:アレイ内の既存の要素を削除または置換したり、新しい要素を追加したりして、アレイの内容を変更します.このメソッドは、元の配列自体を変更します.
-構文:splice(start[,deleteCount[,item 1[,item 2[,...]]);
start:配列のインデックスの変更を開始します.

の負数を指定します.配列の末尾から要素を計算します.
指定した配列の長さが大きい場合:実際の開始インデックスが配列の長さ

に設定されています.

の絶対値がタイルの長さより大きい場合:0に設定
deleteCount:配列から削除する要素の数.
省略/値はarrayです.length-startより大きい場合:startから始まるすべての要素を削除します.

0以下の数を指定します.要素は削除されません.
item1, item2, ... : 配列に追加する要素.

:splice()を指定しない場合は、要素削除のみが実行されます.

戻り値:削除された要素を含む配列.
値が削除されていない場合は、空の配列が返されます.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(10, 2, 'a', 'b', 'c');
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1); // [11, 12]

splice()関数を使用すると、元の配列arrが変更されます.
10番目のインデックスから2つの要素を削除し、「a」、「b」、「c」を追加します.
11および12は削除され、これらの削除された要素の配列はarr 1変数に含まれる.