每日笔记（掌握的技术做总结，未掌握的详细）
重温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
网友评论