持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一、ES6

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

1.1 ECMAScript 和 JavaScript 的关系：

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

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

1.2 基本语法

==JS的变量是存储数据值的容器==

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

let声明变量作用范围

<script>
// var 声明的变量没有局部作用域  
// js定义变量： var a =30;
// es6写法定义变量： 使用关键字 let；let b = 30;
// let 声明的变量	有局部作用域
//创建代码块
{
    var a=20
    let b=30
}
//在代码块外边输出变量
   console.log(a);
   console.log(b);
</script>

1.2.1 let定义变量特点

var 可以声明多次 let 只能声明一次

==ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。==

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

<script>
    // var 可以声明多次
	// let 只能声明一次
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;
    console.log(m);
    console.log(n);
</script>

1.2.2 const声明常量（只读变量）

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

通过 const 定义的变量与 let 变量类似，但不能重新赋值

<script>
    //const 声明之后不允许改变
    const PI = "3.1415926"
    //常量值一旦被定义不能被改变
    PI = 3
    //定义常量必须被初始化
    //const AA
</script>

1.2.3 解构赋值

创建解构赋值.html

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

<script>
//数组解构    
    // 传统
    let a=1 ,b = 2, c= 3
    console.log(a,b,c)
 
    // ES6
    let [x,y,z]=[1,2,3]
    console.log(x,y,z)
 
</script>

//定义一个对象，name和age是属性
let user = {name:'yy',age:23}

//传统赋值方法
let name1 = user.name
let age1 = user.age
console.log(name1,age1)

//ES6赋值方法
let {name,age} = user   //注意：结构的变量必须在user中有的属性 
console.log(name,age)

1.2.4 模板字符串

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

以下操作，都是使用**反引号**完成

let str1 = `hello,
es6 demo up`
console.log(str1)

字符串插入变量和表达式：

// 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name2 = "yy"
let age2 = 25
let str2 = `hello,${name2},今年${age2}岁,明年${age2 + 1}岁`
console.log(str2)

字符串中调用函数

function f() {
return "hello es6"
}
let str3 = `反引号的调用函数测试${f()}`
console.log(str3)

1.2.5 声明对象简写

const age4 = 18
const name4 = 'yy'

//传统
const person1 = { age: age4, name: name4 }
console.log(person1)

//es6
const person2 = { age, name }
console.log(person2)

1.2.6 定义方法简写

//传统定义
        //通过 var 关键词声明的变量没有块作用域。
        var person3 = {
            sayHi:function(){
                console.log("hi")
            }
        }
        
        //ES6定义方法
        //常量,一旦定义不能修改
        const person4 = {
            sayHi(){
                console.log("hi,ES6")
            }
        }

        //let和var很类似，不同点是let提供了块作用域
        let person5 = {
            sayHi(){
                console.log("hi,let")
            }
        }
        person3.sayHi()
        person4.sayHi()
        person5.sayHi()

1.2.7 对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person6 = {name:"qq",age:20}
let person7 = {...person6}
console.log(person7)

合并对象：

let yourName = {name:"aa"}
let yourAge = {age:60}
let person8 = {...yourName,...yourAge}
console.log(person8)

1.2.8 箭头函数

//传统方式
var f1 = function (a) {
return a
}
console.log(f1(2))

//ES6方式,很像java中的lambda一样
var f2 = a => a
console.log(f2(3))

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

1.3 总结

5-es6介绍

ES6快速入门