blog

最も完全なJavaScriptの基本的な概要〜推奨コレクション

はオブジェクト指向、クロスプラットフォームのスクリプト言語です。 変数や定数の宣言にletを使用すると、これは一時的なデッドゾーンになります。 if文ではletを使ってfooを宣言しているので、inの...

May 4, 2020 · 19 min. read
シェア

JavaScript

JavaScript

Javascriptはオブジェクト指向のクロスプラットフォームなスクリプト言語です。

JavaScriptの特徴は何ですか?

  • 解釈型スクリプト言語
  • ブラウザで実行
  • 型付けの弱い言語
  • イベント駆動
  • クロスプラットフォーム

JavaScriptは何に使われるの?

  • HTMLページへの動的テキストの埋め込み
  • ブラウザのイベントへの応答
  • HTML 要素の読み書き
  • サーバーに送信されるデータの検証
  • 訪問者のブラウザ情報の検出
  • クッキーの作成と変更を含むクッキーの制御
  • Node.jsテクノロジーに基づくサーバーサイドプログラミング

JavaScriptのスコープ

スコープ:変数のスコープで、主に以下のものがあります:

  • グローバル変数

プログラムの実行範囲全体のアクションのスコープは、変数の関数本体の外に定義されているグローバル変数ですが、関数の本体では、varを使用して定義されていないもグローバル変数です。

  • ローカル変数

ローカル変数は関数本体内で定義され、var キーワードを使用して関数本体内で定義された変数または形式パラメータはローカル変数です。 ローカル変数がグローバル変数と名前が変更された場合、関数本体内ではローカル変数がグローバル変数より優先されます。

  • 変數の昇格

変数の宣言は現在のスコープの先頭に昇格しますが、代入は昇格しません。

一時的なデッドゾーン

同じ関数やブロックのスコープで同じ変数を再宣言すると、SyntaxError が発生します。

これはステージング・デッドゾーンです。

ここには主に2つの落とし穴があります。

  • switch caseにおけるcase文のスコープ。
switch (x) {
 case 0:
 let foo;
 break;
 
 case 1:
 let foo; // TypeError for redeclaration.
 break;
}

これはswitchのブロックレベルのスコープが1つしかないためで、以下のように変更することで回避できます。

let a = 0x1;
switch (a) {
case 0x0: {
        let b;
        break;
    }
case 0x1: {
        let c;
        break;
    }
}
  • レキシカル・スコープによるステージングのデッドゾーン
function b() {
    var obj = 0x21;
    if (!false) {
        let a = a + 0x37;
    }
}
b();

if文はletを使ってfooを宣言しているので、ifブロックスコープ内のfooはswitch内で参照され、テスト関数内のfooは参照されません。しかし、if内のfooはまだ宣言されていないので、if内のfooはまだ宣言されていません。

この行では、ifブロックの "foo "は字句環境に作成されていますが、まだ初期化には至っていません。

つまり、まだステージングのデッドゾーンにあります。

変数のライフサイクル

グローバル変数のライフサイクルは、ブラウザがページをアンロードするまで終わりません。ローカル変数は関数の実行中にのみ存在し、値を格納するためにスタックやヒープ上に領域が確保され、関数が終了するまで関数内で使用されます。

実行環境 実行スタック

実行環境はスタックを実行します。

JavaScript インタプリタが実行コードを初期化するとき、デフォルトではまずグローバル実行環境に入ります。この瞬間から、関数を呼び出すたびに新しい実行環境が作成され、各実行環境はスタックにプレスされる新しい環境オブジェクトを作成します。

実行ストリームが関数に入ると、関数の環境オブジェクトが環境スタックに押し込まれます。関数の実行が終了すると、スタックはその環境を排出し、制御を実行環境に戻します。

ストリクトモード

通常の動作モードに加え、ECMAscript 5 では 2 番目の動作モードが追加されました。その名前が示すように、このモードは Javascript をより厳しい条件で動作させます。その主な目的は次のとおりです:

  • Javascriptの構文における非合理性や厳密性の欠如をなくし、奇妙な振る舞いを減らします。
  • コード操作の安全性を確保するために、コード操作の不安定さを解消します;
  • コンパイラの効率を改善し、動作速度を向上させます;
  • 将来のJavascriptの新バージョンへの道を開きます。

