ES6 入门教程
ECMAScript 6 入门
作者:阮一峰
本文仅用于学习记录,不存在任何商业用途,如侵删
文章目录
- ES6 入门教程
- 26 编程风格
- 26.1 块级作用域
- 26.1.1 **let 取代 var**
- 26.1.2 **全局常量和线程安全**
- 26.2 字符串
- 26.3 解构赋值
26 编程风格
26.1 块级作用域
26.1.1 let 取代 var
ES6 提出了两个新的声明变量的命令:let
和const
。
其中,let
完全可以取代var
,因为两者语义相同,而且let
没有副作用。
'use strict';if (true) {let x = 'hello';
}for (let i = 0; i < 10; i++) {console.log(i);
}
上面代码如果用var
替代let
,实际上就声明了两个全局变量,这显然不是本意。变量应该只在其声明的代码块内有效,var
命令做不到这一点。
var
命令存在变量提升效用,let
命令没有这个问题。
'use strict';if (true) {console.log(x); // ReferenceErrorlet x = 'hello';
}
上面代码如果使用var
替代let
,console.log
那一行就不会报错,而是会输出undefined
,因为变量声明提升到代码块的头部。
这违反了变量先声明后使用的原则。
==> 所以,建议不再使用var
命令,而是使用let
命令取代。
26.1.2 全局常量和线程安全
在let
和const
之间,建议优先使用const
,尤其是在全局环境,不应该设置变量,只应设置常量。
const
优于let
有几个原因:
- 一个是
const
可以提醒阅读程序的人,这个变量不应该改变; - 另一个是
const
比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算; - 最后一个原因是 JavaScript 编译器会对
const
进行优化,
所以多使用const
,有利于提高程序的运行效率,也就是说let
和const
的本质区别,其实是编译器内部的处理不同。
// bad
var a = 1, b = 2, c = 3;// good
const a = 1;
const b = 2;
const c = 3;// best
const [a, b, c] = [1, 2, 3];
const
声明常量还有两个好处,一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。
所有的函数都应该设置为常量。
长远来看,JavaScript 可能会有多线程的实现(比如 Intel 公司的 River Trail 那一类的项目),这时let
表示的变量,只应出现在单线程运行的代码中,不能是多线程共享的,这样有利于保证线程安全。
26.2 字符串
静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';// acceptable
const c = `foobar`;// good
const a = 'foobar';
const b = `foo${a}bar`;
26.3 解构赋值
使用数组成员对变量赋值时,优先使用解构赋值。
const arr = [1, 2, 3, 4];// bad
const first = arr[0];
const second = arr[1];// good
const [first, second] = arr;
函数的参数如果是对象的成员,优先使用解构赋值。
// bad
function getFullName(user) {const firstName = user.firstName;const lastName = user.lastName;
}// good
function getFullName(obj) {const { firstName, lastName } = obj;
}// best
function getFullName({ firstName, lastName }) {
}
如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。这样便于以后添加返回值,以及更改返回值的顺序。
// bad
function processInput(input) {return [left, right, top, bottom];
}// good
function processInput(input) {return { left, right, top, bottom };
}const { left, right } = processInput(input);