歡迎來到JavaScript的奇妙世界！作為前端開發(fā)的基石，JavaScript為網(wǎng)頁增色不少，賦予了靜態(tài)頁面活力與交互性。如果你是一名前端小白，對編程一無所知，或者只是聽說過JavaScript卻從未涉足過，那么你來對了地方！本篇博客將帶領(lǐng)你逐步進(jìn)入JavaScript的大門，一步一步地探索這門語言的基本語法和應(yīng)用。無論你是想為網(wǎng)頁添加動(dòng)態(tài)效果，或是構(gòu)建一個(gè)全功能的Web應(yīng)用程序，學(xué)習(xí)JavaScript都是你邁向成功的必經(jīng)之路。準(zhǔn)備好了嗎？讓我們一起踏上這段令人興奮的學(xué)習(xí)旅程吧！

1. 變量

在編程語言中，變量用于存儲(chǔ)數(shù)據(jù)值。

JavaScript 使用關(guān)鍵字 var 來定義變量， 使用等號來為變量賦值。

變量初始化

1. var是一個(gè)JS關(guān)鍵字，用來聲明變量(variable變量的意思)。使用該關(guān)鍵字聲明變量后，計(jì)算機(jī)會(huì)自動(dòng)為變量分配內(nèi)存空間。
2. age 是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間。

//聲明變量同時(shí)賦值為18
var age = 18; 
//同時(shí)聲明多個(gè)變量時(shí)，只需要寫一個(gè) var， 多個(gè)變量名之間使用英文逗號隔開。

var age = 18, address ='火影村',salary = 15000;

2. 詞法語法

ECMAScript 源碼文本會(huì)被從左到右掃描，并被轉(zhuǎn)換為一系列的輸入元素，包括標(biāo)識符、控制符、行終止符、注釋和空白符。

同樣地，ECMAScript 也定義了一些關(guān)鍵字、字面量以及行尾分號補(bǔ)全的規(guī)則。

區(qū)分大小寫

JavaScript 是區(qū)分大小寫的語言，也就是說，關(guān)鍵字、變量、函數(shù)名和所有的標(biāo)識符（Identifier）都必須采取一致的大小寫的形式。但是需要注意的是，HTML 和 CSS 并不區(qū)分大小寫（盡管 XHTML 區(qū)分大小寫），也就是說如果我們在用 JavaScript 控制 HTML 屬性的時(shí)候?qū)?HTML 來說 id 和 ID 沒區(qū)別，但是 JavaScript 有區(qū)別。

代碼示例：

abc、Abc、aBc、abC、ABC 是五個(gè)不同的變量名。

var abc = 1;
var Abc = 2;
var aBc = 3;
var abC = 4;
var ABC = 5;

console.log(abc, Abc, aBc, abC, ABC); // 1 2 3 4 5

注釋

JavaScript 不會(huì)執(zhí)行注釋。

我們可以添加注釋來對 JavaScript 進(jìn)行解釋，或者提高代碼的可讀性。

單行注釋

單行注釋以兩個(gè)斜杠開頭
快捷鍵：ctrl + /

// let a;

多行注釋

多行注釋又叫塊級注釋，以 /* 開頭，以 */ 結(jié)尾
快捷鍵：shift + alt + a

/*
以下代碼為
聲明變量并
賦值
*/
let a;
a = 1;

塊級注釋 /**/ 可以跨行書寫，但不能嵌套，否則會(huì)報(bào)錯(cuò)。

// Error

/*
注釋1
/*
注釋1.1
 */
 */

塊級注釋 /**/ 中的那些字符也可能出現(xiàn)在正則表達(dá)式字面量里，所以塊級注釋對于被注釋的代碼塊來說是不安全的。

/*
    var rm_a = /a*/.match(s);
*/

直接量

JavaScript 數(shù)據(jù)直接量：直接量（Literals），又名字面量，就是可以在程序中直接使用的數(shù)據(jù)。

主要有以下幾種直接量：

空直接量

null;

布爾直接量

true;
false;

數(shù)值直接量

// 十進(jìn)制
1234567890;

字符串直接量

'foo';
'bar';

對象直接量

var o = { a: 'foo', b: 'bar', c: 42 };

// ES6中的簡略表示方法
var a = 'foo',
  b = 'bar',
  c = 42;
var o = { a, b, c };

// 不需要這樣
var o = { a: a, b: b, c: c };

數(shù)組直接量

[1954, 1974, 1990, 2014];

標(biāo)識符

標(biāo)識符，就是指變量、函數(shù)、屬性的名字，或者函數(shù)的參數(shù)。標(biāo)識符可以是按照下列格式規(guī)則組合起來的一或多個(gè)字符。

• 第一個(gè)字符必須是一個(gè)字母、下劃線（_）、或一個(gè)美元符號（$）
• 其他字符可以是字母、下劃線、美元符號或數(shù)字
  標(biāo)識符中的字母也可以包含擴(kuò)展的 ASCII 或 Unicode 字母字符，但我們不推薦這樣做。

按照慣例，ECMAScript 標(biāo)識符采用駝峰大小寫格式，也就是第一個(gè)字母小寫，剩下的每個(gè)單詞的首字母大寫。

const firstSecond = 123;

const myCar = 'Toyota';

const doSomethingImportant = function () {};

關(guān)鍵字和保留字

和其他任何編程語言一樣，JavaScript 保留了一些標(biāo)識符為自己所用。這些保留字不能用做普通的標(biāo)識符。由于好多參考書的誤導(dǎo)，貌似保留字和關(guān)鍵字是分開的，其實(shí)并不是，關(guān)鍵字只是保留字的一部分。

保留字包括關(guān)鍵字、未來保留字、空字面量和布爾值字面量。

保留字

