ES6常用的新语法学习笔记

深碍√TFBOYSˉ_ 2022-05-13 17:37 166阅读 0赞

# **简介** #

ES6是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

# **1.let和const** #

## **let** ##

let和var 差不多,都是用来声明变量,但是let的声明只能在\{\}内,以下代码输入都是10

**var** a = ***\[\]***; 
**for** ***(*****var** i = 0; i < 10; i++***) \{*** 
***    ***a***\[***i***\]*** = **function** ***() \{*** ***//将a\[i\]赋予一个方法,输出i*** 
***        console***.log***(***i***)***; 
    ***\}***; 
***\}***a***\[***2***\]()***; *// 10*

但是如果把var i=0换成let i=0;的话当调用a\[数字i的范围\]的时候输出的就是你填入的数字,把let声明理解为局部对象,像下面这段代码:

for (let i = 0; i < 3; i++) \{

let i = 'abc';

console.log(i);\}

只会输出三次abd,这个输出的i是最近的i,而不是循环条件中的i

另外,如果使用var未定义的对象会输出undefined,而使用let的话则会报错

**暂时性死区**

**var** ***tmp*** = 123;  
**if** ***(*****true*****) \{***   
***    tmp*** = **'abc'**; *// ReferenceError*  
*    ***let** ***tmp***;  
***\}***

上方代码会tmp is not defined的错误,存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

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

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

**let****不允许在相同作用域内****\{\}****，重复声明同一个变量。**

// 报错function func() \{

let a = 10;

var a = 1;\}

// 报错function func() \{

let a = 10;

let a = 1;\}

**允许在块级作用域内声明函数。**

**函数声明类似于****var****，即会提升到全局作用域或函数作用域的头部。**

**同时，函数声明还会提升到所在的块级作用域的头部。**

**像以下代码执行只会输出** **I am inside**

**function** *f****() \{***   
***    console***.log***(*****'I am outside!'*****)***;  
***\}***  
***(*****function** ***() \{***   
***    *****function** *f****() \{***   
***        console***.log***(*****'I am inside!'*****)***;  
    ***\}***  
***    *****if** ***(*****false*****) \{***   
***    \}***  
***    ****f****()***;  
***\}())***;

## **const命令** ##

**const****声明一个只读的常量。一旦声明，常量的值就不能改变。****const****一旦声明变量，就必须立即初始化，不能留到以后赋值。对于****const****来说，只声明不赋值，就会报错。**

**const****声明的常量，也与****let****一样不可重复声明。**

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

const foo = \{\};

// 为 foo 添加一个属性，可以成功foo.prop = 123;

foo.prop // 123

// 将 foo 指向另一个对象，就会报错foo = \{\}; // TypeError: "foo" is read-only

## **ES6 声明变量的六种方法** ##

**ES5 只有两种声明变量的方法：****var****命令和****function****命令。ES6 除了添加****let****和****const****命令，后面章节还会提到，另外两种声明变量的方法：****import****命令和****class****命令。**

**var****命令和****function****命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，****let****命令、****const****命令、****class****命令声明的全局变量，不属于顶层对象的属性。**

# **2.变量的解构赋值** #

## **数组的解构赋值** ##

**es6允许写成这样:****let \[a, b, c\] = \[1, 2, 3\];**

**上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。**

**let \[x, y, z\] = new Set(\['a', 'b', 'c'\]);**

**x // "a"**

**这是一个set集合,****事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。**

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let \[x = 1\] = \[undefined\];

x // 1let \[x = 1\] = \[null\];

x // null

**上面代码中，如果一个数组成员是****null****，默认值就不会生效，因为****null****不严格等于****undefined****。**

## **对象的解构赋值** ##

let \{ foo, bar \} = \{ foo: "aaa", bar: "bbb" \};

foo // "aaa"bar // "bbb"

**对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。**

**如果变量名与属性名不一致，必须写成下面这样。**

let \{ foo: baz \} = \{ foo: 'aaa', bar: 'bbb' \};

baz // "aaa"

let obj = \{ first: 'hello', last: 'world' \};let \{ first: f, last: l \} = obj;

f // 'hello'

l // 'world'

let \{ foo: baz \} = \{ foo: "aaa", bar: "bbb" \};

