JavaScript(ES6)
1.let & const
1-1. let命令
基本语法:ES6 新增了
let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{
let a = 10;
var b =1;
}
console.log(a);// 报错
console.log(b);// 1
let特点:
- 不存在变量提升。
- 暂时性死区,只要快级作用域内存在
let
命令,它所声明的变量的区域,不再受外部的影响。- 不允许重复声明,在同一个作用域内,一个变量名只能被声明一次。
- let 为JavaScript新增了块级作用域。
1-2. const 命令
基本用法:
const
声明一个只读的常量,一但声明,常量的值就不能改变。
const PI = 3.14;
console.log(PI); // 3.14
PI = 5; // TypeError: Assignment to constant variable.
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
console.log(foo.prop) // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
const特点:
const
声明的变量不得改变值,这意味着,const
一旦声明变量,就必须立即初始化,不能留到以后赋值。const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。const
命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。const
声明的常量,也与let
一样不可重复声明。const
声明的对象,可以为其添加属性(常量foo
储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址)。
2.变量的解构化赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
2-1. 变量赋值
如果解构不成功,值为 undefined
let [a, b, c] = [2, 2, 3];
console.log(a, b, c); // 2,2,3
let [d, e, f] = [2, 2];
console.log(d) // 2
console.log(e) // 2
console.log(f) // undefined
let [foo] = 2 // 报错,
解构函数允许指定默认值
let [x=20,y] = [,2]
conslole.log(x,y) // 20,2
let [a=20,b] = [2,2];
console.log(a,b); // 2,2
2-1. 数组的解构函数
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 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
。
2-2.解构赋值允许指定默认值
注意,ES6 内部使用严格相等运算符(
===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
// 解构对象也能指定默认值
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x: y = 3} = {};
y // 3
var {x: y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
2-3.对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,
变量必须与属性同名
,才能取到正确的值。
与数组一样,解构也可以用于嵌套结构的对象。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
2-4.字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
2-5.用途
-
交换变量的值
let x = 1; let y = 2; [x, y] = [y, x]; // x = 2, y = 1
-
从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组 function example1() { return [1, 2, 3]; } let [a, b, c] = example1(); console.log(a,b,c); // 1, 2, 3 // 返回一个对象 function example2() { return { foo: 1, bar: 2 }; } let { foo, bar } = example2(); console.log(foo,bar); // 1, 2,
-
函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f1([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f2({x, y, z}) { ... } f({z: 3, y: 2, x: 1});