ES6--ES12筆記整理（1）

久宇詩發表於2021-11-18

筆記

一、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

Linux探索之路1—CentOS入坑筆記整理
2018-04-10
LinuxCentOS筆記
ActiveMQ筆記整理
2020-12-08
MQ筆記
隨記筆記未整理
2024-05-25
筆記
筆記資源整理
2024-04-26
筆記
SpringBoot整理筆記06
2020-10-30
Spring Boot筆記
SpringBoot整理筆記08
2020-10-30
Spring Boot筆記
Flutter筆記整理[待拆分]
2024-09-05
Flutter筆記
AutoreleasePool、Block、Runloop整理筆記
2018-12-13
BloCOOP筆記
演算法筆記整理
2018-08-14
演算法筆記
安全雜亂筆記整理1---常用服務埠總結
2020-09-15
筆記
筆記1
2018-12-09
筆記
過往業務筆記整理
2024-06-26
筆記
Android Gradle 學習筆記整理
2019-09-18
AndroidGradle筆記
Redis學習整理筆記02
2020-12-15
Redis筆記
JavaScript工作指令碼筆記整理
2019-01-17
JavaScript指令碼筆記
LDA臨時筆記，待整理
2018-07-31
LDA筆記
學習筆記——物件方法整理
2018-04-02
筆記物件
前端面試整理筆記一
2018-03-26
前端面試筆記
分享Flutter 教程筆記收集整理
2024-07-19
Flutter筆記
jquery 工作筆記，不斷整理中..
2021-09-09
jQuery筆記
整理一些筆記上傳
2020-12-26
筆記
【pandas學習筆記】綜合整理
2018-07-13
筆記
架構師的Netty 筆記整理
2018-05-03
架構Netty筆記
Redis推薦閱讀筆記整理
2018-09-04
Redis筆記
jvm筆記1
2020-10-29
JVM筆記
Java筆記1
2020-10-31
Java筆記
Day 1 筆記
2019-03-22
筆記
stm32筆記[15]-藍橋物聯網筆記整理
2024-05-29
筆記
JUC整理筆記一之細說Unsafe
2020-05-23
筆記
網站SEO課程筆記整理版！
2020-08-21
網站筆記
NodeJS 筆記 | NPM 常用命令整理
2021-12-07
NodeJS筆記NPM
MySql學習筆記--詳細整理--下
2020-11-27
MySql筆記
計算機網路整理筆記01
2020-12-28
計算機網路筆記
webpack4.x相關筆記整理
2018-12-13
Web筆記
React學習筆記知識點整理
2018-06-29
React筆記
閱讀筆記1
2024-10-28
筆記
學習筆記1
2020-10-18
筆記
陣列筆記1
2020-10-12
陣列筆記