近来正在进修ES6,关于ES6的语法有一些本身的明白,
想写这篇文章协助跟我一样的新手疾速入门ES6而不至于连代码都看不懂.
至于开辟环境的搭建什么的比方balel下载什么的,百度上有许多的教程了.
我在这就不再赘述了,不晓得童鞋自行查找,我们将精神放在语法上.
(一)let敕令
ES6新增了let
敕令,用来声明变量。它的用法相似于var
,然则所声明的变量,只在let
敕令地点的代码块内有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
什么叫做代码块简朴来讲就是{}内的东西,之前JS是没有块级作用域的,我们会运用自实行匿名函数来模仿块级作用域
function outputNumbers(count){
(function () {
for (var i=0; i < count; i++){
alert(i);
}
})();
alert(i); //致使一个毛病!
}
而在ES6中我们有了let
,运用let在内定义的变量在外部环境是没法访问到的,最适合运用let
的处所就是for
轮回了
for (let i = 0; i < 10; i++) {
console.log(i)
}
console.log(i) //报错
如许就避免了之前运用var
来定义i
实行今后i
变量依旧保存下来的为难局势.
运用let
时有一个须要注重的题目就是let
与var
差别的一点是不存在变量提拔
// var 的状况
console.log(foo); // 输出undefined
var foo = 2;
// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;
在let
性命变量之前挪用该变量则会报错,而var
的处理方式是把声明提早而赋值操纵保存在原地,我们都晓得var
只声明未赋值则会返回unfdinded
。
我们把let
声明该变量之前的这段地区称为该变量的“暂时性死区”(temporal dead zone,简称 TDZ)
别的let
不许可反复声明
function () {
let a = 10;
var a = 1;
}
// 报错
function () {
let a = 10;
let a = 1;
}
(二)const敕令
const
声明一个只读的常量。一旦声明,常量的值就不能转变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
上面代码表明转变常量的值会报错。const
声明的变量不得转变值,这意味着,const
一旦声明变量,就必须马上初始化,不能留到今后赋值。
const foo;
// SyntaxError: Missing initializer in const declaration
上面代码示意,关于const
来讲,只声明不赋值,就会报错。
const
的作用域与let
敕令雷同:只在声明地点的块级作用域内有效。
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
const
敕令声明的常量也是不提拔,一样存在暂时性死区,只能在声明的位置背面运用。
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
上面代码在常量MAX
声明之前就挪用,效果报错。
const
声明的常量,也与let
一样不可反复声明。
var message = "Hello!";
let age = 25;
// 以下两行都邑报错
const message = "Goodbye!";
const age = 30;
const
敕令更适合定义那种一经定义就不须要再转变的变量,比方url地点之类。
关于顶层对象
我们都晓得,ES5中全局var
定义的变量、function
现实都是全局对象window
(global
)的属性,而ES6为了坚持兼容性,var敕令和function敕令声明的全局变量,依旧是顶层对象的属性;另一方面划定,let
敕令、const
敕令、class
敕令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6最先,全局变量将逐渐与顶层对象的属性脱钩。
var a = 1;
// 假如在Node的REPL环境,能够写成global.a
// 或许采纳通用要领,写成this.a
window.a // 1
let b = 1;
window.b // undefined
上面代码中,全局变量a
由var
敕令声明,所以它是顶层对象的属性;全局变量b
由let
敕令声明,所以它不是顶层对象的属性,返回undefined
。
(三)变量的解构赋值
这部份是ES6新加的一些赋值的要领,我每一个部份给一个例子,只需他人的代码运用时能看懂就行。
1.数组解构赋值
之前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6许可写成下面如许。
let [a, b, c] = [1, 2, 3];
2.对象的解构赋值
解构不仅能够用于数组,还能够用于对象。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
3.字符串的解构赋值
字符串也能够解构赋值。这是因为此时,字符串被转换成了一个相似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
相似数组的对象都有一个length属性,因而还能够对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
4.数值和布尔值的解构赋值
解构赋值时,假如等号右侧是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面代码中,数值和布尔值的包装对象都有toString
属性,因而变量s都能取到值。
解构赋值的规则是,只需等号右侧的值不是对象或数组,就先将其转为对象。因为undefined
和null
没法转为对象,所以对它们举行解构赋值,都邑报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
5.函数参数的解构赋值
函数的参数也能够运用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
上面代码中,函数add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解组成变量x
和y
。关于函数内部的代码来讲,它们能感遭到的参数就是x
和y
。
6.默认值
解构赋值许可指定默认值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注重,ES6 内部运用严厉相称运算符(===),推断一个位置是不是有值。所以,假如一个数组成员不严厉即是undefined
,默认值是不会见效的。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
上面代码中,假如一个数组成员是null
,默认值就不会见效,因为null
不严厉即是undefined
。
未完待续。。