【JavaScript】不經常使用知識點復（yù）習（一）

時間  2019-11-07
標籤 JavaScript 不經常 使用 知識 欄目 JavaScript 简体版
原文   原文鏈接

爲了鞏固JavaScript基礎知識，重讀了《JavaScript高級編程》一書，概括總結了一些在日常編程中比較少用到的知識點（尤爲是瀏覽器端編程），第一部分主要總結前五章的內容，包括基本概念、變量、做用域、內存及引用類型相關的問題。html

1. 基本概念

1. <script>標籤的asnyc與defer

這是async與defer在頁面渲染時的時序圖，藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明HTML解析。前端

也就是說async是亂序的，而defer是順序執行，這也就決定了async比較適用於百度分析或者谷歌分析這類不依賴其餘腳本的庫。從圖中能夠看到一個普通的<script>標籤的加載和解析都是同步的，會阻塞DOM的渲染，這也就是咱們常常會把<script>寫在<body>底部的緣由之一，爲了防止加載資源而致使的長時間的白屏，另外一個緣由是js可能會進行DOM操做，因此要在DOM所有渲染完後再執行。git

2. 全部數據類型的值都有與true和false等價的值

數據類型 轉換爲true的值 轉換爲false的值
Boolean true true
String 任何非空字符串 空字符串
Number 任何非零數字值（包括無窮大） 0和NaN
Object 任何對象 null
Undefined n/a undefined

初始化變量時應賦予這裏的轉換爲false的值，如初始化一個對象，則使用var obj = null，這樣方便判斷變量爲空的情況，有利於對JavaScript這種弱類型語言的類型管理。github

3. 數字的無窮值Infinity

js中的最大數字保存在Number.MAX_VALUE中，最小數值保存在Number.MIN_VALUE中，Infinity不能參與計算，使用isFinite()方法判斷數字是否爲無窮。面試

4. 關係操做符<、>、>=、<=判斷字符串

判斷字符串的大小，取決於第一個字符的字符編號，這能夠應用到英文字母的位置判斷上（必須統一轉爲大寫或小寫，可應用於按字母排序）正則表達式

var result = 'Brick'.toLowerCase() > 'alphabet'.toLowerCase() // true
複製代碼

判斷獲得b在字母表中的位置在a的後面express

5. for-in循環

ECMAScript的對象屬性沒有順序，所以，經過for-in循環輸出的屬性名順序理論上是不可預測的，返回的前後次序可能會因瀏覽器而異。編程

6. for循環的label

用於給for循環作標記，使其能夠對指定的循環進行break或continue操做跨域

var a = 1;
label : for ( var i = 0; i < 5; i++ ) {
    for ( var j = 0; j < 5; j++ ) {
        if ( i == 3 ) {
            break label;
        }
        a++;
    }
}
console.log( a ); // 16
// 此時break跳出了指定的外部循環，整個循環嵌套結束，所以只執行了三次內部循環，+5+5+5結果爲16
var a = 1;
for ( var i = 0; i < 5; i++ ) {
    for ( var j = 0; j < 5; j++ ) {
        if ( i == 3 ) {
            break;
        }
        a++;
    }
}
console.log( a ); // 21
// 此時沒有指定label，break跳出的是內部循環，即跳過了一次當i=3時的外部循環，所以總共執行了5-1=4次內部循環，+5+5+5+5結果爲21
複製代碼

7. switch

switch語句在比較值時使用的是全等操做符，所以不會發生類型轉換。數組

8. 函數

  1. 在函數內部能夠經過arguments[0]，arguments[1]來訪問函數的參數，arguments是一個類數組對象（不是Array的實例）
  2. 使用arguments.length判斷參數長度經常使用於方法封裝，如：
function doSth () {
    if (arguments.length === 1) {
        alert(arguments[0])
    } else if (arguments.length === 2) {
        alert(arguments[0], arguments[1])
    }
}
複製代碼

