ES6

84 阅读4分钟

ES6 新特性

let 声明变量

image.png

const 声明常量(只读变量)

image.png

解构表达式

数组解构

image.png

对象解构

image.png

字符串扩展

新的 API

ES6 为字符串扩展了几个新的 API:

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

image.png

字符串模板

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行 字符串,还可以在字符串中加入变量和表达式。

image.png

image.png

image.png

函数优化

函数参数默认值

image.png

不定参数

image.png

箭头函数

image.png

image.png

对象优化

ES6 给 Object 拓展了许多新的方法,如:

  • keys(obj):获取对象的所有 key 形成的数组
  • values(obj):获取对象的所有 value 形成的数组
  • entries(obj):获取对象的所有 key 和 value 形成的二维数组。格式:[[k1,v1],[k2,v2],...]
  • assign(dest, ...src) :将多个 src 对象的值 拷贝到 dest 中。(第一层为深拷贝,第二层为浅 拷贝)

image.png

image.png

对象的函数属性简写

image.png

对象拓展运算符

拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

image.png

map 和 reduce

map

map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。

image.png

reduce

语法:

arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元 素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调 用 reduce 的数组。

callback (执行数组中每个值的函数,包含四个参数)

1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))

2、currentValue (数组中当前被处理的元素)

3、index (当前元素在数组中的索引)

4、array (调用 reduce 的数组)

initialValue (作为第一次调用 callback 的第一个参数。)

image.png

image.png

Promise

在 JavaScript 的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致 JavaScript 的所 有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。

一旦有一连串的 ajax 请求 a,b,c,d... 后面的请求依赖前面的请求结果,就需要层层嵌套。这种缩进和层层嵌套的方式,非常容易造成上下文代码混乱,我们不得不非常小心翼翼处理内层函数与外层函数的数据,一旦内层函数使用了上层函数的变量,这种混乱程度就会加剧......总之,这 种层叠上下文的层层嵌套方式,着实增加了神经的紧张程度。

image.png

Promise处理异步结果

如果我们想要等待异步执行完成,做一些事情,我们可以通过promise 的 then 方法来实现。 如果想要处理 promise 异步执行失败的事件,还可以跟上 catch:

image.png

Promise改造以前嵌套方式

image.png image.png

Promise优化处理

image.png image.png

模块化

什么是模块化

模块化就是把代码进行拆分,方便重复利用。类似 java 中的导包:要使用一个包,必须先 导包。而 JS 中没有包的概念,换来的是 模块。

模块功能主要由两个命令构成:exportimport

  • 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 +"岁了")