《javascript高級程序設計》學習筆記 | 5.6.基本包裝類型

時間 2020-09-29

標籤 javascript 高級程序設計學習筆記 5.6 基本包裝類型欄目 JavaScript 简体版

原文原文鏈接

歡迎關注前端小謳的github，閱讀更多原創技術文章

基本包裝類型

3 個特殊的引用類型 Boolean、Number、String
每讀取一個基本類型值，後臺就建立一個對應的基本包裝類型的對象

var s1 = 'some text'
var s2 = s1.substring(2) // 基本類型不是對象，本不該該有方法

// 由於後臺自動完成了下列處理：
var s1 = new String('some text') // 1.建立String類型的實例
var s2 = s1.substring(2) // 2.在實例上調用指定方法
s1 = null // 3.銷燬該實例

上述步驟一樣適用於 Boolean 和 Number類型
引用類型和基本包裝類型的主要區別在於對象的生存期：html
- 引用類型：離開做用域前，對象一直在內存中
- 基本包裝類型：執行完，當即被銷燬

var s1 = 'some text'
s1.color = 'red' // 建立String對象
console.log(s1.color) // undefined，s1對象已被銷燬，同時再次建立String對象，新對象沒有color屬性

對基本包裝類型的實例調用 typeof 會返回"Object"，全部基本包裝類型的對象都會被轉換爲布爾值 true
Object 構造函數，根據傳入值的類型返回基本包裝類型的實例

var objText = new Object('some text') // 建立String的實例
console.log(objText instanceof String) // true
var objBoolean = new Object(false) // 建立Boolean的實例
console.log(objBoolean instanceof Boolean) // true
var objNumber = new Object(123) // 建立Number的實例
console.log(objNumber instanceof Number) // true
console.log(objNumber instanceof Boolean) // false

使用 new 調用基本包裝類型的構造函數 vs 直接調用同名的轉型函數

var value = '25'
var number = Number(value) // 轉型函數，轉成Number類型
console.log(typeof number) // number
var obj = new Number(value) // 構造函數，構造Number對象實例
console.log(typeof obj) // object

Boolean 類型

var booleanObject = new Boolean(true) // 調用Boolean構造函數，並傳入true/false

重寫（繼承）的方法	返回值
valueOf()	`Boolean` true / false
toString()	`String` "true" / "false"

基本類型布爾值 vs 引用類型布爾值：前端
- typeof 操做符對基本類型返回 boolean，對引用類型返回 object
- instance 操做符對基本類型返回 false，對引用類型返回 true

var falseObj = new Boolean(false) // falseObj是基本包裝類型，被轉換成true（全部基本包裝類型對象都會被轉換成true）
var falseValue = false // falseValue是基本類型，就是false

console.log(falseObj && true) // true
console.log(falseValue && true) // false
console.log(typeof falseObj) // object，基本包裝類型
console.log(typeof falseValue) // boolean，基本類型
console.log(falseObj instanceof Boolean) // true，Boolean對象是Boolean類型的實例
console.log(falseValue instanceof Boolean) // false

Number 類型

var numberObject = new Number(10) // 調用Number構造函數，並傳入數值

重寫（繼承）的方法	返回值
valueOf()	`Number` 數值
toLocaleString()	`String` 字符串形式的數值
toString()	`String` 字符串形式的數值

爲 toString()方法傳遞表示基數的參數，告訴返回幾進制的字符串形式

var num1 = 10
console.log(num1.toString()) // 十進制，"10"
console.log(num1.toString(2)) // 二進制，"1010"
console.log(num1.toString(8)) // 八進制，"12"
console.log(num1.toString(10)) // 十進制，"10"
console.log(num1.toString(16)) // 十六進制，"a"

格式化字符串方法	返回值
toFixed(num)	`String` 指定小數位
toExponential(num)	`String` 指數表示法
toPrecision(num)	`String` 返回 fixed 或 exponential 格式

var num2 = 10000
console.log(num2.toFixed(2)) // 指定小數位，"10000.00"
console.log(num2.toExponential(2)) // 指數表示法，"1.00e+4"

var num3 = 99
console.log(num3.toPrecision(1)) // 用一位數表示，"1e+2"
console.log(num3.toPrecision(2)) // 用二位數表示，"99"
console.log(num3.toPrecision(3)) // 用三位數表示，"99.0"

基本類型數值 vs 引用類型數值：java
- typeof 操做符對基本類型返回 number，對引用類型返回 object
- instance 操做符對基本類型返回 false，對引用類型返回 true