"ストリクトモード "は、より合理的な、より安全でより厳格な方向、IE 10を含むJavascriptの開発を反映し、主流のブラウザを含め、それをサポートしています。

非厳密モードで動作する同じコードは、厳密モードで動作しない場合があります。

ストリクトモードへの移行方法

<script>
 "use strict"
 console.log("厳格なモードに入っている");
</script> 

ストリクト・モードの動作変更

  • グローバル変数は var.
<script>
 "use strict"
 
 a = 10;//aはvarで宣言されていないため、エラーが報告された
 //Uncaught ReferenceError: a is not defined; 引用エラー:aが宣言されていない
 
</script>
  • this はグローバルオブジェクトを指すことはできません。
<script>
 "use strict"
 // console.log("厳格なモードに入っている");
 function a(){
 this.b = 10; //これは、ウィンドウオブジェクトを指しているため、エラーを報告する;
 //Uncaught TypeError: Cannot set property 'b' of undefined; タイプエラー:未定義の属性bを設定できない;
 }
 window.a();
</script>
  • 関数内の属性名の変更
<script>
 "use strict";
 function a(b,b,c){ // 
 console.log(b,b,c); // 通常モード 2,2,3
 // Uncaught SyntaxError: Duplicate parameter name not allowed in this context ;構文エラー:重複したパラメータ名は、このコンテキストでは許可されていない
 }
 a(1,2,3)
</script>
  • 引数オブジェクト

引数オブジェクトは動的に変更することはできません。

<script>
 function fn1(a) {
 a = 2;
 return [a, arguments[0]];
 }
 console.log(fn1(1)); // ノーマルモードは[2,2]
 function fn2(a) {
 "use strict";
 a = 2;
 return [a, arguments[0]];
 }
 console.log(fn2(1)); // 厳密なモードは[2,1]
</script>

引数オブジェクトを自己コールすることは許されません。

<script>
 "use strict";
 var f = function() { return arguments.callee; };
 f(); //  
 //Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
 //タイプエラー: "呼び出し元"、 "引数.callee ", 厳密モードで使用することはできない;
 //caller現在の関数を呼び出す関数への参照を返す 
 // callee実行されている関数自体への参照を返す 
</script>

this

thisはjsのキーワードで、実行コンテキストに基づいて現在呼び出しているオブジェクトを動的に指し示します;

call(), apply(), bind() は this を現在の呼び出し元を指すように変更することができます。

js オブジェクト

数値、文字列、配列、数学、オブジェクト、関数など、jsではすべてがオブジェクトです。

jsにおけるオブジェクトの本質は、プロパティとメソッドの集合体です。

オブジェクトをより公式な言葉で説明します:

オブジェクトとは、実は型、つまり参照型のことです。オブジェクトの値は参照型のインスタンスです。ECMAScript における参照型とは、データや関数をまとめるためのデータ構造のことです。これはしばしばクラスとも呼ばれますが、ECMAScript 6 以前にはそのようなものはありませんでした。ECMAScript はオブジェクト指向言語ですが、伝統的なオブジェクト指向言語がサポートするクラスのような基本構造は持っていません。

カプセル化、継承、ポリモーフィズム

  • カプセル化:

1、オブジェクトの書き込み

2、オブジェクトの使用

いくつかの関連するオブジェクトと属性を一緒に入れて、変数を抽象化すれば、オブジェクトのカプセル化が完成します。

  • 継承です:

子は父を受け継ぎます。

子オブジェクトは親オブジェクトのプロパティやメソッドを使用できます。

  • ポリモーフィズム:

オーバーロード、上書き

オーバーロードとは、パラメータの型や数に応じて異なる関数を実装することです。

オーバーライドとは、親クラスのメソッドがうまく動かないので、同じ名前で別のメソッドを定義し直すことです。

  • リテラル
var obj = {
  
 key:value
}
  • new
var obj = new Object()
  • コンストラクタ
var obj = new Object()
  • ファクトリーのパターン

ファクトリーパターンは、具体的なオブジェクトを作成するプロセスを抽象化します。ECMAScript ではクラスを作成することができないため、開発者は次の例のように、特定のインターフェイスを持つオブジェクトを作成する詳細をカプセル化する関数を考案しました:

