纸上得来终觉浅,绝知此事要躬行,欢迎关注「明祖笔记」!es6案例讲解之第一弹:变量声明var、let和const。
ES5(2009)、
ES6(2015)、
ES7(2016)、
ES8(2017)、
ES9(2018)、
ES10(2019)、
ES11(2020)、
ES12(2021)
ECMA之es6
es6语法图谱
es6-es12都有哪些新语法
带着问题聊一聊:
1、已经有var了,为什么还新增了let和const?
2、let和const有什么区别,解决了var不能解决的什么问题?
3、var、let和const分别都在什么场景下用?
var,let,const(变量声明)
var
① 重新赋值和重复定义的
② 属于function scope 函数作用域,除非在函数体内定义,否则都属于全局变量
③ 函数作用域容易污染全局变量(可以修改全局变量的值),或有意无意修改了别人代码中的全局变量,为了改变这种情况,可以使用立即执行函数,使变量私有化
④ 可以通过window来访问
案例代码:
1. 重新赋值和重复定义的(很有可能我会覆盖别人已经声明的变量,导致一些奇怪的bug,而且很难定位)var price = 100;var price = 200;2. 函数体内声明的是局部变量,外边调用不到function getPrice() { var price = 100; console.log(price)}getPrice()console.log(price)3. 在块级作用里声明的变量一样可以在外边调用,是一个全局作用于,而我们现在只希望它是一个局部变量var price = 100;var count = 10;if(count > 5) { var discount = price * 0.6; console.log(`This discount is ${discount}`)}console.log(discount);let
① 属于block scope 块级作用域
② 不能在同一作用域重复声明
③ 可以给声明的变量重新赋值
④ let和const有临时性死区不会进行变量提升,变量和函数调用必须在声明以后
⑤ 不可以通过window来访问
const
① let有的特性const都有除了一下两点
1、不能在同一作用域重复声明
2、不能先声明后赋值,必须在声明的时候同时赋值
案例代码:
let count = 10;let count = 5;let discount = 0.9; //在全局作用域中定义的,是一个全局变量if( count > 5 ) { let discount = 0.5;}console.log(discount) //0.9 在局部作用域中定义的,是一个局部变量应用类型的可以重新给属性赋值const person = { name: 'mignzu', age: 18}person = { name: 'bob', age: 20}person.name = 'Harlan'const Harlan = Object.freeze(person) //不允许改变对象的属性let 和const优势:
① 代替立即执行函数
② 立即执行函数用来生成一个私有变量,使变量私有化
案例代码:
( function() { var mz = 'mingzu'; console.log(mz) })() 这块声明立即执行函数只是为了把变量私有化,不利于代码的可读性,这样就可以用let和const代替//用JS创建10个<a>标签,点击的时候弹出对应的序号for(var i = 0; i < 10; i++) { (function(i) { var a = document.createElement('a'); a.innerHTML = i + '<br/>' a.addEventListener('click',function(e){ e.preventDefault(); alert(i) }) document.body.appendChild(a); })(i)}let、const和var的使用(https://mathiasbynens.be/notes/es6-const):
默认使用const
当变量需要重新更新赋值的时候使用let
在es2015中使用var,在es6中不建议使用var
小知识:
① 没有用var声明的变量(无论是在函数内声明还是函数外声明)是作为全局对象window的属性存在的,并不是全局变量,不过都在全局作用域里
② es6之前,局部作用于就是指函数作用域