ES6--ES12笔记整理（1）

一、let const

五个共同特点

1. 不允许重复声明
2. 块级作用域
3. 不存在变量提升
4. 不影响作用域链
5. 暂时性死区---在代码块内，使用let/const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

const 特殊性

1. 声明必须赋初始值；
2. 标识符一般为大写（习惯）；
3. 值不允许修改；

• 指向的那个内存地址所保存的数据不得改动。
• 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
• 对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

二、解构赋值

允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1. 数组的解构赋值
2. 对象的解构赋值
3. 字符串的解构赋值
4. 数值和布尔值的解构赋值
5. 函数参数的解构赋值

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