Javascriptノート(二)の文法基礎紹介

前言
前回は、JavaScriptとEcmaScriptの違いと同じ点とフロントエンドの3つの要素:構造/スタイル/動作について簡単に説明しました.行動部分は主にJavaScriptが担当している.
JavaScript構文
JavaScriptはUnicode文字セットで記述されています.JavaScriptは大文字と小文字を区別する言語です.JavaScriptのコメントはC言語の2種類のコメントをサポートします.JavaScriptでは、識別子を使用して変数と関数に名前を付け、アルファベット、アンダースコア()を付けます.またはドル記号($)は、下線、記号なし、英字の先頭のみで、キーワードまたは保持子ではありません.ES 6(ECMAScript 2015)で定義されているキーワード|リザーブワード
break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try let satic
enum await
implements package protected interface private public
セミコロンの末尾を使用するか、セミコロンを文の末尾として使用しないことができます.文法仕様についてはjslintとeslint仕様を詳しく説明します.
タイプ、値、変数
1、変数
変数はvar、letキーワード、およびキーワードを使用しない定義を使用することができる.

// 1、   
var myVariable = 1; //      
// 2、    
var myVariable1 ; //    
myVariable1 = 2  //    
// 3、    （ES6  ）
let myVariable2 = 1; 
// 4、   
myVariable3  = 1; //        ，    ，     var，      

変数をES 6で繰り返し定義するとエラーが発生します

SyntaxError: Identifier 'myVariable2' has already been declared

ES 5ペアの厳格モードで変数に対する付与が宣言されていない場合もエラーが報告されますが、標準モードでは、繰り返し定義はエラーを報告しません.
varを使用して変数を宣言しないと、変数は自動的にグローバル変数として宣言されます.
2、タイプと値
JavaScriptの変数のタイプは、元のタイプ(primitive type)とオブジェクトタイプ(object type)の2つに分類されます.元のタイプには、数値型、文字列、ブール値、特殊な元の値(null、undefined)が含まれます.
可変か否かによって、可変タイプと不可変タイプに分けることもできます.数値、文字列、ブール値、null、undefinedは可変タイプです.
文法作用域(lexical scoping):任意の関数内で定義されていない変数はグローバル変数であり、関数内で宣言された作用域には関数作用域があり、関数内でのみ表示される.
字面量(直接量、literal):コードに直接表示される値は、字面量または直接量となる.

100 //     
"xiaojia" //       
true、false  //     
null  //       
/88/gi  //         
{name:"xiaojia",age:26}  //         
[1,2,3,4,5]  //         

2.1、数字型(number)
デジタルタイプは、整数型、浮動小数点型をサポートします.
整数型は十進法と十六進法(0 xまたは0 Xの先頭)の表現形式をサポートし、ECMAScriptは八進法をサポートしないが、JavaScriptは八進法の表現形式(0の先頭)をサポートし、厳格なモードでは八進法の使用は禁止されている.
浮動小数点型には2つの書き方があり、小数点形式と科学カウント法形式がサポートされており、浮動小数点型には3つの特殊な都値、-Infinity(負無限大)、Infinity(無限大)、NaN(1つの数ではなく、not a number)がある.

Number.MIN_VALUE  //    
Number.MAX_VALUE  //    
Number.POSITIVE_INFINITY  //    
Number.NEGATIVE_INFINITY  //    
Number.NaN //      

Javascriptでは、Numberタイプの有限性、すなわち無限大であるか否かを判断するグローバル関数isFinite()およびNumber.isFinite()が提供される
NaN:数ではなく、構成不可(non-configurable)、書き込み不可(non-writable)、枚挙にいとまがない属性です.実際のプログラミングでは、NaNを直接使用することはめったにありません.通常は計算に失敗したときに現れます.isNaN()とNumber.isisNaN():NaNの最も特殊な場所はNaN == NaNとNaN === NaNの戻り値がfalseであり、すなわちNaN自身が決して自身に等しくないことである.この特徴から,x!=xを判断することによってNaNであるか否かを判断することができ,isNaN()関数が欠けている場合には,以下のように用いることができる.

var isNaN = function(value) {
    var n = parseInt(value);
    return n !== n;
};

グローバル関数isNaN()を用いてNaNであるか否かを判断することができる.ケース:

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false:         37
isNaN("37.37");   // false:         37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")     123,   Number("123ABC")    NaN
isNaN("");        // false:         0
isNaN(" ");       // false:             0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"        ,        ，   NaN

