JavaScript高级程序设计第四版学习--第五章

最新推荐文章于 2021-05-31 16:26:29 发布

再敲一行就睡觉

最新推荐文章于 2021-05-31 16:26:29 发布

阅读量253

点赞数

分类专栏： JavaScript学习文章标签： js javascript

本文链接：https://blog.csdn.net/one_punchman_zxl/article/details/116953657

版权

JavaScript学习专栏收录该内容

27 篇文章 6 订阅

订阅专栏

title: JavaScript高级程序设计第四版学习–第五章
date: 2021-5-17 23:10:21
image: /assets/images/blog/blog.webp
author: Xilong88
tags: JavaScript

本章内容
理解对象
基本JavaScript数据类型
原始值与原始值包装类型
可能出现的面试题：
1.Date的一些常见方法
2.了解过JavaScript包装类型吗？
3.正则表达式的运用题
4.字符串操作题
5.三种包装类的常用方法

1.JavaScript里的对象不是类，概念不同，对象是数据和功能组织在一起的结构。

2.Date
创建一个Date对象

let now = new Date();

Date.parse()，传参创建：
直接new传参也能创建：

日期格式：
“月/日/年”，如"5/23/2019" ；

“月名日, 年”，如"May 23, 2019" ；

“周几月名日年时:分:秒时区”，如"Tue May 23 2019 00:00:00 GMT-0700" ；

ISO 8601扩展格式“YYYY-MM-DDTHH:mm:ss.sssZ”，如2019-05-
23T00:00:00 （只适用于兼容ES5的实现）。

let someDate = new Date(Date.parse("May 23, 2019"));

let someDate = new Date("May 23, 2019");

针对越界问题，不同浏览器处理方法不同，如：
日期出现 32日这种。

Date.UTC() 的参数是
年、零起点月数（1月是0，2月是1，以此类推）、日（1~31）、时
（0~23）、分、秒和毫秒。

// GMT时间2000年1月1日零点
let y2k = new Date(Date.UTC(2000, 0));
// GMT时间2005年5月5日下午5点55分55秒
let allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));

也可以直接构造函数创建，会隐式调用Date.UTC

// 本地时间2000年1月1日零点
let y2k = new Date(2000, 0);
// 本地时间2005年5月5日下午5点55分55秒
let allFives = new Date(2005, 4, 5, 17, 55, 55);

Date.now(),返回1970子夜到现在的毫秒数，可以一直有效到之后的285616年。

toLocalString();

返回与浏览器运行的本地环境一致的日期和时间。

toString() 方法通常返回带时区信息的日期和时间，而时间也
是以24小时制（0~23）表示的

toLocaleString() Mon May 17 2021 21:46:22 GMT+0800 (中国标准时间)
toString() - Mon May 17 2021 21:46:49 GMT+0800 (中国标准时间)

Date.valueOf()返回毫秒数

toDateString() 显示日期中的周几、月、日、年（格式特定于实
现）；
toTimeString() 显示日期中的时、分、秒和时区（格式特定于实
现）；
toLocaleDateString() 显示日期中的周几、月、日、年（格式
特定于实现和地区）；
toLocaleTimeString() 显示日期中的时、分、秒（格式特定于
实现和地区）；
toUTCString() 显示完整的UTC日期（格式特定于实现）。

还有一些常用的方法

getTime(),返回毫秒数
getFullYear(),返回4位年，如2021
等等，

要用的时候查也不迟

3.RegExp类型，支持正则表达式

let expression = /pattern/flags;

g ：全局模式，表示查找字符串的全部内容，而不是找到第一个匹
配的内容就结束。
i ：不区分大小写，表示在查找匹配时忽略pattern 和字符串的大
小写。
m ：多行模式，表示查找到一行文本末尾时会继续查找。
y ：粘附模式，表示只查找从lastIndex 开始及之后的字符串。
u ：Unicode模式，启用Unicode匹配。
s ：dotAll 模式，表示元字符. 匹配任何字符（包括\n 或\r ）。

所有特殊符号都需要转义

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

通过构造函数的话，字符串里的符号都需要转义。

如

/\[bc\]at/        "\\[bc\\]at"

/\w\\hello\\123/   "\\w\\\\hello\\\\123"

使用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"

