1.let作用域局限于当前代码块

文章中//后面的均为打印结果

代码1：

{

    var str1 = "小花";

    let str2 = "小明";

    console.log(str1); //小花

    console.log(str2); //小明

}

console.log(str1); //小花

console.log(str2); //Error:str2 is not defined

let作用域仅限于当前代码块，而var的作用域是全局的

2.let作用域不会被提升

代码2：

{

    console.log(str1); //undedined

    console.log(str2); //str2 is not defined

    var str1 = "小花";

    let str2 = "小明";

}

let作用域不会被提升，而var作用域会被提升

代码2相当于：

{

    var str1;

    console.log(str1); //undedined

    console.log(str2); //str2 is not defined

    str1 = "小花";

    let str2 = "小明";

}

3.let不能被重复定义

代码3：

var str1 = "小花1";

var str1 = "小花2";

let str2 = "小明1";

let str2 = "小明2";

上面这段代码运行会报错：Identifier 'str2' has already been declared

var重复定义后面的会覆盖前面的，而let则不行，会报语法错误，str2标识符已经被声明

4.let父子作用域

代码4：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>learn</title>

  </head>

  <body>

      <button>按钮1</button>

      <button>按钮2</button>

      <button>按钮3</button>

      <button>按钮4</button>

      <button>按钮5</button>

      <script>

        var btns = document.querySelectorAll('button')

        for(var i=0;i<btns.length;i++){

            btns[i].onclick = function(){

            alert('点击第'+i+'个按钮')

          }

        }

      </script>

  </body>

</html>

此时不管点击哪个都是弹出点击第5个按钮，因为此时在点击的事件触发的时候，for循环已经走完了，而此时的i的值为5，此时i变成全局的了，所以不管点击哪个都会弹出点击第5个按钮。

代码5：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>learn</title>

  </head>

  <body>

      <button>按钮1</button>

      <button>按钮2</button>

      <button>按钮3</button>

      <button>按钮4</button>

      <button>按钮5</button>

      <script>

        let btns = document.querySelectorAll('button')

        for(let i=0;i<btns.length;i++){

            btns[i].onclick = function(){

            alert('点击第'+i+'按钮')

            }

        }

      </script>

  </body>

</html>

将上面代码的var改成let，点击的时候就会依次弹出对应的i的值，因为此时let定义的变量i的生命周期到for循环最后的大括号就结束了，所以alert中的i和btns[i]中的i对应的就是每次循环的值。

以上四点就是let与var的区别，如果有问题可以在评论里提哦。

let与var的区别的更多相关文章

  1. JavaScript中变量声明有var和没var的区别

    JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...

  2. 详解变量声明加 var 和不加 var 的区别

    在全局作用域中声明变量加 var 关键字和不加 var ,js 引擎都会将这个变量声明为全局变量,在实际运行时,两种声明方式的变量的行为也是几乎一致的.但是在全局作用域下是否声明一个变量的 时候加va ...

  3. 前端面试题：JS中的let和var的区别

    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别.我简单总结一下,以便各位以后面试中使用. ES6 新增了let命令,用来声明局部 ...

  4. es6入门1-- let与var的区别详解

    一.前言 说到做到,现在暂时放了放JS模式的读书笔记,打算好好看看ES6,毕竟出了这么久了,还是靠JS吃饭的,都不好好学JS新特性,确实说不过去,我本来是想当读书笔记去记录ES6,但是这个确实是属于边 ...

  5. js中const,var,let区别（转载）

    js中const,var,let区别 来源:https://www.cnblogs.com/zzsdream/p/6372729.html 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇 ...

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

    上图已说的很清晰了. 下面代码是赘述 <script> //带var和不带var的区别: // 1.只有带var的才可以预解释,所以在赋值的前操作不会报错. console.log(num ...

  7. javascript中let和var的区别

    let是es6中新增命令,也是用来声明变量的,可能很多小伙伴都像我一样,定义变量的时候都会用var而很少用到let,那么,let和var到底有什么区别呢? let和var的区别体现在作用域上.var的 ...

  8. js中加“var”和不加“var”的区别

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...

  9. 在Javascript中 声明时用"var"与不用"var"的区别，== 和 ===的区别

    今天,被问到两个JS问题,当时没回答到重点,问题虽然看起来简单,但是细节却马虎不得,在此做下记录: 1. 在Javascript中 声明时用"var"与不用"var&qu ...

  10. const,var,let区别（转载）

    1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);// ...

随机推荐

  1. Leetcode之深度优先搜索（DFS）专题-515. 在每个树行中找最大值（Find Largest Value in Each Tree Row）

    Leetcode之深度优先搜索(DFS)专题-515. 在每个树行中找最大值(Find Largest Value in Each Tree Row) 深度优先搜索的解题详细介绍,点击 您需要在二叉树 ...

  2. （数据科学学习手札68）pandas中的categorical类型及应用

    一.简介 categorical是pandas中对应分类变量的一种数据类型,与R中的因子型变量比较相似,例如性别.血型等等用于表征类别的变量都可以用其来表示,本文就将针对categorical的相关内 ...

  3. vue中使用web worker

    众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...

  4. P1415 拆分数列 DP

    传送门: 题意: 将一个数字串分成许多不同的小串,使得这些小串代表的数字严格递增,要求最后一个数字尽可能地小. 然后满足字典序尽可能大. 思路: 由于最后一个数字要尽可能地小,所以先处理出每个数的L[ ...

  5. POJ 2528 Mayor's posters (线段树+区间覆盖+离散化）

    题意: 一共有n张海报, 按次序贴在墙上, 后贴的海报可以覆盖先贴的海报, 问一共有多少种海报出现过. 题解: 因为长度最大可以达到1e7, 但是最多只有2e4的区间个数,并且最后只是统计能看见的不同 ...

  6. 牛客练习赛17 B-好位置

    传送门 题意:本来惯例中文题不解释的, 但是有些人不懂这个题意, 简单的来说, 就是s1每一个的每一个字符都可以和别的字符构成一个子串 == s2.  算了还是惯例中文题意不解释吧. 题解:其实以前写 ...

  7. poj 1984 Navigation Nightmare（带权并查集+小小的技巧）

    题目链接:http://poj.org/problem?id=1984 题意:题目是说给你n个线,并告知其方向,然后对于后面有一些询问,每个询问有一个时间点,要求你输出在该时间点a,b的笛卡尔距离,如 ...

  8. 【LeetCode】347-前K个高频元素

    题目描述 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums = ...

  9. Git的使用（三）远程仓库添加及克隆

    Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以“克隆”这个原始版本库,而且每台机器的版本库其实都是一样的, ...

  10. http压力测试工具及使用说明

    http压力测试工具及使用说明 转 说明:介绍几款简单.易使用http压测工具,便于研发同学,压测服务,明确服务临界值,寻找服务瓶颈点. 压测时候可重点以下指标,关注并发用户数.TPS(每秒事务数量) ...