ES6语法分享

luohy15

2019-05-20

module

  • export, import
  • 取代之前的require和module.exports
  • 从运行时加载变为编译时加载
  • 能够进行静态分析优化

module: 常用语法

// in xxx.js
export let m = 1
// export {m}

// in yyy.js
import {m} from './xxx'
// import {m} from './xxx'
// import {m as n} from './xxx'

module: export default

// in xxx.js
// export let m = 1
let m = 1
// export {m}
export default m

// in yyy.js
// import {m} from './xxx'
// import {m} from './xxx'
// import {m as n} from './xxx'
// import * as x from './xxx'
import n from './xxx'

本质上输出一个叫default的变量, 然后允许你命名

module: 其它

  • import(): 条件/动态加载
  • 复合写法: export {foo as myFoo} from 'xxx'

const

  • 变量指向的内存地址不变
  • 原始类型 (number, string, boolean) 值就存储在那个内存地址
  • 复合类型 (Object, Array) 那个内存地址存的是指针

let vs var

  • 块级作用域 vs 全局作用域
    • 块级作用域不会污染外层变量
  • 不存在变量提升 vs 变量提升
  • 存在暂时性死区 vs 无暂时性死区
  • 不允许重复声明 vs 允许重复声明

object: 简洁表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

const o = {
  method() {
    return "Hello!";
  }
};
o // {method: f}


// 属性名为变量名, 属性值为变量的值

// 多用于返回值/接口的简写

object: 拓展运算符

let a = {k1: 0}
let b = {...a, k2: 0} // { k1: 0, k2: 0 }

// 常和map结合使用

object: 解构赋值

let a = {k1: 0}
let b = {...a, k2: 0} // { k1: 0, k2: 0 }
let {k2, ...c} = b 
c // {k1 : 0}

array: 常用操作

b = a.map((item, idx, arr) => item + 1, out)
// map是可以有idx的
// 可以接受第二个变量作为this

a.reduce((acc, cur, idx, arr) => acc + cur, init)
// 还有从后往前的reduceRight
// init作为累积变量初始值
// 实际上reduce也可以用来做遍历

箭头函数

let fa = v => v
fa(1) // 1

let getObj = id => ({id: id})
getObj(1) // {id: 1}

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}
let f = foo.call({id: 1});
// 箭头函数没有自己的this
f.call({id: 2})()(); // id: 1
f().call({id: 3})(); // id: 1
f()().call({id: 4}); // id: 1

箭头函数+解构赋值+简洁表示法

const object = { a: 5, b: 6, c: 7  };
const picked = (({ a, c }) => ({ a, c }))(object);
picked // ???
picked // { a: 5, c: 7 }

const object = { a: 5, b: 6, c: 7  };
const picked = (({ a, c }) => ({ a, c }))(object);
picked // ???

模板字符串

// 告别 para = 'k1=' + v1 + '&k2=' + v2 + ...
para = `k1=${v1}&k2=${v2}`

异步操作模式

  • 回调函数
  • 事件监听 
  • 观察者模式

Promise: 为异步操作提供同步接口

// 传统写法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

Promise: 微任务

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

console.log(3);
// 3
// 2
// 1

// 在本轮事件循环末尾执行
// 晚于同步任务
// 早于一般异步任务

Promise & Generator

var g = function* (){
  var f1 = yield readFileThunk('fileA');
  var f2 = yield readFileThunk('fileB');
  // ...
  var fn = yield readFileThunk('fileN');
};

run(g);

Async

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

async function basicDemo() {
  let result = await sleep(3000);
  console.log('a')
}

basicDemo();

ES6语法简介

By luohy15

Made with Slides.com

ES6语法简介

  • 468

More from luohy15