換一種說法：經過檢查傳入函數中的參數類型和數量並作出不一樣的反應，能夠模擬方法的重載（Java等語言中能夠爲函數編寫兩個定義，只要這兩個定義的簽名——接受的參數的類型和數量不一樣便可，這種函數調用的方式稱爲函數重載）。

2. 變量、做用域、內存

1. 變量賦值

變量賦值中的參數傳遞只有按值傳遞，引用類型賦值時傳遞的是內存指針，由內存指針指向內存棧中的值，仍然是按值傳遞，參考下面例子：

function setName (obj) {
    obj.name = 'Nicholas'
    obj = new Object()
    obj.name = 'Greg'
}
var person = new Object()
setName(person)
alert(person.name) // Nicholas
複製代碼

因爲在函數內對參數obj建立了新對象，obj擁有了新的內存地址（這是函數塊中的局部變量），所以後面對對象的修改是針對新的內存地址中存儲的對象作的，因此原來傳進來的參數obj所指向的對象不會被修改，所以obj.name會返回未聲明新內存指針時賦值的結果Nicholas。

2. 函數參數的做用域

函數的參數被當作變量來對待，所以其訪問規則與執行環境中的其餘變量相同（函數參數至關於函數內的局部變量）。

3. 垃圾回收策略

  1. 標記清除

先將內存中全部變量進行標記；而後清除做用域中的變量以及被做用域中變量引用的變量的標記；把剩下的標記視爲待清除的變量；執行清除——銷燬標記並回收內存。

  1. 引用計數

引用計數經過跟蹤每一個變量被引用的次數，等待某個變量的引用次數爲0了，再執行清除。這會致使循環引用的問題：

function problem () {
    var objA = new Object()
    var objB = new Object()
    
    objA.someOtherObject = objB
    objB.anotherObject = objA
}
複製代碼

這裏objA與objB經過自身的屬性相互引用，其引用次數始終爲2，所以在引用計數的策略下這兩個變量的內存始終得不到回收，致使性能降低甚至崩潰。

在IE9如下的IE版本中，BOM對象和DOM對象並非原生的JavaScript對象，而是用C++經過COM對象(Component Model Object組件模型對象)的形式實現的，而COM就是使用引用計數進行垃圾清除的，所以在這些版本中，若發生DOM或BOM對象與原生JavaScript對象互相引用的狀況，也會出現循環引用的問題：

var element = document.getElementById('some_element')
var myObject = new Object()
myObject.element = element
element.someObject = myObject
複製代碼

上例中，一個DOM元素與一個原生JavaScript對象產生了循環引用，此時就算DOM節點從html上移除，DOM對象也會一直存在與內存中

  1. 性能問題

IE的垃圾回收頻率是經過內存分配量來界定的，當內存佔用超過某個臨界值就會觸發回收，IE7以前，這個臨界值是固定的（256個變量、4096個對象字面量和數組元素或者64kb的字符串），可是若是一個程序擁有這麼多變量，那他變量的內存佔比必定會長期保持在這樣的高水平，所以會不斷觸發垃圾回收，致使性能爆炸。IE7對此進行了優化，根據內存佔比動態設定臨界值。

  1. 解除引用

全局變量在使用後應儘可能經過手動方式解除引用，避免無謂佔用內存。

// 解除引用
var asd = { a: 213 }
asd = null
複製代碼

執行解除引用語句並非立刻將變量佔用的內存釋放，而是將其加入標記，以便下一次垃圾回收操做運行時將其回收。

3. 引用類型

1. 對象字面量

聲明對象通常有兩種方式，一是經過new操做符建立Object構造函數的實例，二是經過對象字面量語法進行建立

// new
var obj1 = new Object()
// 對象字面量
var obj2 = {}
複製代碼
  1. 在運用對象字面量建立對象時，實際上不會調用Object構造函數
  2. 通常來說，在封裝函數時，雖然命名參數容易處理，但在處理大量數據時則會顯得不夠靈活，所以通常對必須傳入的參數用命名參數處理，而大量的可選參數則使用對象字面量傳入。

