JavaScript 快速入門回顧

来源:http://www.cnblogs.com/284628487a/archive/2016/06/01/5547504.html
-Advertisement-
Play Games

數據類型Number JavaScript不區分整數和浮點數，統一用Number表示，以下都是合法的Number類型： 實際上，JavaScript允許對任意數據類型做比較： 要特別註意相等運算符==。JavaScript在設計時，有兩種比較運算符： 第一種是==比較，它會自動轉換數據類型再比較，很 ...


數據類型Number

JavaScript不區分整數和浮點數，統一用Number表示，以下都是合法的Number類型：

123; // 整數123
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000，等同於1234.5
-99; // 負數
NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity
2 / 0; // Infinity
0 / 0; // NaN

實際上，JavaScript允許對任意數據類型做比較：

false == 0; // true
false === 0; // false

要特別註意相等運算符==。JavaScript在設計時，有兩種比較運算符：

第一種是==比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果；

第二種是===比較，它不會自動轉換數據類型，如果數據類型不一致，返回false，如果一致，再比較。

由於JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。

另一個例外是NaN這個特殊的Number與所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判斷NaN的方法是通過isNaN()函數：

isNaN(NaN); // true

最後要註意浮點數的相等比較：

1 / 3 === (1 - 2 / 3); // false

這不是JavaScript的設計缺陷。浮點數在運算過程中會產生誤差，因為電腦無法精確表示無限迴圈小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined

null表示一個“空”的值，它和0以及空字元串''不同，0是一個數值，''表示長度為0的字元串，而null表示“空”。

在其他語言中，也有類似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。

JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這並沒有什麼卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。

數組

var arr = [1, 2, 3.14, 'Hello', null, true]; //  

另一種創建數組的方法是通過Array()函數實現：

new Array(1, 2, 3); // 創建了數組[1, 2, 3]

直接給Array的length賦一個新的值會導致Array大小的變化：

arr.length = 3; // [1, 2, 3.14]
arr.length = 4; // [1, 2, 3.14, undefined]

請註意，如果通過索引賦值時，索引超過了範圍，同樣會引起Array大小的變化：

對象

JavaScript的對象是一組由鍵-值組成的無序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript對象的鍵都是字元串類型，值可以是任意數據類型。上述person對象一共定義了6個鍵值對，其中每個鍵又稱為對象的屬性，例如，person的name屬性為'Bob'，zipcode屬性為null。

要獲取一個對象的屬性，我們用對象變數.屬性名的方式：

person.name; // 'Bob'
person.zipcode; // null

由於JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：

如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：

'name' in person; // true

不過要小心，如果in判斷一個屬性存在，這個屬性不一定是xiaoming的，它可能是xiaoming繼承得到的：

'toString' in xiaoming; // true

因為toString定義在object對象中，而所有對象最終都會在原型鏈上指向object，所以xiaoming也擁有toString屬性。

要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true 
xiaoming.hasOwnProperty('toString'); // false

字元串

var multiLineString = `多行
字元串
測試`; // 多行字元測試 

Array

slice()

slice()就是對應String的substring()版本，它截取Array的部分元素，然後返回一個新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']

註意slice()的起止參數包括開始索引，不包括結束索引。如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。我們可以很容易地複製一個Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push和pop

push()向Array的末尾添加若幹元素，pop()則把Array的最後一個元素刪除掉：

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的長度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次
arr; // []
arr.pop(); // 空數組繼續pop不會報錯，而是返回undefined

unshift和shift

如果要往Array的頭部添加若幹元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined

sort

sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照預設順序排序：

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

能否按照我們自己指定的順序排序呢？完全可以，我們將在後面的函數中講到。

reverse

reverse()把整個Array的元素給掉個個，也就是反轉：

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

splice

splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若幹元素，然後再從該位置添加若幹元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat()方法把當前的Array和另一個Array連接起來，並返回一個新的Array：

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

請註意，concat()方法並沒有修改當前Array，而是返回了一個新的Array。

實際上，concat()方法可以接收任意個元素和Array，並且自動把Array拆開，然後全部添加到新的Array里：

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字元串連接起來，然後返回連接後的字元串：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字元串，將自動轉換為字元串後再連接。

多維數組

如果數組的某個元素又是一個Array，則可以形成多維數組，例如：

var arr = [[1, 2, 3], [400, 500, 600], '-'];

上述Array包含3個元素，其中頭兩個元素本身也是Array。 

for ... in

for迴圈的一個變體是for ... in迴圈，它可以把一個對象的所有屬性依次迴圈出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}

要過濾掉對象繼承的屬性，用hasOwnProperty()來實現：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'};
    for (var key in o) {
        if (o.hasOwnProperty(key)) {
            alert(key); // 'name', 'age', 'city'
    }
}

由於Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，for ... in迴圈可以直接迴圈出Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
    alert(i); // '0', '1', '2'
    alert(a[i]); // 'A', 'B', 'C'
}

請註意，for ... in對Array的迴圈得到的是String而不是Number。

Map

用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-valuem.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

