ES6的基本语法

一、ECMAScript 6 简介

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

1、ECMAScript 和 JavaScript 的关系

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

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

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

 

二、基本语法

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

本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

 

1、let声明变量

{

    // var 生命的没有局部作用，var 可以对一个变量声明多次

    // let 声明的有局部作用，let只能对一个变量声明一次

    var a=1;

    console.log(a)

    let b=2;

    console.log(b)

}

2、const声明常量（只读变量）

{

    // 声明之后不允许改变

    // 声明必须初始化值，(不能这么写 const a);

    const a=1;

    console.log(a);

}

3、解构赋值

 

    //1、数组解构

    // 传统写法

    let a=1,b=2,c=3

    console.log(a,b,c)

    

    // ES6写法

    let[x,y,z]=[4,5,6]

    console.log(x,y,z)

 

    //2、对象解构

    let user = {name:'张三',age:18}

    

    // 传统解构

    let name1=user.name

    let age1=user.age

    console.log(name1,age1)

    //es6解构法,注意 let {}写法，里面必须是user的属性名

    let {name,age}=user

    console.log(name,age)

 

4、模板字符串

    //用反引号``， 实现模板字符串

    //1.可以换行

    let str =`hellow,

    yiqun`

    console.log(str)

 

    //2.必须用``包含表达式才生效，字符串插入变量和表达式，变量名写在${}中

    let name ='张三'

    let age =12

    let info = `${name}的年龄为${age}` 

    console.log(info)

 

    //3 字符串调用js函数

 

    function rs(){

        return '1231'

    }

    let rs1=`${rs()}`

    console.log(rs1)

 

5、声明对象简写

const age=12;

const name='张三'

 

//传统

const student = {name:name,age:age}

console.log(student);

 

//es6写法

const stu2={name,age}

console.log(stu2)

 

6、定义方法简写

//传统

const stu={

    say:function(){

        console.log('Hellow')

    }

}

stu.say();

 

//es6写法

const stu1={

    say1(){

        console.log('hellow22')

    }

}

stu1.say1();

7、对象拓展运算符

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

// 1:拷贝对象

let stu={name:'张三',age:10}

let stu2 = {...stu}

console.log(stu2)

 

//2.合并对象

let teacher1={name:'lilei'}

let teacher2={age:14}

let teacher3={...teacher1,...teacher2}

console.log(teacher3)

8、箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

//传统

// var a1=function(a){

//     return a

// }

 

//es6

var a1 = a=>a

console.log(a1('hellow'))

 

//传统多参数函数

var b1=function(a,b){

    return a+b

}

//es6多参数函数

var b2=(a,b)=>a+b

console.log(b2(1,2))