function Person(name,age,job){
 this.name= name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }
}
var person1 = new Person('monkey',30,'web');
var person2 = new Person('zhu',25,'h5');
  • ES6 クラス構文糖
function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
 alert(this.name);
 }
 return o;
}
var person1 = createPerson('monkey',30,'web');
var person2 = createPerson('zhu',25,'h5');

共通メソッド

組み込みオブジェクト

文字列を作成する2つの方法:

  • charAt() は、指定した位置の文字を返します。
  • indexOf() は、文字列を検索して添え字を返します。
  • lastIndexOf() は、文字列を後ろから前に検索します。
  • charCodeAt() は、指定された位置の文字の Unicode コードを返します。
  • fromCharCode() 文字コードから文字列を作成します。
  • concat() 文字列を連結します。
  • match() 1 つ以上の一致を検索します。
  • replace() 正規表現に一致する部分文字列を置換します。
  • search() 正規表現に一致する値を取得します。
  • slice() 文字列の一部を抽出し、抽出した部分を新しい文字列で返します。
  • split() 文字列を文字列の配列に分割します。
  • substr() 文字列から、開始インデックス番号で指定された数の文字を取り出します。
  • substring() 文字列内の指定された 2 つの添字番号の間の文字を取り出します。
  • toLowerCase() 文字列を小文字に変換します。
  • toUpperCase() 文字列を大文字に変換します。
  • trim() 文字列の前後のスペースを削除します。
  • startsWith() 文字列が特定の文字で始まるかどうかを指定します。
  • endsWith() 文字列が特定の文字で終わるかどうかを指定します。
  • includes() 文字列が特定の文字を含むかどうか
  • repeat() 文字列を複数回繰り返します。

Math の一般的なプロパティは以下のとおりです:

  • Math.E は、自然対数の底である算術定数 e を返します。
  • Math.LN2関数は、2の自然対数を返します。
  • Math.LN10関数は、10の自然対数を返します。
  • Math.LOG2E関数は、底2のeの自然対数を返します。
  • Math.LOG10E関数は、底10のeの対数を返します。
  • Math.PI関数は、円の円周率を返します。
  • Math.SQRT1_2関数は、2の平方根の逆数を返します。
  • SQRT1_2.SQRT2関数は、2の平方根を返します。

一般的なAPIは以下のとおりです。

  • abs(x) は数値の絶対値を返します。
  • sin(x) 関数は、数値の正弦を返します。
  • cos(x) 関数cos関数は、数値の余弦を返します。
  • tan(x) 関数は、角度のタンジェントを返します。
  • ceil(x) 四捨五入します。
  • floor(x) 数値を四捨五入します。
  • round(x) 整数を四捨五入します。
  • max(x,y) xとyの最大値を返します。
  • min(x,y) xとyの最小値を返します。
  • pow(x,y):xのy乗を返します。
  • sqrt(x)」は、数値の算術平方根を返します。
  • random():0から1の間のランダムな10進数(0と1以外を含む)を返します。

一般的な API は以下のとおりです。

  • getDate() は、Date オブジェクトからその月の曜日を返します。
  • getDay() は、Date オブジェクトから曜日を返します。
  • getMonth() は、Date オブジェクトから月を返します。
  • getFullYear() は、Date オブジェクトから西暦を 4 桁で返します。
  • getYear() 代わりに getFullYear() メソッドを使用してください。
  • getHours() Date オブジェクトの時間を返します。
  • getMinutes() Date オブジェクトの分を返します。
  • getSeconds() Date オブジェクトの秒を返します。
  • getMilliseconds() Date オブジェクトのミリ秒を返します。
  • getTime() : 1970 年 1 月 1 日から現在までのミリ秒数を返します。
  • getTimezoneOffset() 現地時間とグリニッジ標準時との差を分単位で返します。
  • parse() 1970 年 1 月 1 日午前 0 時から指定された日付までのミリ秒数を返します。
  • setDate() Date オブジェクトの月日を設定します。
  • setMonth() Date オブジェクト内の月を設定します。
  • setFullYear() Date オブジェクトの年を設定します。
  • setYear() かわりに setFullYear() メソッドを使用してください。
  • setHours() Date オブジェクトの時間を設定します。
  • setMinutes() Date オブジェクトに分を設定します。
  • setSeconds() Date オブジェクトの秒を設定します。
  • setMilliseconds() Date オブジェクトのミリ秒を設定します。
  • setTime() Date オブジェクトのミリ秒単位を設定します。

