JavaScript—ES6的变量声明

简介: JavaScript—ES6的变量声明

ES6系列–变量声明

ES6系列

ES6系列–变量的解构赋值

let声明变量,const声明常量

var 和 let 、const的区别

作用域

let 和 const 是块级作用域,仅在整个大括号内可见

var 只有全局作用域和函数作用域

为什么需要块级作用域?

1.内层变量可能会覆盖外层变量。

2.用来计数的循环变量泄露为全局变量。

经典异步+var面试题

for (var i = 0; i < 5; i++) {
  setTimeout(function(){
    console.log(i)  // 5,5,5,5,5
  },1000)
}
console.log(i) // 5
for (let i = 0; i < 5; i++) {
  setTimeout(function(){
    console.log(i) // 0,1,2,3,4
  },1000)
}
console.log(i) // undefined

2、变量提升

var 存在变量提升,未声明使用默认值undefined

let、const未声明会提示ReferenceError
console.log(a)  //undefined
var a = 1
console.log(a)//Uncaught ReferenceError: a is not defined
let a = 1

3、重复声明

var 允许重复声明

let、const不允许在相同作用域重复声明

let a
let a//Uncaught SyntaxError: Identifier 'a' has already been declared

4、全局对象属性

let、const声明的全局变量不属于全局对象的属性

let a = 0
console.log(this.a)  //undefiend

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响

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

变量x使用let命令声明,但在声明之前,运行 typeof 会抛出一个 ReferenceError.

而如果一个变量根本没有被声明,使用 typeof 反而不会报错。

const定义常量

//以下内容引自阮一峰老师《ECMAScript 6入门》

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

如果真的想将对象冻结,应该使用Object.freeze方法。

image.png

上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

image.png


目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
2天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
2天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
2天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
8天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
13 3
|
19天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
18 4
|
23天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
19 1
|
2天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
9 0
|
26天前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
15 1
|
2月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
42 9