(译文)学习ES6非常棒的特性-深入研究var, let and const
Var
var firstVar; //firstVar被声明,它的默认值是undefined
var secondVar = 2; //secondVar被声明,被赋值2
先看一个例子:
var increment = 1;
if (increment === 1){
var increment; //重新声明
//Do something
}
console.log(increment); //这里会打印出什么?
声明提升
把所有的变量的声明都放到当前代码作用域的开头。
相当于这样:
var increment;
var increment;
increment = 1;
if (increment === 1){
...
}
console.log(increment); //print 1
在看一个例子:
var x = 0;
y = 1;
console.log(sumOf(x,y));
var y;
function sumOf(a, b){ return a + b; }
相当于这样:
var x;
var y;
function sumOf(a, b){ return a + b; }
x = 0;
y = 1;
console.log(sumOf(x,y));
声明提升只作用于声明,不作用于赋值,原来在哪一行赋值,还是原来的位置:
console.log(x);
x = 3;
var x = 1;
console.log(x);
将会打印:undefined, 1,而不是1, 3
执行上下文
代码执行的环境。
1 全局
2 函数
3 Eval函数内
注意代码块不是一个执行上下文。
function testMe(){
while(true){
var x = 2;
break;
}
console.log(x);
//仍然会打印出2
}
let
let是块作用域
function testMe(){
while(true){
let x = 2;
break;
}
console.log(x); //ReferenceError: x is not defined
}
1 这样的好处就是保证了变量不会被其他位置声明影响:
var x = 1;
{
let x = 3;
}
console.log(x); //仍然是1
2 可以不用闭包实现私有成员:
var Person;
{
let name;
Person = function(_name){
name = _name;
};
Person.prototype.getName = () => name;
}
var person = new Person('Maya');
console.log(name); //什么都不会打印
console.log(person.getName()); //Maya
3 声明提升不会作用域let
x = 5; //ok
y = 2; //ReferenceError: y is not defined
let y;
var x;
4 let声明的变量不会挂在window下面
var x = 5;
let y = 4;
console.log(this.x); //5
console.log(window.x); //5
console.log(this.y); //undefined
console.log(window.y); //undefined
5 重复声明会报错
const
有些数据需要存起来作为常量,比如模板,字符串等等。如何保证它们不会被修改呢?
const!const和let一样是块作用域,它有let的所有特性:
①声明的变量只在块作用域内能用
②没有变量声明提升
③声明的变量不会给window
④不能被重复声明
另外一点:
⑤它必须初始化的时候就被赋值
const myConstants; //SyntaxError: Missing initializer in const declaration
⑥只能被赋值一次。
注意一点的是,如果const声明的是对象、数组的话,仍然可以修改:
const myConstant = {name: "Constant"};
myConstant = {name: "new Constant"}; //Error 不能被重新赋值
myConstant.name = "new Constant"; //OK 可以被修改
console.log(myConstant.name); //new Constant
const arr = [1, 2];
arr = [2,3]; //Error
arr[0] = 2; //OK
console.log(arr); //[2,2]
let和const的好处
1 避免污染全局window
2 避免隐藏错误:比如修改常量,错误的更新了变量的值等等
3 避免了不必要的变量提升
4 让代码更加可靠,更易组织,更易读。
原文:
https://medium.com/front-end-hacking/es6-cool-stuffs-var-let-and-const-in-depth-24512e593268
作者知乎/公众号:前端疯
(译文)学习ES6非常棒的特性-深入研究var, let and const的更多相关文章
- (译文)学习ES6非常棒的特性——Async / Await函数
try/catch 在使用Async/Await前,我们可能这样写: const main = (paramsA, paramsB, paramsC, done) => { funcA(para ...
- (译文)学习ES6非常棒的特性-字符串常量基础
字符串常量基础 在ES2015之前我们是这么拼接字符串的: var result = 10; var prefix = "the first double digit number I le ...
- ES6非常棒的特性-解构
https://blog.csdn.net/maoxunxing/article/details/79772946
- 用简单的方法学习ES6
ES6 简要概览 这里是ES6 简要概览.本文大量参考了ES6特性代码仓库,请允许我感谢其作者@Luke Hoban的卓越贡献,也感谢@Axel Rauschmayer所作的[优秀书籍]//explo ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- 【系统学习ES6】新专题发布
我要发免费专题了,向下看 公众号和博客都有一阵没更新了,丢了一些粉儿,但是也很庆幸,时时还会有人关注.我并不是什么专业讲师,文章都是利用业余时间手工原创.在这里非常感谢各位的支持和厚爱. 这个月开始, ...
- 用vue.js学习es6(一):基本工具及配置
一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...
- 学习ES6生成器(Generator)
背景 在JS的使用场景中,异步操作的处理是一个不可回避的问题,如果不做任何抽象.组织,只是“跟着感觉走”,那么面对“按顺序发起3个ajax请求”的需求,很容易就能写出如下代码(假设已引入jQuery) ...
- 你是否也在学习ES6 Promise时遇到过这个问题?
背景 周末闲来无事,随便翻看了一下阮一峰老师的<ES6 标准入门>第2版,ps:之前在阮一峰老师的官网看过电子版,感觉干货满满,所以就买了纸质版:当看到第16章第4节 'Promise.p ...
随机推荐
- BFS POJ2251 Dungeon Master
B - Dungeon Master Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u ...
- Java 第三章 选择结构
第三章 选择结构 if基本语法: if(条件){// 表达式 // 代码块 } eg: int a = 10; if(a > 1){ System.out.println("内容& ...
- Acperience HDU - 5734
Deep neural networks (DNN) have shown significant improvements in several application domains includ ...
- C#图解教程 第十八章 枚举器和迭代器
枚举器和迭代器 枚举器和可枚举类型 foreach语句 IEnumerator接口 使用IEnumerable和IEnumerator的示例 泛型枚举接口迭代器 迭代器块使用迭代器来创建枚举器使用迭代 ...
- C#抽象方法与抽象实例--C#基础
1.抽象方法与抽象类的声明 1)抽象类和抽象方法声明必须包含abstract 2)抽象方法的声明没有方法体:public abstract void fly(); 3)抽象类和抽象法前加上public ...
- .NET Core使用skiasharp文字头像生成方案(基于docker发布)
一.问题背景 目前.NET Core下面针对于图像处理的库微软并没有集成,在.NET FrameWork下我们已经习惯使用System.Drawing类库做简单的图像处理,到了.NET Core下一脸 ...
- Python 终端输出字体颜色
终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表 ...
- 微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...
- ajax+struts2 实现省份-城市-地区三级联动
1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...
- css学习の第五弹—单位和值
一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...