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

`的字符串

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

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

模板字符串

感觉类似python的format：）

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

简化的对象写法

而原来的写法是：

箭头函数

语法形式对比：

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相关的 事件回调 对象方法等 下图在不同的地方 用上了恰当了方法
  

rest参数

说白了 对于不定长的形参 可以通过rest参数（实质是类数组）来接收多的参数
假设至少有两个参数 就可以这么写

扩展运算符

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

其实 如果实参和形参都用上这种运算符就很有意思啦：）

---

值得注意的是 这个还有个应用 伪数组可以通过这种copy形式 获得真数组 如下

promise、

原理 用类似error catch的方法 我们从本地文件读取数据（其实从服务器API读是同样的道理）会是这种情况：

然后 如果利用promise就会是这样的：

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

promise 封装ajax

原来XMLHttpRequest请求的代码

Promise封装：

promise解决回调地狱

之前如果我们想依次获取数据 比如三个API 比如三个文件 我们会这么做：

但是这样做会产生太多的问题 文件读取还好说 API的话 中间任意一个服务器请求有问题 都会造成整体的错误 这时Promise发挥作用了 如下图：

class的变化

传统的方法 原型等一系列操作：

ES6 通过一种语法糖一样的东西 实现了下列简单的方法：

静态属性

这个属性事实上属于那个构造函数 或者说属于那个类 但和实例instance无关

ES8 async函数

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

• 返回非promise对象的东西 都会被当成 成功执行的promise信息 比如：
  
  这里我们想返回字符串 却变成了 返回promise对象 且对象的value信息是我们要返回的字符串
  说白了 只要你能返回非promise对象 因为这async函数执行成功（resolve） 所以就被当成 成功执行async函数时要传递的信息value了：）

• throw error
  这个时候就是当成执行失败处理 而error信息也被当成reject的错误信息reason

• promise
  返回promise对象时 直接利用resolve（成功）reject（失败）两个函数来决定
  比如resolve
  
  或者reject
  

---

决定完成功与失败的因素 下一步就可以做成功的回调与失败的回调
如下

结合上面的例子 比如我们返回promise 里面是resolve 那么最终then执行value那个成功的回调函数