RegExp 实例属性：

global ：布尔值，表示是否设置了g 标记。

ignoreCase ：布尔值，表示是否设置了i 标记。

unicode ：布尔值，表示是否设置了u 标记。

sticky ：布尔值，表示是否设置了y 标记。

lastIndex ：整数，表示在源字符串中下一次搜索的开始位置，始
终从0开始。

multiline ：布尔值，表示是否设置了m 标记。

dotAll ：布尔值，表示是否设置了s 标记。

source ：正则表达式的字面量字符串（不是传给构造函数的模式
字符串），没有开头和结尾的斜杠。

flags ：正则表达式的标记字符串。始终以字面量而非传入构造函
数的字符串模式形式返回（没有前后斜杠）。

例子：

let pattern1 = /\[bc\]at/i;
console.log(pattern1.global);      // false

console.log(pattern1.ignoreCase);  // true
console.log(pattern1.multiline);   // false
console.log(pattern1.lastIndex);   // 0
console.log(pattern1.source);      // "\[bc\]at"
console.log(pattern1.flags);       // "i"
let pattern2 = new RegExp("\\[bc\\]at", "i");
console.log(pattern2.global);      // false
console.log(pattern2.ignoreCase);  // true
console.log(pattern2.multiline);   // false
console.log(pattern2.lastIndex);   // 0
console.log(pattern2.source);      // "\[bc\]at"
console.log(pattern2.flags);       // "i"

exec() 方法，查找匹配项，没找到返回null，找到返回数组

数组第一个元素是匹配全部捕获组的字符串，也就是整个表达式，后续就是子捕获组匹配的字符串。

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"

配置了全局标记，exec会在上次的结尾向后继续找，每次运行只返回一个数组，这个数组不是说全部匹配项，而是一个匹配项和子匹配项。

let text = "cat, bat, sat, fat";
let pattern = /.at/;
let matches = pattern.exec(text);
console.log(matches.index);      // 0
console.log(matches[0]);         // cat
console.log(pattern.lastIndex);  // 0
matches = pattern.exec(text);
console.log(matches.index);      // 0
console.log(matches[0]);         // cat
console.log(pattern.lastIndex);  // 0

如果在这个模式上设置了g 标记，则每次调用exec() 都会在字符串中
向前搜索下一个匹配项，如下面的例子所示：

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

如果模式设置了粘附标记y ，则每次调用exec() 就只会在lastIndex
的位置上寻找匹配项。粘附标记覆盖全局标记。

也就是说，lastIndex是多少，假如有匹配就只能在当前这里开始，不然就算没有。

let text = "cat, bat, sat, fat";
let pattern = /.at/y;
let matches = pattern.exec(text);
console.log(matches.index);       // 0
console.log(matches[0]);          // cat
console.log(pattern.lastIndex);   // 3
// 以索引3对应的字符开头找不到匹配项，因此exec()返回null
// exec()没找到匹配项，于是将lastIndex设置为0
matches = pattern.exec(text);
console.log(matches);             // null
console.log(pattern.lastIndex);   // 0
// 向前设置lastIndex可以让粘附的模式通过exec()找到下一个匹配项：
pattern.lastIndex = 5;
matches = pattern.exec(text);
console.log(matches.index);       // 5
console.log(matches[0]);          // bat
console.log(pattern.lastIndex);   // 8

test()是看字符串符不符合表达式。

无论正则表达式是怎么创建的，继承的方法toLocaleString() 和
toString() 都返回正则表达式的字面量表示。

let pattern = new RegExp("\\[bc\\]at", "gi");
console.log(pattern.toString());       // /\[bc\]at/gi
console.log(pattern.toLocaleString()); // /\[bc\]at/gi

正则表达式的valueOf() 方法返回正则表达式本身。

全名         简写    说明
input        $_     最后搜索的字符串（非标准特性）
lastMatch    $&     最后匹配的文本