js

学校では、クラスは次のようにグループ化されます。

列は配列で、配列にはたくさんの要素があります。jsは弱い型付け言語なので、配列も弱い型付けで、同じ配列変数でもいろいろな種類の要素を持つことができます。

  • リテラル
var arr = [];
  • 新しい演算子
class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
 toString() {
 return '(' + this.x + ', ' + this.y + ')';
 }
}

一般的なメソッド

  • 2つ以上の配列を結合し、結果を返します。
  • join() : 配列のすべての要素を文字列にします。要素は指定した区切り文字で区切られます。
  • 配列の最後の要素を削除して返します。
  • push(): 配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します。
  • 配列の最初の要素を削除して返します。
  • 配列の先頭に要素を追加し、新しい長さを返します。
  • 配列の要素の順序を逆にします。
  • slice(): 既存の配列から、選択した要素を返します。
  • 配列の要素を並べ替えます。
  • splice(): 要素を削除し、新しい要素を配列に追加します。
  • 配列を文字列に変換し、その結果を返します。

ES5 の新しい配列メソッド

  • indexOf()

ある要素が配列内に存在するかどうかを判定し、存在しない場合は -1 を返し、存在する場合は最初に現れる位置を返します。

  • lastIndexOf()

lastIndexOf() メソッドは、指定した文字列値の最後の出現位置を返します。

  • forEach()

配列の各要素をループ処理します。この関数には、それぞれ項目、インデックス、配列という 3 つの正式なパラメータが含まれます。

  • map()

は、新しい配列を返しますが、新しい配列は、元の配列のマップです、元の配列を変更しないでください、新しい配列の要素は、各関数の戻り値の戻り値であり、returnを記述しない場合は、新しい配列の要素は、すべての空の値を受信します。

  • フィルタ()

フィルタリングの要素は、新しい配列を返し、各関数の戻り値によって新しい配列は、要素の組成に対応する真です。

  • 元の配列には影響しません。

がある限り、戻り値は、最終的な戻り値はtrueですが、要素の後にトラバースし続けることはありません、1つはtrueの戻り値を満たすためにない場合は、falseを返す、元の配列は影響を受けません;

配列の各項目に対して与えられた関数を実行し、関数が各項目に対して true を返した場合、最終結果は true になります。

  • 元の配列は影響を受けません。

reduce() メソッドは関数をアキュムレータとして受け取り、 配列の各値をひとつの値にまとめます。 reduce() は、関数を合成するための高階関数として使用できます。

reduce() は、空の配列に対してはコールバックを実行しません。

  • reduceRight()

reduceRight() メソッドの機能は reduce() と同じですが、 reduceRight() は配列の末尾から先に配列の項目を累積していきます。

reduceRight() は、空の配列に対するコールバック関数を実行しません。

ES6 の新しい配列メソッド

  • find()

は、現在の検索ルールにマッチする配列の最初の要素を見つけ、それを返し、検索を終了するコールバック関数を渡します。

  • findIndex()

現在の検索規則に一致する配列の最初の要素を見つけ、その添え字を返し、検索を終了するコールバック関数を渡します。

  • fill()

置換する添え字の範囲を指定して、配列の要素を新しい要素で置換します。

フォーマット: arr.fill(value, start, end)

  • copyWithin()

配列の添え字を選択し、その位置から配列要素をコピーします。コピーする要素の範囲を指定することもできます。

書式: arr.copyWithin(置換開始位置, 置換値を選択する開始位置, 置換値を選択する終了位置)

  • Array.from()

配列のようなオブジェクトや走査可能なオブジェクトを実際の配列に変換します。

  • Array.of()

値の集合を受け取り、配列に変換するために使用します。

  • entries()

イテレータを返します: キーと値のペアを返します。

  • values()