• 關(guān)鍵字 Keyword
• 未來保留字 FutureReservedWord
• 空字面量 NullLiteral
• 布爾值字面量 BooleanLiteral

關(guān)鍵字

以下關(guān)鍵字 ES6 規(guī)范中已實(shí)現(xiàn)

break      do         instanceof  typeof
case       else       new         var
catch      finally    return      void
continue   for        switch      while
debugger   function   this        with
default    if         throw       delete
in         try        class       extends
const      export     import

未來保留字

以上是 ECMAScript6 的保留字，但在 ECMAScript3 版本中的保留字并不一樣，若希望代碼能在基于 ECMAScript3 實(shí)現(xiàn)的解釋器上運(yùn)行的話，應(yīng)該避免使用以下保留字作為標(biāo)識符。

abstract    boolean     byte        char
constdouble enum        final       float
goto        implements  int         interfacelong
native      package     private     protected
public      short       static      super
throw       transient   volatile    synchronized

預(yù)定義變量和函數(shù)

此外，JavaScript 預(yù)定義了很多全局變量和函數(shù)，應(yīng)該避免把它們的名字用做標(biāo)識符名。

String      Number      Boolean      Array
Date        Function    Math         Object
RegExp      Error       EvalError    JSON
Infinity    NaN         isNaN        isFinite
undefined   arguments   parseInt     parseFloat
eval        decodeURI   encodeURI    decodeURIComponent
encodeURIComponent      RangeError   ReferenceError
TypeError   URIError    SyntaxError

分號

JavaScript 使用分號 ; 將語句分隔開，這對增強(qiáng)代碼的可讀性和整潔性是非常重要的。

有些地方可以省略分號，有些地方則不能省略分號。

兩條語句用兩行書寫，第一個(gè)分號可以省略

a = 3;
b = 4;

兩條語句用一行書寫，第一個(gè)分號不能省略

a = 3;
b = 4;

但 JavaScript 并不是在所有換行處都填補(bǔ)分號，只有在缺少了分號無法正確解析代碼時(shí)，JavaScript 才會(huì)填補(bǔ)分號。換句話說，如果當(dāng)前語句和隨后的非空格字符不能當(dāng)成一個(gè)整體來解析的話，JavaScript 就在當(dāng)前語句行結(jié)束處填補(bǔ)分號。

代碼示例：

var a;
a = 3;
console.log(a);

JavaScript 將其解析為:

var a;
a = 3;
console.log(a);

3. 數(shù)據(jù)類型

JavaScript 是一種 弱類型語言 或者說 動(dòng)態(tài)語言。這意味著你不用提前聲明變量的類型，在程序運(yùn)行過程中，類型會(huì)被自動(dòng)確定。

這也意味著你可以使用同個(gè)相同名稱的變量保存不同類型的數(shù)據(jù)：

var foo = 42;
// foo is a Number now

var foo = 'bar';
// foo is a String now

var foo = true;
// foo is a Boolean now

ECMAScript 標(biāo)準(zhǔn)定義了原始數(shù)據(jù)類型和引用數(shù)據(jù)類型，共七種內(nèi)置類型：

• 原始數(shù)據(jù)類型（基本類型）：按值訪問，可以操作保存在變量中實(shí)際的值。
  • 空值（null）
  • 未定義（undefined）
  • 布爾值（boolean）
  • 數(shù)字（number）
  • 字符串（string）
  • 符號（symbol）
• 引用類型（復(fù)雜數(shù)據(jù)類型）：引用類型的值是保存在內(nèi)存中的對象。
  • 對象（Object）
    • 布爾對象（Boolean）
    • 數(shù)字對象（Number）
    • 字符串對象（String）
    • 函數(shù)對象（Function）
    • 數(shù)組對象（Array）
    • 日期對象（Date）
    • 正則對象（RegExp）
    • 錯(cuò)誤對象（Error)

原始數(shù)據(jù)類型

空值

空值 null 是一個(gè)字面量，它不像 undefined 是全局對象的一個(gè)屬性。

null 是表示缺少的標(biāo)識，指示變量未指向任何對象。把 null 作為尚未創(chuàng)建的對象，也許更好理解。

代碼示例：

foo 不存在，它從來沒有被定義過或者是初始化過。

foo;
> "ReferenceError: foo is not defined"

foo 現(xiàn)在已經(jīng)是知存在的，但是它沒有類型或者是值。

var foo = null;
foo;
> null

未定義值

未定義值 undefined 是全局對象的一個(gè)屬性。也就是說，它是全局作用域的一個(gè)變量。undefined 的最初值就是原始數(shù)據(jù)類型 undefined。

var foo;


console.log(foo);
// undefined

布爾值

布爾類型表示一個(gè)邏輯實(shí)體，可以有兩個(gè)值：true 和 false

數(shù)字

進(jìn)制數(shù)

• 十進(jìn)制：JavaScript 中默認(rèn)的進(jìn)制數(shù)
• 八進(jìn)制：第一位必須是 0，然后是 0-7 的數(shù)字組成
• 十六進(jìn)制：前兩位必須是 0x，然后是 0-9 及 A-F（字母不區(qū)分大小寫）

// 十進(jìn)制
var num1 = 10;


// 八進(jìn)制的56
var num2 = 070;


// 十進(jìn)制，因?yàn)橛袛?shù)字超過了7，這里是79
var num3 = 079;


// 十六進(jìn)制的31
var num4 = 0x1f;

浮點(diǎn)數(shù)

var num = 0.1 + 0.2;
var sum = '2.3' * 100;


console.log(num);
// 0.30000000000000000004


console.log(sum);
// 229.99999999999997

