JavaScript---ES6---学习笔记01(至解构)

目录

一、块作用域声明

1.1 let声明

1.2 const声明

1.3 块作用域函数

二、spread/rest

三、默认参数值

四、解构 

 4.1 对象属性赋值模式

4.2 解构参数

---

学习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