JavaScript进阶讲解十一—＞es6~es12(一)

一、let与const

1. let和var是没有太大的区别的，都是用于声明一个变量
2. const关键字是constant的单词的缩写，表示常量、衡量
3. 它表示保存的数据一旦被赋值，就不能被修改（如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容）
4. let、const不允许重复声明变量

let/const作用域提升

作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升。

在最开始讲作用域的时候，我们之间说过var声明的变量是会进行作用域提升的

console.log(a); // undefined

var a = 1

如上述代码，我们a的生命在打印下方，但代码不会报错，打印的是undefined。但如果是let与const呢？

console.log(a); // ReferenceError: Cannot access 'a' before initialization

// let a = 1
const a = 1

可以看到这代码时会报错的。所以let、const没有进行作用域提升，他不会在window上添加属性（但是他们定义的变量都是解析阶段创建的，只是不可以访问）

块级作用域
在前面章节中（es5），我们已经知道了两种作用域：全局作用域和函数作用域。

在es6中新增了块级作用域。let、const、function、class声明的标识符是具备块级作用域。

什么叫块级作用域。如下就是块级作用域，但是对于var是无效的

{
    
}

前面我们已经说过var是没有作用域的，如下

{
    var a = '1'
}

console.log(a); // 1

如果是其他的

{
    let a = '1'
    function test() {
        console.log('test');   
    }
    class Foo {}
}

// console.log(a); // ReferenceError: a is not defined

test() // test 这能被执行是为了兼容es5，所以这里能访问

var f = new Foo() // ReferenceError: Foo is not defined

暂时性死区

一段代码中，使用let，const声明的变量，在声明之前，变量是不可以被访问的

// var a = 1

// if (true) {
//     console.log(a); // 1
// }


var a = 1

if (true) {
    console.log(a); // ReferenceError: Cannot access 'a' before initialization
    let a = 2
}

二、数组的解构和对象的解构

const arr = ['a', 'b', 'c']

const [item1, item2, item3] = arr
const [, i2, i3] = arr // 只解构后两个
const [ia, ...newArr] = arr // 解构第一个，其余的放到新数组中


console.log(item1, item2, item3); // a b c
console.log(i2, i3); // b c
console.log(ia, newArr); // a [ 'b', 'c' ]


const obj = {
    a: 1,
    b: '2',
    c: false
}

const { c, b, a: obja } = obj // 因为这里是通过key对应的，所以这里可以不按顺序写  a: obja 将a重命名为obja
console.log(obja, b, c); // 1 2 false
console.log(obja); // 1
console.log(obja); // 1

三、模板字符串

使用 `` 符号编写的字符串，叫做模板字符串

const name = 'xt'
const age = 18

console.log(`my name is ${name}, age is ${age}`); // my name is xt, age is 18

function foo(...args) {
    console.log(args);
}

foo `Hellow ${name} World ${age}` // [ [ 'Hellow ', ' World ', '' ], 'xt', 18 ]

四、函数的默认参数

有默认值的形参，最好放最后面

// function foo(m = 1, n = 2) {
//     console.log(m + n); // 3
// }

function foo({ name } = { name: 'xt' }) {
    console.log(name); // /xt
}

foo()

五、函数的剩余参数

在es5中我们讲过了arguments，也提过在es6开始已经不推荐用arguments了。在es6开始推荐使用剩余参数。

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中，如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组。

// 这里的...是前缀，不是展开运算符
function foo(a, b, ...args) {
    console.log(a, b); // 1 2
    console.log(args); // [3,4]
}

foo(1,2,3,4)

剩余参数与arguments区别：

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
2. arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作。
3. rest参数是ES6中提供 并且希望以此来替代arguments的

六、展开运算符

1. 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开。
2. 可以在构造字面量对象时, 将对象表达式按key-value的方式展开
3. 展开运算符其实是一种浅拷贝

const arr = [1, 2, 3]
const arr1 = 'xyz'

function foo(a, b, c) {
    console.log(a, b, c);
}

foo(...arr) // 1 2 3
foo(...arr1) // x y z

const newArr = [...arr]
const newArr1 = [...arr1]

console.log(newArr); // [ 1, 2, 3 ]
console.log(newArr1); // [ 'x', 'y', 'z' ]

// （ES9）
const obj = { name: 'xt', age: 18 }

const newObj = { ...obj, sex: '男' }

console.log(newObj); // { name: 'xt', age: 18, sex: '男' }