ECMAScript6 常用语法总结（-）

let 与 const

之前定义变量，用 var 关键字，用var的一些问题：1. 变量提升问题 2. 没有块级作用域

let特性：

没有变量提升
有 { } 作用域const特性：
const特性：
没有变量提升的问题
const 定义的常量，无法被重新赋值
当定义常量的时候，必须定义且初始化，否则报语法错误

console.log(a); // undefined
var a = 10;
//  因为var 定义的变量存在变量提升 所以打印结果为 undefined

console.log(b)
let b = 11;
// let 定义的变量不存在变量提升 所以会报错 Uncaught ReferenceError: b is not defined

{
    var c = 12; // 12
}
console.log(c)
// var定义的变量没有块级作用域  所以打印 12

{
    let d = 13;
}
// let定义的变量受 {} 的影响

// const 定义的量，叫做常量，这个常量只要被定义了，那么，今后永远无法重新为 这个常量赋值了
const e = 14;
e = 15;
console.log(e) // Uncaught TypeError: Assignment to constant variable.

const f = {}
f.name = 'zs'
console.log(f) // {name: "zs"}
// 这里的 f 是一个对象 大家都应该知道对于复杂数据类型 f只是保存其在堆上的位置，只要不改变其指针的指向就合法

const e = {}
e = {name = 'zs'}
console.log(e) // Uncaught SyntaxError: Invalid shorthand property initializer
// 注意这里不同于上面，这里是另外在堆中开辟了一个空间，e指向了新开辟的空间

变量的解构赋值

所谓的解构赋值，就是把某个对象中的属性，当作变量，给解放出来，这样，就能够当作变量直接使用了

可以使用 :为解构出来的变量重命名

字符串扩展

模板字符串

 let arr = [
      { id: 1, name: '钢铁侠·托尼·屎大颗', age: 43 },
      { id: 2, name: '亚历山大·刚刚', age: 18 },
      { id: 3, name: '亚历山大·小郭子', age: 30 }
    ]

    // 把上面的 arr 数组，拼接成一个 table ，显示到页面中

    let str = ''
    for (let i = 0; i < arr.length; i++) {
      /*  str += '<tr>' +
         '<td>' + arr[i].id + '</td>' +
         '<td>' + arr[i].name + '</td>' +
         '<td>' + arr[i].age + '</td>' +
         '</tr>' */    // 之前的写法

      // 模板字符串    ${ JS 表达式 }
      str += `<tr>
          <td>${arr[i].id}</td>
          <td>${arr[i].name}</td>
          <td>${arr[i].age}</td>
          </tr>`
    }

    document.getElementById('tb').innerHTML = str

将需要拼接的字符串用反引号包裹 `` , ${} 花括号内部可写变量或js表达式，会自动帮我们解析

startsWith() 和 endsWith()

startsWith() 用来判断字符串，是否以指定的字符开头，如果是，返回值是 true，否则返回 false
endsWith() 用来判断字符串，是否以指定的字符结尾；如果是，返回值是 true，否则返回 false

padStart() 和 padEnd()

//str.padStart(最终长度,用什么填充)
const str = '123'    //  在前面填充 3个 0  在后面，填充 3个 o

const result = str.padStart(6, '0').padEnd(9, 'o')
console.log(result)

函数扩展

形参默认值

 function add(x, y = 0) {

 
            return x + y; 
          }

解构赋值和形参默认值结合使用

// 解构赋值和形参默认值结合使用
 function add({ x, y = 0 }) {
 return x + y;
 } 
 const result = add({ x: 3 })

rest参数

 
    // ------------------rest参数-------------------
    function add(...args) {      console.log(args instanceof Array)      let total = 0      args.forEach(item => {        total += item      })      console.log(total)    }    add(1, 2, 3, 4)

扩展运算符

 
    // ----------------------扩展运算符--------------
    function add(...values) {      let total = 0      values.forEach(item => {        total += item      })      console.log(total)    }    const arr = [1, 2, 3]    add(...arr)

箭头函数

如何把 function 改成箭头函数呢：先把 function 删掉，然后，在 () 和 { } 之间，添加一个 => 就好了
```
// 普通函数
function add(x,y) {
   return x + y
}
// 箭头函数
let add = (x,y) => { 
    return x + y
}
```

箭头函数的特性：箭头函数内部的 this, 永远和箭头函数外部的 this 保持一致；

// 之前写法
document.getElementById('btn').onclick = function () {
    var _this = this
     setTimeout(function () {
     _this.style.backgroundColor = 'red'
     }, 1000)
 } 


// 箭头函数写法
document.getElementById('btn').onclick = function () {
    // 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致；
    setTimeout(() => {
        this.style.backgroundColor = 'red'
}, 1000)
}

箭头函数，本质上就是一个匿名函数
```
() => {}
```
最标准的箭头函数格式是 ( 参数列表 ) => { 函数体 }
变体1：如果箭头函数左侧的形参列表中，只有一个形参，那么，( ) 可以省略 ( x ) => { console.log(x) } 可以改造成 x => { console.log(x) }
变体2：如果箭头函数右侧的函数体中，只有一行代码，那么， { } 可以省略 (x, y) => {console.log(x + y)} 可以改造成 (x, y) => console.log(x + y)
变体3：如果箭头函数左侧只有一个形参，右侧只有一行代码，那么，左侧的 () 和右侧的 {} 都可以省略 ( x ) => { console.log(x) } 可以改造成 x => console.log(x)
注意：如果我们省略了右侧的 { }，那么，默认就会把右侧函数体中的代码执行结果，返回出去 (x, y) => { return x + y } 可以简写成 (x, y) => x + y