北妈每日一学：ES6语法入门之开门见山

最新推荐文章于 2019-12-16 18:30:12 发布

前端你别闹

最新推荐文章于 2019-12-16 18:30:12 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/GsL9D1P04F6x2ts3C9/article/details/79926625

版权

北妈每日一学

《北妈每日一学》

我决定从今天开始，发布新栏目：“北妈每日一学”，每天发布一个或者一系列的技术知识点来给大家，这样我们每天可以一起总结和学习，也算一个好的开始和坚持。
北妈每日一学用最短的篇幅，最好的排版，最简洁的例子和大家一起学习、总结、入坑。

由于头条文章比较宝贵，而且写的太短不行，天天总写技术又会很枯燥，而且时不时还要发一篇广告，所以利用次条文章每日学一个知识点我觉得是最合适不过的聪明之举，而且我一直有这个想法，今天才决定付诸行动 - 因为拉到靠谱赞助商了。

这个栏目所有技术点，都是底部展示的机构协助提供，和我共同整理，供大家学习，觉得有帮助就支持下。

ES6 简介

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。

也就是说，ES6就是ES2015。

虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人写的代码你也必须要懂ES6的语法了...

北妈一句白话就是：之前用的，你所熟悉的js语法是es5标准，现在是es6标准，恩就这么多。

ES6 常见语法

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments这些是ES6最常用的几个语法，基本上学会它们，我们就可以走遍天下都不怕啦！我会用最通俗易懂的语言和例子来讲解它们，保证一看就懂，一学就会。

但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以让我们快速掌握。今天跟北妈先来学最基础的也是最有特点的 let, const

1.变量声明 const 和 let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

  function aa() {    
  if(bool) {       
       var test = 'hello man'
   } else {       
        console.log(test)
    }
  }

以上的代码实际上是：

  function aa() {    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {        
  
  //此处访问test 值为undefined
        console.log(test)
    }    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

  function aa() {    
      if(bool) {      
       let test = 'hello man'
    } else {        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

    const name = 'lux'
    name = 'joe' //再次赋值此时会报错

说一道面试题

    var funcs = []    
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

    // ES5告诉我们可以利用闭包解决这个问题
    var funcs = []    
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {            
            return function() {              
            
              console.log(value)
            }
        }(i)))
    }    
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {           
     console.log(i)
        })
    }