阮一峰的ES6文档(第一天)

目录

[ECMAScript 6简介](#ECMAScript 6简介)

let和const命名

let基本用法-块级作用域

不存在变量提升

不允许重复声明

暂时性死区

为什么需要块级作用域?

原因一:内层变量可能会覆盖外层变量

原因二:用来计数的循环遍历泄露为全局变量

const基本用法-声明只读的常量

与let命令相同点

let和const使用建议


ECMAScript 6简介

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

let和const命名

let基本用法-块级作用域

在es6中可以使用let声明变量,用法类似于var

⚠️ let声明的变量,只在let命令所在的代码块内有效

复制代码

复制代码

{ let a = 10; var b = 20; } console.log(a); //a is not defined console.log(b); //20

不存在变量提升

var命令会发生变量提升现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定在声明后使用,否则报错

复制代码

复制代码

//var的情况 console.log(c);//输出undefined var c = 30; //let的情况 console.log(c);// 报错ReferenceError let c = 30;

不允许重复声明

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

复制代码

复制代码

let c = 10; let c = 30; console.log(c); //报错 function func(arg) { let arg; // 报错 }

暂时性死区

了解的一个名词,说的就是letconst命令声明变量的特征。

在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为暂时性死区(temporal dead zone,简称 TDZ)

为什么需要块级作用域?
原因一:内层变量可能会覆盖外层变量
复制代码

复制代码

function foo(a){ console.log(a); if(1===2){ var a = 'hello 小马哥'; } } var a = 10; foo(a);

原因二:用来计数的循环遍历泄露为全局变量
复制代码

复制代码

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

变量i只用来控制循环,但是循环结束后,它并没有消失,用于变量提升,泄露成了全局变量。

解决循环计数问题

复制代码

复制代码

//解决方式一:使用闭包 var arr = [] for(var i = 0; i < 10; i++){ arr[i] = (function(n){ return function(){ return n; } })(i) } //解决方式二:使用let声明i var arr = [] for(let i = 0; i < 10; i++){ arr[i] = function () { return i; } }

const基本用法-声明只读的常量

这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。对于const来说,只声明不赋值,就会报错。

复制代码

复制代码

const a = 10; a = 20;//报错 const b; //报错

let命令相同点
  • 块级作用域
  • 暂时性死区
  • 不可重复声明
letconst使用建议

在默认情况下用const,而只有你在知道变量值需要被修改的情况下使用let

转载出处:阮一峰的ES6文档

相关推荐
Jammingpro1 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05155 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI7 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front8 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie8 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀9 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻9 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树9 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔9 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城9 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app