首页 >> js开发 >> js代码JavaScript中ES6规范中let和const的用法和区别
js代码JavaScript中ES6规范中let和const的用法和区别
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
ES6—— let 和 const 命令引言本文主要讲解ES6中变量的相关操作,变量的命名, 讲解 var、 let 、 const 三者的区别正文ES6中的 let 和 const 都是用来声明变量的, 他们与 var 有所区别let 命令我们都知道在for循环中,我们命名的变量 i 一般都只是为了在这个循环中使用,才临时命名的, 我们希望循环结束后,这个变量就消失, 但是却相反,用 var 命名的变量,在 for 循环结束后并不会销毁,而会存在于全局中。
for(var i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
for(var i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
/* 输出结果
*/
循环1
循环2
循环3
循环4
5
// 这里是循环外输出的i
/* 输出结果
*/
循环1
循环2
循环3
循环4
5
// 这里是循环外输出的i
但是如果我们在 for 循环中,用到 let 去命名变量会怎么样呢?
for(let i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
for(let i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
/* 输出结果
*/
循环1
循环2
循环3
循环4
undefined
// 这里是循环外输出的i,显示未定义
/* 输出结果
*/
循环1
循环2
循环3
循环4
undefined
// 这里是循环外输出的i,显示未定义
这样的话就解决了因为 var 命名导致的变量泄露的问题了, 其实它的本质就是作用域, let 只作用于他自身所在的代码块内,而 var 是针对全局都有效的。例如这一个简单的例子:
{
let i = 1
var n = 2
}
console.log(i)
console.log(n)
{
let i = 1
var n = 2
}
console.log(i)
console.log(n)
/* 输出结果 */
undefined
2
/* 输出结果 */
undefined
2
可以看到, let 命名的变量只存在于那个代码块内,到外部就访问不到了,而 var 就是针对全局命名的。const 命令const 和 let 类似,也是命名的变量只能在它所在的代码块内能被访问得到,到外部就无法被访问到,但是 const 与 let 的区别就在于, const 命名的变量是一个只读变量,简而言之就是命名了就无法在后面被修改,例如这个例子:
const a = 'apple'
let b = 'orange'
a = 'watermelon'
b = 'banana'
const a = 'apple'
let b = 'orange'
a = 'watermelon'
b = 'banana'
/* 输出结果 */
a = 'watermelon'
^
/* 输出结果 */
a = 'watermelon'
^显而易见, 系统会直接报错, 因为 const 命名的变量 a 是无法改变的, 后续无法对其进行赋值。其实 const 命名变量以后, 也不是说就真的无法改变了, 因为const命名时其实是把箭头指向了内存中的一个对象, 只要不改变这个对象地址, const 命名的变量还是可以变化的,例如:
const list1 = []
list1.push('变化1')
console.log(list1)
// ['变化1']
const list1 = []
list1.push('变化1')
console.log(list1)
// ['变化1']
可以看到 list1.pish(' 变化1 ') 不会改变 变量 list1在内存中的地址。但是 list1 = [ '变化1' ] 就会改变 list1 在内存中的地址,所以会报错
const list1 = []
list1 = ['变化1']
console.log(list1)
// 报错:list1 = ['变化1']
^
const list1 = []
list1 = ['变化1']
console.log(list1)
// 报错:list1 = ['变化1']
^
结束语这就是 let 和 const 的简单应用,希望对大家有所帮助, 下一篇ES6(2)将讲解变量的解构赋值
for(var i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
for(var i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
/* 输出结果
*/
循环1
循环2
循环3
循环4
5
// 这里是循环外输出的i
/* 输出结果
*/
循环1
循环2
循环3
循环4
5
// 这里是循环外输出的i
但是如果我们在 for 循环中,用到 let 去命名变量会怎么样呢?
for(let i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
for(let i=0; i<5; i++) {
console.log('循环'+ i)
}
console.log(i)
/* 输出结果
*/
循环1
循环2
循环3
循环4
undefined
// 这里是循环外输出的i,显示未定义
/* 输出结果
*/
循环1
循环2
循环3
循环4
undefined
// 这里是循环外输出的i,显示未定义
这样的话就解决了因为 var 命名导致的变量泄露的问题了, 其实它的本质就是作用域, let 只作用于他自身所在的代码块内,而 var 是针对全局都有效的。例如这一个简单的例子:
{
let i = 1
var n = 2
}
console.log(i)
console.log(n)
{
let i = 1
var n = 2
}
console.log(i)
console.log(n)
/* 输出结果 */
undefined
2
/* 输出结果 */
undefined
2
可以看到, let 命名的变量只存在于那个代码块内,到外部就访问不到了,而 var 就是针对全局命名的。const 命令const 和 let 类似,也是命名的变量只能在它所在的代码块内能被访问得到,到外部就无法被访问到,但是 const 与 let 的区别就在于, const 命名的变量是一个只读变量,简而言之就是命名了就无法在后面被修改,例如这个例子:
const a = 'apple'
let b = 'orange'
a = 'watermelon'
b = 'banana'
const a = 'apple'
let b = 'orange'
a = 'watermelon'
b = 'banana'
/* 输出结果 */
a = 'watermelon'
^
/* 输出结果 */
a = 'watermelon'
^显而易见, 系统会直接报错, 因为 const 命名的变量 a 是无法改变的, 后续无法对其进行赋值。其实 const 命名变量以后, 也不是说就真的无法改变了, 因为const命名时其实是把箭头指向了内存中的一个对象, 只要不改变这个对象地址, const 命名的变量还是可以变化的,例如:
const list1 = []
list1.push('变化1')
console.log(list1)
// ['变化1']
const list1 = []
list1.push('变化1')
console.log(list1)
// ['变化1']
可以看到 list1.pish(' 变化1 ') 不会改变 变量 list1在内存中的地址。但是 list1 = [ '变化1' ] 就会改变 list1 在内存中的地址,所以会报错
const list1 = []
list1 = ['变化1']
console.log(list1)
// 报错:list1 = ['变化1']
^
const list1 = []
list1 = ['变化1']
console.log(list1)
// 报错:list1 = ['变化1']
^
结束语这就是 let 和 const 的简单应用,希望对大家有所帮助, 下一篇ES6(2)将讲解变量的解构赋值
相关文章:
- jsvue vant中picker组件的使用js大全
- js代码JavaScript代码模拟鼠标自动点击事件示例
- js在antd4.0中Form使用initialValue操作js大全
- jsvue+iview使用树形控件的具体使用js大全
- jsVue中使用Echarts仪表盘展示实时数据的实现js大全
- jsReact Ant Design树形表格的复杂增删改操作js大全
- js在vue中使用vant TreeSelect分类选择组件操作js大全
- jsvantUI 获得piker选中值的自定义ID操作js大全
- jsReact Native登录之指纹登录篇的示例代码js大全
- js如何在vue中使用百度地图添加自定义覆盖物(水波纹)js大全