2. 數組操做符

  1. arr.push()：入棧。能夠同時推入多個值，如arr.push(1, 2, 3)，則會依次在數組最後追加一、二、3三個值。
  2. arr.pop()：出棧。對數組最後一個值執行出棧操做，並返回這個值，出棧操做會修改原數組。
  3. arr.unshift()：進入隊列。在數組最前推入值，一樣能夠推入多個值：arr.unshift(1, 2, 3)。
  4. arr.shift()：退出隊列。將數組第一項退出隊列，並返回這個值，退出隊列操做會修改原數組。
  5. arr.reverse()：反轉。單純用於反轉數組順序，如[1, 3, 2, 5, 4].reverse()會獲得[4, 5, 2, 3, 1]
  6. arr.sort()：排序。默認狀況下，sort()對數組進行升序排序，這種升序排序是調用每一個數組項的toString()方法轉型再進行比較，即便全部數組項都是數字，所以通常在sort()中傳入比較函數去實現正確的排序

比較函數接收兩個參數，若是第一個參數應該位於第二個參數以前則返回一個負數，若是兩個參數相等則返回0，若是第一個參數應該位於第二個參數以後則返回一個正數。

// 這個比較函數適用於大多數數據類型，調用時將整個函數做爲參數傳入到sort()中便可
function compare (val1, val2) {
    if (val1 < val2) {
        return -1
    } else if (val1 > val2) {
        return 1
    } else {
        return 0
    }
}

var arr = [1, 3, 2, 5, 4]
arr.sort(compare) // [1, 2, 3, 4, 5]

// 對於數值類型或調用其valueOf()方法會返回數值的變量類型，可使用這個更簡單的函數
function compareEasy (val1, val2) {
    return val2 - val1
}
複製代碼
  1. arr1.concat()：拼接。先建立一個數組的副本，再將參數拼接到這個副本後面
// 若沒有接收到參數，則返回該副本，此方法可用於進行數組深複製
var copy = [1, 2, 3].concat() // [1, 2, 3]
// 若接收到的參數是一個或多個數組，則將數組全部項添加到結果數組最後
var arr1 = [1, 2, 3].concat([4, 5], [6]) // [1, 2, 3, 4, 5, 6]
// 若接收到的參數不是數組，這些值則會被簡單的添加到結果數組後面
var arr2 = [1, 2, 3].concat(4, 5) // [1, 2, 3, 4, 5]
複製代碼
  1. arr.split()：基於數組中的一個或多個項建立新數組
// 傳入一個參數，返回包含這個位置到數組末尾內容的新數組
var arr1 = [1, 2, 3, 4, 5].slice(1) // [2, 3, 4, 5]
// 傳入兩個參數，返回包含開始位置到不包含結束位置內容的新數組
var arr2 = [1, 2, 3, 4, 5].slice(1, 4) // [2, 3, 4]
// 傳入參數爲負數，則將開始與結束位置從數組最後一項開始計算，返回新數組
var arr3 = [1, 2, 3, 4, 5].slice(-2, -1) // [4]
// 若是結束位置小於起始位置，則返回空數組
var arr4 = [1, 2, 3, 4, 5].slice(-1, -2) // []
複製代碼
  1. arr.splice()：提供數組的插入、刪除和替換功能，調用這個函數時始終會返回一個數組，包含了從原始數組中刪除的項（若沒有刪除則返回空數組）
// 刪除：指定要刪除第一項的位置與要刪除的項數
var arr1 = [1, 2, 3, 4, 5].splice(0, 2) // 返回：[1, 2]，原數組：[3, 4, 5]
// 插入：指定要插入項的位置，0（刪除項數）和要插入的項
var arr2 = [1, 2, 3, 4, 5].splice(2, 0, 'a', 'b') // 返回：[]，原數組：[1, 2, 'a', 'b', 3, 4, 5]
// 替換：指定要插入項的位置，刪除項數和要插入的項
var arr2 = [1, 2, 3, 4, 5].splice(2, 1, 'a', 'b') // 返回：[3]，原數組：[1, 2, 'a', 'b', 4, 5]
複製代碼
  1. arr.indexOf() & arr.lastIndexOf()：用於查找某個項在數組中的位置，區別是indexOf()從數組開頭開始查找，lastIndexOf()從數組末尾開始查找，它們都包含兩個參數，一是要查找的項，二是查找起點的位置，它在查找比較的時候使用全等操做符，所以必須保證查找項與目標的數據類型一致
