【JavaScript高级程序设计】重点-第五章笔记:Date、RegExp、原始值包装类、单例内置对象

2023-11-12

文章目录

基本引用类型

引用值(或对象)是某个特定引用类型实例
引用类型

  • 是把数据和功能组织到一起的结构,经常被人错误地称作“类”。
  • 也被称为对象定义,因为它们描述了自己的对象应有的属性和方法

对象:

  • 对象被认为是某个特定引用类型的实例
  • 新对象通过使用 new 操作符后跟一个构造函数(constructor)来创建。
  • 构造函数就是用来创建新对象的函数
let now = new Date();

1.Date

Date 类型将日期保存为自 1970 年 1 月 1 日午夜(零时)至今所经过的毫秒数。

创建日期对象

let now = new Date(); 
  • 无参:创建的对象将保存当前日期和时间
  • 有参:传入其毫秒表示(1970 年 1 月 1 日午夜之后的毫秒数)

两个辅助方法

  1. Date.parse()
  2. Date.UTC()

Date.parse()方法:

  • 接收参数:表示日期的字符串
  • 返回:毫秒数(接收的参数不表示日期则返回NaN)

日期格式:
在这里插入图片描述

如果直接把表示日期的字符串传给 Date 构造函数,那么 Date 会在后台调用 Date.parse()。

Date.UTC()方法:

  • 参数:年、月(从0开始)、日、时(24时制)、分、秒和毫秒。
  • 返回:日期的毫秒表示
  • 年、月是必须的,其他会默认为0(日默认为1)
  • Date.UTC()会被 Date 构造函数隐式调用,但创建的是本地日期,不是 GMT 日期
  • Date 构造函数跟 Date.UTC()接收的参数是一样的:第一个是年(如果是 数值),第二个是月

还有一个Date.now()方法

  • 返回表示方法执行时日期和时间的毫秒数
  • 可用于代码分析:
// 起始时间
let start = Date.now(); 
// 调用函数
doSomething(); 
// 结束时间
let stop = Date.now(), 
result = stop - start; 

1.1 继承的方法

  • Date 类型重写了 toLocaleString()toString()valueOf()方法
  • 重写后这些方法的返回值不同
  • toLocaleString():返回与浏览器运行的本地环境一致的日期和时间(有AM、PM)
  • toString():返回带时区信息的日期和时间(24时制)
toLocaleString() - 2/1/2019 12:00:00 AM 
toString() - Thu Feb 1 2019 00:00:00 GMT-0800 (Pacific Standard Time) 
  • valueOf():返回的是日期的毫秒表示,操作符(如小于号和大于号)可以直接使用它返回的值

1.2 日期格式化方法

在这里插入图片描述

1.3 日期/时间组件方法

太多了,懒得写了,知道一下就行。需要的时候再搜。

2.RegExp正则表达式

语法:

let expression = /pattern/flags;

pattern:模式,要匹配的内容。

flags:匹配模式的标记:

在这里插入图片描述

举个例子:

// 匹配字符串中的所有"at" 
let pattern1 = /at/g; 
// 匹配第一个"bat"或"cat",忽略大小写
let pattern2 = /[bc]at/i; 
// 匹配所有以"at"结尾的三字符组合,忽略大小写
let pattern3 = /.at/gi; 

元字符在正则表达式中都有一种或多种特殊功能,所以要匹配上面这些字符本身,就必须使用反斜杠来转义。

( [ { \ ^ $ | ) ] } ? * + .

举个对比例子:

// 匹配第一个"bat"或"cat",忽略大小写
let pattern1 = /[bc]at/i; 
// 匹配第一个"[bc]at",忽略大小写
let pattern2 = /\[bc\]at/i; 
// 匹配所有以"at"结尾的三字符组合,忽略大小写
let pattern3 = /.at/gi; 
// 匹配所有".at",忽略大小写
let pattern4 = /\.at/gi; 

正则表达式可以使用 RegExp 构造函数来创建。它接收两个参数(两个参数都是字符串):

  • 模式字符串
  • (可选的)标记字符串
// 匹配第一个"bat"或"cat",忽略大小写
let pattern1 = /[bc]at/i; 
// 跟 pattern1 一样,只不过是用构造函数创建的
let pattern2 = new RegExp("[bc]at", "i"); 

因为要转换为字符串,所有元字符都必须二次转义,包括转义字符序列,如\n(\转义后的字符串是\\,在正则表达式字符串中则要写成\\\\)。

