JS ES6

1. Let和Const

let和const定义的变量都是块级作用域，var定义的变量是函数级作用域

{
  var a = 10
}
console.log(a) // 10

{
  let a = 10
}
console.log(a) // ReferenceError: a is not defined
复制代码

3. 模板字符串

#不使用模板字符串
var name = 'Your name is' + first + '' + last + '.'
#使用模板字符串
var name = `Your name is ${first} ${last}.`
复制代码

4. 类

#构造函数
class Animal {
  // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数
  constructor(name, color) {
    this.name = name
    this.color = color
  }
  // toString 是原型对象上的属性
  toString() {
    console.log('name:' + this.name + ',color' + this.color)
  }
}

var animal = new Animal('dog', 'white') // 实例化Animal
animal.toString()

console.log(animal.hasOwnProperty('name')) // true
console.log(animal.hasOwnProperty('toString')) // false
console.log(animal.__proto__.hasOwnProperty('toString')) // true

#继承
class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor 中指定super 函数，否则在新建实例的时候会报错
    // 如果没有置顶constructor，默认带super函数的constructor将会被添加
    super('cat','white')
    this.action = action
  }
  toString() {
    // 调用Animal 的toString() 方法
    super.toString()
  }
}

var cat = new Cat('catch')
cat.toString()

// 实例cat 是Cat 和Animal 的实例
console.log(cat instanceof Cat) // true
console.log(cat instanceof Animal) // true
复制代码

5. 模块化

#导出
export var name = 'robot' // 导出一个变量
export const sqrt = Math.sqrt // 导出常量

var name = 'robot'
var age = '24'
export {name, age} // 导出多个变量

export function myModule(someArg) {
  return someArg
} // 导出函数

#导入
import {myModule} from 'myModule.js'
import {name, age} from 'test.js'
复制代码

6. 函数参数默认值

function foo (height = 50, color = 'red') {
  ...
}
复制代码

7. 解构赋值

# 获取数组中的值
var foo = ['one', 'two', 'three', 'four']

var [one, two, three] = foo // 从数组获取值并赋值到变量中，变量的顺序与数组中对象顺序对应
console.log(two) // two
console.log(three) // three

var [first, , , last] = foo // 忽略某些值
console.log(first) // one
console.log(last) // four

var a, b
[a, b] = [1, 2] // 先声明变量
console.log(a) // 1
console.log(b) // 2

var a, b
[a=5, b=7] = [1] // 如果没有从数组中获取到值，可以为变量设置一个默认值
console.log(a) // 1
console.log(b) // 7

# 交换两个变量的值
var a = 1
var b = 3