var numberObject = new Number(10)
var numberValue = 10
console.log(typeof numberObject) // object，基本包裝類型
console.log(typeof numberValue) // value，基本類型
console.log(numberObject instanceof Number) // true，Number對象是Number類型的實例
console.log(numberValue instanceof Number) // false

String 類型

var StringObject = new String('hello world') // 調用String構造函數，並傳入字符串

重寫（繼承）的方法	返回值
valueOf()	`String` 字符串值
toLocaleString()	`String` 字符串值
toString()	`String` 字符串值

String 類型每一個實例都有 length 屬性，表示字符串包含的字符數量，雙節字符也算做 1 個字符

console.log(stringObject.length) // "11"

字符方法	返回值
charAt(num)	給定位置的字符
charCodeAt()	給定位置的字符編碼

console.log(stringObject.charAt(1)) // "e"
console.log(stringObject.charCodeAt(1)) // "101"
console.log(stringObject[1]) // "e"

字符串操做方法	返回值
concat()	拼接獲得的字符串
slice(num1,num2)	被操做字符串的子字符串
substring(num1,num2)	被操做字符串的子字符串
substr(num1,num2)	被操做字符串的子字符串

console.log(stringObject.concat(' wonderful')) // "hello world wonderful"
console.log(stringObject.slice(3)) // "lo world"
console.log(stringObject.substring(3)) // "lo world"
console.log(stringObject.substr(3)) // "lo world"
console.log(stringObject.slice(3, 7)) // "lo w"，第二個參數指定到哪裏結束（不包含）
console.log(stringObject.substring(3, 7)) // "lo w"，第二個參數指定到哪裏結束（不包含）
console.log(stringObject.substr(3, 7)) // "lo worl"，第二個參數指定要返回的字符個數

console.log(stringObject.slice(-3)) // "rld"，-3轉換爲11-3=8
console.log(stringObject.substring(-3)) // "hello world"，-3轉換爲0
console.log(stringObject.substr(-3)) // "rld"，-3轉換爲11-3=8
console.log(stringObject.slice(3, -4)) // "lo w"，-4轉換爲11-3=7
console.log(stringObject.substring(3, -4)) // "lo w"，-4轉換爲0，substring(3,0)再轉換爲substring(0,3)
console.log(stringObject.substr(3, -4)) // ""，-4轉換爲0，返回包含零個字符的字符串

字符串位置方法	返回值
indexOf()	子字符串的位置，前 → 後搜索
lastIndexOf()	子字符串的位置，後 → 前搜索

console.log(stringObject.indexOf('o')) // 4
console.log(stringObject.lastIndexOf('o')) // 7
console.log(stringObject.indexOf('o', 6)) // 7，第二個參數表示從哪一個位置開始搜索
console.log(stringObject.lastIndexOf('o', 6)) // 4，第二個參數表示從哪一個位置開始搜索

var loremString =
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
var position = new Array()
var pos = loremString.indexOf('o')
while (pos > -1) {
  position.push(pos)
  pos = loremString.indexOf('o', pos + 1)
}
console.log(position) // 全部包含o的字符位置集合

trim()方法	返回值
trim()	建立副本，刪除前置後綴空格，返回副本
trimLeft()	建立副本，刪除前置空格，返回副本
trimRight()	建立副本，刪除後綴空格，返回副本

var stringValue = '  hello world  '
var trimStringValue = stringValue.trim()
console.log(stringValue) // "  hello world  "
console.log(trimStringValue) // "hello world"

字符串大小寫轉換方法	返回值
toLowerCase()	轉小寫
toLocaleLowerCase()	根據地區轉小寫
toUpperCase()	轉大寫
toLocaleUpperCase()	根據地區轉大寫

console.log(stringObject.toUpperCase()) // "HELLO WORLD"
console.log(stringObject.toLocaleUpperCase()) // "HELLO WORLD"
console.log(stringObject.toLowerCase()) // "hello world"
console.log(stringObject.toLocaleLowerCase()) // "hello world"

字符串模式匹配方法	返回值
match()	數組
search()	首個匹配項索引，沒有返回-1
replace()	替換後的字符串
split()	分割成多個字符串，放在數組中

var text = 'cat, bat, sat, fat'
var pattern = /.at/

