JS中let和var的区别

wenshi11019 发布于2019-08-23 14:20 / 2961人阅读

摘要：打印错误配合循环的独特应用非常适合用于循环内部的块级作用域。看一个常见的面试题目同步注册回调函数到异步的宏任务队列。是循环体内局部作用域，不受外界影响。

1. 定义变量

声明语法

var upperA = "A";
let upperB = "B";
const upperC = "C";

只声明不初始化的结果，【const定义的常量不可以修改，而且必须初始化。】

// var 声明变量
var upperA;
console.log("打印大写的A：%s", upperA);
// 结果：打印大写的A：undefined

// let 声明变量
var upperB;
console.log("打印大写的B：%s", upperB);
// 结果：打印大写的B：undefined

// const 声明常量
const upperC;
console.log("打印大写的C：%s", upperC);
// 错误：SyntaxError: Missing initializer in const declaration

声明后值是否可修改，【const定义的常量不可以修改，而且必须初始化。】

// var 声明变量初始化并修改值
var upperA = "A";
console.log("打印upperA：%s", upperA);
// 结果：打印upperA：A
upperA = "LetterA";
console.log("打印upperA：%s", upperA);
// 结果：打印upperA：LetterA

// let 声明变量初始化并修改值
var upperB = "B";
console.log("打印大写的B：%s", upperB);
// 结果：打印upperB：B
upperB = "LetterB";
console.log("打印大写的B：%s", upperB);
// 结果：打印upperB：LetterB

// const 声明常量初始化并修改值
const upperC = "C";
console.log("打印upperC：%s", upperC);
// 结果：打印upperC：C
upperC = "LetterC";
console.log("打印upperC：%s", upperC);
// 错误：TypeError: Assignment to constant variable.

2. 变量提升

浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等
不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。 
var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量不会被提升到作用域的顶部。

console.log("打印upperA：%s", upperA);
// 结果：打印upperA：undefined
console.log("打印upperB：%s", upperB);
// 错误：ReferenceError: upperB is not defined
var upperA = "A";
let upperB = "B";

3. 是否允许重复声明同一个变量

** var允许在相同作用域内，重复声明同一个变量，后面声明的变量会覆盖前面声明的变量。
** let不允许在相同作用域内，重复声明同一个变量。

var upperA = "A";
let upperB = "B";
// 重复声明
var upperA = "LetterA";
let upperB = "LetterB";
console.log("打印upperA：%s", upperA);
console.log("打印upperB：%s", upperB)
// 错误：SyntaxError: Identifier "upperB" has already been declared

4. 作用域

在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

// ---------- 例如： ----------
{
    var upperA = "A";
}
console.log("打印upperA：%s", upperA);
# 结果： 打印upperA：A

// ---------- ES6新增的let，可以声明块级作用域的变量。----------
{
    let upperB = "B";
}
console.log("打印upperB：%s", upperB);
// 错误： ReferenceError: upperB is not defined

5. let配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。
** JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。

// ---------- 看一个常见的面试题目： ----------
for (var i = 0; i <10; i++) {  
    setTimeout(function() {    // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
    }, 0);
}
// 输出结果：10   共10个
// 这里面的知识点： JS的事件循环机制，setTimeout的机制等

// ---------- 如果把 var改成 let声明：----------
// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
    setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
    }, 0);
}
// 输出结果：0  1  2  3  4  5  6  7  8 9

云服务器 GPU云服务器 js 中 let js和javascript的区别 js数据对象和对象的区别吗 js中数据和对象的关系图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100452.html

总结下var、let 和 const 的区别

摘要：前言和的区别是老生常谈，看到网上一些文章的总结，有的不太全面，甚至有的描述不太准确，在这里尽量全面的总结下这三者的区别。最后以上大概是总结后的内容，看来，还是多用吧。前言 var 和 let 的区别是老生常谈，看到网上一些文章的总结，有的不太全面，甚至有的描述不太准确，在这里尽量全面的总结下这三者的区别。 let 是 ES6新增的变量类型，用来代替 var 的一些缺陷，跟 var...

pingink 2019-08-26 12:20 评论0 收藏0
js中var、let、const的区别

摘要：中的区别主要内容是中三种定义变量的方式，，的区别。定义的变量可以修改，如果不初始化会输出，不会报错。正确错误，必须初始化函数外定义有输出值函数外修改定义无法输出是常量，不可改变，一般大写，也是块级作用域。。。 js中var、let、const的区别主要内容是：js中三种定义变量的方式const， var， let的区别。 var定义的变量可以修改，如果不初始化会输出undefined...

Yuqi 2019-08-21 11:48 评论0 收藏0
深入理解let和var的区别（暂时性死区）！！！

摘要：会出现这样的情况是因为拥有暂时性死区。规定暂时性死区和语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。首先我们应该知道js引擎在读取js代码时会进行两个步骤：第一个步骤是解释。第二个步骤是执行。所谓解释就是会先通篇扫描所有的Js代码，然后把所有声明提升到顶端，第二步是执行，执行就是操作一类的。我们先来看个简单的变量提升...

tanglijun 2019-08-23 14:01 评论0 收藏0
JS 作用域 var与let 区别

摘要：在入门时，最让人傻傻分不清楚的就是与带来的作用域的苦恼。明确循环内部的与中的是在不同的作用域中，它们有各自单独的作用域。局部使用定义时只在该函数作用域内部有效。在es6入门时，最让人傻傻分不清楚的就是var与let带来的作用域的苦恼。最近又一次翻看阮一峰老师的文章，重新有了自己的小结。代码分析 var a = []; for (var i = 0; i < 10; i++) { ...

antyiwei 2019-08-21 18:30 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(上)

摘要：循环可以使用的范围包括数组和结构某些类似数组的对象对象，以及字符串。只能遍历数组，不能中断，返回值是修改后的数组。除了之外，等，也有同样的问题。声明一个只读的常量。这在语法上，称为暂时性死区。暂时性死区也意味着不再是一个百分百安全的操作。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包...

AlphaWatch 2019-05-23 16:25 评论0 收藏0