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")
  • 终端执行
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值