上面例子表達(dá)的就是 JavaScript 的浮點(diǎn)型數(shù)據(jù)在計(jì)算時(shí)容易丟失精度，這一點(diǎn)并不僅在 JavaScript 存在，建議處理這方面問題使用專用的數(shù)字處理類，比如 Java 里的 BigDecima 類來處理。

數(shù)字的范圍

JavaScript 中數(shù)值的范圍是有效位數(shù)的，基本上夠我們使用，我們僅需要知道以下幾個(gè)知識點(diǎn)：

• Number.MIN_VALUE 或 Number.NEGATIVE_INFINITY：表示 JavaScript 中的最小值
• Number.MAX_VALUE 或 Number.POSITIVE_INFINITY：表示 JavaScript 中的最大值
• Infinity：表示無窮大
• -Infinity：表示無窮小

NaN

NaN （Not a number）的含義是本該返回?cái)?shù)值的操作未返回?cái)?shù)值，返回了 NaN 就不會(huì)拋出異常影響語句流暢性。

NaN 屬性的初始值就是 NaN，和 Number.NaN 的值一樣。

在現(xiàn)代瀏覽器中（ES5 環(huán)境）， NaN 屬性是一個(gè)不可配置（non-configurable）、不可寫（non-writable）的屬性。但在 ES3 中，這個(gè)屬性的值是可以被更改的，但是也應(yīng)該避免覆蓋。

編碼中很少直接使用到 NaN。通常都是在計(jì)算失敗時(shí)，作為 Math 的某個(gè)方法的返回值出現(xiàn)的（例如：Math.sqrt(-1)）或者嘗試將一個(gè)字符串解析成數(shù)字但失敗了的時(shí)候（例如：parseInt("blabla")）。

字符串

JavaScript 的字符串類型用于表示文本數(shù)據(jù)。它是一組 16 位的無符號整數(shù)值的元素。在字符串中的每個(gè)元素占據(jù)了字符串的位置。第一個(gè)元素的索引為 0，下一個(gè)是索引 1，依此類推。字符串的長度是它的元素的數(shù)量。

'foo';
'bar';
'1234';
'one line \n another line';
"John's cat";

符號

符號（Symbols）是 ECMAScript 第 6 版新定義的。該類型的性質(zhì)在于這個(gè)類型的值可以用來創(chuàng)建匿名的對象屬性。該數(shù)據(jù)類型通常被用作一個(gè)對象屬性的鍵值，當(dāng)這個(gè)屬性是用于類或?qū)ο箢愋偷膬?nèi)部使用的時(shí)候。

var myPrivateMethod = Symbol();


this[myPrivateMethod] = function () {
  // ...
};

引用數(shù)據(jù)類型

引用類型通常叫做類（Class），也就是說，遇到引用值，所處理的就是對象。

在 ECMA-262 標(biāo)準(zhǔn)中根本沒有出現(xiàn) 類 這個(gè)詞，而是定義了 對象定義，邏輯上等價(jià)于其他程序設(shè)計(jì)語言中的類。

對象是由 new 運(yùn)算符加上要實(shí)例化的對象的名字創(chuàng)建的。

例如，下面的代碼創(chuàng)建 Object 對象的實(shí)例：

var o = new Object();

這種語法與 Java 語言的相似，不過當(dāng)有不止一個(gè)參數(shù)時(shí)，ECMAScript 要求使用括號。

如果沒有參數(shù)，如以下代碼所示，括號可以省略：

var o = new Object();

盡管括號不是必需的，但是為了避免混亂，最好使用括號。

類型檢測

類型檢測的方法：

1. typeof
2. instanceof
3. Object.prototype.toString
4. constructor

typeof

typeof 操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型。

typeof undefined;
// "undefined"


typeof null;
// "object"


typeof 100;
// "number"


typeof NaN;
// "number"


typeof true;
// "boolean"


typeof 'foo';
// "string"


typeof function () {};
// "function"


typeof [1, 2];
// "object"


typeof new Object();
// "object"

typeof 操作符適合對 基本類型（除 null 之外）及 function 的檢測使用，而對引用數(shù)據(jù)類型（如 Array）等不適合使用。

更詳細(xì)信息請查閱 typeof 操作符。

instanceof

instanceof 運(yùn)算符用于檢測一個(gè)對象在其 原型鏈 中是否存在一個(gè)構(gòu)造函數(shù)的 prototype 屬性。

左操作數(shù)為對象，不是就返回 false，右操作數(shù)必須是 函數(shù)對象 或者 函數(shù)構(gòu)造器，不是就返回 TypeError 異常。

obj instanceof constr;
function Person() {}
function Student() {}
Student.prototype = new Person();
Student.prototype.constructor = Student;


const ben = new Student();
ben instanceof Student;
// true


const one = new Person();
one instanceof Person;
// true
one instanceof Student;
// false
ben instanceof Person;
// true

任何一個(gè)構(gòu)造函數(shù)都有一個(gè) prototype 對象屬性，這個(gè)對象屬性將用作 new 實(shí)例化對象的原型對象。

?? instanceof 適合用于判斷對象是否屬于 Array、Date 和 RegExp 等內(nèi)置對象。

?? 不同 window 或 iframe 之間的對象類型檢測無法使用 instanceof 檢測。

更詳細(xì)信息請查閱 instanceof

Object.prototype.toString

可以通過 toString() 來獲取每個(gè)對象的類型。

為了 每個(gè)對象 都能通過 Object.prototype.toString 來檢測，需要以 Function.prototype.call 或者 Function.prototype.apply 的形式來調(diào)用，傳遞要檢查的對象作為第一個(gè)參數(shù)。

Obejct.prototype.toString.call(undefined)；
//  "[object Undefined]"


Obejct.prototype.toString.call(null)；
//  "[object Null]"


Obejct.prototype.toString.call(true)；
//  "[object Boolean]"


