ES6极速入门

ES6概述

了解一下ECMAScript

• 看到Script，就该知道它和JavaScript是分不开的，ECMAScript就是JavaScript的语法规范，它规定我们用var来声明一个变量，用function关键字来声明一个函数等等这些规则
• 非常官方的说：ECMAScript是一种由Ecma（前身为欧洲计算机制造商协会，英文名称是European Computer ManufacturersAssociation)通过ECMA-262标准化的脚本程序设计语言，所有的浏览器开发商都要按照它制定的标准来开发浏览器，厉不厉害
• ECMAScript 定义 了语言语法（语法解析规则、关键字、语句、声明、运算符等）、类型（布尔型、数字、字符串、对象等）、原型和继承、内置对象和函数的标准库（JSON、数字、数组方法、对象内省的方法等）
• ECMAScript标准 不定义 HTML或Css的相关功能，也不定义类似DOM（文档对象类型）的Web Api，这些都是在独立的标准中进行定义的。
• ECMAScript涵盖了各种环境中js的使用场景，无论是浏览器环境还是类似Node.js的非浏览器环境
• ECMAScript标准的历史版本分别是1、2、3、5。但其实也曾计划发布提出巨量新特性的第四版，但最终因为想法过于激进而惨遭废除，而发布了一个相对谦和的ES5版本
• 2015年6月，ES6正式发布，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ES6的学习教程

推荐学习阮一峰ES6教程，还是很详细的

Es6新增语法

let & const

• let：块级作用域，意思是所声明的变量只有在作用域范围内时变量才有效
  
  运行结果，var变量正常执行，let进行报错
  

• const：声明一个只读变量，一旦被声明，常量的值就不能再被改变

模板字符串

• 什么意思呢，其实就是在字符串里可以引用其他变量
  
  运行之后的结果
  

对象简写

原来的写法

执行后

对象简写后

运行结果

解构表达式

数组解构表达式

运行之后结果

对象解构表达式

运行之后结果

函数优化

正常的写法

箭头函数

函数简写

Promise

Promise概述

• Promise是异步编程的一种解决方案，简单的来说就是一个容器，里面保存着某个未来才会结束的事件
• 从语法上来说，Promise是一个对象，从它可以获取异步操作的消息，Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
• Promise对象有以下两个特点：
  （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），只有异步操作的结果才能决定当前是哪一种状态，任何其他操作都无法改变这个状态
  （2）一旦状态改变，就不会再变。Promise对象状态的改变只有两种可能：从pending变为fulfilled，从pending变为rejected
• Promise也有一些缺点
  （1）无法取消Promise，一旦新建它就会立即执行，无法中途取消。
  （2）如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
  （3）当处于pending状态时，无法得知目前进展到哪一个阶段

用法

• 当我使用ajax发送一个请求数据的请求时，我们是这样做的
  
  data.json中的数据如下：
  在浏览器进行请求后，浏览器控制台获取到的数据如下：
  
• 但当我们想要在回调函数之外获取请求后的数据时
  
  浏览器控制台结果
  
• 我们要想让其能够获取到数据，就需要将ajax请求变成同步的
  

可以看到两次都获取到了数据

但是呢，我们好好的异步请求，为什么要用同步的方式，所以有了Promise

在浏览器的控制台显示如下：

export & import

概述

• export 和 import和java中的导包非常相似
• ES6在语言标准层面上，实现了模块功能，ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入
• export和import命令不能在浏览器中直接使用，但可以通过babel转换为ES5进行运行，比require更加优雅

用法

• 创建一个工程项目，使用WebStrom打开
  
• 在项目的根目录下创建配置文件.babelrc，文件内容如下：

{
  "presets": [
    "es2015"
  ]
}

• 安装babel

# 以下命令分别执行
npm init
npm install babel-preset-es2015  --save-dev

正确执行后是如下结果：

• 安装babel客户端用来启动工程

npm install babel-cli -g

• 编写export.js
  写法1：每个都单独导出

export let name="zz";
export let age=20;
export let gender="男";
export let say=function (str) {
    console.log(str);
}

写法2：先声明后一起导出 推荐使用

 let name="zz";
 let age=20;
 let gender="男";
 let say=function (str) {
     console.log(str);
 }
 export {name,age,gender,say}

写法3：以对象作为一个整体导出

export default {
    name:"zz",
    age:20,
    gender:"男",
    say(str){
        console.log(str)
    }
}

• 进行import

//写法1：写法2的导入方式
//当我们只需要引入一个文件中的一部分时
import {name} from "./export"

console.log(name)

//写法3导入
import user from "./export"

console.log(user.name)
console.log(user.age)
user.say("hello world")

• 终端执行