2. ECMAScript 6 简介

一、ECMAScript

1、ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。

2、ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

3、什么是 ECMA-262

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个

4、ECMA-262 历史

ECMA-262（ECMAScript）历史版本查看网址

http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

5、ECMAScript 和 JavaScript 的关系

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

二、测试

打开终端，切换到脚本所在目录，执行以下命令

node 文件名

三、基本语法

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解。

1、let声明变量

在front目录下创建02es6pro文件夹，创建 01-let.js

// 声明变量

// 1、let let定义的变量不可以重复声明、var可以
// let a = 1
// a = 1
// let a = true
// console.log(a)

// 2、let具备块级作用域，var没有块级作用域
// var flag = true // 行程是否结束
// if (flag) {
//   // 块级作用域：代码仅在当前块有效
//   let star = 5
// }
// console.log(star)

// 3、var和let都具备函数级作用域
// function test1(){
//   // 函数级作用域：代码仅在当前块有效
//   var f1 = '函数级作用域'
//   console.log(f1)
// }
// console.log(f1)

// 4、let不存在变量提升，var存在变量提升
// console.log(username)
// // 使用var的话，不管定义在第几行，实际上都是定义在第一行
// // 只会输出undefined
// // 使用let则会因为位置不对，直接报错
// let username;

2、const声明常量

创建 02-const.js

// 声明常量
// const PI = 3.1415926
// console.log(PI)

// 1、声明的同时要有初始值
// const A // 报错

// 2、一旦赋予了初始值，就不能改变
// PI = 0.68 // 报错

// 3、规范：大写字母和下划线
// const A_B_C = 1
// console.log(A_B_C)

// 4、当常量的地址不变时，可以修改常量的内容
// const TEAM = ['康师傅', '雷神', '阳哥', '大海']
// TEAM.push('环环')
// console.log(TEAM)
// TEAM = 100 // 报错

3、解构赋值

创建 03-解构赋值.js

// 1、数组的解构
// const的变量名，如果会变则用小写，否则用大写
// const F4 = ['小沈阳', '宋小宝', '刘能', '赵四']
// console.log(F4)

// 此方式较为麻烦
// // let shengyang= F4[0]
// // let xiaobao = F4[1]
// 推荐使用这种方式
// let [shengyang, xiaobao, liuneng, zhaosi] = F4

// console.log(shengyang)
// console.log(xiaobao)
// console.log(liuneng)
// console.log(zhaosi)

// 2、对象解构
const zbs = {
  username: '赵本山',
  age: '不详',
  yanxiaopin: function () {
    console.log('演小品')
  },
}
// 此方式较为麻烦
// let username1 = zbs.username
// let age1 = zbs.age
// let yanxiaopin1 = zbs.yanxiaopin

// console.log(username1)
// console.log(age1)
// yanxiaopin1()

// 推荐使用这种方式，必须赋予给同名的变量，
// 自定义个数，需要用几个就写几个
let { username, age, yanxiaopin } = zbs

console.log(username)
console.log(age)
yanxiaopin()

4、模板字符串

创建 04-模板字符串.js

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

// 1、声明一个字符串
// let str1 = '字符串' // 单引号和双引号都可以声明一个普通的字符串
// let str2 = `也是字符串` // 反引号也可声明
// console.log(str1)
// console.log(str2)

// 2、原样输出
// 此处使用的是反引号
// 如果使用单引号写起来很麻烦
let htmlStr = `<ul>
<li>沈腾</li>
<li>马丽</li>
</ul>`
console.log(htmlStr)


// 3、变量拼接（插值表达式）
let star = '张小斐'
// let out = '我喜欢'+ star + '这个演员' // 常规方式
let out = `我喜欢${star}这个演员`  // 反引号的方式

console.log(out)

5、声明对象简写

创建 05-声明对象简写.js

