《ES6学习1》 let和const

2019-05-20 admin

1 基本用法

ES6新增了let和const命令。前者用法类似于var用于声明变量,后者用于声明一个只读的的常量,声明后常量的值不能改变,这意味着const一旦声明常量,就必须立即初始化,不能留到以后赋值,否则将会报错。通过let和const命令声明的变量和常量都只在命令所在的代码块内有效。

{
  let a = 10;
  const b = 3;
  b = 3.14 // TypeError: Assignment to constant variable.
  var c = 1;
}
a //  ReferenceError: a is not defined.
b//  ReferenceError: b is not defined.
c // 1

for循环的计数器适用let命令,计数器i只在for循环体内有效,在循环体外引用将会报错。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
      console.log(i);
  };
}
a[5] (); // 10
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[5] (); // 5

第一段代码,变量i是var声明的,是一个全局变量,每一次循环都会改变i的值,因为a[1]到a[10]函数内的console.log(i)都指向同一个全局的i,所以运行结束输出的是最后一轮的i值。第二段代码,变量i是let声明,当前的i只在本轮循环有效,所以每一轮循环的i都是一个新的变量,于是最后输出5。

另外,for循环有一个有趣的地方,就是设置循环变量的那部分是一个父作用域,循环体内部是一个单独的子作用域。

for (var i = 0; i < 3; i++) {
  let i = 'adc';
  console.log(i);
}
//adc 
//adc
//adc

正确后运行后连续输出3次adc。表面函数内部的i和计数器i不在同一个作用域。

2 基本特点

2.1 不允许重复声明

let和const不允许在相同的作用域内重复声明同一个变量。

// 报错
function () {
  let a =  5;
  var a = 5;
  // 同let a = 3;
}

函数内也不能重复声明参数。

function (arg) {
  let arg; // 报错    
}

function (arg) {
  {
    let arg; // 不报错
  }
}
var card =  "hello";
let age = 20;
// 以下都报错
const card = "good";
const age = 30;

2.2 不存在变量提升

var命令会发展“变量提升”现象,变量在可以声明之前使用,值为undefined。let和const命令改变了这种行为,它们声明的变量和常量一定要在声明后使用,否则便会报错。

//let情况
console.log(a); // 报错
let a = 2;
//const情况
if(true){
  console.log(b); // 报错
  const b = 1;
}

2.3 暂时性死区

只要块级作用域内存在let命令,它所声明的变量就绑定在这个区域,不再受外部的影响。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的,这在语法上成为暂时性死区。const命令同理。

[转载]原文链接:https://segmentfault.com/a/1190000019235848

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65407.html

文章标题:《ES6学习1》 let和const

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
回到顶部