第28篇 js中let和var

  •   let与var

  在js中声明一个变量除了一个var 还有一个let的声明。对于var 在前面的作用域中已经讲过,这次主要说下二者的区别:

在MDN上有这样的一个demo:

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  let j = i;
  item.onclick = function (ev) {
    console.log("Item " + j + " is clicked.");
  };
  list.appendChild(item);
}

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。如果不用let,而改用var的话,将总是打印出 Item 5 is Clicked,因为 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。

对于上面的结果如果不使用let的话,也是有办法破的。方法就是用一个闭包把j的作用域给包起来。修改如下:

<script>
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  var j = i;
  item.onclick = (function(j){
    return function () {
    console.log("Item " + j + " is clicked.");
  }
})(j);
  list.appendChild(item);
}
</script>

上面的是采用的闭包的方式在绑定的时候已经把j的值已经传递给对应的click事件了,所以能够实现相同的结果。如此很是精妙!但是对于程序的易性来说是一个不小的考验。

下面开始说说let为什么能够实现如此的结果:

let 允许把变量的作用域限制在块级域中。与 var 不同处是:var 申明变量要么是全局的,要么是函数级的,而无法是块级的。再看几个官方的demo.

在程序或者函数的顶层,let 的表现就象 var 一样:

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}

上面的结果说明了let只在{}内使用。说到这里对开篇的那个问题就容易解释了。

用了let后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。如果两个定义都在最外层则效果是一样,如下:

var x = ‘global‘;
let y = ‘global‘;
console.log(this.x);
console.log(this.y);
  • let 的暂存死区与错误

在同一个函数或同一个作用域中用let重复定义一个变量将引起 TypeError.

if (x) {
  let foo;
  let foo; // TypeError thrown.
}

然而,在变量声明之前引用这个变量会导致一个 ReferenceError的结果, 因为let变量 在"暂存死区" (从块的开始到声明这段).

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

在 switch 申明中你可能会遇到这样的错误,因为一个switch只有一个作用块.

switch (x) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // TypeError for redeclaration.
    break;
}

循环体中是可以引用在for申明时用let定义的变量,尽管let不是出现在大括号之间.

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

let提供了一种在块的范围内获取变量的值,而不会影响块外面名字相同的变量的值的方法。

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  console.log(x+y); // 27
}

console.log(x + y); // 5

总结一下,对于let来说在某些地方确实有其长处的地方,同样也弥补了的js中块作用域的空白。

时间: 2024-10-12 20:38:25

第28篇 js中let和var的相关文章

第22篇 js中的this指针的用法

前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { this.name = "hello"; console.log(this.name); this.show = function() { console.log(this.name); } } funcA();// 1.hello var a = new funcA();//2.hello a

前端开发入门到实战:HTML标签和JS中设置CSS3 var变量

一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" style="border: 10px solid var(--color);"> </div> 直接正常CSS语句一样在style属性中设置即可. 效果如下截图: 二.JS中设置CSS变量 如下,HTML示意: <div id="box">

web前端入门到实战:HTML标签和JS中设置CSS3 var变量

一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" style="border: 10px solid var(--color);"> </div> 直接正常CSS语句一样在style属性中设置即可. 效果如下截图: 二.JS中设置CSS变量 如下,HTML示意: <div id="box">

ts和js中let和var定义变量的区别

javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"JavaScript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup

关于js中的for(var in)遍历属性报错问题

之前遇到过这个问题,但是没找到问题的所在,将for(var i in  array){} 改成了for(var i ;i<array.length;i++)循环,但是今天又遇到了,mark一下错误. 由于需要将后台传过来的数据进行排序,所以我在这个页面里面的Array扩展了一个方法: 那么问题来了,当刷新页面的时候,common中的方法抛出异常, 遍历29次之后有遍历了一次自己扩展的方法.由于不是temp中的,所以多了一项underfined. 解决方法: (1).将for(var i in a

js中let和var定义变量的区别

let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781671 声明后未赋值,表现相同 (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 使用未声明的变量,表现不同: (function() { console

JS中const、var和let区别

在JavaScript中有三种声明变量的方式:var.let.const. 1.const 声明创建一个只读的常量.这不意味着常量指向的值不可变,而是变量标识符的值只能赋值一次,必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b:' + b);//无法输出 2.var 语句用于声明变量. var a;

js 中 new Array() var a={} var a=[] new Object()

var a={}; new Object(); 表示定义一个空对象: new Array(); var a=[]; 表示定义一个空数组: 其他: 数组表示有序数据的集合,而对象表示无序数据的集合: 在Javascript语言中,关联数组就是对象,对象就是关联数组.这一点与php语言完全不同,在php中,关联数组也是数组. 单个对象是没有length属性的,所以不能a.length求长度:数组可以:

[js]js中变量带var和不带var的区别

上图已说的很清晰了. 下面代码是赘述 <script> //带var和不带var的区别: // 1.只有带var的才可以预解释,所以在赋值的前操作不会报错. console.log(num); //undefined var num = 100; // 2.不带var的不会进行预解释,赋值前调用会报错, console.log(num2); //Uncaught ReferenceError: num2 is not defined num2 = 200; // 3. 本质区别: // - 1