// 传统
// let username1 = 'Tom'
// let age1 = 2
// let sing1 = function () {
//   console.log('I love Jerry')
// }

// let person = {
//   username: username1,
//   age: age1,
//   sing: sing1
// }

// console.log(person.username)
// console.log(person.age)
// person.sing()

// 当前面的变量和后面的属性名完全一致时
// 可以将变量和属性合并为一个关键字
let username = 'Tom'
let age = 2
let sing = function () {
  console.log('I love Jerry')
}

let person = {
  username,
  age,
  sing
}

console.log(person.username)
console.log(person.age)
person.sing()

6、定义方法简写

创建 06-定义方法简写.js

// let person = {
//   sayHi:function(){
//     console.log('Hi')
//   },
//   sing:function(){
//     console.log('Sing a song')
//   }
// }

// 简写
let person = {
  sayHi(){
    console.log('Hi')
  },
  sing(){
    console.log('Sing a song')
  }
}

person.sayHi()
person.sing()

7、参数的默认值

注意：函数在JavaScript中也是一种数据类型，JavaScript中没有方法的重载

创建

// 第一种情况
// function add(a) {
//   console.log('a是' + a)
//   return 100 + a
// }

// function add() {
//   return 100
// }

// let result = add(100)
// // javascript没有重载的概念，只有定义的先后顺序，
// // 所以后定义的会替代前面定义的，结果是100
// console.log(result)

// 第二种情况
function add(a, b = 0) {
  console.log('a是' + a)
  console.log('b是' + b)
  return 100 + a + b
}
// 答案是200，但是如果上面不给b提前赋值的话，结果就报错了
let result = add(100)
console.log(result)

8、对象拓展运算符

创建 08-对象扩展运算符.js

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

let person = { username: '路飞', age: 19 }
// 引用传递，两个对象指向一个地址，改一个，两个都会被改
// let someone = person
// 复制一个全新的对象出来
let someone = { ...person }
console.log(person)
console.log(someone)

someone.username = '乔巴'

console.log(person)
console.log(someone)

9、箭头函数

创建 09-箭头函数.js

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体``箭头函数多用于匿名函数的定义

// 直接定义一个函数
// function fn(a) {
//   return a + 100
// }

// 定义一个变量来接收一个函数
// let fn = function fn(a) {
//   return a + 100
// }

// 箭头函数写法
// let fn = (a) => {
//   return a + 100
// }

// 箭头函数简写，只有一个参数的话，()可以省去
let fn = (a) => a + 100

let result = fn(1)
console.log(result)

10、Promise

Promise 是ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

创建 10-Promise基本语法.js

// Promise是异步编程的解决方案：
// 包括文件的读取、ajax等待

// 引入node.js中的本地文件扩展模块，
// 以后不会再更改，所以定义成常量
const fs = require('fs')

// 传统写法
// 代码量多了之后，可读性较差
// fs.readFile('./他1.txt',(err,data) => {
//   // err：文件读取失败时，可以获取到err的值
//   if(err){
//     console.log('文件读取失败')
//     return
//   }

//   // data：文件读取成功时，可以获取到data的值
//   console.log(data.toString())
// })

// 实例化Promise
// Promise对象有3个状态：初始化、成功、失败
// resolve：函数类型的参数，可以将promise的状态设置为成功
// reject：函数类型的参数，可以将promise的状态设置为失败
const p = new Promise((resolve, reject) => {
  fs.readFile('./他.txt', (err, data) => {
    if (err) {
      reject(err) // 将Promise的状态改为失败
    }
    resolve(data) // 将Promise的状态改为成功
  })
})

// 当Promise的状态为成功时，then被调用
// 当Promise的状态为失败时，catch被调用
// 这是简写，也可以分开
p.then((response) => {
  console.log(response.toString())
}).catch((error) => {
  console.log('出错了')
  console.log(error)
})

总结：借助于Promise，可以使异步操作中的成功和失败的处理函数独立出来。