;[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1

# 获取对象中的值
const student = {
    name: 'ming',
    age: '18',
    city: 'shanghai'
}

const {name, age, city} = student
console.log(name)
console.log(age)
console.log(city)
复制代码

8. 延展操作符...

# 在函数调用时使用延展操作符
function sum(x,y,z) {
    return x+y+z
}
var numbers = [1,2,3]
console.log(sum.apply(null,numbers)) //6 // 不使用延展操作符
console.log(sum(...numbers)) //6 // 使用延展操作符

# 构造数组
const stuendts = ['Jine','Tom']
const persons = ['Tony',... stuendts,'Aaron','Anna'] // 构造新数组
conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice() // 数组拷贝
arr2.push(4); 
console.log(arr2)//[1, 2, 3, 4]

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回 // 连接多个数组
//等同于
var arr4 = arr1.concat(arr2);



# 构造对象时，进行克隆或者属性拷贝和合并（es8）
var animal = {
    name: 'dog',
    color: 'white'
}

let dog = {...animal,age:'18'} // 克隆
console.log(dog) // {name: "dog", color: "white"}

var obj = {...animal, ...dog} // 合并
复制代码

9. 对象属性简写

const name='Ming',age='18',city='Shanghai';


const student = { // 不是es6
    name:name,
    age:age,
    city:city
}
const student = {
    name,
    age,
    city
}
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
复制代码

10. Promise

11. 迭代对象

可迭代对象有：

Array、string、Map、Set、arguments、NodeList

如何判断一个数据具有可迭代能力？

• 只有当数据具有Symbol.iterator 属性的时候才可以使用for...of 进行迭代

• typeof 判断数据类型，如果不可迭代的返回undefined

  Array.prototype.hasOwnProperty(Symbol.iterator) // true Set.prototype.hasOwnProperty(Symbol.iterator) // true

  typeof [][Symbol.iterator] // function typeof {}[Symbol.iterator] // undefined typeof new Set()[Symbol.iterator] // function typeof ''[Symbol.iterator] // function

认识迭代对象

Array.prototype[Symbol.iterator] // values() { [native code] } 函数
Array.prototype[Symbol.iterator]() // Array Iterator {} 迭代器
Array.prototype[Symbol.iterator]().next() // {value: undefined, done: true} 对象
复制代码

手动模拟迭代器

const createIterator = items => {
  const keys = Object.keys(items);
  const len = keys.length;
  let pointer = 0; // 当前的指针位置
  return {
    next() {
      const done = pointer >= len;
      const value = !done ? items[keys[pointer++]] : undefined; // 如果当前指针位置小于总长度
      return {
        value,
        done
      }
    }
  }
}

const iterator =  creatIterator([1,2,3,5])
iterator.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
复制代码

将不可迭代的数据转换可迭代数据

var obj = {name: '哈哈', gender: '男'}
for(item on obj){} // Uncaught TypeError: obj1 is not iterable

# 直接修改对象原型
Object.prototype[Symbol.iterator] = function() {
  const self = this
  const keys = Object.keys(self)
  const len = keys.length
  let pointer = 0

  return {
    next() {
      const done = pointer >= len
      const value = !done ? self[keys[pointer++]] : undefined
      return {
        value, done
      }
    }
  }
}
for (let item of obj) {
    console.log(item) //哈哈 // 男
}
obj[Symbol.iterator]().next() // {done: false, value: "哈哈"}
复制代码

12. generator（生成器）

12.1. 定义

# 创建
function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n++
    }
    return 
}
# 第一种调用，遇到yield a 返回一个对象{value: a, done: true/false}，然后暂停，done 表示这个generator 是否已经执行结束了，如果done 为true，则value 就是return 的返回值
var f = fib(5)
f.next() // {value: 0, done: false}
f.next() // {value: 1, done: false}
f.next() // {value: 1, done: false}
f.next() // {value: 2, done: false}
f.next() // {value: 3, done: false}
f.next() // {value: undefined, done: true}

# 第二种调用
for (let item of fib(5)) {
  console.log(item) // 0 1 1 2 3
}
复制代码

---

ES7

1. includes()

Array.prototype.includes()

let arr = ['react', 'angular', 'vue']
if (arr.includes('vue')) {
  return true
}
复制代码

2. 指数操作符**

   console.log(23) // 8 console.log(24) // 16

---

ES8

1. async/await

• async/await 是基于Promise 实现的，它不能用于普通的回调函数
• async/await 与Promise 一样，是非阻塞的
• async/await 使得异步代码看起来像同步代码

2. Object.values()

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

   console.log(Object.values(obj)) // [1, 2, 3]

   #不用Object.values() console.log(Object.keys(obj).map(key=>obj[key]))

3. Object.entries()

   #不用Object.entries() const obj = {a: 1, b: 2, c: 3} Object.keys(obj).forEach(key=>{ console.log('key:'+key+'value:'+obj[key]) //key:a value:1 //key:b value:2 //key:c value:3 })

   const obj = {a: 1, b: 2, c: 3} for (var [key,value] of Object.entries(obj)) { console.log(key:${key}--value:${value}) // key:a--value:1 // key:b--value:2 // key:c--value:3 }

4. String padding

5. 函数参数列表结尾允许逗号

   var f = function(a,c,){}

附上结构图

转载于:https://juejin.im/post/5ce3482ef265da1b7e100a4b