目录
学习JS中ES6的新增语法
一、块作用域声明
1.1 let声明
使用let声明的变量,可以被绑定在一定区域内,称为块作用域,即一对{...}就是一个作用域,使用var定义的变量归属于函数,是全局的。在js的编程中推荐使用let定义变量。
var a = 2;
{
let a = 3;
console.log(a); // 打印出来的是{}中的a即3
}
console(a); // 打印出来的是{}外的a即2
注意:在let声明/初始化之前访问let 声明的变量会出错,使用var则不会报错。
1.2 const声明
与let一样有块作用域,与let不同的是const用于创建常量,常量是设定了一个初始值之后只读的变量,不可以后面赋值。
{
const a = 2;
console.log(a) // 2
a = 3 // TypeError
}
注意:常量不是对这个值本身的限制,而是对赋值的那个变量的限制。如果这个值是复杂值(对象、数组),其内容是可以修改的。
{
const a = [ 1, 2, 3 ]
a.push(4)
console.log(a) // [ 1, 2, 3, 4 ]
a = 42 // TypeError
}
1.3 块作用域函数
从ES6开始,块内声明的函数,其作用域在这个块内。在ES6之前,规范没有要求这一点,但是许多实现就是这么做得。所以现在是规范与现实保持一致了。
{
fun() // true
function fun() {
//...
}
}
fun() // ReferenceError
二、spread/rest
ES6中引入了一个新的运算符...,通常称为spread或rest(展开或收集)运算符,取决于它在哪里使用。
function foo(x, y, z) {
console.log(a, y, z)
}
foo(...[1, 2, 3]) // 1 2 3
// 可用以下代码代替
foo.apply(null, [1, 2, 3]) // 1 2 3
// 可用用于其他数组中
var a = [2, 3, 4]
var b = [1, ...a, 5]
console.log(b) // [1, 2, 3, 4, 5]
// 另一种反向用法,把一系列值收集到一起
function foo(x, y, ...z) {
console.log(x, y, z)
}
foo(1, 2, 3, 4, 5) // 1 2 [3, 4, 5]
三、默认参数值
对于某一些函数需要参数,但是在使用时没有参数传入,需要设定参数默认值。
使用ES6新语法对函数参数设定默认值
function foo(x = 11, y = 31) {
console.log(x + y)
}
foo() // 42
foo(5, 6) // 11
foo(0, 42) // 42
foo(5) // 36
foo(5, undefined) // 36 <-- 丢了undefined
foo(5, null) // 5 <-- null被强制转换为0
foo(undefined, 6) // 17 <-- 丢了undefined
foo(null, 6) // 6 <-- null被强制转换为0
tips:默认值可以不只是简单的数据,还可以是函数,但是函数只有在传入的形参为undefined时才会被执行。
四、解构
ES6中引入了一个新的语法词,名为解构,把这个功能看作是一个结构化赋值方法。
var [a, b, c] = [1, 2, 3]
var {x: x, y: y, z: z} = {
x: 4,
y: 5,
z: 6
}
console.log(a, b, c) // 1 2 3
console.log(x, y, z) // 4 5 6
4.1 对象属性赋值模式
当属性名与要赋值的变量名相同,有更加简便的语法
var { x, y, z } = {
x: 4,
y: 5,
Z: 6
}
console.log(x, y, z) // 4 5 6
var aa = 10, bb = 20
var o = { x: aa, y: bb }
var { x: AA, y: BB } = o
console.log(AA, BB) // 10 20
// 利用结构交换两个变量
var x = 10, y = 20
[ y, x ] = [ x, y ]
console.log(x, y) // 20 10
4.2 解构参数
参数数组解构
function foo( [ x, y ] ) {
console.log( x, y )
}
foo( [ 1, 2 ] ) // 1 2
foo( [ 1 ] ) // 1 undefined
foo( [] ) // undefined undefined
参数对象解构
function foo( { x, y } ) {
console.log( x, y )
}
foo( { y: 1, x: 2 } ) // 2 1
foo( { y: 42 } ) // undefined 42
foo( {} ) // undefined undefined