ES 6 新特性笔记

let

1. 与 var 的区别

功能	let	var
块级作用域	️
变量提升		️
重复声明（相同作用域内）		️

1. var 没有块级作用域的解决方法

使用函数替代块级作用域，以保证变量的正常使用，如：

...

<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<button>btn5</button>

<script>
	var btns = document.getElementsByTagName('button');

    for (var i=0, i<btns.length, i++) {
        (function(i){
            btns[i].addEventListener('click', function(){
                console.log(i)
            })
        })(i)
    }

</script>
...

const

具有一下特征：

• 声明变量只读

• 若声明的为复合类型的数据（对象、数组等），变量指向内存地址，即变量中的内容可变

• 只在声明的块级作用域有效

• 不具有变量提升（需在声明后才可以使用）

• 不可重复声明

箭头函数

1. 定义形式

// 如果没有参数或多个参数，使用 ()
let f1 = () => 1
let f2 = (a, b) => a * b

// 如果只有一个参数，可以不用 ()
let f3 = x => x * 2

// 如果函数体只有一条语句，可以不用 {}
let f4 = x => x * x

// 简写单条语句时遇到对象，需要加 ()
let f5 = x => ({name: x, age: 18})

1. 与普通函数的区别

• 箭头函数没有构造方法，不可使用 new 关键字生成

  function f1 () {
  
  }
  
  const f2 = () => {}
  
  // ok
  f = new f1();
  
  // error
  f2 = new f2()
  

• this 关键字的指向

  /*
   * 在普通函数中，this 指向调用者
   * 如果无调用者，则指向 window
   *
   * 在箭头函数中，this 指向其定义所在的上层作用域的 this 指针
   */
  
  const box = document.getElementById('#box');
  
  // 对于普通函数，如需在此处访问 box 对象
  // 需要将 this 先赋值给变量方可在 setTimeout 中调用
  // 否则 setTimeout 中调用的 this 为 window 对象
  box.onclick = function () {
      const obj = this;
      setTimeout(function () {
          obj.className = 'bg-blue'
      }, 3000)
  }
  
  // 箭头函数中的 this 指向其定义所在的上层作用域
  // 这里函数中的 this 即 box 对象
  box.onclick = function () {
      setTimeout(() => {
          this.className = 'bg-blue'
      }, 3000)
  }
  

Array.map/filter/reduce

• map 将函数应用于数据的每一个元素，并将返回值作为新的数组元素返回
• filter 将函数应用于数据的每一个元素，并将返回 true 的元素组成新数组返回
• reduce 累积引用

Set

集合

Map

类似于 python 中的 dict

String.startsWith/endsWith

判断字符串的起始值与结尾的值

模板字符串

使用 ` ，支持换行和变量的传递：

let name = 'kingron';
let tempStr = `my name is ${name}`

解构赋值

// 数组使用数组来接受，长度可以不一样
// 按顺序赋值 x: 1, y: 2
let [x, y] = [1, 2, 3, 4]

// 对象使用 key 名来接收，必须保证名字一致
let {name, age} = {name: 'kingron', age: 18, money: 99999}

三点运算符

1. 展开数组

let arr1 = [1, 2, 3];

// [1, 2, 3, 4, 5, 6]
let arr2 = [...arr1, 4, 5, 6];

1. 默认参数

function func (...args) {
    console.log(args)
}

// [1, 2, 3]
func(1, 2, 3)

类与继承

定义类：

// 创建类
class Person {
    // 构造方法
    constructor(name, age, gender) {
        // 绑定实例属性
        this.name = name;
        this.age = age;
        this.gender = gender
    }

    // 实例方法，不需加 function 关键字
    say() {
        console.log(`${this.name} said it ${this.age} years ago!`)
    }
}

// 实例化
const p = new Person('kongron', 18, 'M');
p.say()

继承：

class Student extends Person {
    constructor(name, age, gender, school) {
		// 调用父类的构造方法
        super(name, age, gender);
        this.school = school;
    }
}

JSON 对象的新应用

1. JSON.stringify/parse

序列化/反序列化

1. 简写

• 属性和值名字相同的可以简写
• 方法可以简写（省去 function 关键字）

const name = 'kingron';

const person = {
    name,
    hello(to) {
        console.log(this.name + ' said hello to ' + to)
    }
}

// kingron
console.log(person.name);

person.hello('j');

模块化编程

1. 暴露变量的方式

1.1. 定义时暴露

// m1.js
export add = (a, b) => a + b;

// m2.js
import {add} from 'm1.js'

1.2. 统一暴露

// m1.js
const add = (a, b) => a + b;
const sub = (a, b) => a- b;

export {add, sub}

1.3. 默认

使用 default 关键字

// m1.js
export default (a, b) => a + b;

export sub = function(a, b) {
    return a - b
}

// m2.js
// 导入时不需要 {}，可以自定义导入的名称，结果为 default 对应的变量
import myadd from 'm1.js'

1. 导入

2.1. js 中导入

import {add} from 'm1.js'

2.2. html 中导入

<script src="m1.js" type="module"></script>

Promise

用法说明 & 示例：

/*
 * Promise 接收一个函数作为参数
 * 该函数又必须接收两个参数 resolve 和 reject 作为参数
 * 在函数体内：
 *	- 调用 resolve，传入的参数将作为参数传递给 then 中的第一个参数
 *	- 调用 reject，传入的参数将作为参数传递给 then 中的第二个参数
 *
 * 调用存在顺序限制，如果先调用了 resolve/reject 其中一个，另外一个则不会被调用
 *
 * 函数也可以返回新的 Promise 实例
 */
new Promise((resolve, reject) => {
    throw "fine, It's not ok";
    reject("It's not ok")
    setTimeout(() => {
        resolve("It's ok")
    }, 1000)
}).then(res => {
    // 处理结果
    console.log(res)
}, err => {
    // 处理错误
    console.log('error in then: ' + err)
}).catch(err => {
    /*
     * 如果 then 中的第二个参数存在
     * 则出现错误不会被传入此方法
     */
    // 处理错误
    console.log('error in catch: ' + err)
})

Promise.all 用法

Promise.all([
    new Promise(...),
    new Promise(...),
    ...
]).then(...)