var arr = [1, 2, 3, 2, 1]
arr.indexOf(0) // -1
arr.indexOf(1) // 0
arr.lastIndexOf(1) // 4
arr.indexOf(1, 2) // 4
// 它在查找引用類型變量時是經過引用進行對比
var obj = { attr: 1 }
var arr1 = [{ attr: 1 }]
var arr2 = [obj]
arr1.indexOf(obj) // -1
arr2.indexOf(obj) // 0
複製代碼
  1. arr.every() & arr.filter() & arr.forEach() & arr.map() & arr.some()：迭代。每一個方法都接收兩個參數：要在每一項上運行的函數和運行該函數的做用域對象——影響this的值。傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組自己。

every()：對數組中的每一項運行給定函數，若是該函數對每一項都返回true，則返回true。
filter()：對數組中每一項運行給定函數，返回該函數會返回true的項組成的數組。
forEach()：對數組中每一項運行給定函數，沒有返回值。
map()：對數組中每一項運行給定函數，返回每次函數調用調用的結果組成的數組。
some()：對數組中的每一項運行給定函數，若是該函數對任一項返回true，則返回true

  1. arr.reduce() & arr.reduceRight()：歸併。迭代全部數組項，構建一個返回值，它們都接收兩個參數，一個在每一項上調用的函數和做爲歸併基礎的初始值（可選），傳入的函數接收4個參數：前一個值、當前值、項的索引和數組對象。
// 對全部數組項求和
var values = [1, 2, 3, 4, 5]
var sum = values.reduce(function (prev, cur, index, array) {
    return prev + cur
}) // 15
複製代碼

3. Date對象

  1. Date.parse()：能夠用於將固定的日期格式字符串轉換爲時間戳，支持下列日期格式

月/日/年：6/13/2018
英文月名 日,年：January 12,2018
英文星期幾 英文月名 日 年 時:分:秒 時區：Tue May 25 2018 00:00:00 GMT-0700
ISO8601擴展格式 YYYY-MM-DDTHH:mm:ss:sssZ：2018-05-25T00:00:00

  1. Date.now()：用於更便捷地獲取當前系統時間戳
  2. Date類型的實例能夠直接用大於小於號進行比較，它會調用其valueOf()方法將日期對象轉換爲時間戳，再進行數值間的比較。

4. RegExp對象

  1. 使用字面量方式建立正則：var expression = / pattern / flags。每一個正則都會有一個或多個標識(flags)，標明正則表達式的行爲。

g：表示全局(global)模式，意味着正則會匹配全部的字符，而不是匹配到第一個字符就終止。
i：表示不區分大小寫(case-insensitive)模式，在匹配時不區分大小寫。
m：表示多行(multiline)模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在匹配正則的項。

RegExp屬性↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  1. global：布爾值，表示是否設置了g標識
  2. ignoreCase：布爾值，表示是否設置了i標識
  3. multiline：布爾值，表示是否設置了m標識
  4. lastIndex：整數，表示上一次匹配成功位置的下一個位置，下一次搜索從這個位置開始
  5. source：正則表達式的字符串表示，按照字面量形式而非傳入構造函數的字符串模式返回

RegExp方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  1. exec()：它接收一個參數，用於匹配正則的字符串，返回包含第一個匹配項信息的數組。同一個正則連續進行exec()會匹配到下一個知足規則的位置（區別於只能返回第一個匹配位置的test()）
var text = 'cat, bat, sat, fat'
var pattern = /.at/g
var matches = pattern.exec(text)
console.log(matches.index) // 0
console.log(matches[0]) // cat
console.log(matches.lastIndex) // 3
matches = pattern.exec(text)
console.log(matches.index) // 5
console.log(matches[0]) // bat
console.log(matches.lastIndex) // 8
複製代碼
  1. RegExp原型屬性：這些屬性基於最近執行的一次正則表達式生成