lastParen    $+     最后匹配的捕获组（非标准特性）
leftContext  $`     input 字符串中出现在lastMatch 前面的文本
rightContext $'     input 字符串中出现在lastMatch 后面的文本

通过这些属性可以提取出与exec() 和test() 执行的操作相关的信息：

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
}


let text = "this has been a short summer";
let pattern = /(.)hort/g;

/*
 * 注意：Opera 不支持简写属性名
 * IE 不支持多行匹配
 */
if (pattern.test(text)) {
  console.log(RegExp.$_);      // this has been a short summer
  console.log(RegExp["$`"]);   // this has been a
  console.log(RegExp["$'"]);   // summer
  console.log(RegExp["$&"]);   // short
  console.log(RegExp["$+"]);   // s
}

4.原始值包装类型

为了方便操作原始值，ECMAScript提供了3种特殊的引用类
型：Boolean 、Number 和String

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

在以读模式访问字符串值的任何时候，后台都会执行以下3步：
(1) 创建一个String 类型的实例；
(2) 调用实例上的特定方法；
(3) 销毁实例。

可以显式地使用Boolean 、Number 和String 构造函数创建原始值包装
对象。不过应该在确实必要时再这么做，否则容易让开发者疑惑，分不
清它们到底是原始值还是引用值。

使用new 调用原始值包装类型的构造函数，与调用同名的转型函
数并不一样。例如：

let value = "25";
let number = Number(value);    // 转型函数
console.log(typeof number);    // "number"
let obj = new Number(value);   // 构造函数
console.log(typeof obj);       // "object"

5.Boolean

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

包装类是对象，所以就算存的false，与true返回true，所以最好不要用Boolean包装类。

valueOf返回原始值
toString返回原始值的字符串形式

6.Number

valueOf() 方法返回
Number 对象表示的原始数值，toLocaleString() 和toString()返回数值字符

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"

toFixed() 方法返回包含指定小数点位数的数值字符串，如：

let num = 10;
console.log(num.toFixed(2)); // "10.00"

toExponential() ，返回以科学记数
法（也称为指数记数法）表示的数值字符串。
toExponential() 也接收一个参数，表示结果中小数的位数。

let num = 10;
console.log(num.toExponential(1));  // "1.0e+1"

toPrecision() 方法会根据情况返回最合理的输出结果，可能是固定
长度，也可能是科学记数法形式。

let num = 99;
console.log(num.toPrecision(1)); // "1e+2"
console.log(num.toPrecision(2)); // "99"
console.log(num.toPrecision(3)); // "99.0"

isInteger()，判断一个数是不是整数：

console.log(Number.isInteger(1));    // true
console.log(Number.isInteger(1.00)); // true
console.log(Number.isInteger(1.01)); // false

Number.isSafeInteger()

判断一个数是不是在
Number.MIN_SAFE_INTEGER 到Number.MAX_SAFE_INTEGER

console.log(Number.isSafeInteger(-1 * (2 ** 53)));      // false
console.log(Number.isSafeInteger(-1 * (2 ** 53) + 1));  // true
console.log(Number.isSafeInteger(2 ** 53));             // false
console.log(Number.isSafeInteger((2 ** 53) - 1));       // true

7.String

3个继承的方法
valueOf() 、toLocaleString() 和toString() 都返回对象的原始字
符串值。

.length：
返回长度
即使字符串中包含双字节字符（而不是单字节的ASCII字符），也
仍然会按单字符来计数。

JavaScript字符串由16位码元（code unit）组成。对多数字符来说，
每16位码元对应一个字符。换句话说，字符串的length 属性表示
字符串包含多少16位码元

charAt() 方法返回给定索引位置的字符

let message = "abcde";
console.log(message.charAt(2)); // "c"

charCodeAt()查看指定码元的字符编码

fromCharCode() 方法用于根据给定的UTF-16码元创建字符串中的
字符。

// Unicode "Latin small letter A"的编码是U+0061
// Unicode "Latin small letter B"的编码是U+0062
// Unicode "Latin small letter C"的编码是U+0063
// Unicode "Latin small letter D"的编码是U+0064
// Unicode "Latin small letter E"的编码是U+0065
console.log(String.fromCharCode(0x61, 0x62, 0x63, 0x64, 0x65));  // "abcde"
// 0x0061 === 97
// 0x0062 === 98
// 0x0063 === 99
// 0x0064 === 100
// 0x0065 === 101
console.log(String.fromCharCode(97, 98, 99, 100, 101));          // "abcde"

Unicode增补字符平面
增加特殊字符，用32位表示一个字符