举个例子一下看懂:
在这里插入图片描述
使用 RegExp 也可以基于已有的正则表达式实例,并可选择性地修改它们的标记:

const re1 = /cat/g; 
console.log(re1); // "/cat/g" 
const re2 = new RegExp(re1); 
console.log(re2); // "/cat/g" 
const re3 = new RegExp(re1, "i"); 
console.log(re3); // "/cat/i" 

2.1 RegExp 实例属性

每个 RegExp 实例都有下列属性:
在这里插入图片描述
如:

let pattern1 = /\[bc\]at/i; 
console.log(pattern1.source); // "\[bc\]at"
let pattern2 = new RegExp("\\[bc\\]at", "i"); 
console.log(pattern2.source); // "\[bc\]at" 

两个\有一个是转义用的。

2.2 RegExp 实例方法

exec():主要配合捕获组使用。

  • 接收一个参数:要应用模式的字符串
  • 找到:返回包含第一个匹配信息的数组
  • 否则:null
  • 是 Array 的实例
  • 包含两个额外的属性:indexinput
  • index:字符串中匹配模式的起始位置
  • input:要查找的字符串

例子:数组matches的第一个元素是匹配的整个字符串,第二个元素是匹配第一个捕获组的字符串,第三个元素是匹配第二个捕获组的字符串。

let text = "mom and dad and baby"; 
let pattern = /mom( and dad( and baby)?)?/gi; 
let matches = pattern.exec(text); 
console.log(matches.index); // 0 
console.log(matches.input); // "mom and dad and baby" 
console.log(matches[0]); // "mom and dad and baby" 
console.log(matches[1]); // " and dad and baby" 
console.log(matches[2]); // " and baby" 

如果在这个模式上设置了 g 标记,则每次调用 exec()都会在字符串中向前搜索下一个匹配项:

  • 模式的 lastIndex 属性每次都会变化
  • 在全局匹配模式下,每次调用 exec()都会更新 lastIndex 值,以反映上次匹配的最后一个字符的索引
let text = "cat, bat, sat, fat"; 
let pattern = /.at/g; 
let matches = pattern.exec(text); 

console.log(matches.index); // 0 
console.log(matches[0]); // cat 
console.log(pattern.lastIndex); // 3 

matches = pattern.exec(text); 
console.log(matches.index); // 5 
console.log(matches[0]); // bat 
console.log(pattern.lastIndex); // 8 

matches = pattern.exec(text); 
console.log(matches.index); // 10 
console.log(matches[0]); // sat 
console.log(pattern.lastIndex); // 13 

2.3 RegExp 构造函数属性

RegExp 构造函数的所有属性都没有任何 Web 标准出处,因此不要在生产环境中使用它们。

RegExp构造函数本身的属性:

  • 在其他语言中,被称为静态属性
  • 适用于作用域中的所有正则表达式
  • 可以用全名或简写(使用中括号语法)访问

在这里插入图片描述
举例:

let text = "this has been a short summer"; 
let 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 
} 

3.原始值包装类型

每当用到某个原始值的方法或属性时,后台都会创建一个相应原始包装类型的对象,从而暴露出操作原始值的各种方法。

如:

let s1 = "some text"; 
let s2 = s1.substring(2); 

其实是:

let s1 = new String("some text"); 
let s2 = s1.substring(2); 
s1 = null; 

步骤:

  1. 创建实例
  2. 调用方法
  3. 销毁实例

引用类型原始值包装类型的主要区别对象的生命周期

  • 通过 new 实例化的对象:离开作用域时被销毁
  • 自动创建的原始值包装对象:只存在于访问它的那行代码执行期间。

举例:

  • 第二行:创建一个String对象,它有属性color=red,在第二行结束后销毁
  • 第三行:创建一个String对象,它没有color,所以会访问到undefined,第三行结束后销毁
let s1 = "some text"; 
s1.color = "red"; 
console.log(s1.color); // undefined 

Object 构造函数:能够根据传入值的类型返回相应原始值包装类型的实例。

  • 如果传给 Object 的是字符串,会创建一个 String 的实例
  • 数值:Number
  • 布尔值: Boolean
let obj = new Object("some text"); 
console.log(obj instanceof String); // true 

使用 new 调用原始值包装类型的构造函数,与调用同名的转型函数不一样:

  • 变量 number:一个值为 25 的原始数值
  • 变量 obj:一个Number 的实例
