ES6--ES12笔记整理(1)
一、let const
五个共同特点
- 不允许重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
- 暂时性死区---在代码块内,使用let/const命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”
const 特殊性
- 声明必须赋初始值;
- 标识符一般为大写(习惯);
- 值不允许修改;
- 指向的那个内存地址所保存的数据不得改动。
- 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
- 对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
二、解构赋值
允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
- 数组的解构赋值
- 对象的解构赋值
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 函数参数的解构赋值
1、数组的解构赋值
数组的元素是按次序排列的,变量的取值由它的位置决定
let [a, b, c] = [1, 2, 3];
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
默认值
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
2、对象的解构赋值
对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
let { first: f, last: l } = { first: 'hello', last: 'world' }
f // 'hello'
l // 'world
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
默认值
var {x, y = 5} = {x: 1};
x // 1
y // 5
注意
(1)如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});
3、字符串的解构赋值
- 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
- 类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
let {length : len} = 'hello';
len // 5
4、数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
5、函数参数的解构赋值
三、字符串扩展
序号 | 写法 | 解释 |
---|---|---|
1 | Unicode 表示法 | 允许采用\uxxxx形式表示一个字符 |
2 | for of 遍历 | 类似于for in ,可以便利原型链上的内容 |
3 | 字符串 |
模板字符串:可换行,${}传参 |
4 | String.fromCodePoint()、ES5 fromCardCode | 从 Unicode 码点返回对应字符 |
5 | String.raw() | 返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串 |
6 | 实例方法:codePointAt()、ES5 cardCodeAt() | 字符转code码 |
7 | 实例方法:at(index) | 查看指定位置的字符 |
8 | 实例方法:includes(), startsWith(), endsWith() | 匹配是否存在 |
9 | 实例方法:repeat() | 将原字符串重复n次 |
10 | 实例方法:padStart(),padEnd() | 补全 |
11 | 实例方法:trimStart(),trimEnd() | 消除空格 |
12 | 实例方法:replaceAll() | 替换所有匹配的内容 |
1、Unicode 表示法
- 允许采用\uxxxx形式表示一个字符
- 限于码点在\u0000~\uFFFF之间的字符
"\u{20BB7}" // "??"
- JavaScript 共有 6 种方法可以表示一个字符
'\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true '\u{7A}' === 'z' // true
2、for of 遍历
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
可以识别大于0xFFFF的码点
let text = String.fromCodePoint(0x20BB7);
for (let i = 0; i < text.length; i++) {
console.log(text[i]);
}
// " "
// " "
for (let i of text) {
console.log(i);
}
// "??"
3、模板字符串
let msg = `Hello, ${place}`;
4、String.fromCodePoint()
从 Unicode 码点返回对应字符
String.fromCodePoint(0x20BB7)
ES5 提供String.fromCharCode()方法
不能识别码点大于0xFFFF的字符。
String.fromCharCode(0x20BB7)
5、String.raw()
用来充当模板字符串的处理函数
返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法
let message1 = `Multiline\nstring`,
console.log(message1); // "Multiline
message2 = String.raw`Multiline\nstring`;
console.log(message2); // "Multiline\\nstring
如果原字符串的斜杠已经转义,那么String.raw()不会做任何处理
String.raw`Hi\\n`
// "Hi\\n"
实现方式
String.raw = function (strings, ...values) {
let output = "";
let index;
for (index = 0; index < values.length; index++) {
output += strings.raw[index] + values[index];
}
output += strings.raw[index]
return output;
}
String.raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组
console.log(String.raw({ raw: 'test' }, 0, 1, 2))// 't0e1s2t'
// 等同于
console.log(String.raw({ raw: ['t', 'e', 's', 't'] }, 0, 1, 2))
6、includes(), startsWith(), endsWith()
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
let arr = [1, 2, 3, ]
arr.includes(1) //true
注意:
- 只针对字符串,数值类型不好用
- 支持第二个参数,表示开始搜索的位置
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
7、repeat()
将原字符串重复n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
注意:
- 参数如果是小数,会被取整。
'na'.repeat(2.9) // "nana"
- 0 到-1 之间的小数,则等同于 0
- 参数是负数或者Infinity,会报错
- repeat的参数是字符串,则会先转换成数字
'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"
8、ES7--padStart(),padEnd()
字符串补全长度的功能
字符串不够指定长度,会在头部或尾部补全
padStart():用于头部补全
padEnd():用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
参数1:字符串补全生效的最大长度,
参数2:是用来补全的字符串
注意
- 等于或大于最大长度,则字符串补全不生效,返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
- 补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串
'abc'.padStart(10, '0123456789')// '0123456abc'
- 省略第二个参数,默认使用空格补全长度
'x'.padStart(4) // ' x'
9、ES9--trimStart(),trimEnd()
与trim()一致消除空格,
trimStart()消除字符串头部的空格,
trimEnd()消除尾部的空格
10、replaceAll()
替换所有匹配的字符
'aabbcc'.replace('b', '_')
// 'aa_bcc'
'aabbcc'.replace(/b/g, '_')
// 'aa__cc'
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'
11、at()
参数指定位置的字符
支持负索引(即倒数的位置)
const str = 'hello';
str.at[1] // "e"
str.at[-1] // "o"
四、数值扩展
序号 | 写法 | 解释 |
---|---|---|
1 | 0b(或0B)和0o(或0O) | 二进制和八进制表示法 |
2 | 1_000_000_000_000 | 数值分隔符 |
3 | Number.isFinite(), Number.isNaN() | 无穷,非数值类型 |
4 | Number.parseInt(), Number.parseFloat() | 整数,小数 |
5 | Number.isInteger() | 判断一个数值是否为整数。 |
6 | Math | 对象的扩展 |
7 | BigInt | 更长的数据类型 |
1、二进制和八进制表示法
二进制:前缀0b(或0B)
八进制:前缀0o(或0O)
0b111110111 === 503 // true
0o767 === 503 // true
Number('0b111') // 7
Number('0o10') // 8
2、 Number.isFinite(), Number.isNaN()
Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity
参数类型不是数值,Number.isFinite一律返回false
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
Number.isNaN()用来检查一个值是否为NaN
isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false
3、 Number.isInteger()
判断一个数值是否为整数。
Number.isInteger(25) // true
Number.isInteger(25.1) // false
Number.isInteger(25.0) // true
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false
4、Math 对象的扩展
写法 | 功能 |
---|---|
Math.trunc() | 去除一个数的小数部分,返回整数部分 |
Math.sign() | 判断一个数到底是正数+1、负数-1、还是零0 |
Math.cbrt() | 计算一个数的立方根 |
Math.hypot(,) | 返回所有参数的平方和的平方根 |
Math.sinh(x) | 返回x的双曲正弦(hyperbolic sine) |
Math.cosh(x) | 返回x的双曲余弦(hyperbolic cosine) |
Math.tanh(x) | 返回x的双曲正切(hyperbolic tangent) |
Math.asinh(x) | 返回x的反双曲正弦(inverse hyperbolic sine) |
Math.acosh(x) | 返回x的反双曲余弦(inverse hyperbolic cosine) |
Math.atanh(x) | 返回x的反双曲正切(inverse hyperbolic tangent) |
5、 BigInt 数据类型
ES2020 引入了一种新的数据类型 BigInt(大整数),来解决这个问题,这是 ECMAScript 的第八种数据类型。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。
1234 // 普通整数
1234n // BigInt
// BigInt 的运算
1n + 2n // 3n
typeof 123n // 'bigint'
BigInt(123) // 123n
BigInt('123') // 123n
BigInt(false) // 0n
BigInt(true) // 1n