ES6（ECMAScript）中几个实用特性详解

超、凢脫俗 2022-01-10 12:23 255阅读 0赞

## ES6 ECMAScript ##

**Generator 函数：**  
![Generator 函数][Generator]

关键字 **let** 、**const 和 var**  
const 定义常量的关键字（如果变量的值不发生变化,也可以用于定义变量）  
const PI = 3.14; 常量定义  
注意 ： 常量一旦被定义，值就不会发生变化（值不可以被改变）

**块级作用域 ：let**  
let 定义变量的关键字  
let使用时需要注意几点：（和var的区别）  
a 、let定义的变量不能重复声明 但是可以重复修改变量的值  
b、let在函数体内部不能实现变量的提升  
c、let在某个\{\}内部使用时，外部不能访问该let声明的变量  
d、let 声明的变量没有变量提升  
e、let声明的变量，在声明之前该变量是不可用的，这种现象叫做 “暂时性死区”。  
f、let 只能作用在某个 \{ \} 内部 let是块级作用域  
let 应用 ：获取元素的下标 选项卡  
//实例  
![let在js运用中的注意事项][let_js]  
//let应用  
![let在循环中更方便的获取当前下标][let]  
**this关键字 以及this指向改变**  
this 表示当前对象  
在事件中this表示事件的**触发者** 在方法中表示方法的**调用者**（不确定方法的调用者时，一般指向**window对象**）  
![面向对象代码详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
改变this指向 ：  
bind() 改变匿名函数的this指向  
call() 或 apply() 方法改变非匿名函数的this指向 对函数进行调用并改变this指向  
区别 ：call的第二个参数个数不固定 apply的第二个参数是一个数组  
![代码详解改变this指向的问题][this]

解构赋值  
解析结构进行赋值  
解构赋值包括 ：字符串的解构赋值、对象解构赋值、数组解构赋值、函数参数解构赋值

字符串的解构赋值：

[a,b,c] = "dhj3";
       console.log( a,b,c )   // d h j

解构赋值作用：  
1、可以一次性定义多个变量  
2、可以实现两个变量的交换  
3、可以让一个函数返回多个值  
4、可以作用在函数的参数上  
![结构赋值的运用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]

//应用  
![结构赋值的实际运用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]  
for…of es6新增的遍历 forEach不是es6新增的  
遍历数组，可以是for of

var arr = [1,2,3,4,5];
    for( var i of arr ){
        console.log(  i  )
    }

for…in 与 for of区别  
for in可以遍历对象，for of不能遍历对象  
for of可以用来遍历map集合，for in不能遍历map集合  
for in遍历数组得到的是数组的下标，for of遍历数组得到的是数组的元素  
for in遍历键 for of遍历值  
**字符串模板 ``**  
字符串模板中既可以识别变量 又 可以识别函数  
使用 $\{ 变量或函数调用 \}  
注意 ：使用了字符串模板后 就不需要说使用 + 做拼接

//实例  
![字符串拼接操作][20190620091517312.png]

箭头函数  
定义 ： () => \{ 函数体 \} 不支持bind方法绑定this指向

var fn = (形参) => {  函数体  }
    
    var obj = { show: ()=>{  console.log(this)  } } obj.show();  // 思考输出啥呢？？

普通函数中的this 指向事件的触发者或方法的调用者  
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象 （箭头函数中的this来自于它的父级）

练习 ： 下面的this都指向哪里？

document.onclick = () => {  alert(this)   }   //window
    document.onclick = function(){    box()   };  //widnow
    var box = function(){  alert(this)   }；
    var box = function(){alert(this)}     //document
    document.onclick = box;
    
    document.onclick = () => {
        setTimeout(    function(){  alert(this)   }.bind(this)   )    //window
    }

Array.from  
Array.from 将一个具有length长度属性的伪数组（类数组 、集合） 转成数组  
用法 ：  
Array.from( 对象 );

Array.from( arguments / set / 通过标签名获取的集合等 ); 不能转map集合

扩展 ：  
Array.of()  
Array.of 方法用于将一组值，转换为数组。

var arr = Array.of(  34,2,5,6,7,8 );

扩展 ：  
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。  
可枚举属性 : js中的可枚举属性 就是 json对象（键值对）

const object1 = {
          a: 1,
          b: 2,
          c: 3
        };
        
    const object2 = Object.assign({c: 4, d: 5}, object1);
    
    console.log(object2);

set 集合 和 map集合  
set集合 定义 ：

var set = new Set();

set特点 ： 自动去重 数据不会进行类型转换

数组去重 ：

var arr = [12,12,34,12,34,23,23,12,12];
     Array.from(  new Set( arr ) )  //数组去重

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例  
史上最短的数组去重方案 ： \[… new Set( arr )\]

set集合操作方法 ：  
add() 向集合中添加一个数  
delete() 删除集合中的一个数  
has() 判断集合中是否含有某个数  
clear() 清空集合  
使用 forEach或forof遍历set集合  
![函数对各数组进行操作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]

map集合定义 ：  
var map = new Map()  
map的操作方法 ：  
set() 为map集合赋值  
get() 根据键 获取值  
delete() 删除数据  
has() 判断是否含有某个键  
clear() 清空  
![map集合的运用][map]  
扩展 Symbol类型  
定义 ： var 变量 = Symbol();  
作用 ： 可以将一个Symbol类型的变量作为对象的属性，对对象的属性起到保护作用 使用for in 遍历这个对象时，取不到Symbol类型的属性  
![Symbol类型][Symbol]

构造函数 class --类 instanceof 判断创建的对象属于哪一个构造函数

class   构造函数名{
    
    }

[Generator]: /images/20220110/d2ff35cf5e044ba9997f5cdad13b1b08.png
[let_js]: /images/20220110/493e277fbec242bf83cd2c9f1818349b.png
[let]: /images/20220110/7afee681dbe84b1aa47567b35f3d9870.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220110/79208a6bf68a404dacb7a3a0eedfed3c.png
[this]: /images/20220110/17ab2329afe0477aa15eb1c20388f983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220110/be34505d580f4c2aa77c8e71a4300e43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20220110/fabf965e136648edb4f2637335cb6153.png
[20190620091517312.png]: /images/20220110/4bb9b0a0d66f4a469cf4389a53e78b11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]: /images/20220110/a76ed2ba4aaf4904aeada3844786c9e2.png
[map]: /images/20220110/0a361cc3eeeb459fb002a233a99d63e0.png
[Symbol]: /images/20220110/56e12631367f49e991036bf364620c52.png