// "smiling face with smiling eyes" 表情符号的编码是U+1F60A
// 0x1F60A === 128522
let message = "ab☺de";
console.log(message.length);          // 6
console.log(message.charAt(1));       // b
console.log(message.charAt(2));       // <?>
console.log(message.charAt(3));       // <?>
console.log(message.charAt(4));       // d
console.log(message.charCodeAt(1));   // 98
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

codePointAt() 方法可以从指定码元
位置识别完整的码点。

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

也就是2的时候，返回的是正确的编码号

fromCharCode() 也有一个对应的fromCodePoint() 。这个
方法接收任意数量的码点，返回对应字符拼接起来的字符串：

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

normalize() 方法，针对不同的编码方法，进行规范处理。

Unicode提供了4种规范化形式，可以将类似上面
的字符规范化为一致的格式，无论底层字符的代码是什么。这4种
规范化形式是：NFD（Normalization Form D）、
NFC（Normalization Form C）、NFKD（Normalization Form KD）
和NFKC（Normalization Form KC）。

let a1 = String.fromCharCode(0x00C5),
    a2 = String.fromCharCode(0x212B),
    a3 = String.fromCharCode(0x0041, 0x030A);
// U+00C5是对0+212B进行NFC/NFKC规范化之后的结果
console.log(a1 === a1.normalize("NFD"));  // false

console.log(a1 === a1.normalize("NFC"));  // true
console.log(a1 === a1.normalize("NFKD")); // false
console.log(a1 === a1.normalize("NFKC")); // true
// U+212B是未规范化的
console.log(a2 === a2.normalize("NFD"));  // false
console.log(a2 === a2.normalize("NFC"));  // false
console.log(a2 === a2.normalize("NFKD")); // false
console.log(a2 === a2.normalize("NFKC")); // false
// U+0041/U+030A是对0+212B进行NFD/NFKD规范化之后的结果
console.log(a3 === a3.normalize("NFD"));  // true
console.log(a3 === a3.normalize("NFC"));  // false
console.log(a3 === a3.normalize("NFKD")); // true
console.log(a3 === a3.normalize("NFKC")); // false

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

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

concat()，拼接字符串，可以拼接多个，返回拼接后的字符串

一般用+号更方便

slice()
substr()
substring()

第一个参数都是开始位置

对slice() 和substring() 而言，第二个参数是提取结束的位置
（即该位置之前的字符会被提取出来）。对substr() 而言，第二
个参数表示返回的子字符串数量。

任何情况下，省略第二个参数都
意味着提取到字符串末尾。

let stringValue = "hello world";
console.log(stringValue.slice(3));       // "lo world"
console.log(stringValue.substring(3));   // "lo world"
console.log(stringValue.substr(3));      // "lo world"
console.log(stringValue.slice(3, 7));    // "lo w"
console.log(stringValue.substring(3,7)); // "lo w"
console.log(stringValue.substr(3, 7));   // "lo worl"

三个都不修改原字符串

slice() 方法将所有负值参数都当成字符串长度加上负参数
值。

而substr() 方法将第一个负参数值当成字符串长度加上该值，将
第二个负参数值转换为0。

substring() 方法会将所有负参数值都
转换为0。

let stringValue = "hello world";
console.log(stringValue.slice(-3));         // "rld"
console.log(stringValue.substring(-3));     // "hello world"
console.log(stringValue.substr(-3));        // "rld"
console.log(stringValue.slice(3, -4));      // "lo w"
console.log(stringValue.substring(3, -4));  // "hel"
console.log(stringValue.substr(3, -4));     // "" (empty string)

indexOf() 和
lastIndexOf()

返回从头开始第一次出现位置，和从末尾开始第一次出现位置，没有返回-1，位置是下标

这两个方法都可以接收可选的第二个参数，表示开始搜索的位置。

startsWith() 、endsWith() 和includes()

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() 方法接收可选的第二个参数，表示应该当作字符串末
尾的位置。如果不提供这个参数，那么默认就是字符串长度。如果
提供这个参数，那么就好像字符串只有那么多字符一样：

let message = "foobarbaz";
console.log(message.endsWith("bar"));     // false
console.log(message.endsWith("bar", 6));  // true

trim()，删除开头与结尾的空格，返回结果，不修改原来的字符串