Obejct.prototype.toString.call('')；
/// "[object String]"


Obejct.prototype.toString.call(123)；
//  "[object Number]"


Obejct.prototype.toString.call([])；
//  "[object Array]"


Obejct.prototype.toString.call({})；
//  "[object Object]"

?? 使用 Object.prototype.toString 方法能精準(zhǔn)地判斷出值的數(shù)據(jù)類型。

?? 注意事項(xiàng)：

• 方法重寫：Object.prototype.toString 屬于 Object 的原型方法，而 Array 或 Function 等類型作為 Object 的實(shí)例，都重寫了 toString 方法。因此，不同對象類型調(diào)用 toString 方法時(shí)，調(diào)用的是重寫后的 toString 方法，而非 Object 上原型 toString 方法，所以采用 xxx.toString() 不能得到其對象類型，只能將 xxx 轉(zhuǎn)換成字符串類型。

constructor

任何對象都有 constructor 屬性，繼承自原型對象，constructor 會(huì)指向構(gòu)造這個(gè)對象的構(gòu)造器或構(gòu)造函數(shù)。

Student.prototype.constructor === Student;
//  true

數(shù)組檢測

ECMAScript5 將 Array.isArray() 正式引入 JavaScript，該方法能準(zhǔn)確檢測一個(gè)變量是否為數(shù)組類型。

Array.isArray(variable);

4. 表達(dá)式

字面量

字面量（Literal），又名直接量，即程序中直接使用的數(shù)據(jù)值。

// Null 字面量
const n = null;

// Undefined 字面量
const u = undefined;

// Boolean 布爾值字面量
const b1 = true;
const b2 = false;

// Number 數(shù)值字面量
const num = 1;
const nan = NaN;

// String 字符串字面量
const hello = 'hello';
const world = 'world';

// Regexp 正則字面量
const reg = /pattern/;

// Template Literal 模版字面量
const temp = `hello, ${world}`

數(shù)組初始化表達(dá)式

數(shù)組初始化表達(dá)式 是通過一對方括號和其內(nèi)由逗號隔開的列表構(gòu)成的。初始化的結(jié)果是一個(gè)新創(chuàng)建的數(shù)組。

逗號分隔

數(shù)組的元素是 逗號分隔 的表達(dá)式的值。

空數(shù)組：[] 內(nèi)留空即表示該數(shù)組沒有任何元素

擁有兩個(gè)元素的數(shù)組：第一個(gè)是 3，第二個(gè)是 7。

[1 + 2, 3 + 4]

嵌套數(shù)組

數(shù)組初始化表達(dá)式中的元素初始化表達(dá)式也可以是數(shù)組的初始化表達(dá)式。也就是說，這些表達(dá)式是可以嵌套的。

var matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]]

可省略元素

數(shù)組直接量中的列表逗號之間的元素可以省略，這時(shí)省略的空位會(huì)填充值不存在。

var sparseArray = [1, , , , 5]


// 相當(dāng)于
// [1, empty x 3, 5]

數(shù)組直接量的元素列表結(jié)尾處可以留下單個(gè)逗號，這時(shí)并不會(huì)創(chuàng)建一個(gè)新的值為 undefined 的值。

const arr = [1, 2, 3, ]


console.log(arr)
// [1, 2, 3]

索引賦值

通過數(shù)組索引賦值，只會(huì)給指定索引所在位置賦值，而其中未賦值的索引位置則表示為空 empty，而非定義為 undefined.

let arr = [0, 1]


arr[10] = 10


console.log(arr);
// [0, 1, empty x 8, 10]


console.log(arr.length);
// 11


ary.filter(x => x === undefined);
// []

對象初始化表達(dá)式

對象和數(shù)組初始化表達(dá)式實(shí)際上是一個(gè)新創(chuàng)建的對象和數(shù)組。這些初始化表達(dá)式有時(shí)稱作 對象直接量 和 數(shù)組直接量。然而和布爾值直接量不同，它們實(shí)際上不是原始表達(dá)式，因?yàn)樗鼈兯某蓡T或者元素都是子表達(dá)式。

對象初始化表達(dá)式和數(shù)組初始化表達(dá)式非常相似，只是方括號被花括號代替，并且每個(gè)子表達(dá)式都包含一個(gè)屬性名和一個(gè)冒號作為前綴。

// 一個(gè)擁有兩個(gè)屬性成員的對象
var p = {
  x: 2.3,
  y: -1.2,
};


// 一個(gè)空對象
var q = {};


// q 的屬性成員和 p 的一樣
q.x = 2.3;
q.y = -1.2;

對象直接量也可以嵌套。

var rectangle = {
  upperLeft: { x: 2, y: 2 },
  lowRight: { x: 4, y: 5 },
};

JavaScript 求對象初始化表達(dá)式的值的時(shí)候，對象表達(dá)式也都會(huì)各自計(jì)算一次，并且它們不必包含常數(shù)值：它們可以是任意 JavaScript 表達(dá)式。

同樣，對喜愛那個(gè)直接量中的屬性名稱可以是字符串而不是標(biāo)識符（這在那些只能使用保留字或一些非法標(biāo)識符作為屬性名的地方非常有用）

var side = 1;
var square = {
  upperLeft: {
    x: p.x,
    y: p.y,
  },
  lowerRight: {
    x: p.x + side,
    y: p.y + side,
  },
};

屬性訪問器

屬性訪問表達(dá)式運(yùn)算得到一個(gè)對象屬性或一個(gè)數(shù)組元素的值。

JavaScript 為屬性訪問定義了兩種語法。

語法

• 第一種寫法是一個(gè)表達(dá)式后跟隨一個(gè)句點(diǎn)和標(biāo)識符。表達(dá)式指定對象，標(biāo)識符則指定需要訪問的屬性的名稱。

