每日笔记（掌握的技术做总结，未掌握的详细）

重温es6

1、let和const

• 不存在变量提升
• 块级作用域
• 同作用域，不能重复声明
• 暂时性死区 TDZ

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

const声明一个只读的常量。一旦声明，常量的值就不能改变。如果是一个对象，需要使用Object.freeze方法

顶层对象，浏览器环境指的是window对象，在 Node 指的是global对象

2、变量的解构赋值

这种属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

解构赋值允许指定默认值。

用途：

• 交换变量的值 [x, y] = [y, x];
• 从函数返回多个值
• 函数参数的定义
• 提取 JSON 数据
• 函数参数的默认值
• 遍历 Map 结构

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}

• 输入模块的指定方法
  加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
  const { SourceMapConsumer, SourceNode } = require("source-map");

3、字符串的扩展

模板字符串中嵌入变量，需要将变量名写在${}之中。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
//模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

字符串实用方法

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
• repeat()：方法返回一个新字符串，表示将原字符串重复n次。
• padStart()：引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全
• padEnd()：用于尾部补全

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
另一个用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

• trimStart()：消除字符串头部的空格
• trimEnd()：消除尾部的空格
• trim()：消除头尾的空格
• matchAll()：方法返回一个正则表达式在当前字符串的所有匹配
• replace()：只将第一个替换。
• replaceAll() ：一次性替换所有匹配
• at()：方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"

4、数值

ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。

0b111110111 === 503 // true
0o767 === 503 // true

Number('0b111')  // 7
Number('0o10')  // 8

ES2021，允许 JavaScript 的数值使用下划线（_）作为分隔符。

let budget = 1_000_000_000_000;
budget === 10 ** 12 // true

123_00 === 12_300 // true

12345_00 === 123_4500 // true
12345_00 === 1_234_500 // true

Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。
Number.isNaN()用来检查一个值是否为NaN.
Number.isInteger()用来判断一个数值是否为整数。
Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

Math.trunc方法用于去除一个数的小数部分，返回整数部分。
Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
Math.cbrt()方法用于计算一个数的立方根。
Math.imul方法返回两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。
Math.clz32()方法将参数转为 32 位无符号整数的形式，然后返回这个 32 位值里面有多少个前导 0。
Math.fround方法返回一个数的32位单精度浮点数形式。
Math.hypot方法返回所有参数的平方和的平方根。

5、函数的扩展

• 参数默认值
• 参数默认值可以与解构赋值的默认值，结合起来使用。
• 函数的 length 属性
  指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。
• 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
• 使用“箭头”（=>）定义函数。
  （1）箭头函数没有自己的this对象（详见下文）
  （2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误
  （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
  （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

6、数组的扩展

• 扩展运算符（spread）是三个点（...）
  它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
  由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

• Array.from方法用于将两类对象转为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

• Array.of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1