ES6了解一下

「爱情、让人受尽委屈。」 2022-05-15 02:20 202阅读 0赞

## 1.变量声明常量和让 ##

在ES6之前，都是我们用`var`关键字声明变量无论声明在何处，都会被视为声明在。**函数的最顶部**（函数不在内即在**全局作用域的最顶部**）这就是函数。**变量提升**例如：

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

以上的代码实际上是：

function aa() {
        var test // 变量提升，函数最顶部
        if(flag) {
            test = 'hello man'
        } else {
            //此处访问 test 值为 undefined
            console.log(test)
        }
        //此处访问 test 值为 undefined
      }

所以不用关心flag是否为`true`或`false`。实际上，无论如何测都会被创建声明。

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

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

> 说白了只要在**\{\}括号花内**的代码块即可以认为`let`状语从句：`const`的作用域。

看以下代码：

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

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

说说再来`const`  
`const`声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

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

还有，如果`const`的的英文一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

const student = { name: 'cc' }
        // 没毛病
        student.name = 'yy'
        // 如果这样子就会报错了
        student  = { name: 'yy' }

说说TDZ（暂时性死区），想必你早有耳闻。

{
            console.log(value) // 报错
            let value = 'lala'
        }

我们都知道，JS引擎扫描代码时，如果发现变量声明，用`var`声明变量时会将声明提升到函数或全局作用域的顶部。但是`let`或者`const`，会将声明关进一个小黑屋也是TDZ（暂时性死区），只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

哦了，说一道面试题

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++) {
            funcs.push(
              (function(value) {
                return function() {
                    console.log(value)
                }
            })(i)
          )
        }
        funcs.forEach(function(func) {
            func()
        })

// 再来看看es6怎么处理的
        const funcs = []
        for (let i = 0; i < 10; i++) {
            funcs.push(function() {
                console.log(i)
            })
        }
        funcs.forEach(func => func())

达到相同的效果，ES6简洁的解决方案是不是更让你心动!!!

## 2.字符串 ##

先聊聊模板字符串