expression.identifiler

• 第二種寫法是使用方括號，方括號內(nèi)是另一個(gè)表達(dá)式（這種方法適用于對象和數(shù)組）。第二個(gè)表達(dá)式指定要訪問的屬性的名稱或代表要訪問數(shù)組元素的索引。

expression[expression]

不管使用哪種形式的屬性訪問器，在句點(diǎn)和左方括號之前的表達(dá)式總是會(huì)首先計(jì)算。

• 如果計(jì)算結(jié)果是 null 或 undefined，表達(dá)式會(huì)拋出一個(gè)類型錯(cuò)誤異常，因?yàn)檫@兩個(gè)值都不能包含任意屬性
• 如果計(jì)算結(jié)果不是對象，JavaScript 會(huì)將其轉(zhuǎn)換為對象
• 如果對象表達(dá)式后跟隨句點(diǎn)和標(biāo)識符，則會(huì)查找由這個(gè)標(biāo)識符指定的屬性值，并將其作為整個(gè)表達(dá)式的值返回
• 如果對象表達(dá)式后跟隨一對方括號，則會(huì)計(jì)算方括號內(nèi)的表達(dá)式的值并將其轉(zhuǎn)換為字符串

不論哪種情況，如果命名的屬性不存在，那么整個(gè)屬性訪問表達(dá)式的值就是 undefined。

示例

var a = {x: 1, y: {z: 3}};
// 一個(gè)示例對象


var b = [a, 4, [5, 6]];
// 一個(gè)包含這個(gè)對象的示例數(shù)組


console.log(a.x);
// 1


console.log(a.y.z);
// 3


console.log(a["x"]);
// 1


console.log(b[1]);
// 4


console.log(b[2]["1"]);
// 6


console.log(b[0].x);
// 1

5. 運(yùn)算符

in

in 運(yùn)算符用于判斷屬性是否存在于對象中。

語法

key in obj;

參數(shù)

示例

var cars = new Array('Toyota', 'Nissan', 'Mercedes', 'Buick', 'Porsche');
0 in cars;
// true

1 in cars;
// true

'PI' in Math;
//  true

var myCar = { make: 'Honda', model: 'Accord', year: '1998' };
'make' in myCar;
'model' in myCar;

instanceof

instanceof 運(yùn)算符用于測試構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對象的原型鏈中的任何位置。

代碼示例：

target instanceof constructor;

檢測類型

instanceof 可以檢測某個(gè)對象是否是另一個(gè)對象的 實(shí)例。

const Person = function () {};
const student = new Person();


console.log(student instanceof Person);
// true

instanceof 可以檢測父類型。

function Person() {}
function Student() {}


const p = new Person();


// 繼承原型
Student.prototype = p;


const s = new Student();


console.log(s instanceof Student);
// true
console.log(s instanceof Person);
// true

typeof

typeof 操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型。

語法

typeof operand;

參數(shù)

返回值

下表總結(jié)了 typeof 可能的返回值。

有關(guān)類型和原始值的更多信息，可查看 JavaScript 數(shù)據(jù)結(jié)構(gòu) 頁面。

算術(shù)運(yùn)算符

算術(shù)運(yùn)算符使用數(shù)值（字面量或者變量）作為操作數(shù)進(jìn)行運(yùn)算并返回一個(gè)數(shù)值。

標(biāo)準(zhǔn)的算術(shù)運(yùn)算符就是加減乘除 +、-、* 和 /。

當(dāng)操作數(shù)是浮點(diǎn)數(shù)時(shí)，這些運(yùn)算符表現(xiàn)得跟它們在大多數(shù)編程語言中一樣（特殊要注意的是，除零會(huì)產(chǎn)生 Infinity ）。

實(shí)踐示例

console.log(-9 % 2);
// -1


console.log(1 + -+(+(+-+1)));
// 2

實(shí)現(xiàn)指數(shù)運(yùn)算符

function calculateExponent(base, exponent) {
  if (exponent === 1) {
    return base;
  } else {
    return base * calculateExponent(base, exponent - 1);
  }
}

更新表達(dá)式

更新表達(dá)式包括 前自增/自減運(yùn)算符 和 后自增/自減運(yùn)算符。

示例

前自增

前自增：先自增，再賦值

let n = 10;


// 前自增
const res = ++n;


console.log(n);
// 11
console.log(res);
// 11

前自減

前自減：先自減，再賦值

let n = 10;


// 前自減
const res = --n;


console.log(res);
// 9
console.log(n);
// 9

后自增

后自增：先賦值，再自增

let n = 10;


// 后自增
const res = n++;


console.log(res);
// 10
console.log(n);
// 11

后自減

后自減：先賦值，再自減

let n = 10;


// 后自減
const res = n--;


console.log(res);
// 10
console.log(n);
// 9

賦值運(yùn)算符

一個(gè) 賦值運(yùn)算符（assignment operator）將它右邊操作數(shù)的值賦給它左邊的操作數(shù)。

下列為 ECMAScript 標(biāo)準(zhǔn)規(guī)范的 Assignment Operator：

* = /= %= += -= <<= >>= >>>= &= ^= |= **=

比較運(yùn)算符

比較運(yùn)算符比較它的操作數(shù)并返回一個(gè)基于表達(dá)式是否為 true 的邏輯值。

比較運(yùn)算符分為關(guān)系運(yùn)算符（Relational Operators）**和**等值運(yùn)算符（Equality Operators）。