let value = "25"; 
let number = Number(value); // 转型函数
console.log(typeof number); // "number" 
let obj = new Number(value); // 构造函数
console.log(typeof obj); // "object" 

3.1 Boolean

强烈建议永远不要使用Boolean 对象。

Boolean 是对应布尔值的引用类型。创建Boolean对象如下:

let booleanObject = new Boolean(true); 

Boolean对象使用的很少,因为容易产生误会:所有对象在布尔表达式中都会自动转换为 true。

let falseObject = new Boolean(false); 
let result = falseObject && true; 
console.log(result); // true 

let falseValue = false; 
result = falseValue && true; 
console.log(result); // false 

原始值和引用值(Boolean 对象)的区别:

  • falseObject是Boolean的实例,它的type是object,确实是Boolean的实例(instanceof Boolean返回true)
  • falseValue是原始值,它的type是boolean,它不是Boolean的实例(instanceof Boolean返回false)
console.log(typeof falseObject); // object 
console.log(typeof falseValue); // boolean 
console.log(falseObject instanceof Boolean); // true 
console.log(falseValue instanceof Boolean); // false 

3.2 Number

不建议直接实例化 Number 对象。

Number 是对应数值的引用类型。创建Number对象如下:

let numberObject = new Number(10); 

Number重写的方法:

  • valueOf():返回原始数值
  • toLocaleString()
  • toString():可选地接收一个表示基数的参数,并返回相应基数形式(基数进制)的数值字符串
let num = 10; 
console.log(num.toString()); // "10" 
console.log(num.toString(2)); // "1010" 
console.log(num.toString(8)); // "12" 
console.log(num.toString(10)); // "10" 
console.log(num.toString(16)); // "a" 

Number将数值格式化为字符串的方法:

toFixed()

  • 返回包含指定小数点位数的数值字符串(超出则四舍五入)
  • 多个浮点数值的数学计算不一定得到精确的结果
  • 可以表示有 0~20 个小数位的数值

toExponential()

  • 科学记数法(指数记数法)
  • 接收一个参数,表示结果中小数的位数
let num = 10; 
console.log(num.toExponential(1)); // "1.0e+1" 

toPrecision()

  • 根据情况返回最合理的输出结果,可能是固定长度,也可能是科学记数法形式。
  • 接收一个参数,表示结果中数字的总位数(不包含指数)
  • 本质:根据数值和精度来决定调用 toFixed()还是 toExponential()
  • 会四舍五入(根据参数)
let num = 99; 
console.log(num.toPrecision(1)); // "1e+2" 
console.log(num.toPrecision(2)); // "99" 
console.log(num.toPrecision(3)); // "99.0" 
  • 用 1 位数字表示99,得到"1e+2",即100(99 不能只用 1 位数字来精确表示,则四舍五入为100)
  • 用 2 位数字表示 99 得到"99"
  • 用 3 位数字则是"99.0"

不建议直接实例化 Number 对象。原因:在处理原始数值和引用数值时,typeofinstacnceof操作符会返回不同的结果:

let numberObject = new Number(10); 
let numberValue = 10; 
console.log(typeof numberObject); // "object" 
console.log(typeof numberValue); // "number" 
console.log(numberObject instanceof Number); // true 
console.log(numberValue instanceof Number); // false 

isInteger()方法与安全整数

Number.isInteger()

  • 是否为整数
  • 小数位的0可能会让人误以为数值是一个浮点值

安全整数:

  • Number.MIN_SAFE_INTEGER(-253 +1)到Number.MAX_SAFE_INTEGER(253-1)
  • 判断是否在安全整数范围内:Number.isSafeInteger()

3.3 String

  • String 是对应字符串的引用类型
  • String 对象的方法可以在所有字符串原始值上调用
  • String 类型提供了很多方法来解析和操作字符串

3.3.1 JavaScript 字符

  • JavaScript 字符串由 16 位码元(code unit)组成
  • 对多数字符来说,每 16 位码元对应一个字符
  • 使用了两种 Unicode 编码混合的策略:UCS-2 和 UTF-16:对于可以采用 16 位编码的字符(U+0000~U+FFFF),这两种编码实际上是一样的

相关方法:

  • charCodeAt():查看指定码元的字符编码
  • fromCharCode():根据给定的 UTF-16 码元创建字符串中的字符

