ES6常用语法

ES6常用语法

1 let,const关键字

1.1 let作用

let与var相似，用于声明一个变量

1.2 特点

• 在块作用域内有效
• 不能重复声明
• 不会预处理，不存在变量提升

1.3 应用

• 循环遍历加监听
• 使用let取代var是趋势

1.4 const作用

定义一个常量

1.5 特点

• 不能修改
• 其他特点同let

1.6 应用

保存不用改变的数据

2 变量的解构赋值

2.1 理解

从对象或数组中提取数据，并赋值给变量（多个）

2.2 对象的解构赋值

let {n, a} = {n: 'tom', a: 12}

2.3 数组的解构赋值

let [a, b] = [1, 'atguigu']

2.4 用途

给多个形参赋值

3 模板字符串

模板字符串：简化字符串的拼接

• 模板字符串必须用``包含
• 变化的部分使用${xxx}定义

str = `我的名字叫：${obj.username}`;

4 对象的简写方式

• 省略同名的属性值
• 省略方法的function
• 例如

let x = 1;
let y = 2;
let point = {
    x,
    y,
    setX (x) {this.x = x}
};

5 箭头函数

作用：定义匿名函数

基本语法：

• 没有参数：() => console.log('xxx')小括号不能省略
• 一个参数：i => i+2可以把小括号省略
• 大于一个参数：(i,j) => i+j小括号不能省略
• 函数体只有一条语句，函数体可以不用大括号：默认返回结果
• 函数体如果有多个语句，需要用{}包围，若有需要返回的内容，需要手动返回

使用场景：多用来定义回调函数

箭头函数的特点：

1. 简洁
2. 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3. 扩展理解：箭头函数的this看外层的是否有函数。如果有，外层函数的this就是内部箭头函数的this，如果没有，则this就是window

6 三点运算符

6.1 rest(可变)参数

用来取代arguments但比arguments灵活，只能放在参数表最后

function fun(...values) {
    console.log(arguments);
    arguments.forEach(function(item,index) {
		console.log(item,index);
    });//会出错，不能遍历伪数组
    console.log(values);
    values.forEach(function (item,index) {
        console.log(item,index);
    })
}
fun(1,2,3);

6.2 扩展运算符

let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);

7 形参默认值

形参的默认值——当不传参时默认使用形参里的默认值

function Point(x = 1,y = 2) {
    this.x = x;
    this.y = y;
}

8 promise对象

8.1 理解

• promise对象代表了未来某个将要发生的事件（通常是一个异步操作）
• 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数
• ES6的Promise是一个构造函数，用来生成promise实例

8.2 使用promise的基本步骤

• 创建promise对象

  let promise = new Promise((resolve, reject) => {
      //初始化promise状态为pending
      //执行异步操作
      if(异步操作成功) {
  	resolve(value);//修改promsie的状态为fullfilled，成功状态
  }   else {
      reject(errMsg);//修改promise的状态为rejected，失败状态
  }
  })
  

• 调用promise的then()

  promise.then(function(
       result => console.log(result),
       errorMsg => alert(errorMsg)
  ))
  

8.3 promise对象的3个状态

• pending 初始化状态
• fullfilled 成功状态
• rejected 失败状态

8.4 应用

• 使用promise实现超时处理

• 使用promise封装处理ajax请求

  let request = new XMLHttpRequest();
  request.onreadystatechange = function() {
  }
  request.responseType = 'json';
  request.open("GET",url);
  request.send();
  

9 symbol属性

ES5中对象的属性名都是字符串，容易造成重名，污染环境。

9.1 概念

ES6中的添加了一种原始数据类型symbol（已有的数据类型：String，Number，boolean，null，undefined，对象）

9.2 特点

• Symbol属性对应的值是唯一的，解决命名冲突问题
• Symbol值不能与其他数据进行计算，包括同字符串拼串
• for in，for of遍历时不会遍历symbol属性

9.3 使用

1.调用symbol函数得到symbol值

let symbol = Symbol();
let obj = {};
obj[symbol] = "hello";

2.传参标识

let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);//Symbol(one)
console.log(symbol2);//Symbol(two)

3.内置symbol值

除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。

——Symbol.iterator

对象的Symbol.iterator属性，指向该对象的默认遍历器方法

10 Iterator遍历器

10.1 概念

iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制

10.2 作用

• 为各种数据结构，提供一个统一的、简便的访问接口
• 使得数据结构的成员能够按某种次序排列
• ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费

10.3 工作原理

1. 创建一个指针对象（遍历器对象），指向数据结构的起始位置
2. 第一次调用next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
4. 每调用next方法返回的是一个包含value和done的对象{value:当前成员的值，done:布尔值}
   • value表示当前成员的值，done对应的布尔值表示当前的数据结构是否遍历结束
   • 当遍历结束的时候返回的value值就是undefined,done值为true

扩展理解

1. 当数据结构上部署了Symbol.iterator接口，该数据就是可以用for of遍历
2. 当使用for…of去遍历目标数据的时候，该数据会自动去找Symbol.iterator属性（Symbol.iterator属性指向对象的默认遍历器方法）
   1. Array
   2. arguments
   3. set容器
   4. map容器
   5. String
   6. 。。。

11 Generator函数

11.1 概念

• ES6提供的解决异步编程的方案之一
• Generator函数是一个状态机，内部封装了不同状态的数据
• 用来生成遍历器对象
• 可暂停函数（惰性求值），yield可暂停，next方法可启动，每次返回的是yield后的表达式结果

11.2 特点

• function与函数名之间有一个星号

• 内部用yield表达式来定义不同的状态

  例如：

  function* generatorExample() {
  	let result = yield 'hello';//状态值为hello
      yield 'generator';//状态值为generator
  }
  

• generator函数返回的是指针对象（按10章里的iterator），而不会执行函数内部逻辑

• 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value:yield后的表达式结果/undefined，done:false/true}

• 再次调用next方法会从上一次停止时的yield处开始，直到最后

• yield语句返回结果通常为undefiend，当调用next方法时传参内容会作为启动时yield语句的返回值

12 async函数

12.1 介绍

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作

本质：Generator的语法糖

语法：

async function foo() {
    await 异步操作;
    await 异步操作;
}

12.2 特点

• 不需要像Generator去调用next方法，遇到await等待，当前的异步完成就往下执行
• 返回的是Promise对象，可以用then方法进行下一步操作
• async取代Generator函数的星号，await取代Generator的yield
• 语义上更为明确，使用简单

13 class类

• 通过class定义类/实现类的继承
• 在类中通过constructor定义构造方法
• 通过new来创建类的实例
• 通过extends来实现类的继承
• 通过super调用父类的构造方法
• 重写从父类中继承的一般方法