• 操作數(shù)可以是數(shù)字，字符串，邏輯，對象值。
• 字符串比較是基于標(biāo)準(zhǔn)的字典順序，使用 Unicode 值。
• 在多數(shù)情況下，如果兩個(gè)操作數(shù)不是相同的類型， JavaScript 會(huì)嘗試轉(zhuǎn)換它們?yōu)榍‘?dāng)?shù)念愋蛠肀容^。這種行為通常發(fā)生在數(shù)字作為操作數(shù)的比較。
• 類型轉(zhuǎn)換的例外是使用 === 和 !== 操作符，它們會(huì)執(zhí)行嚴(yán)格的相等和不相等比較。這些運(yùn)算符不會(huì)在檢查相等之前轉(zhuǎn)換操作數(shù)的類型。下面的表格描述了該示例代碼中的各比較運(yùn)算符。

關(guān)系運(yùn)算符

等值運(yùn)算符

抽象相等比較算法

1. 若 Type(x) 與 Type(y) 相同，則
   1. 若 Type(x) 為 Undefined，返回 true
   2. 若 Type(x) 為 Null，返回 true
   3. 若 Type(x) 為 Number，則
      1. 若 x 為 NaN，返回 false
      2. 若 y 為 NaN，返回 false
      3. 若 x 與 y 為相等數(shù)值，返回 true
      4. 若 x 為 +0 且 y 為 -0，返回 true
      5. 若 x 為 -0 且 y 為 +0，返回 true
      6. 返回 false
   4. 若 Type(x) 為 String
      1. 當(dāng) x 和 y 為完全相同的字符序列（長度相等且相同字符在相同位置）時(shí)返回 true
      2. 否則，返回 false
   5. 若 Type(x) 為 Boolean
      1. 當(dāng) x 和 y 為同為 true 或者同為 false 時(shí)返回 true
      2. 否則，返回 false
   6. 當(dāng) x 和 y 為引用用一對象時(shí)返回 true。否則，返回 false。
2. 若 x 為 null 且 y 為 undefined，返回 true
3. 若 x 為 undefined 且 y 為 null，返回 true
4. 若 Type(x) 為 Number 且 Type(y) 為 String，返回比較 x == ToNumber(y) 的結(jié)果
5. 若 Type(x) 為 String 且 Type(y) 為 Number，返回比較 ToNumber(x) == y 的結(jié)果
6. 若 Type(x) 為 Boolean，返回比較 ToNumber(x) == y 的結(jié)果
7. 若 Type(y) 為 Boolean，返回比較 x == ToNumber(y) 的結(jié)果
8. 若 Type(x) 為 String 或 Number，且 Type(y) 為 Object，返回比較 x == ToPrimitive(y) 的結(jié)果
9. 若 Type(x) 為 Object 且 Type(y) 為 String 或 Number，返回比較 ToPrimitive(x) == y 的結(jié)果
10. 返回 false

按以上相等之定義：

• 字符串比較可以按這種方式強(qiáng)制執(zhí)行：'' + a == '' + b
• 數(shù)值比較可以按這種方式強(qiáng)制執(zhí)行：+a == +b
• 布爾值比較可以按這種方式強(qiáng)制執(zhí)行：!a == !b

等值比較操作保證以下不變：

• A !== B 等價(jià)于 !(A == B)
• A == B 等價(jià)于 B == A，除了 A 與 B 的執(zhí)行順序。

相等運(yùn)算符不總是傳遞的。例如，兩個(gè)不同的 String 對象，都表示相同的字符串值；== 運(yùn)算符認(rèn)為每個(gè) String 對象都與字符串值相等，但是兩個(gè)字符串對象互不相等。

• new String('a') == 'a' 和 'a' == new String('a') 皆為 true
• new String('a') == new String('a') 為 false

字符串比較使用的方式是簡單地檢測字符編碼單元序列是否相同。不會(huì)做更復(fù)雜的、基于語義的字符或者字符串相等的定義以及 Unicode 規(guī)范中定義的 Collating Order。所以 Unicode 標(biāo)準(zhǔn)中認(rèn)為相等的 String 值可能被檢測為不等。實(shí)際上這一算法認(rèn)為兩個(gè)字符串已經(jīng)是經(jīng)過規(guī)范化的形式。

引用數(shù)據(jù)類型間比較

const a = function() {};
const b = function() {};


console.log(a === b);
// false


console.log([] === []);
// false


console.log({} === {});
// false

當(dāng)我們訪問引用數(shù)據(jù)類型（對象、數(shù)組、函數(shù)等等）的值時(shí)，首先從棧中獲得該對象的 地址指針，然后再從 堆內(nèi)存 中取得所需的數(shù)據(jù)。

變量 a 實(shí)際保存的是指向堆內(nèi)存中對象的一個(gè)指針，而變量 b 保存的是指向堆內(nèi)存中的另一個(gè)對象的指針，雖然這兩個(gè)對象的值時(shí)一樣的，但它們是獨(dú)立的兩個(gè)對象，占了兩份內(nèi)存空間，所以它們互不相等。

而當(dāng)將一個(gè)為引用數(shù)據(jù)類型的值的變量賦值給另一個(gè)變量時(shí)，即拷貝了前者的內(nèi)存空間的地址指針，因此它們都指向堆內(nèi)存中同一個(gè)對象。

let x = {}


let y = x


console.log(x === y)
// true

條件運(yùn)算符

**條件運(yùn)算符（Conditional Operator）*是 JavaScript 中唯一的一個(gè)*三元運(yùn)算符（三個(gè)操作數(shù)），有時(shí)直接稱做三元運(yùn)算符。

variable = boolean_expression ? true_value : false_value;

本質(zhì)上，這就是基于對 boolean_expression 求值的結(jié)果，決定給變量 variable 賦什么值。如果求值結(jié)果是 true ，則給變量 variable 賦值true_value；如果求值結(jié)果是 false，則給變量 variable 賦值false_value。

邏輯運(yùn)算符

