文章目录
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")
- 终端执行