trimLeft() 和trimRight() 方法分别用于从字符串开始和
末尾清理空格符

repeat()

ECMAScript在所有字符串上都提供了repeat() 方法。这个方法接

收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有
副本后的结果。

let stringValue = "na ";
console.log(stringValue.repeat(16) + "batman");
// na na na na na na na na na na na na na na na na batman

padStart() 和padEnd() 方法

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......"

可选的第二个参数并不限于一个字符。如果提供了多个字符的字符
串，则会将其拼接并截断以匹配指定长度。

let stringValue = "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"

此外，如果长度小于或
等于字符串长度，则会返回原始字符串。

toLowerCase()
、toLocaleLowerCase() 、toUpperCase() 和
toLocaleUpperCase() 。toLowerCase() 和toUpperCase()

转换大小写

match() 方法接收一个参数，可以是一个正则表达式字
符串，也可以是一个RegExp 对象，返回匹配的数组，和RegExp一样。

search()，找到返回索引，没找到返回-1

replace() ，两个参数，匹配方式，替换值

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"

第二个参数是字符串的情况下，有几个特殊的字符序列，可以用来
插入正则表达式操作的值。ECMA-262中规定了下表中的值

$$ $
$& 匹配整个模式的子字符串。与RegExp.lastMatch 相同

$’ 匹配的子字符串之前的字符串。与RegExp.rightContext 相同

$`匹配的子字符串之后的字符串。与RegExp.leftContext 相同

$n
匹配第 n 个捕获组的字符串，其中 n 是0~9。比如，$1 是匹配第一个捕
获组的字符串，$2 是匹配第二个捕获组的字符串，以此类推。如果没有捕
获组，则值为空字符串

$nn
匹配第 nn 个捕获组字符串，其中 nn 是01~99。比如，$01 是匹配第一个
捕获组的字符串，$02 是匹配第二个捕获组的字符串，以此类推。如果没
有捕获组，则值为空字符串

let text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
console.log(result);  // word (cat), word (bat), word (sat), word (fat)

replace() 的第二个参数可以是一个函数。在只有一个匹配项时，
这个函数会收到3个参数：与整个模式匹配的字符串、匹配项在字
符串中的开始位置，以及整个字符串。

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() ，分割字符串为数组

let colorText = "red,blue,green,yellow";
let colors1 = colorText.split(",");       // ["red", "blue", "green", "yellow"]
let colors2 = colorText.split(",", 2);    // ["red", "blue"]
let colors3 = colorText.split(/[^,]+/);   // ["", ",", ",", ",", ""]

localeCompare()

let stringValue = "yellow";
console.log(stringValue.localeCompare("brick"));  // 1
console.log(stringValue.localeCompare("yellow")); // 0
console.log(stringValue.localeCompare("zoo"));    // -1

8.单例内置对象

Global和Math

Window是Global的代理

encodeURI() 和encodeURIComponent()
decodeURI() 和decodeURIComponent()

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));

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

decodeURI() 只对
使用encodeURI() 编码过的字符解码。例如，%20 会被替换为空
格，但%23 不会被替换为井号（# ），因为井号不是
由encodeURI() 替换的。

类似地，decodeURIComponent() 解码
所有被encodeURIComponent() 编码的字符，基本上就是解码所
有特殊值。

eval() 方法，传入一个字符串，运行到这里时，被当成代码运行，在这里创建的变量和方法不会被提升。

在使用eval() 的时候必须极为慎重，特别是在解释用户
输入的内容时。因为这个方法会对XSS利用暴露出很大的攻击
面。恶意用户可能插入会导致你网站或应用崩溃的代码。

Math：

min(),max(),

Math.ceil() 方法始终向上舍入为最接近的整数。

Math.floor() 方法始终向下舍入为最接近的整数。

Math.round() 方法执行四舍五入。

Math.fround() 方法返回数值最接近的单精度（32位）浮点

random() ,返回0到1之间的随机数，包含0但
不包含1

window.crypto.getRandomValues() 方法更随机

var array = new Uint32Array(10);
window.crypto.getRandomValues(array);

console.log("Your lucky numbers:");
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

这一章内容很多，但是比较基础，关于正则表达式后期可能要单独学一学