Javascript 进阶 8-2 Let, Const 实战运用技巧-58码农网

上一个章节我们介绍了 Let, Const 的基本观念，这个章节要介绍 Let, Const 的实战案例~

首先先看一下下面的程式:

for (var i = 0; i < 10; i++) {    setTimeout(function () {        console.log('这执行第' + i + '次');    }, 10);}console.log(i);

这段重要的事情是，setTimeout 会延迟执行现在的 i 是多少，并且在最外面会印出执行完 for迴圈之后的 i 是多少。

上一篇文章也有讲到，因为这边是用 var 进行变数的宣告，所以最外面的 console.log(i); 是有办法抓的到 i 的值。

现在又有一个问题来了，因为 setTimeout 是非同步执行的，现在的结果会是我们预期的 0~9，还是都是一样的 10 呢?

看到了结果，第一个呈现的是10，很明显，因为 setTimeout 是非同步执行的，所以会在所有的code都执行玩了以后，才执行。

但为什么，预期的 0~9，会是一样的 10 呢?

主要原因就是因为 i 是全域变数，而 setTimeout 是非同步执行的，当全部的code都执行完以后，才进入事件伫列中进行取值的动作，这个时候取到的不是for迴圈里面的 i ，而是全域变数已经被 + 到 10 的 i，所以一直都是显示10。

而且就算我们把 setTimeout 的时间改成 0，结果也还是一样的喔!

那么如果现在是let进行宣告变数的话，就会改善这个问题喔!

for (let i = 0; i < 10; i++) {    setTimeout(function () {        console.log('这执行第' + i + '次');    }, 0);}// console.log(i);

只是要记得把最后面的 console.log(i); 给拿掉，因为在Block之外的话就取不到里面的 i 会报错。

var person = {    name: '小明',    money: 500}; person.name = '杰伦';

以前我们宣告物件的方式都是用这样的方法进行宣告，并利用 person.name = '杰伦'; 的方式进行物件属性值的调整。

那么现在如果换成 const 的话，也是完全没有问题的喔~

但上一篇文章不是说~const宣告的变数是不能做更动的吗?

没错喔，但是这里的变数是物件，物件传参考的特性，所以是不能改变物件参考的位置，但针对物件中的属性对应的值进行修改是没有问题的喔~!

所以直接改变 person 这个物件的参考位置，也就是重新给予另一个物件的话，就不行喔!

那再来我们把宣告变数改成 var ~

并且freeze该物件~

所以理所当然我们没办法改动里面的属性的值~

var person = {    name: '小明',    money: 500}; person.name = '杰伦';Object.freeze(person);person.money = 1000;

这个时候，我再把这个物件改变成其他物件(变换物件传参考的指向)~

var person = {    name: '小明',    money: 500}; person.name = '杰伦';Object.freeze(person);person.money = 1000;person = {};

你就会发现，person的位置被改掉了~

如同之前介绍的，freeze针对的是整个物件的所有属性，但不包含物件的参考指向。

所以要解决这个问题，只要使用const进行变数的宣告就可以!

你看，这样的话，他就报错提醒你不可以这样重新改变person这个变数对于物件的指向!!

好~这篇文章就介绍到这边，如果没有问题的话就继续往下巴~汪汪!