JavaScript es6中的var、let和const

JavaScript es6中的var、let和const

2015 年 6 月,ECMAScript 6 (简称 es6,又称为ECMAScript 2015)正式通过,成为国际标准。

let 允许创建块(block)级作用域,ES6 推荐使用 let 定义变量,而非 var。

块作用域由 { } 包括,if语句和 for语句里面的{ }也属于块作用域。

var 声明的变量在任何地方都能重复声明,let 声明的变量在相同的作用域不能重复声明。如:

let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的。如:

非函数内(在函数体外)使用var或let声明的变量拥有全局的作用域,是全局变量。如:

在函数内使用var或let声明的变量是局部变量,只能在函数内部使用,不能在函数外部使用。如:

var有变量提升(hoisting)特性, let 没有变量提升特性。

变量提升,即编译时提前将后面声明的变量提前放入内存中,供上下文语句执行时调用;但并不是指在编译时改变语句的顺序。

var具备变量提升(hoisting)特性的例子:

代码段

console.log(i);

var i;

不报错,相当于

var i;

console.log(i);

代码段

console.log(j);

let j;

将报错

参见下图:

注意,变量提升并不是指在编译时改变语句的顺序,例如

上面的代码最后一行的语句是 var a = 1,即对变量进行了申明并赋值,但是最后输出仍然是 undefined 而不是 1,证明变量提升行为只会对变量进行申明操作,并不会对其初始化赋值,不管原语句是否有赋值操作。

同样在块级作用域有效的另一个变量声明方式是 const,const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。const定义的对象属性是否可以改变呢?可以。如:

  const ARR = [5,6];

  ARR.push(7);

  ARR; // [5,6,7]

  ARR = 10; // TypeError,ARR指向一个新对象,即让指针改变将报错

打开浏览器,按下F12键,在控制台中输入上述代码行测试之,参见下图:

对象是引用类型,ARR中保存的仅是对象的指针,这就意味着,const仅保证指针不发生改变,修改对象的属性不会改变对象的指针,所以是被允许的。也就是说const定义的引用类型只要指针不发生改变,其它的不论如何改变都是允许的。

小结:

非函数内(在函数体外)使用var或let声明的变量拥有全局的作用域,是全局变量。

在函数内使用var或let声明的变量是局部变量,只能在函数内部使用。

var 声明的变量在任何地方都能重复声明。let 声明的变量在相同的作用域不能重复声明,在不同作用域,或不同块级作用域中是可以重新声明赋值的。

var有变量提升(hoisting)特性, let 没有变量提升特性。

var定义的变量,没有块(block)的概念,可以跨块访问, 不能跨函数访问。

let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。

let 和 const 声明只在最靠近的一个块中(花括号内)有效,const用来定义常量,使用时必须初始化(即声明时必须赋值),只能在块作用域里访问,而且不能修改。const定义的对象属性可以改变,但不可指向一个新对象。

进一步了解:https://www.jb51.net/article/221216.htm

JS变量和函数式编程-var、let、const、全局变量、局部变量、块级作用域、循环作用域_yanggfann的博客-CSDN博客

var 描述 - JavaScript | MDN

let - JavaScript | MDN

const - JavaScript | MDN

附录、浏览器控制台(Conaole)使用简介

1如何打开浏览器控制台(Conaole)?

打开浏览器按下F12键即可。

实际上,按下F12键,可以打开浏览器自带的开发工具,有多个面板,是一套内置于浏览器中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。其中控制台(Console)面板基本上就是一个命令行窗口,你可以在提示符下,键入各种命令。Microsoft Edge浏览器的参见下图:

2在浏览器控制台中如何输入多行语句?

当你想输入多行代码时,可以用shift+enter键。输入完毕回车得到结果。

let x=2 //按shift+enter键

let y=5  //按shift+enter键

console.log('和:',x+y)  //按enter键

参见下图:

3、在浏览器控制台中使用console.log()语句,如console.log("Hello"),没有显示的原因及解决:

原因筛选框中有内容,删除之即可,参见下图:

猜你喜欢

转载自blog.csdn.net/cnds123/article/details/120549461