キーと値のペアの値を返します。

  • keys()()

キーと値のペアのキーを返します。

  • インクルード()

要素が配列に存在するかどうかを判定します。パラメータ:検索する値、開始位置、ES5時代のindexOf判定を置き換えることができます。

ES6

let/const

ブロック・レベル・スコープ: 言語間で広く使われているスコープの一種;

オレンジアルゴリズム ...

配列または配列のようなオブジェクトをカンマで区切られた一連の値に展開する3つのドット記号。

var arr = [];

リスト演算子

rest 演算子も 3 つのドットですが、展開演算子とは逆で、カンマで区切られた一連の値を配列にまとめます。

var obj = new Array();
var obj = new Array(0xa);
var obj = new Array();

テンプレート文字列

ES6には、括弧で囲まれた新しいタイプの文字列があります。通常、文字列をこのようなタグで連結します。

var b = function (bar, obj, Bar) {
    console.log(bar);
    console.log(obj);
    console.log(Bar);
};
var c = [
    0x1,
    0x2,
    0x3
];
b(c[0x0], c[0x1], c[0x2]);
b(...c);

しかし、ES6の文字列ではとてもシンプルです。

var obj = function (c, ...b) {
    console.log(c);
    console.log(b);
};
obj(0x1, 0x2, 0x3, 0x4);

変数を ${ } で展開することで、連結が簡単になります。

=>ベクタープリント関

本来の書き方は

bianliang + '\x20<strong>これはテキストである' + obj.name + '</strong>\x20' + bianliang;

矢印関数を使います:

'\x20' + bianliang + '\x20<strong>これはテキストである' + obj.name + '</strong>' + bianliang + '\x20';

アロー関数のthis点が固定されるのは、アロー関数が内部にthis結合メカニズムを持っているからではありません。「実際の理由は、アロー関数がそれ自身のthisを持たないために、内部のthisが外部のthisになっているだけです。""は外側のコードブロックのthisです。このため、アロー関数はコンストラクタになることができません。主な欠点は2つあります:

  • アロー関数は新しく作ることができず、コンストラクタと同じようには設計されていません。
  • JSON オブジェクトを返すアロー関数は括弧で囲む必要があります。

分解された代入

var test = function(x){
 return x+2;
}

セット構造とマップ構造

JSが最初に設計されたとき、SUNのスタッフが参加したため、JAVAとその優れた設計と相まって、JSの構文とメモリ設計はJAVAにとても近いものになりました。しかし、JAVAは多くの優れたコンテンツを、JSはどのような目的で、例えば、セットとマップコレクションを導入していませんでした。

セットコレクション

Setコレクションは、要するに、例えば配列のパッケージ化です:

var test = x =>x+2;
var   =   => 算数のルール;

セットはデフォルトで重複を除去されますが、追加された2つの要素が厳密に等しい場合のみで、5と "5 "は等しくなく、2つの新しい文字列は等しくありません。

トラバーサルメソッドについて Setコレクションは本質的にはまだマップなので、それをトラバースするいくつかの奇妙な方法があります。

var [bar, Obj, A] = [
    0x1,
    0x2,
    0x3
];
var {
    a: bar,
    b: Obj,
    c: A
} = {
    'a': 0x1,
    'b': 0x2,
    'c': 0x3
};
var B = 'tanakasan';
var Foo = 0x12;
var Bar = {
    'username': B,
    'foo': Foo
};
let imgs = new Set();
imgs.add(1);
imgs.add(1);
imgs.add(5);
imgs.add("5");
imgs.add(new String("abc"));
imgs.add(new String("abc"));
// 印刷結果: 1 5 '5' 'abc' 'abc'
var bar = new Set([
    'a',
    'b',
    'c'
]);
for (let a of bar.keys()) {
    console.log(a);
}
for (let foo of imgs.values()) {
    console.log(foo);
}

SETコレクションは添え字によるアクセスを提供しないため、forを使用してトラバースすることしかできません。

// 以下の例は、配列の複製を削除する非常に微妙な方法です。

for (let obj of imgs.entries()) { console.log(obj); }

マップ・コレクション

マップコレクション、つまりマップ

for (let a of imgs) {
    console.log(a);
}

