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的更多相关文章

  1. (译文)学习ES6非常棒的特性——Async / Await函数

    try/catch 在使用Async/Await前,我们可能这样写: const main = (paramsA, paramsB, paramsC, done) => { funcA(para ...

  2. (译文)学习ES6非常棒的特性-字符串常量基础

    字符串常量基础 在ES2015之前我们是这么拼接字符串的: var result = 10; var prefix = "the first double digit number I le ...

  3. ES6非常棒的特性-解构

    https://blog.csdn.net/maoxunxing/article/details/79772946

  4. 用简单的方法学习ES6

    ES6 简要概览 这里是ES6 简要概览.本文大量参考了ES6特性代码仓库,请允许我感谢其作者@Luke Hoban的卓越贡献,也感谢@Axel Rauschmayer所作的[优秀书籍]//explo ...

  5. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  6. 【系统学习ES6】新专题发布

    我要发免费专题了,向下看 公众号和博客都有一阵没更新了,丢了一些粉儿,但是也很庆幸,时时还会有人关注.我并不是什么专业讲师,文章都是利用业余时间手工原创.在这里非常感谢各位的支持和厚爱. 这个月开始, ...

  7. 用vue.js学习es6(一):基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  8. 学习ES6生成器(Generator)

    背景 在JS的使用场景中,异步操作的处理是一个不可回避的问题,如果不做任何抽象.组织,只是“跟着感觉走”,那么面对“按顺序发起3个ajax请求”的需求,很容易就能写出如下代码(假设已引入jQuery) ...

  9. 你是否也在学习ES6 Promise时遇到过这个问题?

    背景 周末闲来无事,随便翻看了一下阮一峰老师的<ES6 标准入门>第2版,ps:之前在阮一峰老师的官网看过电子版,感觉干货满满,所以就买了纸质版:当看到第16章第4节 'Promise.p ...

随机推荐

  1. BFS POJ2251 Dungeon Master

    B - Dungeon Master Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  2. Java 第三章 选择结构

    第三章   选择结构 if基本语法: if(条件){// 表达式 // 代码块 } eg: int a = 10; if(a > 1){ System.out.println("内容& ...

  3. Acperience HDU - 5734

    Deep neural networks (DNN) have shown significant improvements in several application domains includ ...

  4. C#图解教程 第十八章 枚举器和迭代器

    枚举器和迭代器 枚举器和可枚举类型 foreach语句 IEnumerator接口 使用IEnumerable和IEnumerator的示例 泛型枚举接口迭代器 迭代器块使用迭代器来创建枚举器使用迭代 ...

  5. C#抽象方法与抽象实例--C#基础

    1.抽象方法与抽象类的声明 1)抽象类和抽象方法声明必须包含abstract 2)抽象方法的声明没有方法体:public abstract void fly(); 3)抽象类和抽象法前加上public ...

  6. .NET Core使用skiasharp文字头像生成方案(基于docker发布)

    一.问题背景 目前.NET Core下面针对于图像处理的库微软并没有集成,在.NET FrameWork下我们已经习惯使用System.Drawing类库做简单的图像处理,到了.NET Core下一脸 ...

  7. Python 终端输出字体颜色

    终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.             转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表 ...

  8. 微信小程序初探【类微信UI聊天简单实现】

    微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...

  9. ajax+struts2 实现省份-城市-地区三级联动

    1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...

  10. css学习の第五弹—单位和值

    一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...