对于 U+0000~U+FFFF 范围内的字符,length、charAt()、charCodeAt()和 fromCharCode()返回的结果都跟预期是一样的。

上述对应关系在扩展到 Unicode 增补字符平面时成立。

Unicode:

  • 基本多语言平面(BMP)
  • 为了表示更多的字符,Unicode 采用了一个策略,即每个字符使用另外 16 位去选择一个增补平面
  • 这种每个字符使用两个 16 位码元的策略称为代理对

举例:

let message = "ab☺de"; 
console.log(message.charAt(2)); // <?> 
console.log(message.charAt(3)); // <?> 
console.log(message.charAt(4)); // d 

console.log(message.charCodeAt(2)); // 55357 
console.log(message.charCodeAt(3)); // 56842 
console.log(message.charCodeAt(4)); // 100 

console.log(String.fromCodePoint(0x1F60A)); // ☺
console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); // ab☺de
  • 上述方法将16位码元当作一个字符
  • 而☺是一个代理对,应该将两个16位码元看作一个字符
  • fromCharCode()可以返回正确的结果:原因是它基于提供的二进制表示直接组合成字符串。浏览器可以直接解析代理对

这里介绍一个新方法:codePointAt()

  • 可以正确解析既包含单码元字符又包含代理对字符的字符串
  • 接收 16 位码元的索引并返回该索引位置上的码点(code point)
  • 码点是 Unicode 中一个字符的完整标识
let message = "ab☺de"; 
console.log(message.codePointAt(1)); // 98 
console.log(message.codePointAt(2)); // 128522 
console.log(message.codePointAt(3)); // 56842 
console.log(message.codePointAt(4)); // 100 

注意:

  • 传入的码元索引要是代理对的开头,否则会返回错误码点
  • 这种错误只有检测单个字符时出现
  • 解决方法:过从左到右按正确的码元数遍历字符串
  • 如:迭代字符串
console.log([..."ab☺de"]); // ["a", "b", "☺", "d", "e"] 

对比:fromCharCodefromCodePoint

console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); 
// ab☺de 
console.log(String.fromCodePoint(97, 98, 128522, 100, 101)); 
// ab☺de 

3.3.2 normalize()方法

某些 Unicode 字符可以有多种编码方式:

  • 通过一个 BMP 字符表示
  • 通过一个代理对表示

举例:Å字符(A上有一个圈)——三个都是

console.log(String.fromCharCode(0x00C5))
console.log(String.fromCharCode(0x212B))
console.log(String.fromCharCode(0x0041, 0x030A))

比较操作符:3个字符互不相等。

为了解决这种问题,Unicode提供了 4种规范化形式:

  • NFD
  • NFC
  • NFKD
  • NFKC

方法:normalize()
参数:规范化形式的字符串。

三个字符选择同一种规范化形式可以让比较操作符返回正确的结果:

let a1 = String.fromCharCode(0x00C5), 
 a2 = String.fromCharCode(0x212B), 
 a3 = String.fromCharCode(0x0041, 0x030A); 

console.log(a1.normalize("NFD") === a2.normalize("NFD")); 
// true 
console.log(a2.normalize("NFKC") === a3.normalize("NFKC")); 
// true 
console.log(a1.normalize("NFC") === a3.normalize("NFC")); 
// true 

3.3.3 字符串操作方法

concat()

  • 将一个或多个字符串拼接成一个新字符串
  • 可以接收任意多个参数
  • 更常用的方式:使用加号操作符(+)

从字符串中提取子字符串的方法:

  • slice()
  • substr()
  • substring()
  • 第一个参数表示子字符串开始的位置,第二个参数表示子字符串结束的位置
  • slice()substring():第二个参数:提取结束的位置
  • substr():第二个参数:返回的子字符串长度
  • 任何情况下:
  • 省略第二个参数都意味着提取到字符串末尾
  • 不会修改调用它们的字符串,只会返回提取到的原始新字符串值

某个参数是负值时:

  • slice():所有负值参数:字符串长度加上负参数值
  • substr():第一个负参数值:字符串长度加上该值,第二个负参数值:0
  • substring():所有负参数值:0

3.3.4 字符串位置方法

用于在字符串中定位子字符串

  • indexOf()lastIndexOf()
  • 从字符串中搜索传入的字符串,返回位置(没找到返回-1)
  • 区别:
  • indexOf():从字符串开头开始查找子字符串
  • lastIndexOf():从字符串末尾开始查找子字符串
  • 第二个参数(可选):开始搜索的位置