由於一個key只能對應一個value，所以，多次對一個key放入value，後面的值會把前面的值覆蓋掉。

Set

Set和Map類似，也是一組key的集合，但不存儲value。由於key不能重覆，所以，在Set中，沒有重覆的key。

要創建一個Set，需要提供一個Array作為輸入，或者直接創建一個空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重覆元素在Set中自動被過濾：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

註意數字3和字元串'3'是不同的元素。

通過add(key)方法可以添加元素到Set中，可以重覆添加，但不會有效果：

s.add(4)>>> s
{1, 2, 3, 4}>>> s.add(4)>>> s
{1, 2, 3, 4}

通過delete(key)方法可以刪除元素：

var s = new Set([1, 2, 3]);
s.delete(3);
s; // Set {1, 2}

遍歷Array可以採用下標迴圈，遍歷Map和Set就無法使用下標。為了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型。

具有iterable類型的集合可以通過新的for ... of迴圈來遍歷。

iterable

用for ... of迴圈遍歷集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    alert(x);
}for (var x of s) { // 遍歷Set
    alert(x);
}for (var x of m) { // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

你可能會有疑問，for ... of迴圈和for ... in迴圈有何區別？

for ... in迴圈由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每個元素的索引被視為一個屬性。

當我們手動給Array對象添加了額外的屬性後，for ... in迴圈將帶來意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for ... in迴圈將把name包括在內，但Array的length屬性卻不包括在內。

for ... of迴圈則完全修複了這些問題，它只迴圈集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

這就是為什麼要引入新的for ... of迴圈。

然而，更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次迭代就自動回調該函數。以Array為例：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    alert(element);
});

註意，forEach()方法是ES5.1標準引入的，你需要測試瀏覽器是否支持。

Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回調函數參數依次為value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

如果對某些參數不感興趣，由於JavaScript的函數調用不要求參數必須一致，因此可以忽略它們。例如，只需要獲得Array的element：

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    alert(element);
});

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一句話評論設計模式六大原則
    原則，故名思議則是本質的意思。所謂擒賊先擒王，研究設計模式自然要先瞭解設計原則，所有的模式都是在這些原則的基礎之上發展起來的，有的是側重一個，有的是多個都有所涉及。看完設計模式之後，我感覺到每個模式都有這些原則的影子，還滲透著面向對象的三大屬性，也覺得這些原則也都有相通之處，，正是有了他們才使我們由 ...
  • 小酌重構系列[22]——儘快返回
    閱讀文章時，如果某個段落已經傳達了關鍵信息，我們可能就不會逐字逐句地將文章讀完，因為我們已經知道了這篇文章的核心內容。 與此類似，如果方法中某些條件判斷可以得到結果，我們應該儘快返回該結果。 儘快返回可以帶來三個好處：1. 節省閱讀代碼的時間 2. 避免執行無效的邏輯 3. 增強代碼的可讀性 ...
  • 大話設計模式-->模板方法設計模式
    在學習java的過程中，我們肯定聽到過設計模式這名詞，在行業中有這麼一句話，若您能熟練的掌握23種設計模式，那麼你便是大牛！ 好了，廢話不多說，今天我跟大家分享一下23種設計模式之一的 模板方法 設計模式 首先我們要知道什麼是模板方法設計模式？ 測試結果如圖 ...
  • 小酌重構系列[21]——避免雙重否定
    在自然語言中，雙重否定表示肯定。但是在程式中，雙重否定會降低代碼的可讀性，使程式不易理解，容易產生錯覺。 人通常是用“正向思維”去理解一件事情的，使用雙重否定的判斷，需要開發者以“逆向思維”的方式去理解它的含義。 另外，在寫程式時，"!"符號很容易被疏忽和遺漏，一不小心則會編寫出錯誤的代碼，從而產生... ...
  • Java設計模式之單例模式（Singleton）
    前言： 在總結okHttp的時候，為了管理網路請求使用到了單例模式，晚上實在沒啥狀態了，靜下心來學習總結一下使用頻率最高的設計模式單例模式。 單例模式: 單例模式確保某個類只有一個實例，而且自行實例化並向整個系統提供這個實例。 單例特點： 單例類只能有一個實例。 單例類必須自己創建自己的唯一實例。 ...
  • php設計模式-單例
    單例模式是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中一個類只有一個實例。 《設計模式》對此的定義：保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。 單例模式有三個要點：一是某個類只能有一個實例；二是它必須自行創建這個實例；三是它必須自行向整 ...
  • Java設計模式之工廠模式（Factory）
    前言： 前面學習了建造者設計模式，接下來學習一下Retrofit中使用的另外一個設計模式，工廠設計模式！！！裡面採用工廠模式使得數據轉換得到完全解耦，工廠模式的好處用到了極致，如此好的設計模式我們怎能不學習一下。 工廠模式： 工廠模式主要是為創建對象提供過渡介面，以便將創建對象的具體過程屏蔽隔離起來 ...
  • 自適應網頁設計（Responsive Web Design）
    隨著3G的普及，越來越多的人使用手機上網。 移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？ 手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類