十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下es6块级绑定中let and const的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联从2013年成立,是专业互联网技术服务公司,拥有项目成都网站建设、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元景泰做网站,已为上家服务,为景泰各地企业和个人服务,联系电话:13518219792变量声明一直是js工作中最微妙的一部分,它不像C语言一样,变量总是在被它创建的时候声明,js语言可以允许你在你需要声明变量的时候进行声明。
var let const 之变量声明
var 声明与变量提升。
当我们使用var关键字进行变量声明的时候,无论变量声明的位置在哪里,都会被是为声明于所在的函数的顶部(如果不在函数内的话,则视为在全局作用域的顶部)这就是所谓的变量提升(hoisting)
var提升如下:
function getValue(condition) { if (condition) { var value = "blue"; // 其他代码 return value; } else { // value 在此处可访问,值为 undefined return null; } // value 在此处可访问,值为 undefined }块级声明let块级声明也就是让所声明的变量在指定的作用域外无法被访问到,块级作用域在如下情况下被创建
如下所示:
function getValue(condition) { if (condition) { let value = "blue"; // 其他代码 return value; } else { // value 在此处不可用 return null; } // value 在此处不可用 }禁止重复标识
如果一个标识符已经在代码内部被定义,重复进行let声明会报错
var a = 30; //报错 let a = 30;a变量被声明了两次:一次使用 var ,另一次使用 let 。因为 let 不能在同一作用域内重复声明一个已有标识符,此处的 let 声明就会抛出错误。另一方面,在嵌套的作用域内使用 let 声明一个同名的新变量,则不会抛出错误,以下代码对此进行了演示:
var count = 30; // 不会抛出错误 if (condition) { let count = 40; // 其他代码 }这段代码中不会抛错,关键点在于let在同一级代码块中重复声明会报错const常量声明在es6中可以使用const语法进行声明。使用const声明的变量会被认为是常量(constant),意味着他们的值在被设置完成后既不能再被改变。正因为如此,所有的const的变量都需要在声明时进行初始化,
// 有效的常量 const maxItems = 30; // 语法错误:未进行初始化 const name;maxItems 变量被初始化了,因此它的 const 声明能正常起效。而 name 变量没有被初始化,导致在试图运行这段代码时抛出了错误。const声明会组织对变量绑定和对自生值的修改,这意味着const声明并不会组织对变量成员的修改。例如:
const person = { name: "Nicholas" }; // 工作正常 person.name = "Greg"; // 抛出错误 person = { name: "Greg" };const声明和let声明的对比
if (condition) { const maxItems = 5; // 其他代码 } // maxItems 在此处无法访问
for (var i = 0; i < 10; i++) { process(items[i]); } // i 在此处仍然可被访问 console.log(i); // 10
输出的结果并不是预期的值而是10;是因为var声明导致的变量的提升。聪明的你肯定会想到使用块级绑定来进行变量声明
for (let i = 0; i < 10; i++) { process(items[i]); } console.log(i);
i在此处是不是会正常输出呢,其实不会,在这个例子中会导致报错,为什么呢?因为i在此处不可访问。本例中的变量 i 仅在 for 循环内部可用,一旦循环结束,该变量在任意位置都不可访问。
我们在来看看一下代码
var funcs = []; for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i); }); } funcs.forEach(function(func) { func(); // 输出数值 "10" 十次 });
你原本可能预期这段代码会输出 0 到 9 的数值,但它却在同一行将数值 10 输出了十次。这是因为变量 i 在循环的每次迭代中都被共享了,意味着循环内创建的那些函数都拥有对于同一变量的引用。在循环结束后,变量 i 的值会是 10 ,因此当 console.log(i) 被调用时,
每次都打印出 10 。
为了修正这个问题,开发者在循环内使用立即调用函数表达式(IIFEs),以便在每次迭代中强制创建变量的一个新副本,示例如下:
var funcs = []; for (var i = 0; i < 10; i++) { funcs.push((function(value) { return function() { console.log(value); } }(i))); } funcs.forEach(function(func) { func(); // 从 0 到 9 依次输出 });循环内的 let 声明
let 声明通过有效模仿上例中 IIFE 的作用而简化了循环。在每次迭代中,都会创建一个新的
同名变量并对其进行初始化。这意味着你可以完全省略 IIFE 而获得预期的结果,就像这样
var funcs = []; for (let i = 0; i < 10; i++) { funcs.push(function() { console.log(i); }); } funcs.forEach(function(func) { func(); // 从 0 到 9 依次输出 })
我们是否会想到这个问题:为什么同样的代码使用let声明会导致不一样的结果呢?
在循环中let声明每次都创建了一个新的i变量,因此在循环内部创建的函数获得了各自的i副本,而每个i副本的值都会在每次的循环迭代声明变量的时候确定了
var funcs = [], object = { a: true, b: true, c: true }; for (let key in object) { funcs.push(function() { console.log(key); }); } funcs.forEach(function(func) { func(); // 依次输出 "a"、 "b"、 "c" });
本例中的 for-in 循环体现出了与 for 循环相同的行为。每次循环,一个新的 key 变量绑定就被创建,因此每个函数都能够拥有它自身的 key 变量副本,结果每个函数都输出了一个不同的值。而如果使用 var 来声明 key ,则所有函数都只会输出 "c" 。
let 声明在循环内部的行为是在规范中特别定义的,而与不提升变量声明的特征没有必然联系。事实上,在早期 let 的实现中并没有这种行为,它是后来才添加的。
循环内的常量声明
虽然es6没有明确的规范我们不能在for循环中使用const声明,然而它会根据循环方式的不同而有不同的行为,我们可以在初始化时使用const,但是当循环试图改变变量的值的时候会抛出错误,例如:
var funcs = []; // 在一次迭代后抛出错误 for (const i = 0; i < 10; i++) { funcs.push(function() { console.log(i); }); }
在此代码中, i 被声明为一个常量。循环的第一次迭代成功执行,此时 i 的值为 0 。在
i++ 执行时,一个错误会被抛出,因为该语句试图更改常量的值。因此,在循环中你只能使
用 const 来声明一个不会被更改的变量
而另一方面, const 变量在 for-in 或 for-of 循环中使用时,与 let 变量效果相同。因
此下面代码不会导致出错:
var funcs = [], object = { a: true, b: true, c: true }; // 不会导致错误 for (const key in object) { funcs.push(function() { console.log(key); }); } funcs.forEach(function(func) { func(); // 依次输出 "a"、 "b"、 "c" });
这段代码与“循环内的 let 声明”小节的第二个例子几乎完全一样,唯一的区别是 key 的值在
循环内不能被更改。 const 能够在 for-in 与 for-of 循环内工作,是因为循环为每次迭
代创建了一个新的变量绑定,而不是试图去修改已绑定的变量的值(就像使用了 for 而不是
for-in 的上个例子那样)。
全局块级绑定
let 与 const 不同于 var 的另一个方面是在全局作用域上的表现。当在全局作用域上使用 var 时,它会创建一个新的全局变量,并成为全局对象(在浏览器中是 window )的一
个属性。
总结
let和const块级作用域的引入,能够使我们减少很多无心的错误,它们的一个副作用,是不能在变量声明位置之前访问它们
块级绑定当前的最佳实践就是:在默认情况下使用 const ,而只在你知道变量值需要被更改的情况下才使用 let 。这在代码中能确保基本层次的不可变性,有助于防止某些类型的错误。
以上是“es6块级绑定中let and const的案例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!