行话浅析(三)—— ES6 语法新特性"/>
前端自学之路 Javascript 行话浅析(三)—— ES6 语法新特性
文章目录
- `的字符串
- 模板字符串
- 简化的对象写法
- 箭头函数
- 语法形式对比:
- 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`
简化的对象写法
而原来的写法是:
箭头函数
语法形式对比:
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那个成功的回调函数
更多推荐
前端自学之路 Javascript 行话浅析(三)—— ES6 语法新特性
发布评论