ECMAScript、JavaScript、babel

一、ECMAScript、JavaScript

1.1 ECMAScript

简单说就是一套标准

1.1.1 ECMAScript和javaScript的关系？

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

1.1.2 ES6与ECMAScript2015的关系

ECMAScript 2015（简称ES2015）这个词，也是经常可以看到的。它与ES6是什么关系呢？
        2011年，ECMAScript5.1版发布后，就开始制定6.0版了。因此，ES6这个词的原意，就是指JavaScript语言的下一个版本。ES6的第一个版本，在2015年6月发布，正式名称是《ECMAScript2015标准》（简称ES2015）。2016年6月，小幅修订的《ECMAScript2016标准》（简称ES2016）如期发布，这个版本可以看作是ES6.1版，因为两者的差异非箱小，基本上是同一个标准。根据计划，2017年6月发布ES2017标准。因此，ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。本书中提到ES6的地方，一般是指ES2015标准，但有时也是泛指“下一代JavaScript 语言”

ES6和ES5的区别：
（1）es6代码简洁，es5代码复杂

（2）es6浏览器兼容性很差，es5代码浏览器兼容性很好

二、ES6基本语法

2.1 var和let

（1）let定义的是局部变量

<script>
    {
        var a=10; //js定义变量
        let b=20;//es6定义变量，let定义的变量有作用范围，即局部变量。
    }
    console.log(a);//浏览器控制台显示10
    console.log(b);//Uncaught ReferenceError: b is not defined
</script>

（2）var可以多次定义相同变量，let不能多次定义相同变量

<script>
    var a=10; //js定义变量
    var a=20;
    let b=20;//es6定义变量，let定义的变量有作用范围，即局部变量。
    let b=10;
    console.log(a);
    console.log(b);//Identifier 'b' has already been declared
</script>

2.2 const

<script>
    const PI=3.14
    //常量值一旦定义，不可以改变
    PI=4 // Assignment to constant variable.

    //定义常量必须初始化  
    const A//Missing initializer in const declaration
</script>

2.3 解构赋值

解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

2.3.1 数组解构

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

2.3.2 对象解构

<script>
    //定义对象
    let user={"name":"zyk","age":20}

    //传统方法从对象获取值
    let name1=user.name
    let age1=user.age
    console.log(name1+"=="+age1)

    //es6写法
    let{name,age} = user //注意：let里面的变量必须和对象的属性名一样
    console.log(name+"**"+age)
</script>

2.4 模板字符串

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

<script>
    //1、使用`符号实现换行
    let str=`zyk 
    kk`
    console.log(str)
    //2、在`符号里面使用表达式获取变量值
    let name="zyk"
    let age=18
    let str2=`hello,${name},age is ${age+3}`
    console.log(str2)
    //3、在`符号调用方法
    function f1(){
        return "zykk"
    }
    let str3=`demo,${f1()}`
    console.log(str3)
</script>

2.5 声明对象

<script>
    const age=18;
    const name="ykbsmn"

    //传统方法赋值对象
    const person1={age:age,name:name}
    console.log(person1)
    //es6
    const person2={age,name}
    console.log(person2)

</script>

2.6 定义方法简写

<script>
    //传统方法
    const person1={
        sayHi:function(){
            console.log("h1")
        }
    }
    person1.sayHi();
    //es6
    const person2={
        sayHi(){
            console.log("h1")
        }
    }
    person2.sayHi();
</script>

2.7 对象扩展符

扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象

<script>
    //1、拷贝对象
    let person1={"name":"zyk","age":20}
    let person2={...person1}
    console.log(person2)

    //2、合并对象
    let age={"age":21}
    let name={name:"ykbsmn"}
    let p2={...age,...name}
    console.log(p2)

</script>

2.8 箭头函数

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

参数 => 函数体

<script>
    //1、传统方法创建方法
    var f1=function(m){
        return m
    }
    console.log(f1(8))
    //使用箭头函数
    var f2=m=>m
    console.log(f2(8))

    //2、复杂点的方法
    var f3=function(a,b){
        return a+b
    }
    console.log(f3(2,6))
    //箭头函数简化
    var f4=(a,b) => a+b
    console.log(f4(2,6))
</script>

三、babel

我们在前面说过es6代码简洁但是兼容性差，而es5复杂但兼容性好，所以我们在实际编码时是先编写es6代码，然后再把代码转换成es5，而babel就是代码转码器！！，把es6转换为es5。

3.1 安装

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli
#查看是否安装成功
babel --version

3.2 使用

步骤：

（1）首先初始化npm项目

npm init -y

（2）安装babel工具

npm install --global babel-cli

（3）创建js文件，编写es6代码

let input = [1, 2, 3]
input = input.map(item => item + 1)
console.log(input)

（4）配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": ["es2015"],
    "plugins": []
}

（5）安装es2015转码器

npm install --save-dev babel-preset-es2015

（6）使用命令进行转码

# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

出现错误的话记得查看配置文件和js文件是否有ctrl+s保存！！