ES 6では、Number.isNaN()が、その値が1つのNaNであるかどうかおよびそのタイプがNumberであるかどうかを判断するために提供される.グローバル関数isNaN()関数のより強力なバージョンです

Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

//              isNaN()  ，    true。
Number.isNaN("NaN");      // false，    "NaN"            NaN。
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

//        false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

isNaN()メソッドはオブジェクトに適用され、オブジェクトに基づいてisNaN()メソッドを呼び出すと、まずオブジェクトのvalueOf()メソッドが呼び出され、その後、数値に変換できるかどうかを決定し、できない場合はこの戻り値に基づいてtoString()が呼び出されます.toString()メソッドが元のタイプでない場合、結果はエラーになります.valueOf()メソッドデフォルトはオブジェクト自体を返します

isNaN({
  valueOf: function () {
    return 2;
  }
})
// false

isNaN({
  toString: function () {
    return 3;
  }
})
// false

Number({
  valueOf: function () {
    return 2;
  },
  toString: function () {
    return 3;
  }
})
// 2

注意:浮動小数点数であれば精度の問題があります.
2.2、文字列(string)
2.2.1、普通文字列
文字列は、引用符(二重引用符または単一引用符)による文字列であり、引用符はペアで表示する必要があります.
エスケープ文字:\(アンチスロープレバー)を使用して、特定の意味を持つ記号をエスケープしたり、通常の文字に特別な意味を持たせたりします.

   
\b   
\t    
\\\    
\'    
\"    