3.3.5 字符串包含方法

判断字符串中是否包含另一个字符串:

  • startsWith()endsWith()includes()
  • startsWith():从索引0开始
  • endsWith():从string.length - substring.length开始
  • includes():检查整个字符串

举例:由代码可以看出,就算包含,但不是从相应位置匹配的也是false

let message = "foobarbaz"; 
console.log(message.startsWith("foo")); // true 
console.log(message.startsWith("bar")); // false 

console.log(message.endsWith("baz")); // true 
console.log(message.endsWith("bar")); // false 

console.log(message.includes("bar")); // true 
console.log(message.includes("qux")); // false 

第二个参数:startsWith()includes()

  • 可选
  • 表示开始搜索的位置

第二个参数:endsWith()

  • 可选
  • 表示应该当作字符串末尾的位置

3.3.6 trim()

trim()

  • 创建字符串的一个副本,删除前、后所有空格符
  • 返回副本
  • 原始字符串不受影响
  • trimLeft()trimRight():从字符串开始或末尾清理空格符

3.3.7 repeat()

repeat()

  • 参数:整数
  • 要将字符串复制多少次
  • 返回:拼接所有副本后的结果

3.3.8 padStart()和 padEnd()

  • 第一个参数:长度
  • 第二个参数(可选):填充字符串(会将其拼接并截断以匹配指定长度),默认为空格
  • 若小于指定长度,则在相应一边填充字符,直至满足长度条件
let stringValue = "foo"; 

console.log(stringValue.padStart(6)); // " foo" 
console.log(stringValue.padStart(9, ".")); // "......foo" 

console.log(stringValue.padEnd(6)); // "foo " 
console.log(stringValue.padEnd(9, ".")); // "foo......" 

console.log(stringValue.padStart(8, "bar")); // "barbafoo" 
console.log(stringValue.padStart(2)); // "foo" 
console.log(stringValue.padEnd(8, "bar")); // "foobarba" 
console.log(stringValue.padEnd(2)); // "foo" 

3.3.9 字符串迭代与解构

@@iterator方法:表示可以迭代字符串的每个字符

let message = "abcde"; 
console.log([...message]); 
// ["a", "b", "c", "d", "e"] 

3.3.10 字符串大小写转换

toLowerCase()toUpperCase()

  • 都变小写、都变大写

toLocaleLowerCase() toLocaleUpperCase():

  • 在特定地区实现
  • 如土耳其语:Unicode 大小写转换需应用特殊规则,要使用地区特定的方法才能实现正确转换

3.3.11 字符串模式匹配方法

match()方法:

  • 跟 RegExp 对象的 exec()方法相同
  • 参数:正则表达式的字符串或RegExp对象
  • 返回的数组与 exec()方法的一样:
  • 第一个元素:与整个模式匹配的字符串
  • 其他元素:与捕获组匹配的字符串(如果有)

let matches = text.match(pattern);等价于pattern.exec(text)

search()方法:

  • 参数:与match()相同
  • 返回模式第一个匹配的位置索引,没找到返回-1
  • 从字符串开头向后匹配

replace()方法:

  • 第一个参数:一个 RegExp 对象或一个字符串(不会转换为正则表达式)
  • 第二个参数:一个字符串或函数
  • 要想替换所有子字符串:第一个参数为正则表达式且带全局标记
let text = "cat, bat, sat, fat"; 
let 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" 

第二个参数若是字符串,有几个特殊的字符序列:

在这里插入图片描述
举例:每个以"at"结尾的词都会被替换成"word"后跟一对小括号,其中包含捕获组匹配的内容$1

  • 每个:全局标记/g
  • 以"at"结尾的词:(.at)
  • 替换成"word"后跟一对小括号:“word ($1)”
  • 捕获组匹配的内容:(.at)
let text = "cat, bat, sat, fat"; 
result = text.replace(/(.at)/g, "word ($1)"); 
console.log(result); 
// word (cat), word (bat), word (sat), word (fat) 

第二个参数若是函数:

  • 在只有一个匹配项时,函数的三个参数:
  • 模式匹配的字符串、字符串开始匹配的位置、整个字符串
  • 在有多个捕获组的情况下:每个匹配捕获组的字符串会作为参数
  • 返回一个字符串,表示应该把匹配项替换成什么

举例:

function htmlEscape(text) { 
 return text.replace(/[<>"&]/g, function(match, pos, originalText) { 
	 switch(match) { 
	 case "<": 
	 	 return "&lt;"; 
	 case ">": 
		 return "&gt;"; 
	 case "&": 
		 return "&amp;"; 
	 case "\"": 
		 return "&quot;"; 
	 } 
 }); 
} 

console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>")); 
// "&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>" 

split()方法:

  • 根据分隔符将字符串拆分成数组
  • 分隔符参数:字符串、RegExp对象
  • 第二个参数(可选):数组大小,确保返回的数组不会超过指定大小
let colorText = "red,blue,green,yellow"; 
let colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"] 
let colors2 = colorText.split(",", 2); // ["red", "blue"] 

3.3.12 localeCompare()

  • 比较两个字符串,按照字母表顺序,返回
  • 字符串应该排在字符串参数前头,则返回负值(一般是-1)
  • 后头,返回正值:一般是1
  • 字符串与字符串参数相等:一般是0
  • 省流:对象应该排在前面返回-1,后面1
let stringValue = "yellow"; 
console.log(stringValue.localeCompare("brick")); // 1 
console.log(stringValue.localeCompare("yellow")); // 0 
console.log(stringValue.localeCompare("zoo")); // -1 

返回的具体值可能因具体实现而异,建议这样:用是否大于0来判断。

function determineOrder(value) { 
	 let result = stringValue.localeCompare(value); 
	 if (result < 0) { 
	 console.log(`The string 'yellow' comes before the string '${value}'.`); 
	 } else if (result > 0) { 
	 console.log(`The string 'yellow' comes after the string '${value}'.`); 
	 } else { 
	 console.log(`The string 'yellow' is equal to the string '${value}'.`); 
	 } 
} 

独特之处:根据所在的地区(国家和语言)决定了这个方法如何比较字符串。(所以带有local)

3.3.13 HTML 方法

这些方法基本不用了:结果通常不是语义化的标记。

在这里插入图片描述

4.单例内置对象

内置对象:“任何由 ECMAScript 实现提供、与宿主环境无关,并在 ECMAScript程序开始执行时就存在的对象”。

如:Object、Array、String、Global、Math。

4.1 Global对象

  • 一种兜底对象,所针对的是不属于任何对象的属性和方法
  • 全局作用域中定义的变量和函数都会变成 Global 对象的属性

Global对象上的一些方法:

  • URL 编码方法
  • eval()方法

URL 编码方法

encodeURI()encodeURIComponent()方法:

  • 用于编码统一资源标识符(URI),以便传给浏览器
  • 有效的 URI 不能包含某些字符,使用 URI 编码方法可以让浏览器理解URL,并用特殊的 UTF-8 编码替换无效字符
  • ecnodeURI()方法用于对整个 URI 进行编码
  • encodeURIComponent()方法用于编码 URI 中单独的组件
  • 区别:encodeURI()不会编码属于 URL 组件的特殊字符,比如冒号、斜杠、问号、井号
  • encodeURIComponent()会编码它发现的所有非标准字符
  • 一般使用 encodeURI()编码整个URI
  • 只使用 encodeURIComponent()编码会追加到已有 URI 后的字符串

例子:

let uri = "http://www.wrox.com/illegal value.js#start"; 

// "http://www.wrox.com/illegal%20value.js#start" 
console.log(encodeURI(uri)); 

//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.js%23start" 
console.log(encodeURIComponent(uri)); 

有编码就有解码:

  • encodeURI()encodeURIComponent()相对的是 decodeURI()decodeURIComponent()
  • decodeURI()只对使用 encodeURI()编码过的字符解码
  • decodeURIComponent()解码所有被 encodeURIComponent()编码的字符

eval()方法

这个方法就是一个完整的 ECMAScript 解释器,它接收一个参数,即一个要执行的 ECMAScript(JavaScript)字符串。

例子:两条语句等价。

eval("console.log('hi')"); 
console.log("hi");

作用原理:

  • eval()调用:解释器会将其当作JS语句,插入到该位置
  • 通过 eval()执行的代码属于该调用所在上下文,被执行的代码与该上下文拥有相同的作用域链
  • 通过 eval()定义的变量和函数不会被提升:在解析代码时,它们是被包含在一个字符串中的。只有在 eval()执行的时候才会被创建。

上下文相关例子:

  • 定义在包含上下文中的变量可以在 eval()调用内部被引用
let msg = "hello world"; 
eval("console.log(msg)"); // "hello world" 

