ES6知识点汇总(1)--var/let/const

这篇具有很好参考价值的文章主要介绍了ES6知识点汇总(1)--var/let/const。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. var、let、const之间有什么区别?

1、var
在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量

注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象


var a = 10;
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况


console.log(a) // undefined
var a = 20

在编译阶段,编译器会将其变成以下执行


var a
console.log(a)
a = 20

使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明


var a = 20 
var a = 30
console.log(a) // 30

在函数中使用使用var声明变量时候,该变量是局部的


var a = 20
function change(){
    var a = 30
}
change()
console.log(a) // 20 

而如果在函数内不使用var,该变量是全局的


var a = 20
function change(){
   a = 30
}
change()
console.log(a) // 30 

2、let
let是ES6新增的命令,用来声明变量

用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效


{
    let a = 20
}
console.log(a) // ReferenceError: a is not defined.
不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

这表示在声明它之前,变量a是不存在的,这时如果用到它,就会抛出一个错误

只要块级作用域内存在let命令,这个区域就不再受外部影响


var a = 123
if (true) {
    a = 'abc' // ReferenceError
    let a;
}

使用let声明变量前,该变量都不可用,也就是大家常说的“暂时性死区”

最后,let不允许在相同作用域中重复声明


let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared
注意的是相同作用域,下面这种情况是不会报错的

let a = 20
{
    let a = 30
}

因此,我们不能在函数内部重新声明参数


function func(arg) {
  let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

3、const
const声明一个只读的常量,一旦声明,常量的值就不能改变


const a = 1
a = 3
// TypeError: Assignment to constant variable.
这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

const a;
// SyntaxError: Missing initializer in const declaration

如果之前用var或let声明过变量,再用const声明同样会报错


var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量

对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变

const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
其它情况,constlet一致

4、区别
var、let、const三者区别:

  • 变量提升
  • 暂时性死区
  • 块级作用域
  • 重复声明
  • 修改声明的变量
    变量提升
    var 声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined

let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错
let / const 不存在变量提升是不完全正确的,只能说由于暂时性死区的存在使得我们无法直观感受到变量提升的效果。
let 和 const 定义的变量都会被提升,但是不会被初始化,不能被引用,不会像var定义的变量那样,初始值为undefined。
当进入let变量的作用域时,会立即给它创建存储空间,但是不会对它进行初始化。

变量的赋值分为三个阶段:

  • 创建变量,在内存中开辟空间
  • 初始化变量,将变量初始化为undefined
  • 真正赋值

关于let、var和function:

let 的「创建」过程被提升了,但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。

// var
console.log(a)  // undefined
var a = 10

// let 
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

暂时性死区
var不存在暂时性死区

let和const存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

// var
console.log(a)  // undefined
var a = 10

// let
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

块级作用域
var不存在块级作用域

let和const存在块级作用域


// var
{
    var a = 20
}
console.log(a)  // 20

// let
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明
var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量
var和let可以

const声明一个只读的常量。一旦声明,常量的值就不能改变


// var
var a = 10
a = 20
console.log(a)  // 20

//let
let b = 10
b = 20
console.log(b)  // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

能用const的情况尽量使用const,其他情况下大多数使用let,避免使用var文章来源地址https://www.toymoban.com/news/detail-532658.html

到了这里,关于ES6知识点汇总(1)--var/let/const的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6系列之let、const、箭头函数使用的坑

    变量提升 块级作用域的重要性 箭头函数this的指向 rest参数和arguments Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在老版本的浏览器执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。  上面的原始代码用了箭头函数,Babel将其转

    2024年02月14日
    浏览(43)
  • const、let、var区别

    let和const是ES6新增的声明变量的,之前声明变量的是var。 ES6 新增了 let 命令,用来声明变量。它的用法类似于 var ,但是所声明的变量,只在 let 命令所在的代码块内有效。 上面代码在代码块之中,分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个

    2024年02月08日
    浏览(45)
  • const、var、let用法

    当使用 var 声明变量时,该变量的作用域是在最近的函数体内,而不是块级作用域(例如 if 语句、 for 循环等)。这意味着在函数内部,无论变量是在函数的哪个位置声明的,它都可以被访问到。 另外,使用 var 声明的变量具有变量提升(hoisting)的特性。这意味着变量声明会

    2024年02月11日
    浏览(56)
  • ES6 全详解 let 、 const 、解构赋值、剩余运算符、函数默认参数、扩展运算符、箭头函数、新增方法,promise、Set、class等等

    ​ ECMAScript 6.0,简称 ES6,是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaSc

    2024年04月15日
    浏览(46)
  • var、let、const 之间的区别

    在 ES5 中 , 顶层对象的属性和全局变量是等价的 , 用 var 声明的变量既是全局变量 , 也是顶层变量。 注意 : 顶层对象 , 在浏览器环境指的是 window 对 象 , 在 Node 指的是 global 对象 使用 var 声明的变量存在 变量提升 的情况 在编译阶段 , 编译器会将其变成以下执行 使用 var , 能够

    2024年02月03日
    浏览(39)
  • 【JavaScript】 var let const 的区别

    在JavaScript中,let、var和const是用于声明变量的,它们之间有一些重要的区别: var是在ES5(ECMAScript 5)中引入的声明变量的。 变量声明的作用域是函数作用域,而不是块级作用域。这意味着在函数内声明的变量在整个函数范围内都是可见的。 如果在块级作用域内

    2024年02月15日
    浏览(45)
  • 深入解析JavaScript中的var、let和const

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​  ​         变量的声明是编程中非常基础和关键的概念。在ES6之前,JavaScript只有var一种声明变量的方式。ES6带来了let和const来声明变量

    2024年01月20日
    浏览(45)
  • let、const、var的区别,解构赋值,箭头函数

    使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。 使用const声明的是常量,在后面出现的代码块中,不能在修改改常量的值。 var let const 函数级作用域 块级作用域 块级作用域 变量提

    2024年02月05日
    浏览(54)
  • JavaScript 中的 Var、Let 和 Const 有什么区别

    ES2015(ES6)推出了许多闪亮的新功能。从 2020 年开始,我们假设许多 JavaScript 开发人员已经熟悉并开始使用这些功能。 尽管这个假设可能部分正确,但是其中某些功能可能对一些开发人员来说仍然是个谜。 ES6 附带的功能之一是添加了 let 和 const ,可用于变量声明。问题是,

    2024年02月09日
    浏览(71)
  • 【React系列】ES6学习笔记(一)let与const、解构赋值、函数参数默认值\rest参数\箭头函数、数组和对象的扩展、Set和Map等

    本文参考自电子书《ECMAScript 6 入门》:https://es6.ruanyifeng.com/ 尽量使用 let 声明变量,而不是 var 。 let 声明的变量是 块级作用域 , var 声明的变量是 全局作用域 。 使用 let 变量 必须先声明再使用,否则报错,不存在变量提升 。相对的 var 声明的变量如果提前使用,不会报错

    2024年02月03日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包