前端----let关键字、const关键字
文章目录
- 全局变量
- 局部变量
- JavaScript 块级作用域(Block Scope)
- let关键字
- 循环作用域
- 局部变量
- 全局变量
- HTML 代码中使用全局变量
- 重置变量
- 变量提升
- const 关键字
- 重置变量
- 变量提升
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
全局变量
在函数外声明的变量作用域是全局的:
实例
var carName = "Volvo";// 这里可以使用 carName 变量function myFunction() {// 这里也可以使用 carName 变量
}
全局变量在 JavaScript 程序的任何地方都可以访问。
局部变量
在函数内声明的变量作用域是局部的(函数内):
实例
// 这里不能使用 carName 变量function myFunction() {var carName = "Volvo";// 这里可以使用 carName 变量
}// 这里不能使用 carName 变量
函数内使用 var 声明的变量只能在函数内容访问,如果不使用 var 则是全局变量。
JavaScript 块级作用域(Block Scope)
使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。
{ var x = 2;
}
// 这里可以使用 x 变量
在 ES6 之前,是没有块级作用域的概念的。
ES6 可以使用 let 关键字来实现块级作用域。
let关键字
let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。
{ let x = 2;
}
// 这里不能使用 x 变量
重新定义变量
使用 var 关键字重新声明变量可能会带来问题。
在块中重新声明变量也会重新声明块外的变量:
实例
var x = 10;
// 这里输出 x 为 10
{ var x = 2;// 这里输出 x 为 2
}
// 这里输出 x 为 2
let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。
实例
var x = 10;
// 这里输出 x 为 10
{ let x = 2;// 这里输出 x 为 2
}
// 这里输出 x 为 10
循环作用域
使用 var 关键字:
实例
var i = 5;
for (var i = 0; i < 10; i++) {// 一些代码...
}
// 这里输出 i 为 10
使用 let 关键字:
实例
let i = 5;
for (let i = 0; i < 10; i++) {// 一些代码...
}
// 这里输出 i 为 5
在第一个实例中,使用了 var 关键字,它声明的变量是全局的,包括循环体内与循环体外。
在第二个实例中,使用 let 关键字, 它声明的变量作用域只在循环体内,循环体外的变量不受影响。
局部变量
在函数体内使用 var 和 let 关键字声明的变量有点类似。
它们的作用域都是 局部的:
// 使用 var
function myFunction() {var carName = "Volvo"; // 局部作用域
}// 使用 let
function myFunction() {let carName = "Volvo"; // 局部作用域
}
全局变量
在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。
它们的作用域都是 全局的:
// 使用 var
var x = 2; // 全局作用域// 使用 let
let x = 2; // 全局作用域
HTML 代码中使用全局变量
在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
在 HTML 中, 全局作用域是针对 window 对象。
使用 var 关键字声明的全局作用域变量属于 window 对象:
实例
var carName = "Volvo";
// 可以使用 window.carName 访问变量
使用 let 关键字声明的全局作用域变量不属于 window 对象:
实例
let carName = "Volvo";
// 不能使用 window.carName 访问变量
重置变量
使用 var 关键字声明的变量在任何地方都可以修改:
实例
var x = 2;// x 为 2var x = 3;// 现在 x 为 3
在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量:
var x = 2; // 合法
let x = 3; // 不合法{var x = 4; // 合法let x = 5 // 不合法
}
在相同的作用域或块级作用域中,不能使用 let 关键字来重置 let 关键字声明的变量:
let x = 2; // 合法
let x = 3; // 不合法{let x = 4; // 合法let x = 5; // 不合法
}
在相同的作用域或块级作用域中,不能使用 var 关键字来重置 let 关键字声明的变量:
let x = 2; // 合法
var x = 3; // 不合法{let x = 4; // 合法var x = 5; // 不合法
}
let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的:
let x = 2; // 合法{let x = 3; // 合法
}{let x = 4; // 合法
}
变量提升
JavaScript 中,var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明(JavaScript 变量提升)。
实例
// 在这里可以使用 carName 变量var carName;
let 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。
// 在这里不可以使用 carName 变量let carName;
const 关键字
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
实例
const PI = 3.141592653589793;
PI = 3.14; // 报错
PI = PI + 10; // 报错
const定义常量与使用let 定义的变量相似:
二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别:
const声明的常量必须初始化,而let声明的变量不用
const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。
var x = 10;
// 这里输出 x 为 10
{ const x = 2;// 这里输出 x 为 2
}
// 这里输出 x 为 10
const 声明的常量必须初始化:
// 错误写法
const PI;
PI = 3.14159265359;// 正确写法
const PI = 3.14159265359;
并非真正的常量
const 的本质: const 定义的变量并非常量,并非不可变,它定义了一个常量引用一个值。使用 const 定义的对象或者数组,其实是可变的。下面的代码并不会报错:
实例
// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};// 修改属性:
car.color = "red";// 添加属性
car.owner = "Johnson";
但是我们不能对常量对象重新赋值:
实例
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // 错误
以下实例修改常量数组:
实例
// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];// 修改元素
cars[0] = "Toyota";// 添加元素
cars.push("Audi");
但是我们不能对常量数组重新赋值:
实例
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // 错误
重置变量
使用 var 关键字声明的变量在任何地方都可以修改:
实例
var x = 2; // 合法
var x = 3; // 合法
x = 4; // 合法
在相同的作用域或块级作用域中,不能使用 const 关键字来重置 var 和 let关键字声明的变量:
var x = 2; // 合法
const x = 2; // 不合法
{let x = 2; // 合法const x = 2; // 不合法
}
在相同的作用域或块级作用域中,不能使用 const 关键字来重置 const 关键字声明的变量:
const x = 2; // 合法
const x = 3; // 不合法
x = 3; // 不合法
var x = 3; // 不合法
let x = 3; // 不合法{const x = 2; // 合法const x = 3; // 不合法x = 3; // 不合法var x = 3; // 不合法let x = 3; // 不合法
}
const 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的:
const x = 2; // 合法{const x = 3; // 合法
}{const x = 4; // 合法
}
变量提升
JavaScript var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明(JavaScript 变量提升)。
实例
carName = "Volvo"; // 这里可以使用 carName 变量
var carName;
const 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。
carName = "Volvo"; // 在这里不可以使用 carName 变量
const carName = "Volvo";
前端----let关键字、const关键字相关推荐
- ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字 变量的解构赋值 模板字符串 简化对象写法 箭头函数 => 参数默认值 rest参数 扩展运算 ...
- ES6(ECMASript 相关介绍,ECMASript 6 新特性---let,const关键字,变量的解析赋值,模板字符串,箭头函数,rest参数,spread扩展运算符,Symbol)
文章目录 1 ECMASript 相关介绍 1.1 es介绍 1.2 为什么要学习 ES6 1.3 ES6 兼容性 2 ECMASript 6 新特性 2.1.let 关键字 2.2. const 关 ...
- C++ const关键字的总结(全局/局部变量、修饰指针和引用、成员函数和数据成员、修饰类对象、const与宏定义的区别、Static与Const的区别)
const关键字 const关键字 1.什么是const 2.使用原理 2.1.const全局/局部变量 2.2.cosnt修饰指针和引用 2.3.const修饰函数参数 2.4.const修饰函数返 ...
- java const关键字_const关键字:终于拥有真正的常量声明语句
你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 -- const.在说 const 关键字之前,大叔先和你唠唠大叔自己对 const 的感受 -- JavaScript 尼玛终于可以声明真正的常量 ...
- Dart核心语言基础const关键字与final关键字的区别
题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧 本文描述 Dart 中 const 关键字与 final 关键字的基本使用知识点以及对比区别 ** 你可能需要 ...
- C++中的const关键字(zz)
[补充]mutable关键字 有时我们希望类的数据成员即使在const成员函数中,依然是可以修改的,这时就可以把它们声明为mutable来实现.这样的应用,比如记录各种操作的调用次数,这时,即使在co ...
- c++语言关键字大全,C++语言const 关键字使用方法图文详解
之前一直在学习C/C++,关于const的使用,这里出现一点,那里出现一点.知识用时方恨少,这一段时间正好各种笔试题,其中关于const的用法也是层出不穷,所以疲于在书本上各种翻,这里汇总一下,加深自 ...
- C语言之头文件,static与const关键字
[前言] 最近几个月在做一个C语言代码重构的项目,过程中也让我对之前在书本上学习到的东西有些补充和巩固,在本博中总结记录下,梳理下零碎的知识点和经验也加深印象,书写是为了更好地思考.平时也都是用印象笔 ...
- C 语言编程 — const 关键字
目录 文章目录 目录 const 关键字 修饰常量 修饰指针 修饰函数形参 修饰函数返回值 const 关键字 const 是 Constant(常量)的简写,有 3 大作用: 修饰常量,说明该常量的 ...
- final关键字_Dart核心语言基础const关键字与final关键字的区别
题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼搏过,尽力过,一切问心无愧 本文描述 Dart 中 const 关键字与 final 关键字的基本使用知识点以及对比区别. Dart核心基 ...
最新文章
- Kncok之绑定事件
- JSP页面元素-新手向
- JavaScript RegExp(正则)
- python判断set里是否包含值_【python】判断值是否在list和set的对比以及set的实现原理...
- 前端面试宝典(4)——必掌握
- 使用ASP.NET WEB API构建基于REST风格的服务实战系列教程(一)——使用EF6构建数据库及模型...
- DwgLocker 图纸加密外发控制系统
- 12306火车票查询
- <冈萨雷斯图像处理>局部直方图处理:直方图统计(Histogram Statistics)
- k8s二进制单节点部署
- OpenCV入门系列 —— boxFilter盒子滤波
- win10如何修改mac地址(亲测通过)
- Linux相关实验总结
- WK2124下linux驱动分析与移植
- 智慧城市App解决方案
- Linux 详解socket实现与网络编程接口
- 人件札记:开放式的办公室环境
- P2392 kkksc03考前临时抱佛脚
- python路径为什么要用双反斜杠\\
- SCAU 汇编语言 期末复习 (上)
热门文章
- 7月31日 细雨霏霏 不是我的泪
- Matlab学习报告 20-12-08
- 【HDU2019多校】E - Snowy Smile (最大字段和)
- 杭州治堵有“智慧” 阿里云数加激活城市大脑
- CleanMyMac X 4.8版本更新!
- ROSLAUNCH 的.launch/XML 语法
- pdf转换成word后有文字叠加_将PDF转换成Word文档后,为什么字体全变了?
- 重装系统,超详细教程
- QPS、TPS、并发用户数、吞吐量
- 计算机键盘的标点怎么打出来,电脑键盘上的标点符号怎么打(教你如何输入正确的标点符号)...