//其实就是
console.log(msg)
  • 同理:在 eval()内部定义函数或变量,可以在外部代码中引用
eval("function sayHi() { console.log('hi'); }"); 
sayHi(); 

在严格模式下:

  • 在 eval()内部创建的变量和函数无法外部访问
  • 赋值给 eval 会导致错误

Global 对象属性

分为:特殊值构造函数

在这里插入图片描述
在这里插入图片描述

window 对象

  • 浏览器将 window 对象实现为 Global对象的代理
  • 所有全局作用域中声明的变量和函数都变成了 window 的属性
  • 详情见第12章

4.2 Math

注意:Math 对象上提供的计算要比直接在 JavaScript 实现快得多: Math 对象上的计算使用了 JavaScript 引擎中更高效的实现和处理器指令。但, Math 计算的精度浏览器、操作系统、指令集和硬件而异

Math 对象属性

是一些数学中的特殊值,了解一下:
在这里插入图片描述

min()和 max()方法

  • 接收任意多个参数
  • 返回最小/最大值

舍入方法

  • Math.ceil()向上舍入为最接近的整数
  • Math.floor()向下舍入为最接近的整数
  • Math.round()四舍五入
  • Math.fround():返回数值最接近的单精度(32 位)浮点值表示

random()方法

Math.random():

  • 返回一个[0,1)内的随机数
  • 想从 1~10 范围内随机选择一个数:
let num = Math.floor(Math.random() * 10 + 1); 

为什么要用Math.floor:若随机数取0.9999999,则会算出9.999999+1=10.999999,向下取整得到10.

可以提炼出公式,从一组整数中随机选择一个数:

  • total_number_of_choices:可选数字个数
  • first_possible_value:第一个数
number = Math.floor(Math.random() * total_number_of_choices + first_possible_value) 

例子:

function selectFrom(lowerValue, upperValue) { 
	 let choices = upperValue - lowerValue + 1; 
	 return Math.floor(Math.random() * choices + lowerValue); 
} 
let num = selectFrom(2,10); 
console.log(num); // 2~10 范围内的值,其中包含 2 和 10 

随机选数组里的颜色:即随机选索引

let colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; 
let color = colors[selectFrom(0, colors.length-1)]; 

注意:若是为了加密而需要生成随机数,使用window.crypto.getRandomValues()

其他方法

大概看看,要用到再说:

在这里插入图片描述

5.小结

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【JavaScript高级程序设计】重点-第五章笔记:Date、RegExp、原始值包装类、单例内置对象 的相关文章

