前端自学之路 Javascript 行话浅析（三）—— ES6 语法新特性

青旅半醒 2022-11-26 09:55 173阅读 0赞

### 文章目录 ###

*   *  \`的字符串
     *  模板字符串
     *  简化的对象写法
     *  箭头函数
     *  语法形式对比：
     *  rest参数
     *  扩展运算符
     *  promise、
     *  promise 封装ajax
     *  promise解决回调地狱
     *  class的变化
     *  静态属性
     *  ES8 async函数
     *

## \`的字符串 ##

let str =`<ul>
    			<li>abc</li>
    			</ul>
    			`;

支持多行的特性可以吊打单双引号等字符串表示形式

## 模板字符串 ##

感觉类似python的format：）

let str1 = '';
    let str2 = '';
    let result = `${str1}与${}都是模板的插槽 类似vue或者小程序的slot`

## 简化的对象写法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70]  
而原来的写法是：  
![在这里插入图片描述][20200811105109949.png]

## 箭头函数 ##

## 语法形式对比： ##

let fn = function(a,b) {
    	return console.log(a+b);
    }

let fn = (a,b) => {
    	return console.log(a,b);
    }

但是仅仅是个语法糖 那就太小看ECMA了：）  
有几点功能上的不同：

*  this指向
    
     *  function这种传统方式 this指向是看被调用的时候context的情况 调用决定this **动态的**
     *  => 这种新方式 this只与函数声明的context有关！！！！ 声明决定this **静态的**
 *  不能作为对象的构造器
 *  不能使用arguments参数 因为根本不是同一种实现形式

更多简写：

let pow = (n) =>{
    	return n*n;
    }

针对这个代码 只有一个形参 只有一句代码 我们可以这么写

*  省略小括号
 *  省略return
 *  省略大括号

let pow = n => n*n;

*  适用范围
 *  箭头函数适合包裹在内层的 与this无关的应用 如定时器 数组方法等回调
 *  普通函数适合于this相关的 事件回调 对象方法等 下图在不同的地方 用上了恰当了方法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 1]

## rest参数 ##

说白了 对于不定长的形参 可以通过rest参数（实质是类数组）来接收多的参数  
假设至少有两个参数 就可以这么写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 2]

## 扩展运算符 ##

前面的rest是形参上用的 可以代指多个参数的用法  
如果用在实参会怎样呢？答案是相同的——可以将数组转换为一个个的形参：）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 3]  
其实 如果实参和形参都用上这种运算符就很有意思啦：）

--------------------

值得注意的是 这个还有个应用 伪数组可以通过这种copy形式 获得真数组 如下  
![\#\#][20200811203322652.png]

## promise、 ##

原理 用类似error catch的方法 我们从本地文件读取数据（其实从服务器API读是同样的道理）会是这种情况：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 4]  
然后 如果利用promise就会是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 5]

对于单个异步任务 其实直接写 第一种方式最好了 但是对于负载的情况 promise对象可以很好地避免回调地狱的问题

## promise 封装ajax ##

原来XMLHttpRequest请求的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 6]  
Promise封装：

## promise解决回调地狱 ##

之前如果我们想依次获取数据 比如三个API 比如三个文件 我们会这么做：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 7]  
但是这样做会产生太多的问题 文件读取还好说 API的话 中间任意一个服务器请求有问题 都会造成整体的错误 这时Promise发挥作用了 如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 8]

## class的变化 ##

传统的方法 原型等一系列操作：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center]  
ES6 通过一种语法糖一样的东西 实现了下列简单的方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 1]

## 静态属性 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 2]  
这个属性事实上属于那个构造函数 或者说属于那个类 但和实例instance无关

## ES8 async函数 ##

特点：拥有async函数特性的函数

*  返回非promise对象的东西 都会被当成 成功执行的promise信息 比如：  
    ![\-][-]  
    这里我们想返回字符串 却变成了 返回promise对象 且对象的value信息是我们要返回的字符串  
    说白了 只要你能返回非promise对象 因为这async函数执行成功（resolve） 所以就被当成 **成功**执行async函数时要传递的信息value了：）
 *  throw error  
    这个时候就是当成执行失败处理 而error信息也被当成reject的错误信息reason
 *  promise  
    返回promise对象时 直接利用resolve（成功）reject（失败）两个函数来决定  
    比如resolve  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 3]  
    或者reject  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 4]

--------------------

决定完成功与失败的因素 下一步就可以做成功的回调与失败的回调  
如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 5]  
结合上面的例子 比如我们返回promise 里面是resolve 那么最终then执行value那个成功的回调函数

##  ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70]: /images/20221124/21915edd898646989f9007ee4700e93e.png
[20200811105109949.png]: /images/20221124/0802ba86313e4aaf9d6207558c23b03f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 1]: /images/20221124/74a4415c91d34e8682c25d4067448454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 2]: /images/20221124/b9c442e6d19341049c92861a68e46429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 3]: /images/20221124/d35e7552202d450194b91b58d48246a0.png
[20200811203322652.png]: /images/20221124/65d507f8de6f414d84cd29defe172ad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 4]: /images/20221124/210a3d29514641f2b1ac60f3ec8d4fe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 5]: /images/20221124/afba0fd2bc0249939e10f598133796b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 6]: /images/20221124/66310b4b0b5d4cf1b57d2b3f32b11114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 7]: /images/20221124/e50210e1bab24153812fa8ceb26e7036.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70 8]: /images/20221124/411e261001474618946a3f60de36311a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/ec37a3d8e9ab479e9fd001dbc43e5814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/93abaa9564e946118431035bcc309490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/d51a764084e34b01959d3111d3f91975.png
[-]: /images/20221124/8cdce0c2d4d04f59ab1b05486aca2885.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/c105fefd1a784b73abc82278e5e1a938.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/acc5de43ee02478e8cd093219db1b3d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3ODgyOA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/0afc3bd7f24e486ba50d851eff1e853b.png