一、ECMAScript 6 简介

ECMAScript 6.0（以下简称 ES6）是下一代JavaScript 语言，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系是，ECMAScript是一种规格， JavaScript是ECMAScript 的一种实现。

二、基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

1.声明变量和常量

var和let定义变量的区别：

（1）var 声明的变量没有局部作用域，let 声明的变量有局部作用域

（2）var 声明的变量可以再次声明，let 声明的变量不能再被声明

<script>
{
var a1=1,a1=1;//可以
let a2=2,a2=2;//不行
}
//代码块之外读取不到a2
</script>

声明常量：

<script>
  const PI="3.14";
</script>

2.解构赋值

数组解构：

<script>
let a = 1, b = 2, c = 3  //传统
let [x, y, z] = [1, 2, 3] // ES6
</script>

对象解构：

<script>
let user = {name: 'Helen', age: 18} //定义对象
let name1 = user.name,age1 = user.age //传统
let { name, age } =  user //ES6
</script>

3.模板字符串

模板字符串是加强版的字符串，用反引号 `,可以用来定义多行字符串，可以在字符串中加入变量和表达式或调用函数

多行字符串：

<script>
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)// 输出：Hey,
//                     can you stop angry now?
</script>

插入变量和表达式表达式：

<script>
//变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info) //输出： My Name is Mike,I am 28 years old next year.
</script>

调用函数：

<script>
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // 输出：Game start,have fun!
</script>

4.声明对象简写和定义方法简写

声明对象简写

<script>
const age = 12, name = "Amy"
const person1 = {age: age, name: name}// 传统
const person2 = {age, name}// ES6
</script>

声明方法简写

<script>
const person1 = {// 传统
    sayHi:function(){
        console.log("Hi")
    }
}
const person2 = {// ES6
    sayHi(){
        console.log("Hi")
    }
}
</script>

5.对象拓展运算符

拷贝对象：

<script>
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //输出：{name: "Amy", age: 15}
</script>

合并对象：

<script>
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //输出：{age: 15, name: "Amy"}
</script>

6.箭头函数

<script>
// 传统
var f1 = function(a){
    return a
}
console.log(f1(1))

// ES6
var f2 = a => a
console.log(f2(1))
</script>

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8

// 前面代码相当于：
var f4 = (a,b) => a+b

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/116144.html