关于es6语法
原文链接:ECMAScript 6 入门
1、let和const
块级作用域
- let 声明变量,用法类似于var,块级作用域,只在let定义的代码块有效。
对于for循环,使用let可以防止变量污染,计数器只在for循环内有效。
var的变量i全局有效,因此数组a中的i,都指向同一个i,即最后一次输出的10;
let的变量i只在块级内有效
for循环中,设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
因此下面将输出三次abc,但内部i的定义只能用let,不能用var。
变量提升
var声明变量,即变量可以在声明之前使用(如下图:var a=3相当于var a;和a=3;此时var a在输出前面)
let则不会出现这种情况
暂时性死区
ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
不允许同时声明
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
// 不报错
function func() {
var a = 10;
var a = 1;
}
- const声明一个只读的常量。一旦声明,常量的值就不能改变。
因此一旦声明就要立即初始化,不赋值就会报错
const和let一样,只在声明所在的块级作用域内有效。
2、变量的解构赋值
数组的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
即从数组中取值,按位置赋到变量中
例如:
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
如果结构不成功,则返回undefined
不完全解构时,即只能匹配一部分,仍可以结构成功
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
对象的解构赋值
对象和数组一样可以解构赋值,只是数组按次序取值,而对象的解析构值必须属性相同时
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
->字符串、函数也可以
解构赋值用途
(1)交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
交换x和y的值
(2)从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
(4)提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
(5)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
(6)遍历Map结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world