長屬性名 短屬性名 說明
input $_ 最近一次要匹配的字符串。Opera未實現該屬性
lastMatch $& 最近一次的匹配到的內容。Opera未實現該屬性
lastParen $+ 最近一次匹配的捕獲組。Opera未實現該屬性
leftContext $` input字符串中lastMatch以前的文本
multiline $* 布爾值，表示是否全部正則都使用多行模式。IE和Opera未實現該屬性
rightContext $' input字符串中lastMatch以後的文本 
var text = 'this has been a short summer'
var pattern = /(.)hort/g
if (pattern.test(text)) {
    console.log(RegExp.input) // this has been a short summer
    console.log(RegExp.leftContext) // this has been a
    console.log(RegExp.rightContext) // summer
    console.log(RegExp.lastMatch) // short
    console.log(RegExp.lastParen) // s
    console.log(RegExp.multiline) // false
}
複製代碼
  1. RegExp還提供了RegExp.$1等九個用於存儲第一到第九個捕獲組，在調用exec()或test()時這些捕獲組就會自動填充。
var text = 'this has been a short summer'
var pattern = /(..)or(.)/g

if (pattern.test(text)) {
    alert(RegExp.$1)
    alert(RegExp.$2)
}
複製代碼

5. Function類型

  1. arguments.callee：用於在函數內部獲取使用這個參數函數自己：
// 階乘，通常使用遞歸實現，但這個方法卻會與函數名耦合
function factorial (num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}
// 使用arguments.callee解耦
function factorial (num) {
    if (num <= 1) {
        return 1
    } else {
        return num * arguments.callee(num - 1)
    }
}
複製代碼
  1. arguments.callee.caller：使用函數的caller屬性能夠訪問調用這個函數的環境，在函數內部能夠經過arguments.callee.caller訪問，ES5還定義了值爲undefined的arguments.caller字段與函數自己的caller字段進行區分。而在嚴格模式下，訪問arguments.callee和arguments.caller都會致使錯誤。
  2. length & prototype：分別保存函數但願接收參數的個數和函數的原型對象。

ES6中length只會返回沒有指定默認值的參數個數

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
複製代碼
  1. call() & apply()：能夠改變函數的做用域來進行調用，區別是call()方法的傳參是將參數用逗號鏈接，apply()方法的傳參是將參數包含在一個數組中：
function sum (num1, num2) {
    return num1 + num2
}
function callSum1 (num1, num2) {
    return sum.apply(this, arguments)
}
function callSum2 (num1, num2) {
    return sum.apply(this, [num1, num2])
}
function callSum3 (num1, num2) {
    return sum.call(this, num1, num2)
}
console.log(callSum1(10, 10)) // 20
console.log(callSum2(10, 10)) // 20
console.log(callSum3(10, 10)) // 20
複製代碼

上面apply()與call()調用時第一個傳入的參數this指的就是調用時所要指向的做用域：

window.color = 'red'
var o = { color: 'blue' }

function sayColor () { alert(this.color) }

sayColor() // red：調用環境爲全局做用域，所以獲得window.color
sayColor.call(this) // red：傳入this指定爲全局做用域，獲得window.color
sayColor.call(window) // red：做用域直接指定爲window，獲得window.color
sayColor.call(o) // blue：做用域指定爲o，獲得o.color
複製代碼

拓展ES6聲明方式的結果解析

// 箭頭函數在定義時已經肯定this的指向；箭頭函數沒有本身的this，它始終引用外層函數的this
window.color = 'red'
var o = {
    color: 'blue',
    sayColor: () => { alert(this.color) }
}

o.sayColor() // red：箭頭函數中this指向聲明時外層函數的this，此處外層只有全局做用域，所以取window.color
o.sayColor.call(this) // red：指定了全局做用域，取window.color
o.sayColor.call(window) // red：指定了全局做用域，取window.color
o.sayColor.call(o) // red：箭頭函數中this指向聲明時外層函數的this，此處外層只有全局做用域，所以取window.color
複製代碼
// 等同於sayColor: function () { alert(this.color) }
window.color = 'red'
var o = {
    color: 'blue',
    sayColor () { alert(this.color) }
}

o.sayColor() // blue：從o中調用時默認使用o爲當前做用域，取o.color
o.sayColor.call(this) // red：指定了全局做用域，取window.color
o.sayColor.call(window) // red：指定了全局做用域，取window.color
o.sayColor.call(o) // blue：指定了o爲做用域，取o.color
複製代碼
  1. bind()：也能夠用來改變函數做用域，可是這個方法返回一個改變做用域後的函數聲明，須要再接上一對圓括號纔會執行
window.color = 'red'
var o = { color: 'blue' }

function sayColor () { alert(this.color) }

sayColor.bind(o)() // blue
複製代碼

6. 基本包裝類型Boolean、String、Number

  1. 事實上，訪問一個基礎類型值的方法或屬性時，js引擎會進入一種「讀取模式」，它會建立基礎類型的實例對象，再調用實例對象中的屬性或方法，再把這個實例對象註銷：
// 執行這些代碼時
var s1 = 'abc'
var s2 = s1.substring(s1)
// 事實上引擎是這樣操做的
var s1 = new String('abc')
var s2 = s1.substring(s1)
s1 = null
複製代碼

使用new操做符建立的對象實例與基本包裝類型區別在於其聲明週期，對象實例在執行流離開當前做用域以前會一直存在（就像一個引用類型變量），而基本包裝類型則只在一行代碼訪問它的時候建立，離開這行代碼就會當即銷燬：

var s1 = 'abc'
s1.color = 'blue'
console.log(s1.color) // undefined
複製代碼

Number類型方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  1. toExponential()：返回數字的科學計數法表示，它接收一個，參數表示保留到小數點後的位數
var num = 10
console.log(num.toExponential(1)) // '1.0e+1'
複製代碼
  1. toPrecision()：返回數字最合理的表示方式，多是科學計數法也多是數值，它接收一個參數，表示全部數值的位數
var num = 99
console.log(num.toPrecision(1)) // '1e+2'：在須要捨棄末尾數時進行四捨五入
console.log(num.toPrecision(2)) // '99'
console.log(num.toPrecision(3)) // '99.0'
複製代碼

String類型方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  1. concat()：鏈接字符串

  2. slice() & substr() & substring()：這三個方法會基於被操做字符串返回一個子字符串，它們接收一或兩個參數：第一個指向操做的開始位置，第二個指向操做的結束位置（其中slice()和substring()的二參數指操做最後一個字符的位置，substr()的二參數指操做的字符個數）

var str = 'hello world'
str.slice(3) // 'lo world'
str.substring(3) // 'lo world'
str.substr(3) // 'lo world'
str.slice(3, 7) // 'lo w'
str.substring(3, 7) // 'lo w'
str.substr(3, 7) // 'lo worl'
// 傳入負數時，三個方法的處理方式則不一樣：slice()將負數與字符串長度相加；substr()將第一個參數與字符串長度相加、第二個參數轉換爲0；substring()會將全部負值參數轉換爲0
var str = 'hello world'
str.slice(-3) // 'rld'
str.substring(-3) // 'hello world'
str.substr(-3) // 'rld'
str.slice(3, -4) // 'lo w'
str.substring(3, -4) // 'hel'
str.substr(3, -4) // ''
複製代碼
  1. indexOf() & lastIndexOf()：傳入兩個參數，要匹配的字符串和開始匹配的位置，返回第一個匹配到的內容的位置
  2. trim()：刪除字符串前置與後綴的全部空格
  3. toUpperCase() & toLocaleUpperCase() & toLowerCase() & toLocaleLowerCase()：字符所有替換爲大/小寫，Locale針對不一樣語言環境作了特定的實現，通常在不知道語言環境的狀況下用Locale系列比較穩妥
  4. match() & search()： 共同點：都接收一個參數，返回匹配到第一個字符串的值 不一樣點：search()只能接收正則，match()能夠接收字符串或正則；search()只能從字符串開頭查找匹配的第一個位置（會忽略g的全局標識），match()若沒有設置g標識，表現與search()同樣，若設置了g標識，則會進行全局檢索，返回由捕獲組組成的數組（與RegExp對象的exec()方法返回結果同樣）
var text = 'cat, bat, sat, fat'
var pattern = /.at/

var matches = text.match(pattern)
console.log(matches.index) // 0
console.log(matches[0]) // 'cat'
console.log(pattern.lastIndex) // 0

var pos = text.search(/at/)
console.log(pos) // 1
複製代碼
  1. replace()：它接收兩個參數，一是一個字符串或一個正則，指定要被替換的內容；二是一個字符串，指定要替換進去的內容。若是要對全部匹配到的字符進行替換，則必須在第一個參數傳入正則並帶上參數
var text = 'cat, bat, sat, fat'
var result = text.replace('at', 'ond') // 'cond, bat, sat, fat'
result = text.replace(/at/g, 'ond') // 'cond, bond, sond, fond'
複製代碼

在第二個參數中還可使用一些特殊的字符序列來把正則匹配到的值插入到結果字符串中

字符序列 替換文本
$$ $
$& 匹配整個模式的子字符串，與RegExp.lastMatch的值相同
$' 匹配的子字符串以後的子字符串，與RegExp.leftContext的值相同
$` 匹配的子字符串以前的子字符串，與RegExp.rightContext的值相同
$n 匹配第n個捕獲組的子字符串，，從1~9，如$1
$nn 匹配第nn個捕獲組的子字符串，從01-99，如$01 
var text = 'cat, bat, sat, fat'
var result = text.replace(/(.at)/g, 'word($1)') // 'word(cat), word(bat), word(sat), word(fat)'
result = text.replace(/(.at)/g, 'word($&)') // 'word(cat), word(bat), word(sat), word(fat)'
result = text.replace(/(.at)/g, 'word($\')') // 'word(, bat, sat, fat), word(, sat, fat), word(, fat), word()'
result = text.replace(/(.at)/g, 'word($\`)') // 'word(), word(cat, ), word(cat, bat, ), word(cat, bat, sat, )'
複製代碼

