5 📖 《JavaScript高级程序设计》__ 基本引用类型

前言

大家好，我是HoMeTown，web领域有一本神书大家应该都有看过，这本书我看过两遍，但是每次看都是粗粗的略过一些重要的知识点，甚至一些面试过程中的问题，在这本书里都能找到答案。

工作这么多年，到现在为止对这本书都没有一个系统的知识点记录，这次想从头读一遍这一本JavaScript高级程序设计【第4版】，并把重要的知识点记录下来，同时加上自己的见解，这也是我第一次在掘金上记录分享读书笔记，共勉之！

关注专栏，一起学习吧~

Boolean

let booleanObj = new Boolean(true)
console.log(booleanObj) // Boolean {true}

boolean实例的valueOf返回一个原始值：true或false，toString方法被调用也会覆盖，返回一个字符串原始值：’true’或’false’。

强烈建议永远不要使用new Boolean：

let falseBoolean = new Boolean(true)
let trueBoolean = true
console.log(typeof falseBoolean) // object
console.log(typeof trueBoolean) // boolean

Number

let numberObj = new Number(10)

与Boolean一样，Number也重写了valueOf、toString方法。

Number实例的valueOf返回一个原始值：10，toString方法被调用也会覆盖，返回一个字符串原始值：’1’。

toString方法可以接受接受一个参数进制：

let num = new Number(10)
console.log(num.toString(2)) // '1010'

isInteger

isInteger可以辨别一个数值是否为整数：

let intNum = 10
let floatNum1 = 10.1
let floatNum2 = 10.0
console.log(Number.isInteger(intNum)) // true
console.log(Number.isInteger(floatNum1)) // false
console.log(Number.isInteger(floatNum2)) // true

toFixed

接受一个参数n，保留n位小数：

let num = 3.1415926
console.log(num.toFixed(3)) // 3.142

toExponential & toPrecision

科学计数法（指数计数法）

String

const stringObj = new String('hello HoMeTown')

String的valueOf、toString都返回原始值。

每个String实例上都有一个length属性。

console.log(stringObj.length) // 14

JavaScript字符

JavaScript字符串由16位码元（code unit）组成，每16位码元对应一个字符，字符串的length标识字符串包含多少位16位码元。

concat

返回拼接后的结果

let str = "home"
let res = str.concat('town')
console.log(res) // hometown
console.log(str) // home

字符串提取的方法

都返回调用他们的字符串的一个子字符串，都接受1~2个参数。

第一个参数表示：子字符串开始的位置。

第二个参数见详细介绍。

省略第二个参数都意味着提取到字符串末尾。

不会修改调用它们的字符串，只会返回新的字符串。

slice

第二个参数是提取结束的位置。

let str = 'hometown'
console.log(str.slice(4)) // 'town'
console.log(str.substr(4)) // 'town'
console.log(str.substring(4)) // 'town'
​
console.log(str.slice(1, 4)) // 'ome'
console.log(str.substr(1, 4)) // 'omet'
console.log(str.substring(1, 4)) // 'ome'

substr

第二个参数表示返回的子字符串的数量。

substring

第二个参数是提取结束的位置。

indexOf

let str = "hometown"
console.log(str.indexOf('h')) // 0

includes

let str = "hometown"
console.log(str.includes('h')) // true

startsWith

是否以某个字符开头：

let str = "hometown"
console.log(str.startsWith('h')) // true

endsWith

是否已某个字符结束：

let str = "hometown"
console.log(str.endsWith('h')) // false

trim

删除前后所有空格，返回结果：

let str = '   hello hometown   '
console.log(str.trim()) // hello hometown

trimLeft()和trimRight()就是分别从开始和末尾清除空格。

repeat

接受一个整数参数，表示要将字符串重复多少次，返回拼接后的结果：

let str = 'hello '
console.log(str.repeat(10) + 'hometown') // hello hello hello hello hello hello hello hello hello hello hometown

padStart & padEnd

接收两个参数，第一个是指定字符串最后的长度，第二个是填充字符（默认为空格）。

let str = "hometown"; 
console.log(str.padStart(16, "a")); // "aaaaaaaahometown" 
console.log(str.padStart(16)); // "       hometown"

迭代与结构

字符串结构的原理： Symbol(Symbol.iterator) ：

let str = 'hmt'
let strIterator = str[Symbol.iterator]()
console.log(strIterator.next()) // {value: 'h', done: false}
console.log(strIterator.next()) // {value: 'm', done: false}
console.log(strIterator.next()) // {value: 't', done: false}
console.log(strIterator.next()) // {value: undefined, done: true}
​
const message = 'hometown'
console.log([...message]) // ['h', 'o', 'm', 'e', 't', 'o', 'w', 'n']