baz // "aaa"foo // error: foo is not defined

**上面代码中，****foo****是匹配的模式，****baz****才是变量。真正被赋值的是变量****baz****，而不是模式****foo****。**

**对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于****undefined****。**

var \{x = 3\} = \{x: undefined\};

x // 3

var \{x = 3\} = \{x: null\};

x // null

**上面代码中，属性****x****等于****null****，因为****null****与****undefined****不严格相等，所以是个有效的赋值，导致默认值****3****不会生效。**

**如果解构失败，变量的值等于****undefined****。**

let \{foo\} = \{bar: 'baz'\};

foo // undefined

## **字符串的解构赋值** ##

**字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。**

const \[a, b, c, d, e\] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

**类似数组的对象都有一个****length****属性，因此还可以对这个属性解构赋值。**

let \{length : len\} = 'hello';

len // 5

## **数值和布尔值的解构赋值 ** ##

**解构赋值时，如果等号右边是数值和布尔值，则会先转为对象**。

let \{toString: s\} = 123;

s === Number.prototype.toString // true

let \{toString: s\} = true;

s === Boolean.prototype.toString // true

**上面代码中，数值和布尔值的包装对象都有****toString****属性，因此变量****s****都能取到值。**

**解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于****undefined****和****null****无法转为对象，所以对它们进行解构赋值，都会报错。**

let \{ prop: x \} = undefined; // TypeError

let \{ prop: y \} = null; // TypeError

## **函数参数的解构赋值** ##

**函数的参数也可以使用解构赋值。**

function add(\[x, y\])\{

return x + y;\}

add(\[1, 2\]); // 3

**上面代码中，函数****add****的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量****x****和****y****。对于函数内部的代码来说，它们能感受到的参数就是****x****和****y****。**

**下面是另一个例子。**

\[\[1, 2\], \[3, 4\]\].map((\[a, b\]) => a + b);

// \[ 3, 7 \]

**可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。**

## **用途** ##

**（1）交换变量的值**

let x = 1;let y = 2;

\[x, y\] = \[y, x\];

**（2）从函数返回多个值**

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() \{

return \[1, 2, 3\];

\}let \[a, b, c\] = example();

// 返回一个对象

function example() \{

return \{

foo: 1,

bar: 2

\};\}

let \{ foo, bar \} = example();

