ES6-let 和const 命令

ES6-let 和const 命令

概述：

变量/赋值

• var     可以重复定义、不能限制修改、没有块级作用域

• let     不能重复定义、变量、块级作用域

• const   不能重复定义、常量、块级作用域

变量

var回顾

声明变量
var 声明的变量由函数划分作用域
**

什么是let

ES6中新增的关键字
，用于声明变量

let的特点

let 声明的变量由代码块划分作用域
**注意：**重复声明会报错
**

暂存死区

从块的开始到声明这段的区域

什么是块级作用域

一对{ }包括的区域称为代码块
块级作用域指一个变量或者函数只在该区域才起作用

如何形成块级作用域

使用let关键字在代码块中声明的变量，只能在该代码块及子级作用域起作用

let 和 var 的具体区别：

var ：
1.可以重复声明
2.作用域：全局作用域 函数作用域（局部作用域）
3.var 声明的变量只能是全局的或者是整个函数块的
4.有预解析（变量提升）

let  ：

1. 不允许重复声明
2. 作用域：全局作用域 块级作用域
3. let 则允许声明一个作用域被限制在块级中的变量、语句或者表达式。
4. 没有预解析（变量提升）严格遵循先声明后使用

关于【脱离顶层作用域】这一点，简单描述一下：在最外层作用域中使用 let | const | class 声明的变量，将不会绑定在顶层作用域 window 或是 global.

补充：  由于ie低版本不兼容es6新语法，所以在使用的使用优先考虑兼容性的问题_       _
如果不考虑兼容的话， 优先推荐使用let/const
**
今后，我们的所有的循环变量将用let来定义：

for(let i = 0 ; i < 10 ; i++){
	
}
console.log(i);  //报错

**
例子：选项卡，定时器
**

    <style>
        div {
            display: none;
        }

        .show {
            display: block;
        }

        .active {
            background-color: yellow;
        }
    </style>

    <input type="button" value="tab1" class="active">
    <input type="button" value="tab2">
    <input type="button" value="tab3">
    <div class="show">div1</div>
    <div>div2</div>
    <div>div3</div>

es5写法：

    <script>
        var tabs = document.getElementsByTagName('input');
        var divs = document.getElementsByTagName('div')
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].index = i
            tabs[i].onclick = function () {
                console.log(this.index);
                for (var i = 0; i < tabs.length; i++) {
                    divs[i].className = '';
                    tabs[i].className = '';
                }
                this.className = 'active';
                divs[this.index].className = 'show'
            }
        }
    </script>

es6写法：

    <script>
        var tabs = document.getElementsByTagName('input');
        var divs = document.getElementsByTagName('div')
        for (let  i = 0; i < tabs.length; i++) {
            // tabs[i].index = i
            tabs[i].onclick = function () {
                console.log(i);
                for (var j = 0; j < tabs.length; j++) {
                    divs[j].className = '';
                    tabs[j].className = '';
                }
                this.className = 'active';
                divs[i].className = 'show'
            }
        }
    </script>

    //上述for相当于  循环几次，出现几个块级作用域
    // {
    //     let i = 0;
    //     tabs[i].onclick = function () {
    //         console.log(i);
    //     }
    // }
    // {
    //     let i = 1;
    //     tabs[i].onclick = function () {
    //         console.log(i);
    //     }
    // }
    // {
    //     let i = 2;
    //     tabs[i].onclick = function () {
    //         console.log(i);
    //     }
    // }

常量

什么是常量

在定义之后值是固定不变的，即为常量

const和let的区别

1. 使用let声明的变量可以修改， 使用const声明的常量，不可以修改
2. 声明的时候，必须赋值
3. 其他情况，可以let一致(不允许重复声明，块级作用域，没有预解析)
_

const作用

用来声明一个只读的常量。一旦声明，常量的值就不能改变。通常用const定义函数。
**注意：**重复声明会报错
**
常量的值不能修改，但是如果常量保存的是一个对象，那么对象的属性是可以被修改的。
**什么东西不变呢？比如圆周率：

const PI = 3.14159226;
console.log(PI);

常量一般来说所有字母要大写。

函数的定义一般来说都是不变的，所以今后的函数一律用const定义。

const sum = function(a,b){
	return a + b;
}
console.log(sum(2,3));