ES6 拾遗(9)

Submitted by Lizhe on Thu, 06/28/2018 - 10:14

Module

ES6模块不是对象, 而是通过export命令显示指定输出的代码, 再通过import命令输入

ES6 模块

import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法, 而不加载其他方法. 
这种加载被称为 编译时加载 或者 静态加载, 即ES6 可以在编译时就完成模块加载, 效率比CommonJS模块的加载方式高. 
当然这也导致了ES6模块本身无法被引用, 因为它不是对象

export命令

模块功能主要又两个命令构成 export和import.

export命令用于规定模块的对外接口, import命令用于输入其他模块提供的功能.

一个模块就是一个独立的文件. 该文件内部的所有变量, 外部无法获取. 如果希望外部能够读取内部某个变量, 就必需使用export关键字输出改变量

ES6 拾遗(8)

Submitted by Lizhe on Wed, 06/27/2018 - 16:39

Class的基本用法

1. class表达式

直接通过class定义肯定没有错

20180627044450

class也可以使用表达式的形式定义, 类似函数

下面的代码中, 这个类的名字是MyPoint而不是Point, Point只在class内部的代码可用, 代指当前类

ES6 拾遗(7)

Submitted by Lizhe on Wed, 06/27/2018 - 10:41

async函数

ES2017 标准引入了async函数, 使得异步操作变得更加方便. async函数是什么, 用一句话来说, 它就是Generator函数的语法糖

async函数返回一个Promise对象, 可以使用then方法添加回调函数. 当函数执行时, 一旦遇到await就会先返回Promise对象, 等到异步操作完成, 再接着执行函数体内后面的语句

function timeout(ms){

  return new Promise((resolve)=>{

    setTimeout(resolve,ms)

  })

}

 

async function asyncPrint(value,ms){

  await timeout(ms);

  console.log(value);

}

 

ES6 拾遗(6)

Submitted by Lizhe on Tue, 06/26/2018 - 11:18

对象的扩展

1. ES6 允许直接写入变量和函数作为对象的属性和方法

当属性名是表达式时

let obj = {
      ['a'+'b'+'c']: 123
}

ES6 允许在对象中只写属性名, 不写属性值, 这时 属性值等于属性名所代表的变量,这种写法用于函数的返回值会非常方便

20180626125437

2. Object.assign()

ES6 拾遗(5)

Submitted by Lizhe on Mon, 06/25/2018 - 17:41

数组的扩展

1. 扩展运算符( spread ) 是三个点 ( ... ), 它如同rest参数的逆运算, 将一个数组转为用逗号分隔的参数序列

console.log( ...[1,2,3])
console.log( 1,2, ...[3,4,5], 6 )

2. 合并数组

扩展运算符提供了数组合并的新方法

ES5
[ 1,2 ] .contact( more )

ES6
[ 1,2 ...more ]

3. Array.from()

Array.from方法用于将两类对象转为真正的数组

ES6 拾遗(4)

Submitted by Lizhe on Mon, 06/25/2018 - 13:36

箭头函数

ES6 允许使用"箭头" => 来定义函数

var f = argument => argument +1

上面的代码等价于

var f = function ( argumenrt ) {

    return argument + 1

}

如果箭头函数不需要参数或需要多个参数, 就使用圆括号代表参数部分
var f = () => 5

如果箭头函数的代码块部分多于一条语句, 就要使用大括号将其括起来, 并使用return语句返回
var sum = (a,b) => {return a+b}

由于大括号被解释为代码块, 所以如果需要箭头函数直接返回一个对象, 必需在对象外面加上括号
var getTemp = (id) => ({ id:id, name:"lizhe"})

箭头函数可以与变量解构一起使用
const getTemp = ({ id, name }) => id + "of " +name

ES6 拾遗(3)

Submitted by Lizhe on Thu, 06/21/2018 - 15:45

Promise 对象

所谓promise, 简单来说是一个容器, 里面保存着某个未来才会结束的事件

有 3 种状态 Pending 进行中, Fulfilled 已成功, Rejected 已失败

ES6规定, Promise对象是一个构造函数, 用来生成Promise实例.

function test(){

  let value = "hello world";

  var promise = new Promise(

    function(resolve,reject){

      if(true){

        resolve(value)

      }else{

        reject(value)

      }

    }

  );

}

ES6 拾遗(2)

Submitted by Lizhe on Thu, 06/21/2018 - 10:37

 

1. 函数参数的默认值

在ES6 之前, 不能直接为函数的参数指定默认值, 只能采用变通的办法

20180621104353

上面代码的缺陷在于如果name被赋值为false或者""则默认值会生效

ES6中可以直接为参数赋默认值,并且默认值只有在参数值为undefined时才会生效, null和"" 不会造成影响

ES6 拾遗(1)

Submitted by Lizhe on Wed, 06/20/2018 - 17:03

 

 

1. let const 不存在变量提升

2. let const 绑定到块级作用域

3. ES6 允许块级作用域无限叠加

4. ES5 中的函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域中声明

5. ES6 中明确允许在块级作用域之中声明函数. ES6规定, 在块级作用域之中声明的函数在块级作用域之外不可用(类似于let)

实际情况中为了兼容旧代码

允许在块级作用域内声明函数

声明类似var, 仍然会提升到全局作用域或函数作用域的头部

同时, 函数声明还会提升到所在的块级作用域的头部

考虑到环境导致的行为差异太大, 应该避免在块级作用域内声明函数.

如果确实需要, 也应该写成函数表达式的形式

 

函数声明语句

{

 

let a = “ message “;

function f() {

return a;

}

}

 

函数表达式

Nodejs IDE

Submitted by Lizhe on Wed, 06/20/2018 - 16:14

 

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode