博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
二、let变量声明方式介绍
阅读量:6759 次
发布时间:2019-06-26

本文共 1957 字,大约阅读时间需要 6 分钟。

作用域指的是一个变量的生命周期,也就是说,在代码中它是可见的。

在es5以前,是没有块级作用域的概念的,在es6中才引入进来的,在传统的java和c++中块级作用域是包裹在{ }里面的代码

{//这里面的是块级作用域}复制代码

==//这边不是块级作用域==

以上所示是其他语言的块级作用域,以上可知,声明一个变量在块中,只能在块中可见和其他内嵌的块中可见

但是在es5中,只有两种作用域,就是全局作用域和函数作用域,所以,如果写

{  var a = "block";}console.log(a);		//block复制代码

以上可以看出,变量a存在于全局范围内,所以作用范围也在全局。

在es5中,除了全局作用域,就是函数作用域了

function hello() {    var a = "function";}hello();console.log(a);		//a is not defined复制代码

报错是因为a变量声明在函数内部,所以作用范围只在函数内部,但是如果在函数体内部加上for循环的话

function hello() {    var a = "function";    for (var i = 0; i < 10; i++) {        var a = "block";    }    console.log(a);}hello(); 	//block复制代码

没有块级作用域,但是有很多替代方案,大部分都是用闭包的原理,比如以下其中一种方案

==IIFE(Immediately Invoked Function Expression)自执行函数==

function hello() {    var a = "function";    for (var i=0; i<5; i++) {        (function() {            var a = "block";        })();    }    console.log(a);}hello();	//function复制代码

以上就会打印出function

在es5中,使用块级作用域特别麻烦,直到es6中出现了let块级元素,可以用简短的写法就解决以上问题,同样上面的例子我们可以写为

function hello() {    var a = "function";    for (var i = 0; i < 5; i++) {        let a = "block";    }    console.log(a);}hello();	//function复制代码

现在,for循环体中声明的a只存在于{ }里面,上面的代码片段按预期打印出函数。

在循环中使用let

var funcs = [];for (var i = 0; i < 5; i += 1) {    var y = i;    funcs.push(function () {        console.log(y);    })}funcs.forEach(function (func) {    func()	//4	4	4	4	4});复制代码

以上例子我们本来想输出0 1 2 3 4的,结果....当然也可以使用IIFE,但是那样太麻烦了,而使用let

var funcs = [];for (var i = 0; i < 5; i += 1) {    let y = i;    funcs.push(function () {        console.log(y);    })}funcs.forEach(function (func) {    func()});复制代码

就直接得到了想要的结果0 1 2 3 4 以上无非就是想输出0 1 2 3 4,其实还有更简单的方法

var funcs = [];for (let i = 0; i < 5; i += 1) {    funcs.push(function () {        console.log(i);    })}funcs.forEach(function (func) {    func()});复制代码

上面在循环中声明i,所以i的作用域在循环内部,具体解释起为什么,还得涉及到域解析的过程; 还得注意的是let声明方式不能重复声明,如:

let a=10;let a=20;复制代码

这样会报错Identifier 'a' has already been declared

转载于:https://juejin.im/post/5b40e0486fb9a04f9078f14f

你可能感兴趣的文章
win10 进入安全模式的方法
查看>>
hdu 5783 Divide the Sequence 贪心
查看>>
man/ls/clock/date/echo笔记
查看>>
Unity 5.3.5p8 C#编译器升级
查看>>
python 3.5 成功安装 scrapy 的步骤
查看>>
【Linux】linux常用基本命令
查看>>
数组中重复的数字
查看>>
【Hadoop】如何形象描述大数据生态?
查看>>
Objective-C Runtime(转)
查看>>
Linux下Mysql的odbc配置
查看>>
Entity Framework 不支持DefaultValue
查看>>
Linux运维基础命令笔试题--看看你会多少?
查看>>
spring声明式事务 同一类内方法调用事务失效
查看>>
PHP对自己I/O流访问的封装(转)
查看>>
Android Fragment学习笔记(二)----Fragment界面添加和管理
查看>>
在CentOS下安装tomcat并配置环境变量(改默认端口8080为8081)
查看>>
攻击流量的清洗
查看>>
[转载] K3漏油器全紫铜替换原硅胶垫教程。标准姿势
查看>>
Incomplete types-不完全类型
查看>>
eclipse maven build、maven clean、maven install和maven test的区别 精析
查看>>