var matches = text.match(pattern)
console.log(matches) // [ 'cat',index: 0,input: 'cat, bat, sat, fat',groups: undefined ]
// match方法返回一個數組，第一項與整個模式匹配的字符串，後面的項保存着與正則表達式捕獲匹配的字符串
console.log(matches.index) // 0
console.log(matches[0]) // "cat"
console.log(pattern.lastIndex) // 0

var pos = text.search(/at/)
console.log(pos) // 1，記錄"at"首次在字符串出現的位置

var result = text.replace('at', 'ond')
console.log(result) // "cond, bat, sat, fat"，第一個參數是字符串因此只替換第一個匹配的
result = text.replace(/at/g, 'ond')
console.log(result) // "cond, bond, sond, fond"，第一個參數是全局正則因此替換所有的
result = text.replace(/(.at)/g, 'word($1)')
console.log(result) // "word(cat), word(bat), word(sat), word(fat)"，$1表示第一個匹配的參數

function htmlEscape(text) {
  return text.replace(/[<>"&]/g, function (match, pos, originalText) {
    switch (match) {
      case '<':
        return '&lt;'
        break
      case '>':
        return '&gt;'
        break
      case '&':
        return '&amp;'
        break
      case '"':
        return '&quot;'
        break
    }
  })
}
console.log(htmlEscape('<p class="greeting">Hello world!</p>')) // "&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;"

console.log(text.split(',')) // [ 'cat', ' bat', ' sat', ' fat' ]
console.log(text.split(',', 2)) // [ 'cat', ' bat' ]，第二個參數指定數組大小
console.log(text.split(/[^\,]+/)) // [ '', ',', ',', ',', '' ]，經過正則獲取包含都好字符的數組，正則指定分隔符出如今了字符串開頭和末尾，所以首位是空字符串

localeCompare()方法	返回值
localeCompare()	字符串參數在字母表中的先後關係

var stringCompare = 'yellow'
console.log(stringCompare.localeCompare('brick')) // 1，brick字母表在yellow以前
console.log(stringCompare.localeCompare('yellow')) // 0，yellow字母表與yellow相同
console.log(stringCompare.localeCompare('zoo')) // -1，zoo字母表在yellow以後

function determineOrder(value) {
  var result = stringCompare.localeCompare(value)
  result < 0 &&
    console.log(`The string 'yellow' comes before the string ${value}.`)
  result > 0 &&
    console.log(`The string 'yellow' comes after the string ${value}.`)
  result === 0 &&
    console.log(`The string 'yellow' is equal to the string ${value}.`)
}
determineOrder('brick') // "The string 'yellow' comes after the string brick."
determineOrder('yellow') // "The string 'yellow' is equal to the string zoo."
determineOrder('zoo') // "The string 'yellow' comes before the string zoo."

fromCharCode()方法	返回值
fromCharCode()	轉換後的字符串

// 將若干字符編碼轉換成字符串，與charCodeAt()相反
console.log(String.fromCharCode(104, 101, 108, 108, 111)) // "hello"

html 方法	返回值
anchor(name)	`<a name="name">string</a>`
big()	`<big>string</big>`
bold()	`<b>string</b>`
fixed()	`<tt>string</tt>`
fontcolor(color)	`<font color="color">string</font>`
fontsize(size)	`<font size="size">string</font>`
italics()	`<i>string</i>`
link(url)	`<a herf="url">string</a>`
small()	`<small>string</small>`
strike()	`<strike>string</strike>`
sub()	`<sub>string</sub>`
sup()	`<sup>string</sup>`

總結 & 問點

基本包裝類型包含哪些特殊的引用類型？讀取時後臺經歷了什麼步驟？
引用類型和基本包裝類型的主要區別是什麼？
對基本包裝類型的實例調用 typeof 會返回什麼？基本包裝類型的對象都會被轉換爲何？
請使用 Object 構造函數判斷基本包裝類型的實例
使用 new 調用基本包裝類型的構造函數與直接調用同名轉型函數的區別是什麼？
Boolean 的引用類型重寫了哪些方法？其基本類型和引用類型的區別是什麼？
Number 的引用類型重寫了哪些方法？提供了哪些格式化字符串方法？其基本類型和引用類型的區別是什麼？
String 的引用類型重寫了哪些方法？提供了哪些字符串操做或解析方法？其基本類型和引用類型的區別是什麼？
請說明 charAt()、charCodeAt()、concat()、slice()、substr()、substring()、indexOf()、lastIndexOf()、trim()、toLowerCase()、toUpperCase()、match()、search()、replace()、split()、localeCompare()、fromCharCode()等方法的含義，並舉出相關例子