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指向了新开辟的空间

变量的解构赋值

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

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

字符串扩展

1. 模板字符串

    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表达式，会自动帮我们解析

2. startsWith() 和 endsWith()

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

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

3. padStart() 和 padEnd()

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

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

函数扩展

1. 形参默认值

 function add(x, y = 0) {

    return x + y;

  }

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

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

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)

4. 扩展运算符

    // ----------------------扩展运算符--------------

    function add(...values) {

      let total = 0

      values.forEach(item => {

        total += item

      })

      console.log(total)

    }

    const arr = [1, 2, 3]

    add(...arr)

箭头函数

1. 如何把 function 改成 箭头函数呢： 先把 function 删掉，然后，在 () 和 { } 之间，添加一个 => 就好了

   // 普通函数
   function add(x,y) {
      return x + y
   }
   // 箭头函数
   let add = (x,y) => { 
       return x + y
   }

2. 箭头函数的特性： 箭头函数内部的 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)
   }

3. 箭头函数，本质上就是一个匿名函数

   () => {}

4. 最标准的箭头函数格式是 ( 参数列表 ) => { 函数体 }

5. 变体1： 如果 箭头函数左侧的 形参列表中，只有一个 形参，那么，( ) 可以省略 ( x ) => { console.log(x) } 可以改造成 x => { console.log(x) }

6. 变体2：如果 箭头函数右侧的 函数体中，只有一行代码，那么， { } 可以省略 (x, y) => {console.log(x + y)} 可以改造成 (x, y) => console.log(x + y)

7. 变体3：如果箭头函数 左侧 只有一个形参，右侧只有一行代码，那么， 左侧的 () 和 右侧的 {} 都可以省略 ( x ) => { console.log(x) } 可以改造成 x => console.log(x)

8. 注意： 如果我们省略了 右侧的 { }， 那么，默认就会把 右侧函数体中的代码执行结果，返回出去 (x, y) => { return x + y } 可以简写成 (x, y) => x + y