// 代入を分解したループ・トラバーサル

var newarr = [...new Set(array)];

BOM

BOMの構造を以下に示します:

window はグローバルブラウザ組み込みのトップレベルオブジェクトで、ブラウザで開いているウィンドウを表します。

クライアントサイドJavaScriptでは、Windowオブジェクトはグローバルオブジェクトであり、すべての式は現在の環境で計算されます。

つまり、現在のウィンドウを参照するための特別な構文は必要ありません。そのウィンドウのプロパティをグローバル変数として使用することができます。

例えば、window.documentと記述する代わりに、document.Documentと記述するだけです。

同様に、Window.alert()の代わりにalert()のように、現在のウィンドウオブジェクトのメソッドを関数として使用することもできます。

上記のプロパティとメソッドに加えて、Window オブジェクトはコア JavaScript で定義されているすべてのグローバル プロパティとメソッドを実装しています。

グローバル変数

グローバル変数はデフォルトで window の下にぶら下げられます:

let map = new Map();
 
map.set("S230", " ");
map.set("S231", " ");
map.set("S232", " ");
要素を取得する map.get("s232"); // 

ウィンドウ下のサブオブジェクト

の位置に表示されます。

  • window.location.href取得および変更可能な現在のページのURL。
  • window.location.hostnameウェブホストのドメイン名。
  • window.location.pathname 現在のページのパスとファイル名。
  • window.location.port ウェブホストのポート。
  • window.location.protocol 使用するウェブプロトコル。
  • window.location.search リクエストパラメータ
  • window.location.reload() ページを更新するメソッドです。

通常、キャッシュを使用せずにページを更新するには reload() に true を渡します。キャッシュされるのは通常、jsファイルやcssファイルなどです。このメソッドを使うと、移動できないページを移動させることができます。現在のページを更新します。

window.navigator.Refresh()

  • navigator.appName 返り値 現在のブラウザの名前を取得します。
  • navigator.appVersion 現在のブラウザのバージョン番号を返します。 navigator.platform 現在のコンピュータのオペレーティングシステムを返します。
  • navigator.platform 現在のコンピュータのオペレーティングシステムを返します。

上記のプロパティは徐々に非推奨となります。

新しいプロパティがこれに代わる予定です。

navigator.userAgentはブラウザ情報を返します。

現在のブラウザの種類を決定する例:

for (let [obj, a] of map) {
    console.log(obj, a);
}

履歴を返します。

  • history.go(1)引数には任意の整数、正数前進、負数後退を指定。
  • history.back()
  • history.forward()

screen: スクリーン

  • window.screen.widthは、現在の画面の幅を返します。
  • window.screen.heightは、現在の画面の高さを返します。

window以下のポップアップメソッド

  • alert() はアラート・ボックスをポップアップします。
  • prompt() は入力ボックスをポップアップします。
  • confirm() は確認ボックスをポップアップします

DOM

DOM は、ドキュメントを表現したり変更したりするために必要なオブジェクト、振る舞い、属性、そしてこれらのオブジェクト間の関係を定義します。

DOM ノードの取得

  • document.getElementById(id name)
  • getElementsByTagName(tag name)

コレクションの取得

  • getElementsByName( ) 名前の値で要素を取得し、戻り値はコレクションです。

すべてのタグがname値を持っているわけではなく、下位ブラウザでは互換性の問題があるかもしれません。

  • getElementsByClassName(class name)

IE8では使用できません。

  • document.querySelector >>>一度マッチした要素は二度とマッチしません。
  • document.querySelectorAll >>>> 信じられないほど強力。

属性の取得と操作

  • getAttribute( ) は要素の属性の値を取得します。
  • setAttribute( ) は要素の属性を設定します。
  • removeAttribute( ) は、属性を削除します。
Read next

Vue SSRナレッジノート

誰がファイルをリクエストしても、実際に入ってくるのはアプリで、それはみんなに共有されていることにお気づきでしょうか。ページをリクエストした王馬子がアプリに変更を加えた場合、その後にページをリクエストした人は何らかの影響を受けることになります。ステートフルシングルトンは避けるべきです。 同じルールがルーター、ストア、イベントバスにも当てはまります。

May 4, 2020 · 2 min read