**任何部署了 Iterator 接口的对象，都可以用****for...of****循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。**

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) \{

// ...\}

# **3.字符串的扩展** #

**使得字符串可以被****for...of****循环遍历。****把这个字符串当做集合遍历输出**

for (let codePoint of 'foo') \{

console.log(codePoint)

## **String 的新方法:** ##

**includes()****：返回布尔值，表示是否找到了参数字符串。**

**startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。**

**endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。**

**这三个方法都支持第二个参数，表示开始搜索的位置。**

**repeat****方法返回一个新字符串，表示将原字符串重复****n****次。**

padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'    'xxx'.padEnd(2, 'ab') // 'xxx'

matchAll方法返回一个正则表达式在当前字符串的所有匹配

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串:

String.raw\`Hi\\n$\{2+3\}!\`;

// 返回 "Hi\\\\n5!"

String.raw\`Hi\\u000A!\`;

// 返回 "Hi\\\\u000A!"

## **模板字符串 ** ##

$('\#result').append(

'There are ' + basket.count + ' ' +

'items in your basket, ' +

'' + basket.onSale +

' are on sale!');

**上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。**

$('\#result').append(\`

There are $\{basket.count\} items

in your basket, $\{basket.onSale\}

are on sale!

\`);

**模板字符串（template string）是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。****大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。模板字符串之中还能调用函数****:**

function fn() \{

return "Hello World";\}

\`foo $\{fn()\} bar\`

**let** ***template*** = **\`** 
***<*****ul*****>*** 
**  <% for(let i=0; i < data.supplies.length; i++) \{ %>** 
**    *****<*****li*****>*****<%= data.supplies\[i\] %>*****</*****li*****>*** 
**  <% \} %>** 
***</*****ul*****>*** 
**\`**;

上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。

# **4.数值的扩展** #

## **Math.trunc()** ##

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

Math.trunc(4.1) // 4

Math.trunc(4.9) // 4

Math.trunc(-4.1) // -4

Math.trunc(-4.9) // -4

Math.trunc(-0.1234) // -0

对于非数值，Math.trunc内部使用Number方法将其先转为数值。

Math.trunc('123.456') // 123

Math.trunc(true) //1

Math.trunc(false) // 0

Math.trunc(null) // 0

对于空值和无法截取整数的值，返回NaN。

Math.trunc(NaN);      // NaN

Math.trunc('foo');    // NaN

Math.trunc();         // NaN

Math.trunc(undefined) // NaN

## **Math.sign()** ##

Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。

它会返回五种值。

*  参数为正数，返回+1；
 *  参数为负数，返回-1；
 *  参数为 0，返回0；
 *  参数为-0，返回-0;
 *  其他值，返回NaN。

## **Math.cbrt()** ##

Math.cbrt方法用于计算一个数的立方根。

Math.cbrt(-1) // -1Math.cbrt(0)  // 0Math.cbrt(1)  // 1Math.cbrt(2)  // 1.2599210498948734

对于非数值，Math.cbrt方法内部也是先使用Number方法将其转为数值。

Math.cbrt('8') // 2Math.cbrt('hello') // NaN

## **Math.clz32()** ##

JavaScript 的整数使用 32 位二进制形式表示，Math.clz32方法返回一个数的 32 位无符号整数形式有多少个前导 0。

Math.clz32(0) // 32Math.clz32(1) // 31Math.clz32(1000) // 22Math.clz32(0b01000000000000000000000000000000) // 1Math.clz32(0b00100000000000000000000000000000) // 2

## **Math.imul()** ##

Math.imul方法返回两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。

Math.imul(2, 4)   // 8Math.imul(-1, 8)  // -8Math.imul(-2, -2) // 4

## **Math.fround()** ##

Math.fround方法返回一个数的32位单精度浮点数形式。

对于32位单精度格式来说，数值精度是24个二进制位（1 位隐藏位与 23 位有效位），所以对于 -224 至 224 之间的整数（不含两个端点），返回结果与参数本身一致。

## **Math.hypot()** ##

Math.hypot方法返回所有参数的平方和的平方根。

## **指数运算符** ##

ES2016 新增了一个指数运算符（\*\*）。

2 \*\* 2 // 4

2 \*\* 3 // 8

这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。

// 相当于 2 \*\* (3 \*\* 2)

2 \*\* 3 \*\* 2

// 512

上面代码中，首先计算的是第二个指数运算符，而不是第一个。

指数运算符可以与等号结合，形成一个新的赋值运算符（\*\*=）。

let a = 1.5;

a \*\*= 2;

// 等同于 a = a \* a;

let b = 4;

b \*\*= 3;

// 等同于 b = b \* b \* b;

在js中的<<和>>位运算符也能使用

# **5.函数的扩展** #

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') \{

console.log(x, y);\}

log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。和java中的类似

function add(...values) \{

let sum = 0;

for (var val of values) \{

sum += val;

return sum;\}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

函数的name属性返回函数的名字.

## **箭头函数** ##

var f = v => v;

// 等同于

var f = function (v) \{

return v;

\};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;

// 等同于var f = function () \{ return 5 \};

var sum = (num1, num2) => num1 + num2;

// 等同于var sum = function(num1, num2) \{

return num1 + num2;\};

**如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。**

var f = () => 5;

// 等同于

var f = function () \{ return 5 \};

var sum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) \{

return num1 + num2;

\};

**如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用****return****语句返回。**

var sum = (num1, num2) => \{ return num1 + num2; \}

**由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错**

// 报错let getTempItem = id => \{ id: id, name: "Temp" \};

// 不报错let getTempItem = id => (\{ id: id, name: "Temp" \});

**如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。**

let fn = () => void doesNotReturn();

**箭头函数可以与变量解构结合使用。**

const full = (\{ first, last \}) => first + ' ' + last;

// 等同于function full(person) \{

return person.first + ' ' + person.last;\}

## **箭头函数有几个使用注意点。** ##

**（1）函数体内的****this****对象，就是定义时所在的对象，而不是使用时所在的对象。**

**（2）不可以当作构造函数，也就是说，不可以使用****new****命令，否则会抛出一个错误。**

**（3）不可以使用****arguments****对象，该对象在函数体内不存在。如果要用，可以用 rest** **(...var)****参数代替。**

**（4）不可以使用****yield****命令，因此箭头函数不能用作 Generator 函数。**

**上面四点中，第一点尤其值得注意。****this****对象的指向是可变的，但是在箭头函数中，它是固定的。**

function foo() \{

setTimeout(() => \{

console.log('id:', this.id);

\}, 100);\}

var id = 21;

foo.call(\{ id: 42 \});

// id: 42

**上面代码中，****setTimeout****的参数是一个箭头函数，这个箭头函数的定义生效是在****foo****函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时****this****应该指向全局对象****window****，这时应该输出****21****。但是，箭头函数导致****this****总是指向函数定义生效时所在的对象（本例是****\{id: 42\}****），所以输出的是****42****。**

**箭头函数可以让****setTimeout****里面的****this****，绑定定义时所在的作用域，而不是指向运行时所在的作用域。**

function Timer() \{

this.s1 = 0;

this.s2 = 0;

// 箭头函数

setInterval(() => this.s1++, 1000);

// 普通函数

setInterval(function () \{

this.s2++;

\}, 1000);\}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);

setTimeout(() => console.log('s2: ', timer.s2), 3100);

// s1: 3// s2: 0

**上面代码中，****Timer****函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的****this****绑定定义时所在的作用域（即****Timer****函数），后者的****this****指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，****timer.s1****被更新了 3 次，而****timer.s2****一次都没更新。**

## **什么是尾调用？** ##

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。但是必须是一个函数最后的一个操作是return 另一个函数才叫尾调用.

比如:**函数****m****和****n****都属于尾调用，因为它们都是函数****f****的最后一步操作。**

function f(x) \{

if (x > 0) \{

return m(x)

return n(x);\}

## **尾调用优化** ##

function f() \{

let m = 1;

let n = 2;

return g(m + n);\}

f();

// 等同于function f() \{

return g(3);\}

f();

// 等同于g(3);

**如果函数****g****不是尾调用，函数****f****就需要保存内部变量****m****和****n****的值、****g****的调用位置等信息。但由于调用****g****之后，函数****f****就结束了，所以执行到最后一步，完全可以删除****f(x)****的调用帧，只保留****g(3)****的调用帧。**

**这就叫做“尾调用优化”**

# **6.数组的扩展** #

## **扩展运算符 ** ##

**扩展运算符（spread）是三个点（****...****）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。**

该运算符主要用于函数调用。

function push(array, ...items) \{

array.push(...items);\}

function add(x, y) \{

return x + y;\}

const numbers = \[4, 38\];add(...numbers) // 42

**上面代码中，****array.push(...items)****和****add(...numbers)****这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。**

# **7.class, extends, super** #

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

![70][]

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。  extends和super和java中的类似,就不说了

# **8.template string** #

大家可以先看下面一段代码：

$("\#result").append(

"There are " + basket.count + " " +

"items in your basket, " +

"" + basket.onSale +

" are on sale!"

);

我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串\`\`后，我们可以直接这么来写：

$("\#result").**append**(\`

There are $\{basket.**count**\} items

**in** your basket, $\{basket.onSale\}

are **on** sale!

\`);

用反引号（\\）来标识起始，用$\{\}\`来引用变量，而且所有的空格和缩进都会被保留在输出之中

# **9.import export** #

假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

//index.js

import animal from './content'

//content.js

export default 'A cat'

## **ES6 module的其他高级用法** ##

//content.js

**export** **default** 'A cat'

**export** **function** **say**()\{

**return** 'Hello!'

**export** **const** type = 'dog'

上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js

**import** \{ say, **type** \} **from** './content'

**let** says = say()

console.log(\`The $\{type\} says $\{says\}\`)  //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

![70 1][]

![70 2][]

[70]: /images/20220504/a5c0a114375140809287e7fcccbff8b1.png
[70 1]: /images/20220504/4930502d045a4237a45fa57a8cdb9afa.png
[70 2]: /images/20220504/f36e3894d7114aea8b5acd14633f3e61.png