前端小白JavaScript学习之var/let/const/字面量的增强写法

---

前言

前端技术日新月异，从ES5到ES6，语法不断完善更新。
var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除。
十年前, Brendan Eich就决定修复这个问题, 于是他添加了一个新的关键字: let
今天我们一起来学习var/let/const他们分别有什么区别。
来巩固我们对于JavaScript的理解。

---

一、var？

在JavaScript中我们使用var来声明变量
列如：

var name = "Hello World"
var number = 1
var people = {name:"xxx",age:18}
var array = ["男","女"]

JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关。
这样就带来了一系列的问题：
对于其他块定义来说就不存在作用域，比如if/for等。
列如：

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function() {
                console.log('第' + i + '个按钮被点击');
            })
        }
    </script>

我们这里点击的是1号按钮，却出现的是3号按钮被点击，说明for里面var定义的i没有块级作用域，是全局都可以使用的。
大致会像下面这样：

var i = 0;
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '个按钮被点击');
	})
}
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '个按钮被点击');
	})
}
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '个按钮被点击');
	})
}

在ES6之前，我们可以采取一些方式来解决这个问题：闭包

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            (function(i) {
                btn[i].addEventListener('click', function() {
                    console.log('第' + i + '个按钮被点击');
                })
            })(i)
        }
    </script>

为什么闭包能解决var作用域带来的问题：
因为闭包采用了函数，函数自带块级作用域，大致会像下面这样：

{
	function(i = 0){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '个按钮被点击');
		})
	}
{
	function(i = 1){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '个按钮被点击');
		})
	}
}
{
	function(i = 2){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '个按钮被点击');
		})
	}
}

闭包的书写方式过于麻烦，于是到ES6，就引入了:let

二、let

现在我们再将之前的代码修改为：

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (let i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function() {
                console.log('第' + i + '个按钮被点击');
            })
        }
    </script>

let就会拥有自己的块级作用域：

三、const

	<script>
        const name = "haha"
    </script>

const主要用于定义常量，定义之后就无法对其进行修改，因为const定义后的这个内存地址就无法进行修改。
注意：const定义的变量必须开始就进行初始化
但我们定义的是对象时，我们可以对其中的值进行修改，内存地址依旧没有发生改变。

    <script>
        const obj = {
            name:"skt"
        }
        obj.name = "dwg"
    </script>

四、字面量的增强写法

ES6之后我们更是引入了字面量增强写法：
1.属性的增强写法
ES5：

    <script>
        const name = "lck"
        const obj = {
            name: name
        }
    </script>

ES6：

    <script>
        const name = "lck"
        const obj = {
            name
        }
    </script>

2.方法的增强写法
ES5：

    <script>
        let obj1 = {
            test: function() {
                //代码块
            }
        }
    </script>

ES6：

    <script>
        let obj1 = {
            test() {
                //代码块
            }
        }
    </script>

总结

本篇，我们学习了var/let/const,在定义变量的时候根据功能做好更好的进行选择。

今日推荐

工具：将图片转化为非常清晰的矢量图：每45分钟可使用一次