邏輯運(yùn)算符常用于對操作數(shù)進(jìn)行布爾運(yùn)算，經(jīng)常和關(guān)系運(yùn)算符一樣配合使用。邏輯運(yùn)算符將多個(gè)關(guān)系表達(dá)式組合起來組成一個(gè)更復(fù)雜的表達(dá)式。邏輯運(yùn)算符分為邏輯與 && 、邏輯或 || 、邏輯非 ! 三種。

邏輯與

邏輯與運(yùn)算符 由兩個(gè)和號 && 表示，有兩個(gè)操作數(shù)，只有在兩個(gè)操作數(shù)都為 true 時(shí)，結(jié)果才返回 true，否則返回 false。

邏輯與的真值表

邏輯或

邏輯與運(yùn)算符 由兩個(gè)和號 && 表示，有兩個(gè)操作數(shù)，只有在兩個(gè)操作數(shù)都為 true 時(shí)，結(jié)果才返回 true，否則返回 false。

邏輯與的真值表

邏輯非

邏輯非操作符由一個(gè)嘆號( ! )表示，可以應(yīng)用于 ECMAScript 中的任何值。無論這個(gè)值是什么數(shù)據(jù)類型，這個(gè)操作符都會(huì)返回一個(gè)布爾值。邏輯非操作符首先會(huì)將它的操作數(shù)轉(zhuǎn)換成一個(gè)布爾值，然后再對其求反。

console.log(!null);
// t null


console.log(!undefined);
// t NaN


console.log(!0);
// t 數(shù)值0


console.log(!NaN);
// t NaN


console.log(!'');
// t 空字符串


console.log(!'123');
// f 非空字符串


console.log(!Infinity);
// f 任意非0數(shù)值（包括Infinity）


console.log(!{ a: 1 });
// f 對象

6. 語句

if 語句

條件語句用于基于不同的條件來執(zhí)行不同的動(dòng)作。

在 JavaScript 中，我們可使用以下條件語句：

• if 語句 - 只有當(dāng)指定條件為 true 時(shí)，使用該語句來執(zhí)行代碼
• if…else 語句 - 當(dāng)條件為 true 時(shí)執(zhí)行代碼，當(dāng)條件為 false 時(shí)執(zhí)行其他代碼
• if…else if…else 語句 - 使用該語句來選擇多個(gè)代碼塊之一來執(zhí)行
• switch 語句 - 使用該語句來選擇多個(gè)代碼塊之一來執(zhí)行

當(dāng)一個(gè)邏輯條件為真，用 if 語句執(zhí)行一個(gè)語句。當(dāng)這個(gè)條件為假，使用可選擇的 else 從句來執(zhí)行這個(gè)語句。

單層條件判斷

if (condition) {
  statement_1;
}
[else {
  statement_2;
}] //推薦使用嚴(yán)格的語句塊模式，語句else可選

多層條件判斷

if (condition_1) {
  statement_1;
} [else if (condition_2) {
  statement_2;
}]
...
[else if (condition_n_1) {
  statement_n_1;
}] [else {
  statement_n;
}]

要執(zhí)行多個(gè)語句，可以使用語句塊 ({ … }) 來分組這些語句。

for 語句

for 語句 也是一種前測試循環(huán)語句，但它具有在執(zhí)行循環(huán)之前初始化變量和定義循環(huán)后要執(zhí)行的代碼的能力。

語法

for (initialization; expression; post - loop - expression) {
  // statement
}

參數(shù)：

• initialization 初始化表達(dá)式：表達(dá)式通常會(huì)初始化一個(gè)或多個(gè)循環(huán)計(jì)數(shù)器（變量），但語法上是允許一個(gè)任意復(fù)雜度的表達(dá)式，通常為一條聲明賦值語句（只在循環(huán)開始之前執(zhí)行一次）。
• expression 循環(huán)條件判斷：執(zhí)行循環(huán)語句前的判斷語句（通常為比較表達(dá)式），若為 true 則執(zhí)行循環(huán)語句，否則則不執(zhí)行循環(huán)語句，并跳出循環(huán)語句。
• post-loop-expression 計(jì)數(shù)器變量更新：循環(huán)執(zhí)行語句執(zhí)行后執(zhí)行的計(jì)數(shù)器變量更新表達(dá)式，更新循環(huán)計(jì)數(shù)器（變量），以進(jìn)入下一次循環(huán)條件判斷。
• statement 循環(huán)執(zhí)行語句：當(dāng)循環(huán)條件滿足時(shí)所執(zhí)行的語句，執(zhí)行完畢后執(zhí)行計(jì)數(shù)器變量更新語句（利用 break 、continue 語句除外）。

最佳實(shí)踐

代碼示例

var count = 10;


for (let i = 0; i < count; i++) {
  console.log(i);
}

從尾部向前循環(huán)

位數(shù)的整倍循環(huán)

// 五位數(shù)的數(shù)字
const num = 99999;


for (let i = 1; i < num; i *= 10) {
  // 被除數(shù) num
  // 除數(shù)
  const divisor = i * 10;
  // 整除部分
  const divided = Math.floor(num / divisor);
  // 余數(shù)
  const remainder = num % divisor;


  console.log(i, divisor);
  //    i       divisor
  // 1. 1       10
  // 2. 10      100
  // 3. 100     1000
  // 4. 1000    10000
  // 5. 10000   100000
}

涉及多個(gè)變量的循環(huán)

for (let i = 0, j = 10; i < 10; i++, j--) {
  sum += i * j;
}

若在循環(huán)中一次迭代改變多個(gè)變量，則必須使用到逗號運(yùn)算符，它將初始化表達(dá)式和自增表達(dá)式合并入一個(gè)表達(dá)式中以用于 for 循環(huán)。