文字列は可変シーケンスです
2.2.2、複数行文字列(ES 6構文)
複数行文字列は
で書くのが面倒なので、ES 6では複数行文字列の書き方を逆引用符(`)で表すように追加しました.
例:

var s = `    
  
   `;
console.log(s);

ブラウザがES 6構文をサポートしていない場合は、SyntaxErrorエラーが表示されます.
複数行の文字は、\を反斜棒で書くこともできます.

var s = "    \
  \
   ";
console.log(s);

2.2.3、テンプレート文字列
ES 6の前に、複数の文字列を接続する必要がある場合は、+号を使用して文字を接続する必要があります.

var name = '    ';
var age = 26;
var message = '  , ' + name + ',    ' + age '  ！';
console.log(message);

これにより、多くの変数を接続する必要があります.+を使用するのは面倒です.その後、ES 6にテンプレート構文が追加されました.

var name = '    ';
var age = 26;
var message = `  ,  ${name},    ${age}  ！';
console.log(message);

2.3、ブール型(boolean)
ブールタイプにはtrueとfalseの2つの値しかありません.
2.4、undefined、null
null(キーワード)は特別な値で、typeof演算子を使用して演算すると「object」の値が得られ、nullを特殊なオブジェクト値と見なすことができます.
undefinedは、キーワードではない事前定義されたグローバル変数であり、typeof演算子を使用して「undefined」の値undefinedが定義されていない値についていくつかの状況が発生します.

変数が

を定義していない場合

クエリーするオブジェクトまたは配列要素は存在しません.

関数には

の戻り値がありません.

は、実パラメータが提供されていないパラメータ値

を参照する.

変数は定義されていますが、

を初期化します.
nullとundefinedの違い
nullまたはundefinedが検出されると、等しい(==)と等しい(===)の2つのオペレータの違いに注意してください.前者はタイプ変換を実行します.

typeof null        // "object" (            'null')
typeof undefined   // "undefined"
null === undefined // false
null  == undefined // true
null === null // true
null == null // true
!null //true
!undefined //true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

2.5 Symbolタイプ
ES 6には、ユニークな値を表すSymbolデータ型が追加されました.SymbolタイプはSymbol()関数を使用して作成されます.newキーを使用して作成することはできません.newキーを使用すると次のエラーが表示されます.

TypeError: Symbol is not a constructor
    at new Symbol (<anonymous>)

このことから、Symbolタイプはオブジェクトタイプではなく元のタイプであることがわかります.
Symbol()関数は文字列パラメータを受け入れます.

let s1 = Symbol();
let s2 = Symbol('foo');
 

SymbolタイプはString()またはtoString()で文字列タイプに変換できます

let sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

ES 6以前はオブジェクトの属性名は文字列であったが,ES 6以降はSymbolを用いて属性名を定義することができ,Symbol値を属性として使用する場合は,[]にSymbolを入れなければならず,括弧に入れなければ属性のキー名は文字列である.
注意:Symbol値を属性名とする場合、プライベート属性ではなく公開属性のために、Symbol値をswitch文で使用できます.
2.6、タイプ検査
JavaScriptでは、次の4つのチェック方法があります.

typeof

instanceof

constructor

toString.call()

2.6.1、typeof演算子

typeof 3;                //'number'
typeof NaN;              //'number'

typeof '3';              //'string'
typeof '';               //'string'

typeof true;             // 'boolean'
typeof Boolean(true);    // 'boolean'

typeof undefined;        // 'undefined'

typeof {};                // 'object'

typeof function fn(){};  // 'function'

typeof Symbol();         // 'symbol'

//        function
typeof class c{};        // 'function'

typeof null;             // 'object'
typeof new Number(3);    // 'object'
typeof new String(3);    // 'object'
typeof [];               // 'object'
typeof /\w+/;            // 'object'
typeof new Date();       // 'object'
typeof new Error();      // 'object'
typeof new Map();        // 'object'
typeof new Set();        // 'object'

このことから,typeof演算子はベースタイプに対する判定は比較的正確であるが,ベースタイプに対する保存クラスに対しては正しく検出できず,‘object’を1つ返すだけで,ESに対してMapとSetタイプを追加しても検出できないことが分かる.
配列、正規表現、Date、Errorタイプでは、すべての結果を得ることはできません.同じnullはクラスの「object」を返します.これは正確ではありません.
typeofにはこのような欠点があるが、既存のフレームワークのtypeofの使用には影響しない.
2.6.2、constructor constructor値と呼ぶが、コンストラクタ、すなわちconstructor属性はそのタイプを検出する.

(3).constructor === Number;       // true

NaN.constructor === Number;       // true

''.constructor === String;        // true

true.constructor === Boolean;     // true

Symbol().constructor === Symbol;  // true

var o = {};
o.constructor === Object;         // true

var fn = function() {};
fn.constructor === Function;      // true

var ary = [];
ary.constructor === Array;        // true

var date = new Date();
date.constructor === Date;        // true

var regex = /\w+/;
regex.constructor === RegExp;     // true

var error = new Error();
error.constructor === Error;      // true

var map = new Map();
map.constructor === Map;          // true

var set = new Set();
set.constructor === Set;          // true

new Number(3).constructor === Number;         // true

new Number(NaN).constructor === Number;       // true

new String('').constructor === String;        // true

new Boolean(true).constructor === Boolean;    // true

constructorを用いて大部分の値を完了できるがタイプ検出は可能であるがnullとundefinedの値を検出することはできないが,この2つの値を検出するために他の手段を用いることができることが分かった.nullとundefinedを使用してconstructorにアクセスしようとすると、次のエラーが表示されます.

TypeError: Cannot read property 'constructor' of null

コンストラクタを使用する方法では、カスタムオブジェクトを検出することもできますが、オブジェクトが継承に関連している場合は、コンストラクタが検出されるまで少し力不足になります.
2.6.3、instanceof演算子
継承に関わる場合はinstanceofを使用して値のタイプを検出できます.instanceofはオブジェクトタイプに適用され、オブジェクトタイプ以外の値に対してはinstanceofは何の役にも立たない.

//   typeof null    'object'      Object   

null instanceof Object;               // false

//        instanceof           

3 instanceof Number;                  // false

'3' instanceof Number;                // false

true instanceof Boolean;              // false

Symbol() instanceof Symbol;           // false

//          

new Number(3) instanceof Number;      // true

new String('3') instanceof String;    // true

new Boolean(true) instanceof Boolean; // true

Object(Symbol()) instanceof Symbol;   // true

({}) instanceof Object;               // true

[] instanceof Array;                  // true

(function(){}) instanceof Function;   // true

/./ instanceof RegExp;                // true

new Date() instanceof Date;             // true

new Error() instanceof Error;           // true

new Map() instanceof Map;               // true

new Set() instanceof Set;               // true

Instanceofを使用してベースタイプを検出することはできませんが、まずオブジェクトタイプに包装して検出することができますが、これは意味がありません.
2.6.4、toString.call()
ObjectではtoString()メソッドを使用してデータ型を検出できますが、まず見てみましょう.TOString()メソッドの取得方法

//    ：
var toString = {}.toString;
//    (       )：
var toString = Object.prototype.toString;

TOStringメソッドが様々な値を取得する方法を見てみましょうが、タイプを見てみましょう.

toString.call(undefined);     // '[object Undefined]'

toString.call(null);          // '[object Null]'

toString.call(3);             // '[object Number]'

toString.call(true);          // '[object Boolean]'

toString.call('');            // '[object String]'

toString.call(Symbol());      // '[object Symbol]'

toString.call({});            // '[object Object]'

toString.call([]);            // '[object Array]'

toString.call(function(){});  // '[object Function]'

toString.call(/\w+/);         // '[object RegExp]'

toString.call(new Date);      // '[object Date]'

toString.call(new Error);     // '[object Error]'

toString.call(new Map);       // '[object Map]'

toString.call(new Set);       // '[object Set]'

この方法をカプセル化して値タイプ判定を行うことができる

var _toString = Object.prototype.toString;

function is(value, typeString) {
  //         
  var stripped = _toString.call(value).replace(/^\[object\s|\]$/g, '');
  return stripped === typeString;
}

上記の一般的なタイプは正しく認識されるが、カスタムオブジェクトタイプを正しく認識することはできない.
2.7、タイプ変換
2.7.1、その他のタイプを数字に変換
1、文字列回転数型

Number('');         // 0
Number('3');        // 3
Number('3.14');     // 3.14
Number('3.14dfdf'); // NaN
Number('ddd3.14'); // NaN
Number('dd3.14dfdf'); // NaN
Number('99 88'); // NaN
Number(' '); // 0
Number('0'); // 0

2、boolean型をデジタル型に変換する

Number(true);     // 1
Number(false);   // 0

3、nullとundefinedをデジタルに変換

Number(undefined);  // NaN
Number(null);      // 0

3、配列をデジタルに変換する

Number([]);            // 0
Number([1,1,2,3,4]);   // NaN

4、日付時間を数字に変換する

Number(new Date());  // 1535286362647 
//              
var d= new Date();
d.getTime();

それ以外は整数型に変換するとNaNになると思っています.
注:intとfloatに変換する方法は2つありますが、その結果はNumberのいくつかの場所とは異なります.
1.parseInt();

parseInt("adsfad3dfadf4") // NaN
parseInt("3.14dfdf")     // 3
parseInt(3.14)           // 3.14
parseInt([1,2,3,4,5])    // 1
parseInt(" ")            // NaN
parseInt("")             // NaN
parseInt([])              // NaN
parseInt({})             // NaN
parseInt(null)           // NaN
parseInt(undefined)     // NaN
parseInt(true) 	       // NaN
parseInt(false)        // NaN

2.parseFloat();

parseFloat("3.14") // 3.14
parseFloat("3.14dfdf")     // 3.14
parseFloat(3.14)           // 3.14
parseFloat([1,2,3,4,5])    // 1
parseFloat(" ")            // NaN
parseFloat("")             // NaN
parseFloat([])              // NaN
parseFloat({})             // NaN
parseFloat(null)           // NaN
parseFloat(undefined)     // NaN     

2.7.2、その他のタイプを文字列タイプに変換

new String(NaN)          // [String: 'NaN']
new String(Infinity)     // [String: 'Infinity']
new String(null)         // [String: 'null']
new String(undefined)    // [String: 'undefined']
new String(true)         // [String: 'true']
new String(false)        // [String: 'false']
new String(1)            // [String: '1']
new String(3.24)         // [String: '3.24']
new String({})           // [String: '[object Object]']
new String([1,2,3,4,5])  // [String: '1,2,3,4,5']
new String([])     		 // [String: '']
new String(new Date())   // [String: 'Sun Aug 26 2018 20:48:15 GMT+0800 (CST)']
new String(new Error())  // [String: 'Error']
new String(new Set)      // [String: '[object Set]']
new String(new Map)        // [String: '[object Map]']
new String(function fn(){}) // [String: 'function fn(){}']

2.7.4、その他のタイプをブールに変換

Boolean(NaN)          // fasle
Boolean(Infinity)     // true
Boolean(-Infinity)     // true
Boolean(null)         // false
Boolean(undefined)    // false
Boolean(1)            // true
Boolean(3.24)         // true
Boolean(0)            // false
Boolean(-0)            // false
Boolean({})           // true
Boolean([1,2,3,4,5])  // true
Boolean([0])         // true
Boolean([])         // 、true
Boolean(function fn(){})  // true
Boolean(" ")  // true
Boolean("")  // false

Boolean("0")      // true
Boolean("fasle")  // true

Boolean(new Date())   // true
Boolean(new Error())  // true
Boolean(new Set())    // true
Boolean(new Map())   // true