ES6 新特性
let 声明变量
const 声明常量(只读变量)
解构表达式
数组解构
对象解构
字符串扩展
新的 API
ES6 为字符串扩展了几个新的 API:
includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
字符串模板
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行 字符串,还可以在字符串中加入变量和表达式。
函数优化
函数参数默认值
不定参数
箭头函数
对象优化
ES6 给 Object 拓展了许多新的方法,如:
- keys(obj):获取对象的所有 key 形成的数组
- values(obj):获取对象的所有 value 形成的数组
- entries(obj):获取对象的所有 key 和 value 形成的二维数组。格式:
[[k1,v1],[k2,v2],...] - assign(dest, ...src) :将多个 src 对象的值 拷贝到 dest 中。(第一层为深拷贝,第二层为浅 拷贝)
对象的函数属性简写
对象拓展运算符
拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
map 和 reduce
map
map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce
语法:
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元 素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调 用 reduce 的数组。
callback (执行数组中每个值的函数,包含四个参数)
1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)
initialValue (作为第一次调用 callback 的第一个参数。)
Promise
在 JavaScript 的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致 JavaScript 的所 有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。
一旦有一连串的 ajax 请求 a,b,c,d... 后面的请求依赖前面的请求结果,就需要层层嵌套。这种缩进和层层嵌套的方式,非常容易造成上下文代码混乱,我们不得不非常小心翼翼处理内层函数与外层函数的数据,一旦内层函数使用了上层函数的变量,这种混乱程度就会加剧......总之,这 种层叠上下文的层层嵌套方式,着实增加了神经的紧张程度。
Promise处理异步结果
如果我们想要等待异步执行完成,做一些事情,我们可以通过promise 的 then 方法来实现。 如果想要处理 promise 异步执行失败的事件,还可以跟上 catch:
Promise改造以前嵌套方式
Promise优化处理
模块化
什么是模块化
模块化就是把代码进行拆分,方便重复利用。类似 java 中的导包:要使用一个包,必须先 导包。而 JS 中没有包的概念,换来的是 模块。
模块功能主要由两个命令构成:export和import。
export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
export使用
比如我定义一个 js 文件:hello.js,里面有一个对象。我可以使用 export 将这个对象导出:
const util = {
sum(a,b){ return a + b; }
}
export {util};
export不仅可以导出对象,一切 JS 变量都可以导出。比如:基本类型变量、函数、数组、 对象。 当要导出多个值时,还可以简写。比如我有一个文件:user.js:
var name = "jack"
var age = 21
export {name,age}
import使用
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这 个模块。
import util from 'hello.js'
// 调用 util 中的属性
util.sum(1,2)
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")