ES6日常使用（精简版）

2019-02-19 本文已影响0人尤小小

基础指令：let const

使用let定义变量，来代替之前的var，let有块级作用域，在使用let时需要注意，let不可以重复定义，否则会报错。

let a = 'xiao'
let a = 'hei'

let 重复定义变量的报错：

Uncaught SyntaxError: Identifier 'a' has already been declared

const 用于定义常量，且该常量不可再次赋值，

const b = 'heihei'
b = 'xiaohei'

const再次赋值的报错:

VM266:2 Uncaught TypeError: Assignment to constant variable.

let const 的解构赋值，已经定义了常量c，在解构赋值的时候，需要obj里的c, 但是c不可以再次赋值了否则会报错，这里可以通过，对obj里的对象c重新命名，来解决这个问题。

const c = 'hei'
const {c: d, e, f} = obj; // 当前定义了常量，

箭头函数：value => return value + 1

箭头函数可以表达式赋值，可以写普通的函数，但是不可用于构造函数，并且箭头函数没有prototype。

function Animal() {
  this.name = name;
}

let animal = new Animal()

模版字符串：``Hello ${name}`

模版字符串可以用嵌套变量、函数、以及可以实现循环嵌套

注意循环嵌套的写法，在${} 里写map循环，map循环可以写箭头函数，

function temp() {
  return 'heihei'
}
let tempStr = `${temp()}`;
console.log(tempStr); // heihei

// 循环嵌套
let names = ['hei', 'bie', 'bao'];
let str  = `
${
  names.map(name => `<li>${name}</li>`).join('')
}
`;
console.log(str); // <li>hei</li><li>bie</li><li>bao</li>

promise：Promise resolve reject then

promise 是为了解决异步层层嵌套的问题，衍生的一种解决方案。在promise中有三个概念，分别是：resolve, reject, then, resolve请求成功执行的函数，reject请求失败执行的函数，then的链式调用用法。

let promiseA = new Promise(() => {
  
})

let promiseB = new Promise(() => {
  
})

promiseA.then(()=>{
  return promiseB
})

面向对象：class, extends, contructor,super,extends

ES6在面向对象新增了class类语法糖，原理也是通过function实现的。
在class的使用的过程中需要掌握几个概念contructor，super，extends.

class Animal {
  constructor(name) {
    this.name = name
  }
  getName () {
    return this.name
  }
}

let animal = new Animal('test')
console.log(animal.getName())

如果要实现子类的继承的话，需要使用extends，子类里没有this对象，如果想使用this的话，在子类的构建方法里调用super()。子类继承了父类，子类可以调用父类的方法。

class Animal {
  constructor() {
    this.name = 'heihei';
  }
  getName () {
    return this.name
  }
}

class Cat extends Animal {
    constructor() {
        super()
        this.name = 'gaoxiaohei'
    }
}

let animal = new Animal()
let cat = new Cat()
console.log(animal.getName())
console.log(cat.getName())

es6中对象的扩展用法

变量名可以直接用作对象的属性明
对象里的方法可以简写
表达式可以作为属性名或者方法名

let name = 'gaobingyan'
let age = 18

let obj = {
  name,
  age,
  getName() {
    return this.name
  },
  ['get'+'Age']() {
    return this.age
  }
}

 // 以数组的形式返回对象的属性名key
console.log(Object.keys(obj))

// 以数组的形式返回对象的属性值value
console.log(Object.values(obj)) 

 // 把几个对象做整合，后面的同名属性会把前面的覆盖掉，可以处理浅拷贝
Object.assign({}, {a: 1})

模块化：export, import, as, default

ES6模块化是一个比较大的话题，随着业务和项目工程的增大，越来越需要模块的支持，但是没有对应的标准和规范，后来出现来 commonJs 、AMD、CMD模块化规范。commonJS 需要借助node.js打包编译，AMD和CMD都需要额外引入模块加载。

创建一个module文件夹，在文件夹中创建index.html、index.js、module.js。
index.html文件:

<!-- 注意：type是module类型 -->
<script type="module" src="./index.js"></script>

index.js文件:

import {str as string, obj, fn } from './module.js' // 可以通过as的形式 对变量重命名
import foo from './module.js' // 默认导出的时候 可以对对象重命名

console.log(string) // 对str的重命名后为string 下面的调用就是 string
console.log(obj) // 默认导出的对象 有点像主站的utils
console.log(fn) 
console.log(foo)

module.js文件:

let str = "string"
let obj = {
    name: 'heihei'
}
let fn = () => {
    console.log('module test')
}

// 导出多个对象
export {
    str,
    obj,
    fn 
}

// 导出默认 类似与utils文件导出的obj对象
export default { 
    a: 1
}