第二個參數還能夠傳入一個函數，經過return指定要替換進去的值。在只有一個匹配項的時候，會向函數傳遞三個參數：模式的匹配項、模式匹配項在字符串中的位置和原始字符串

function htmlEscape (text) {
    return text.replace(/[<>"&]/g, function (match, pos, originalText) {
        switch (match) {
            case '<': return '&lt;'
            case '>': return '&gt;'
            case '"': return '&quot;'
            case '&': return '&amp;'
        }
    })
}
alert(htmlEscape('<p class="greeting">Hello world</p>')) // &lt;p class=&quot;greeting&quot;&gt;Hello world&lt;/p&gt;
複製代碼
  1. split()：用於將字符串按照指定的分隔符切割成多段，並將結果放在一個數組中，它接收兩個參數：一是一個正則或一個字符串，用於指定分隔符；二是一個數字，用於限定結果數組的長度
var text = 'cat,bat,sat,fat'
text.split(',') // ['cat', 'bat', 'sat', 'fat']
text.split(',', 2) // ['cat', 'bat']
text.split(/[^\,]+/) // ['', ',', ',', ',', '']
複製代碼
  1. localeCompare()：用於比較主體與參數字符串在字母表中的前後順序，返回結果與地區語言有關
  2. fromCharCode()：靜態方法，將字符編號轉化爲字符，本質上是與實例方法charCodeAt()執行相反的操做
String.fromCharCode(104, 101, 108, 108, 111) // hello
複製代碼

做者信息

做者其餘文章

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程