美文网首页
var let const

var let const

作者: 笨鱼天阳 | 来源:发表于2023-01-28 19:12 被阅读0次

菜鸟学前端

本文:https://blog.csdn.net/CrazyApes/article/details/128957891

@[toc]

说实话,在看到这个之前,我只知道 var,以前也只用过这玩意。
后面那俩都不知道是干啥用的。
感谢同桌的提示。
记!

var

varES5 提出的。用于声明变量。

什么是 ES5
ES5 全称 ECMAScript5,即 ES5,是ECMAScripts的第五次修订(第四版因为过于复杂废弃了),又称ECMAScript2009,于 2009 年完成标准化。

var num = 1;
var str = 'a';
var fun = function(){};
var obj = {};
var bean = new ABC(); /* 需要提前声明过ACB这个类型 */

var 就是一切,想是啥就可以是啥,而且是 弱类型。就算是赋值完了还可以赋值为其它类型的值。
当然因为是重复赋值,肯定只有最后一次有效。

var any = 1;
any = 'a';
any = function(){};
any = {};
any = new ABC(); /* 需要提前声明过ACB这个类型 */
any = false;
console.log(any);

// print 
false

var 还可以重复声明,就是说即使你声明过变量any ,还可以再次声明 any
同样的,因为是同一个变量名,后者肯定会覆盖前者。
上面那段代码还可以这么写。

var any = 1;
var any = 'a';
var any = function(){};
var any = {};
var any = new ABC(); /* 需要提前声明过ACB这个类型 */
var any = false;
console.log(any);

// print 
false

var 还可以 变量提升 !!!啥是变量提升? 额,大概是把自己变牛逼了。
你看,它可先使用,后声明。

console.log(any);
var any = false;

// print 
undefined

后来才了解到有个什么预解析过程,会提前加载这个变量。
类似于如下:

var any;
console.log(any);
any = false;

// print 
undefined

这样一来,结合以上特征,代码开始渐渐奇怪起来。

for(var index = 0;index < 10; index++ ){
     /* do something */
}

...
/* n 多代码之后 */
...

/* 脑抽了,突然想声明个index用来做某个标记位 */
var index; 
if (index) {
    console.log('already init !!!');
    console.log('index value:' + index);
} else {
    /* init something */
    console.log('init index');
    index = 1;
}

// print 
already init !!!
index value: 10

唉,啥情况,哪来的10???
大家可能说,上面那个for循环的锅。
但是在多人协作的情况下,代码没报错,执行结果却不是你想要的。
而且这种情况下,排查是个非常困难的事,因为真不知道谁在哪个地方突然声明了一个一样的变量。

而且再极端一些,那个for循环假设只在某些条件下才执行。
那么刚才那个代码就成了,你这个bug偶尔出现,偶尔消失。

let和const

letconst 都是 ES6 提出的。一个用于声明变量,一个用于声明常量。

什么是ES6
ES6, 全称 ECMAScript 6.0 ,即 ES6,是ECMAScripts的第六次修订,又称 ES2015,于2015年06 月发版,是 JavaScript 的下一个版本标准。

ES6 中有了块级作用域的概念,letconst 都是块级作用域。以 {} 代码块作为作用域范围,只能在代码块里面使用,不存在变量提升,只能先声明再使用,否则会报错。

if (true) {
   let a = 'let';
   var b = 'var';
}
 
console.log(b); // var
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
let c = 'c'

在代码块内,在声明变量之前,该变量都是不可用的。
这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ),在同一个代码块内,不允许重复声明。只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。不同代码块是可以重复声明的。

let a = 'let a'
if (true) {
    let a = 'let if a';
    console.log(a); // print 'let if a'

    let a = 'next same let'
    console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
}
console.log(a); // print 'let a'

const 声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,
对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。)

const any = 'abc';
const obj = {};

除了不可重复赋值的问题,其它和 let 作用域类似,功能类似。

写不动了

写不动了。。。后面有想法了再慢慢了解和补充。。

参考

谈谈ES5和ES6的区别
ES6的let和const
var、let、const的区别

相关文章

  • Android菜鸟学习js笔记 一

    一、var,const,let区别? var 变量,const 常量,let块级变量。

  • ES6_var、let与const

    var,let 与 const var 申明变量。 let 申明变量,更完美的 var。 const 申明常量(物...

  • TypeScript 02 - 变量声明

    在 TypeScript 中,var 还是 var,let 还是 let,const 还是 const,这里简单温...

  • JS中var、let、const区别

    在javascript中有三种声明变量的方式:var let const。let var const的区别?var...

  • js中const,var,let区别

    在javascript中有三种声明变量的方式:var let const。let var const的区别?var...

  • 面试题 var let const的区别 箭头函数和普通函数的区

    var let const 有什么区别 var var声明的变量可进行变量提升,let和const不会var可以重...

  • ES6学习

    1、 var let const var是函数作用域let和const是块级作用域,!const是常量,不能改变。...

  • ES6

    let var const var 可声明前置 let不可声明前置 let不可重复声明 存在块级作用域 const...

  • let和const

    let/const(常用) let和var 区别 let,const用于声明变量,用来替代老语法的var关键字,与...

  • js 2022经典面试题汇总

    1.JS数据类型有哪些 2.var、let、const区别 var存在变量提升,而let、const没有 let、...

网友评论

      本文标题:var let const

      本文链接:https://www.haomeiwen.com/subject/flxuhdtx.html