随机推荐

  • vue3的一些知识点plus--3

    二十 兄弟组件传值 Bus 兄弟组件直接的传值 最基础的是通过同一个父级进行数值的传递 使用prop和emit 太过繁琐 父级 div a a b b div let flag ref false let getFlag params bo
  • 停车场管理

    停车场管理 1 项目简介 设停车场是一个可以停放n辆汽车的南北方向的狭长通道 且只有一个大门可供汽车进出 汽车在停车场内按车辆到达时间的先后顺序 依次由北向南排列 大门在最南端 最先到达的第一辆车停放在车场的最北端 若车场内已停满n辆车 那
  • Java入门(1) —— 变量、运算符、分支结构和程序员思维的理解

    1 计算机语言的发展史 机器语言 机器语言是指一台计算机全部的指令集合 汇编语言 为了减轻使用机器语言编程的痛苦 人们进行了一种有益的改进 用一些简洁的英文字母 符号串来替代一个特定的指令的二进制串 高级语言 BASIC True basi
  • Map循环遍历的五种方法

    因为Map比较常用 所以今天来总结下Map取值比较常用的几种遍历方法 1 创建一个Enum public enum FactoryStatus BAD 0 ou GOOD 1 yeah private int status private
  • 排错解决:etcd节点掉线后(code=exited, status=1/FAILURE),如何加入

    一 问题出现环境 有一个etcd节点因为磁盘问题当掉 在node1节点查看健康状态 root node01 k8s etcd bin etcdctl ca file k8s etcd ssl ca pem cert file k8s etc
  • python统计字典里面value出现的次数_python 统计list中各个元素出现的次数的几种方法...

    利用字典dict来完成统计 举例 a 1 2 3 1 1 2 dict for key in a dict key dict get key 0 1 print dict 输出结果 gt gt gt 1 3 2 2 3 1 利用Python
  • 【WINDOWS / DOS 批处理】for命令详解(六)

    for命令详解 一 共十篇 for命令详解 二 共十篇 for命令详解 三 共十篇 for命令详解 四 共十篇 for命令详解 五 共十篇 for命令详解 六 共十篇 for命令详解 七 共十篇 for命令详解 八 共十篇 for命令详解
  • urlrewrite(伪静态技术运用2之outbound-rule)

    问题 页面通过 servlet detail magid 520 categoryId 205 来访问一个servlet 这个链接在IE地址栏上给人家看起来很不舒服 想把它伪装一下变成别的地址 例如想把它伪装成 servlet detail
  • 2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

    近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题 后期会对于单个知识点再说笔记详细讲解 部分都是百度的答案 不是特全面的 可以自己找 红色为常见面
  • vue 父子组件(个人笔记)

    目录 父组件使用子组件 父子组件之间传参 props 子获父 ref 子获父 this parent 子获父 emit 父获子 使用this emit 自定义事件名 所需要传的值 this children 父获子 父组件使用子组件 父组件
  • STM32 ADC 多通道16路电压采集

    下面介绍一种利用STM32单片机制作的16路多通道ADC采集电路图和源程序 采用USB接口与电脑连接 实则USB转串口方式 所以上位机可以用串口作为接口 电路图中利用LM324作为电压跟随器 起到保护单片机引脚的作用 直接在电脑USB取点
  • red5聊天功能--私聊的实现

    这里我是在服务器端进行转发 遍历当前所有连接 找到目标对象 然后调用客户端函数 不知道还有没有更好的方法 如果人数多 服务器要承受较的的压力 public boolean sendPrivateMsg String target Strin
  • Centos/linux根目录扩容、分区、挂载。LVM、物理卷、逻辑卷

    一 LVM结构 二 数据盘划分 磁盘情况 需要将vda vdb剩余资源划分给 data下 开始划分 创建磁盘分区 注意 并不要求分区的大小一致 同样 分区需要使用 8e 类型来使他们可用于LVM fdisk dev vda n gt p g
  • Unity调用摄像头获取拍摄画面

    using System Collections using UnityEngine public class Test MonoBehaviour public WebCamTexture cameraTexture public str
  • 酷应用背后,低代码正在被重估

    就当下的中国TO B企业而言 尤其是中大企业而言 复杂的场景和需求是阻碍数字化的最根本原因 而低代码恰可以以一种最原子化和最细颗粒度的数字模型来解决这个问题 帮助企业构建一个完整的 连贯的前端数字化应用 作者 皮爷 出品 产业家 生产计划
  • 华为机试题80-整型数组合并

    描述 题目标题 将两个整型数组按照升序合并 并且过滤掉重复数组元素 输出时相邻两数之间没有空格 输入描述 输入说明 按下列顺序输入 1 输入第一个数组的个数 2 输入第一个数组的数值 3 输入第二个数组的个数 4 输入第二个数组的数值 输出
  • 静态储存,堆,栈的理解

    数据结构中的堆与栈 栈 可以理解为为一个瓶子 他遵循着先进后出的原则 堆 是一种经过排序的树状结构 每一个节点都有一个值 我们通常说的堆是二叉堆 堆的特点是跟节点最大或者最小 且子节点也是一个堆 所以我们在使用的堆的时候 都是随便取一个节点
  • java ssh连接远程服务器_Ubuntu开启远程连接-开启ssh服务

    ssh分为openssh client与openssh server 如果要连接某个远程就需要装openssh client 反之如果要被其他远程连接本机就需要安装openssh server 我们安装完ubuntu之后会发现无法通过外部使
  • 【软路由】旁路由使用配置教程

    软路由 旁路由使用配置教程 简介 旁路由好处 旁路由配置步骤 1 修改管理地址网段 2 关闭IPV6和DHCP服务 3 防火墙设置 关于IP动态伪装 4 终端设置 简介 我们都知道 软路由一般有两种使用方式 一种是作为承担DHCP分配的主路
  • 【JavaScript高级程序设计】重点-第五章笔记:Date、RegExp、原始值包装类、单例内置对象

    文章目录 基本引用类型 1 Date 1 1 继承的方法 1 2 日期格式化方法 1 3 日期 时间组件方法 2 RegExp正则表达式 2 1 RegExp 实例属性 2 2 RegExp 实例方法 2 3 RegExp 构造函数属性 3