美文网首页ES6
ES6学习-var、let、const

ES6学习-var、let、const

作者: YINdevelop | 来源:发表于2018-03-02 11:23 被阅读14次

拜读了技术胖大神的博客,参考关于es6的内容进行消化总结。http://jspang.com/2017/06/03/es6/
1.在es5中我们只能使用var来声明变量,由var声明的变量在函数外叫全局变量,在函数内叫局部变量。也就是说es5只有一个函数作用域,和一个全局作用域。这样的缺点是不放在函数里面的变量就成为全局变量,不销毁的前提下,永远存在于内存中,造成内存泄漏。所以自然而然,es6发布了let。

2.在es5中声明常量的方法比较复杂且不常用,这里就不说了,具体可以搜下Object.defineProperty()。所以自然而然,es6发布了const。

1.var 和 let

1、let所声明的变量,只在let命令所在的代码块内{ }有效。

使用var声明

var a=2;
{
   var a=3;
}
console.log(a); //3

因为var是全局声明的。所以为3

对比:使用let局部声明

var a=2;
{
   let a=3;
}
console.log(a); //2



var b=null
{
   let c=3;
}
console.log(b); //报错 ,Uncaught ReferenceError: b is not defined
console.log(c); //报错 ,Uncaught ReferenceError: b is not defined

上面两个例子说明了let是局部变量声明,let声明只在区块内起作用,外部是不可以调用的。

有些刚接触JavaScript的小伙伴会疑惑了,我感觉let还没有var好用,其实let是防止你的数据污染的,在大型项目中是非常有用处的。现在看一个循环的例子,我们来看一下let的好处。

使用var声明

for (var i = 0; i < 5; i++) {
    console.log('循环体中:' + i);
}
console.log('循环体外:' + i);  

//结果
循环体中:0
循环体中:1
循环体中:2
循环体中:3
循环体中:4
循环体外:5

上面例子,i循环完后,最后变为10仍存在于内存中。一般循环体中,我们只是需要循环变量在循环体内。并不想让其成为全局的。

对比:使用let声明

for(let i=0;i<5;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

//结果
循环体中:0
循环体中:1
循环体中:2
循环体中:3
循环体中:4
报错 ,Uncaught ReferenceError: i is not defined

从这可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明,减少var声明去污染全局空间。

2.不存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错,uncaught ReferenceError: bar is not defined
let bar = 2;

3.let不允许在相同作用域内,重复声明同一个变量。

{
  let a = 10;
  var a = 1; //报错 Uncaught SyntaxError: Identifier 'a' has already been declared
}

{
  var a = 1;
  let a = 10; //报错 Uncaught SyntaxError: Identifier 'a' has already been declared
}

{
  let a = 10;
   a = 1;
   console.log(a) //1
}

2.const(常数,不变的)声明常量

什么叫常量,通常不会改变的量叫做常量。在程序开发中,有些变量是希望声明后,这个变量始终不变,就需要用const进行声明。

const a="JSPang";
var a='技术胖';
console.log(a); //报错,Duplicate declaration "a" 
即重复声明a

原因就是我们const声明的变量是不可以改变的。举个更浅显的例子:如果把变量比作一个黑板上的字,写完可以擦掉再改。那么常量就是一块墓碑,一次刻印,终身受用。

相关文章

  • ES6 学习笔记

    ES6 var let const 的使用 var let const 声明变量 全局作用域 和 块级作用域的区...

  • 总结一下前端常见javascript基础面试题:

    1.var ,let 和const的区别: let和const是es6新增的语法, let和var都可以定义变量,...

  • javascript碎片知识000

    const let var 3者的区别。 const 和 let 为es6新增的定义变量的关键字。 var存在...

  • (JS)

    ES6 let、const和var的区别 let和const声明变量不存在变量提升 let和const不能重复声明...

  • react 入门基础(一)之ES6

    ####ES6 let const var 三者的区别 ### 1. let const 不能重复声明变...

  • es6,es7,es8语法总结

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • ES 6 7 8 随笔 QAQ

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • js常见知识点--第二篇

    一、var 、let 、const的区别 var是ES5提出的,let和const是ES6提出的。var不存在块级...

  • ES6基础知识

    let const es6 提供了新的声明方式代替以前的 var let construction var不支...

  • es6总结一

    es6基础 let和const命令 let和const用于声明变量let跟var的区别 1、let定义过的变量不能...

网友评论

    本文标题:ES6学习-var、let、const

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