JavaScript初学必备 之 ES6（上）

目录

一、ECMAScript 前言

二、ES6定义变量

三、ES6块级作用域

四、ES6箭头函数

---

听歌有助于提高幸福度，再忙也要方松，推荐一首我很喜欢的歌，祝大家学有所成、幸福美满。

——duvet

一、ECMAScript 前言

简介

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

• 1997 年 ECMAScript 1.0 诞生。
• 1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
• 1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
• 2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
• 2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
• 2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

优点

更加简洁、更强大的功能、更好的适应性等等，学就完了。

注释：部分资料来自《菜鸟教程》！

二、ES6定义变量

1、var存在的问题

（1）、声明提升方面存在问题

console.log(a)
var a

   还没定义就可以访问！尽管控制台显示undefined，却并不报错。

   无论声明在何处，都会被视为声明在函数的最顶部。

（2）、作用域机制存在问题

   var声明的变量属于函数作用域或全局作用域，而不是块级作用域，无法限制作用域，除了在函数中，因此在循环或条件语句中声明的变量会被提升到外部函数作用域。

（3）、变量重名问题：

var name = "zhangSan"
var name = "liSi"
console.log(name)  //后者会把前者覆盖掉

  后面的内容会把前面的内容覆盖掉。

2、let 与 const 关键字

（1）、let 与 var 的区别

• a、必须先定义再使用；
• b、变量重名会报错，而非后者覆盖前者；
• c、块级作用域：let定义的变量只活在块里面，也就是所处的大括号里面，避免了里外变量的互相打扰。（注：一个{ }就是一个块）

（2）、关于 let 与 const 

• a、首先很简单，let定义变量，const定义常量；
• b、const也有（1）中let的特性；
• c、let 赋值后可以再改，const 则常量不能再改，但下面情况可以进行改动：

    const+复杂类型比较特殊：

   const name = "shuaige"  //不能再改
        const obj = {
            age:"18"
        }
        obj.age = "28"//可以更改，复杂类型对象存在堆区，obj这个常量在栈区，存了一个地址，
                         // 相当于拿钥匙开房间，房间里的内容变了，但钥匙没变
        console.log(obj.age)

三、ES6块级作用域

1、介绍

块作用域由 { } 包括，if 和 for 里面的 { } 也属于块作用域。下面的例子说明了这点。

2、比较

var定义：

    for (var i = 0;i<5;i++){
        console.log(i)  //输出 01234
    }
    console.log(i)  //输出 5

let定义：

    for (let i = 0;i<5;i++){
        console.log(i)  //输出01234
    }
    console.log(i)  //报错！！！！

分析： var声明的变量属于函数作用域或全局作用域，而不是块级作用域，因此在循环或条件语句中声明的变量会被提升到外部函数作用域，所以循环外部能成功输出。而let定义的变量遵循块级定义域，只活在块里，所以在循环内部的 i 能成功输出，而相对的，外部的 i 输出时会报错！！

3、总结

• 块级作用域指的就是 { } 里面的内容。
• 定义的变量、常量只活在自己所在的块中，在外部无法访问。
• 减少了变量之间的冲突。

四、ES6箭头函数

1、介绍

• es6 箭头函数提供了一种更加简洁的函数书写方式。
• 语法更加简洁：参数 => 函数体  。
• 省去了关键字function。

2、代码说明

要点1

关键字function替换为 =>，如下：

    let test1 = function (){
        console.log("111",)
    }
//等同于
    let test2 = () => {
        console.log("222")
    }

    test1()  //输出111
    test2()  //输出222

要点2

当函数只有一个参数时，（）可以省略，如下：

//省略括号的前提是只有一个参数
    let test1 = (a) => {
        console.log(111,a)
    }
//等同于
    let test2 = a => {
        console.log(222,a)
    }
    
    test1("hello")  //输出 111 hello
    test2("world")  //输出 222 world

要点3

内部只有一句代码 或 只有返回值 时，{ } 可以省略，以及return也会省略，如下：

    let test1 = a => {
        return 10*a
    }
    console.log(test1(10))  //输出 100
//等同于
    let test2 = a => 10*a
    console.log(test2(10))  //当然也是输出 100

这使得这种特定情况下代码变得十分简洁，拿下面的小案例举例：