字符串大小写转换

toLowerCase

toLocaleLowerCase

toUpperCase

toLocaleUpperCase

Locale是指在特定区域用的，比如土耳其语。

let str = 'HoMeTown'
console.log(str.toLowerCase()) // hometown
console.log(str.toLocaleLowerCase()) // hometown
console.log(str.toUpperCase()) // HOMETOWN
console.log(str.toLocaleUpperCase()) // HOMETOWN

如果不知道是什么语言，建议使用xxxLocalexxx()！

match

接受一个参数：正则：

let str = "cat, bat, sat, fat";
let pattern = /.at/
let matches = str.match(pattern)
console.log(matches) // ['cat', index: 0, ...] 

charAt

返回给定索引位置的字符，更具体一点查找的是索引位置的16位码元，并返回码元对应的字符：

let str = 'hometown'
console.log(str.charAt(3)) // e

JavaScript字符串使用了两种 Unicode编码混合的策略：UCS-2 和 UTF-16。

charCodeAt

返回指定索引位置的码元值的10进制表示：

let str = 'hometown'
console.log(str.charCodeAt(3)) // 101 === 0x65

formCharCode

接收UTF-16码元，返回对应的字符串，并拼接起来：

console.log(String.fromCharCode(0x65, 0x66, 0x67)) //efg

Math

min & max

let nums = [1,2,3,4,5]
console.log(Math.min(...nums)) // 1
console.log(Math.max(...nums)) // 5

ceil、floor、round

• ceil： 向上舍入为最近接的整书
• floor：向下舍入为最接近的整数
• round：执行四舍五入

random

返回一个0~1范围内的随机数，其中包含0但是不包含1。

随机整数公式：

number = Math.floor(Math.random() * total_number_of_choices + first_possible_value)

// 随机数
function mathRandom(lowerValue, upperValue) {
  let choices = upperValue - lowerValue + 1
  return Math.floor(Math.random() * choices + lowerValue)
}
let num = mathRandom(2,10)
console.log(num) // 2~10范围内的值，包含2&10

Global

isNaN、isFinite、parseInt、parseFloat

encodeURI & encodeURIComponent

用于编码统一资源标识符（URI），以便传给浏览器。

encodeURI不会编码属于URL组件的特殊字符，比如：冒号、斜杠、问号、井号。

encodeURIComponet会编码它发现的所有非标准字符：

let uri = "http://www.ishometown.com/illegal value.js#start";
console.log(encodeURI(uri)) // http://www.ishometown.com/illegal%20value.js#start
console.log(encodeURIComponent(uri)) // http%3A%2F%2Fwww.ishometown.com%2Fillegal%20value.js%23start

decodeURI & decodeURIComponent

decodeURI只能对使用encodeURI编码过的字符解码。

let uri = 'https://www.ishometown.com/vue react.js#blog'
let ecuUri = encodeURI(uri)
let ecucUri = encodeURIComponent(uri)
​
console.log(decodeURI(ecuUri)) // https://www.ishometown.com/vue react.js#blog
console.log(decodeURIComponent(ecucUri)) // https://www.ishometown.com/vue react.js#blog
​
console.log(decodeURI(ecucUri)) // https%3A%2F%2Fwww.ishometown.com%2Fvue.js%23blog

eval

解释器发现eval()调用时，会把参数当做实际的ECMAScript语句，插入到当前位置：

let msg = 'hometown'
eval("console.log(msg)")

Date

Date类型保存UTC时间1970年1月1日0时 至今 所有经过的毫秒数。

使用方法：

new Date()

Date 构造函数接受一个参数，可以格式化一个日期，格式化的时候会隐式调用Date.parse方法：

let someDate = new Date('2020-01-01') // 返回 GMT
// 等价于
let someDate = Date.parse('2020-01-01')// 返回时间戳

继承的方法

Date类型的valueOf方法不返回字符串，返回的是时间戳：

const now = new Date()
console.log(now.getTime() === now.valueOf()) // true

所以两个Date类型的值可以直接比较：

const date1 = new Date(2022, 0, 1)
const date2 = new Date(2022, 0, 2)
console.log(date1 < date2) // true

日期格式化方法

• toDateString() 返回日期的周、月、日、年
• toTimeString() 返回日期的时、分、秒、时区
• toLocaleDateString() 返回日期的周、月、日、年
• toLocaleTimeString() 返回日期的时、分、秒
• toUTCString() 返回完整的UTC日期
• toGMTString()与toUTCString一样，目的是为了向后兼容。