while 語句

while 語句可以在某個(gè)條件表達(dá)式為真的前提下，循環(huán)執(zhí)行指定的一段代碼，直到那個(gè)表達(dá)式不為 true 時(shí)結(jié)束循環(huán)。

語法

while (expression) statement;

參數(shù)

注意：使用 break 語句在 expression 計(jì)算結(jié)果為真之前停止循環(huán)。

示例

代碼示例

var i = 0;
while (i < 10) {
  i += 2;
}
var cars = ['BMW', 'Volvo', 'Saab', 'Ford'];
var text = '';
var i = 0;
while (i < cars.length) {
  text += cars[i] + '<br>';
  i++;
}

switch 語句

switch 語句允許一個(gè)程序求一個(gè)表達(dá)式的值并且嘗試去匹配表達(dá)式的值到一個(gè) case 標(biāo)簽。如果匹配成功，這個(gè)程序執(zhí)行相關(guān)的語句。

語法

switch (expression) {
   case value_1:
      statements_1
      [break;]
   case value_2:
      statements_2
      [break;]
   ...
   default:
      statements_def
      [break;]
}

工作原理：首先設(shè)置表達(dá)式 expression（通常是一個(gè)變量）。隨后表達(dá)式的值會(huì)與結(jié)構(gòu)中的每個(gè) case 的值做比較。如果存在匹配，則與該 case 關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行。請使用 break 來阻止代碼自動(dòng)地向下一個(gè) case 運(yùn)行。

參數(shù)

關(guān)鍵詞

• case：表示一種情況，如果 expression 等于 value ，就執(zhí)行 statement
• break：會(huì)使代碼跳出 switch 語句，如果沒有關(guān)鍵詞 break，代碼執(zhí)行就會(huì)繼續(xù)進(jìn)入下一個(gè) case 。
• default：說明了表達(dá)式的結(jié)果不等于任何一種情況時(shí)的操作（事實(shí)上，它相對于 else 從句）。

示例

var myCar = 'Porsche'
switch (myCar) {
  case 'Nissan': alert("My car is Nissan");
    break;
  case 'Honda': alert("My car is Honda");
    break;
  case 'Porsche': alert("My car is Porsche");
    break;
  default: alert("I have no car");
}

continue 語句

continue 語句用于結(jié)束當(dāng)前（或標(biāo)簽）的循環(huán)語句的本次迭代，并繼續(xù)執(zhí)行循環(huán)的下一次迭代。

示例

在 for 語句中使用 continue

var num = 0;
for (var i = 1; i < 10; i++) {
  if (i % 5 == 0) {
    continue;
  }
  num++;
}
console.log(num);
// 8

break 語句

break 語句用于立即退出最內(nèi)層的循環(huán)或 switch 語句。

示例

var num = 0;
for (var i = 1; i < 10; i++) {
  if (i % 5 == 0) {
    break;
  }
  num++;
}
console.log(num); // 4

try-catch 語句

catch

catch 子句包含 try 塊中拋出異常時(shí)要執(zhí)行的語句。也就是，你想讓try 語句中的執(zhí)行操作成功，如果沒成功，你想控制接下來發(fā)生的事情，這時(shí)你可以在 catch 語句中實(shí)現(xiàn)。

如果有在 try 塊中有任何一個(gè)語句（或者從 try 塊中調(diào)用的函數(shù)）拋出異常，控制立即轉(zhuǎn)向 catch 子句。如果在 try 塊中沒有異常拋出，會(huì)跳過 catch 子句。

示例：

try {
  console.log('1: start');


  throw 'this is a error';


  console.log('2: end');
} catch (err) {
  console.log('3:', err);
}


// 輸出順序：
// 1：start
// 3：this is a error

catch 塊指定一個(gè)標(biāo)識符（在上面的示例中為 err），該標(biāo)識符保存由 throw 語句指定的值。catch 塊是唯一的，因?yàn)楫?dāng)輸入catch 塊時(shí)，JavaScript 會(huì)創(chuàng)建此標(biāo)識符，并將其添加到當(dāng)前作用域；標(biāo)識符僅在 catch 塊執(zhí)行時(shí)存在；catch 塊執(zhí)行完成后，標(biāo)識符不再可用。

從結(jié)果可以得知，如果在 try 塊中任何一個(gè)語句（或者從 try 塊中調(diào)用的和你熟）拋出異常，控制立即轉(zhuǎn)向 catch 子句。

總結(jié)

在本篇博客中，我們一起探索了JavaScript的基本語法。從變量和數(shù)據(jù)類型的定義開始，你已經(jīng)了解了如何在JavaScript中處理數(shù)字、字符串、布爾值等不同類型的數(shù)據(jù)。接著，我們介紹了JavaScript中的運(yùn)算符和表達(dá)式，使你能夠進(jìn)行數(shù)值計(jì)算和邏輯判斷。條件語句和循環(huán)結(jié)構(gòu)讓你學(xué)會(huì)了根據(jù)不同的情況執(zhí)行不同的代碼，以及重復(fù)執(zhí)行一段代碼塊。
JavaScript是一門非常強(qiáng)大且廣泛應(yīng)用的編程語言。掌握了這些基本的語法和概念，你已經(jīng)具備了入門JavaScript編程的基礎(chǔ)。未來，你將能夠創(chuàng)建更加交互性的網(wǎng)頁，實(shí)現(xiàn)更多驚艷的動(dòng)態(tài)效果，甚至搭建出屬于自己的Web應(yīng)用。但這只是一個(gè)開始，還有許多更深入的主題等待你去探索。文章來源地址http://www.zghlxwxcb.cn/news/detail-623700.html

到了這里，關(guān)于【前端｜Javascript第1篇】一文搞懂Javascript的基本語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！