假设从后端返回一个数组 list，要求把其内容创建成<li>并插入到页面中的<ul>中。

当然你可以选择使用document.createElement()方法，但使用map映射无疑更方便，以下是更新的代码：

//第一次写这个问题
    let list = ["aaa","bbb","ccc"]
    let newlist = list.map(function (item){
        return `<li>${item}<li>`
    })
    console.log(newlist)

学习完箭头函数，面对这种适用的情况，更新后代码如下：

  //学习箭头函数后  
    let list = ["aaa","bbb","ccc"]
    let newlist = list.map(item => `<li>${item}<li>`)
    console.log(newlist)

更改后不仅更加简洁，还利于提高效率。

---

要点4

有个常见的错误：如果返回值是一个对象，用以上方法可能会产生误区。代码如下：

    let test = () => {
        return {
            name:"shuaige"
        }
    }
    console.log(test())   //此时成功输出

此时，发现这个函数条件很符合箭头函数，打算改成箭头函数简化，于是：

    let test = () => { name:"shuaige" }
    console.log(test()) //输出undefined

此时会报错，输出undefined。发现问题所在：更改之后的大括号在我看来是 对象 的，但编译器会认为是 函数 的。所以只需给对象整体加个括号就能解决了，如下：

let test = () => ({ name:"shuaige" })
console.log(test())  //成功输出

---

要点5

没有arguments——什么是arguments???先看下面代码：

    let test = function (a,b,c){
        console.log(a,b,c)
    }
    test(1,2,3)   //毫无疑问，输出1，2，3

可如果把形参删去呢？

    let test = function (){
        console.log(a,b,c)
    }
    test(1,2,3)

毫无疑问，肯定会报错的。如果没有形参，怎么才能拿到这些值呢？之前看kerwin课，就提到这个，实参传过去，形参要接住，形参不写的话拿不到。这就要提到上述的arguments——函数内部有自建的特殊的变量，叫arguments（变量名），拿来直接用试试：

    let test = function (){
        //console.log(a,b,c)
        console.log(arguments)
    }
    test(1,2,3)

来看看输出：

是一个类似数组的结构，但并不是数组——伪数组（多提一句，如何把伪数组转成数组：Array.from(arguments)），既然这样，那么没形参也能拿到值：

   let test = function (){
        //console.log(a,b,c)    //报错
        //console.log(arguments)     //输出一个伪数组
        console.log(arguments[0],arguments[1],arguments[3])  //输出传的值
    }
    test(1,2,3)

小总结：arguments 是函数内部自建的一个特殊变量，能够在没有形参的情况下，拿到调用函数传来的所有的实参。 

箭头函数能够简化函数，如果再和arguments结合岂不是更方便？很可惜，写成箭头函数拿不到。

补充一点，上面是没写形参可以用arguements解决，可要是在实际生产中忘记传实参呢？会有可能使程序崩溃，可以提前给形参设置初始值，也就是函数的默认参数。这样一来，忘记传的话程序按照默认的来，传的话程序按照你的来。无论是普通函数还是箭头函数，都是很方便的。

---

要点6

this！！！！！！！不再遵守之前提到的“谁调用我，我指向谁”

两套说法：1、箭头函数没有this

                  2、箭头函数this是指向父级作用域的

细想一下好像差不多。但毕竟能打印this，第二种说法合适点吧。

    mytext.onclick = function (){
        //   1   console.log(this.value)  //this指向mytext节点，打印输入的值
        //   2   现在设计一个定时器，两秒后再打印

        //   4   普通函数想访问到外面作用域时候，就可以把外面的this存一份
        let that = this
        setTimeout(function (){
            //console.log(this.value)  //   3   因为this指向window，所以没用
            console.log(that.value)
        },2000)
    })

在这个案例中，普通函数想要访问外面作用域，可以把外面的this存起来用。

而箭头函数就不一样了：

  mytext.onclick = function (){
        // 把这个内置函数写成箭头函数
        setTimeout(() =>{
            console.log(this.value)  //此时这里的this不再指向window而是mytext节点！！
        },2000)
    }

此时这里的this不再指向window而是mytext节点。

---

ES6上半部分就这么多，有空更新下半部分，希望永远开心。

tips：很多知识都是来自千锋教育的课程，大家可以去看，讲的很好！