这些方法与toLocaleString、toString一样，会因浏览器而异。

// Chrome
const date = new Date() 
console.log(date.toDateString()) // Mon Oct 31 2022
console.log(date.toTimeString()) // 14:23:51 GMT+0800 (中国标准时间)
console.log(date.toLocaleDateString()) // 2022/10/31
console.log(date.toLocaleTimeString()) // 14:23:51
console.log(date.toUTCString()) // Mon, 31 Oct 2022 06:23:51 GMT
console.log(date.toGMTString()) // Mon, 31 Oct 2022 06:23:51 GMT

RegExp

ECMAScript通过RegExp支持正则表达式。

const expression = /pattern/flags;

pattern 可以是任何的正则表达式。

falgs 可以拥有0个或者多个，值有以下可选值：

• g 全局模式，表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束。
• i 不区分大小写
• m 多行模式
• u Unicode模式

const pattern1 = /at/g; // 匹配字符串中所有的'at'
const pattern2 = /[bc]at/i; // 匹配第一个'bat' || 'cat'不区分大小写

元字符需要转义：

• {
• [
• \
• ^
• $
• |
• }
• ]
• .
• ?

ECMAScript中的正则表达式除了用字面量定义，还可以用构造函数：

let pattern1 = /[bc]at/gi;
// 等价于
let pattern1 = new RegExp("[bc]at","gi") // 两个参数都是字符串。

RegExp也可以基于已有的正则表达式实例使用，并可以选择性的修改flags：

let pattern1 = /[bc]at/g;
let pattern2 = new RegExp(pattern1, "i") // /[bc]at/i

RegExp实例属性

每个RegExp实例都有以下属性：

• global: 布尔值，是否设置了flag: g
• ignoreCase: 布尔值，是否设置了flag: i
• ……

let pattrn1 = /[bc]at/g;
let pattrn2 = /[ab]cd/i;
console.log(pattrn1.global, pattrn2.global) //true false
console.log(pattrn1.ignoreCase, pattrn2.ignoreCase) // false true

RegExp实例方法

exec

检索字符串中的正则表达式的匹配，返回一个数组。

var text = 'JavaScript, VBScript, JScript and ECMAScript';
var pattrn = /[a-zA-Z]+Script/g;
console.log(pattrn.exec(text)) // ["JavaScript", index: 0 ,.....]
console.log(pattrn.exec(text)) // ["VBScript", index: 0 ,.....]
console.log(pattrn.exec(text)) // ["JScript", index: 0 ,.....]

test

搜索字符串指定的值，根据结果并返回真或假。

const pattern= new RegExp("h", 'i');
console.log(pattern.test("HoMeTown")) // true
console.log(pattern.test("ooo")) // false

总结

JavaScript中的对象成为引用值。

• JavaScript中的引用值与传统的面向对象编程中的类相似，但是实现不同。
• 函数实际上是Function类型的实例，也就是说，函数也是对象，所以函数也有方法和属性！
• Boolean、Number、String的原始值可以当做对象来用，因为他们有原始包装类型，包装类型都映射到同名的原始类型，原始值会在底层自动创建包装类型的对象，涉及到原始值的语句执行完毕后，包装对象就会被销毁。
• 代码开始执行，全局上下文中会存在两个内置对象：Global和Math。Global对象无法直接访问，浏览器将其实现为了window对象。

下次见~ 我的朋友，我是HoMeTown👨‍💻‍，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。

👉 vx: hometown-468【单独拉你】

👨‍👩‍👧 公众号：秃头开发头秃了 【关注回复“进群”】

🤖 Blog：HoMeTown’Blog【点开看看】

高赞好文

• 羊了个羊 🐑 一夜爆火，我却开始偷偷抹眼泪…

• 分享 11 张巨好看的PC端界面！！!

• 敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！👊🏻

• 前端老司机 70+ 实用工具网站分享（建议收藏！）🔥🔥

• 【Git】 什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？😮

• 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

系列文章

• 1 📖 《JavaScript高级程序设计》__ 什么是JavaScript？

• 2 📖 《JavaScript高级程序设计》__ HTML中的JavaScript

• 3 📖 《JavaScript高级程序设计》__ 语言基础（上）

• 3 📖 《JavaScript高级程序设计》__ 语言基础（下）

• 4 📖 《JavaScript高级程序设计》__ 作用域&内存

• 5 📖 《JavaScript高级程序设计》__ 基本引用类型

• …持续更新…