ES6 book

在线测试ES6

https://babeljs.io/repl

在线api

http://es6.ruanyifeng.com/#docs/module  from 阮一峰 ES6

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000  廖雪峰的官方网站ES5

 

语法介绍

 

module模块

ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

import在静态解析阶段执行，所以它是一个模块之中最早执行的。  

让chrome支持es6的module语法 , 只需要  script的标签必须为type="module"，import的时候必须带上.js的后缀名 , 另外部分特殊语法兼容性还会有些小问题.

 利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中       

  console.log(this === undefined); // true

 

 

 index.html main.js   son.js parent.js 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ES6</title>
</head>

<body>
  <div id='root'>
  </div>
  <script src="main.js" type="module"></script>
</body>

</html>

 

 

 

 

 
//此处_代表导出son.js的default模块defaultFunction方法
import _, { abc, person, people, dog, add, changeAbc, Point } from "./son.js"
import 'lodash';

function showInDiv(html) {
    document.getElementById("root").innerHTML = html;
}
showInDiv(abc);
changeAbc("cba");//ES6 模块是动态引用,改变原值后可以影响之后的使用
showInDiv(abc);

let addResult = add(1, 2);
console.log(addResult)


let pp = new Point(1, 2);
console.log(pp);

dog.name = "snoopy"
console.log(dog.name)

_("default function is invoked")

//动态加载模块import(),类似于Node的require方法，区别主要是前者是异步加载，后者是同步加载。
if (1 == 1) {
    import('./son.js')
        .then(({ abc }) => {
            console.log(abc)
        }).catch(exp => {
            console.log(exp)
        });
}

 

 

 

 

 

 

 

 

 

export var abc = "abc";//直接导出变量
var person = "person";
var dog = { id: 1, name: "jojo" }
export { person }//导出普通字符串
export { person as people }//导出并取别名
export { dog }//导出json对象

export function changeAbc(newValue) {//直接导出方法
    abc = newValue;
}

function add(a, b) {
    return a + b;
}
export { add }//导出方法

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

export { Point }//导出类

export default function defaultFunction(a) {//导出默认值, 只能有一个默认
    return ("default : " + a)
}

//继承父类,导出parent.js父类的所有模块 ,
export * from "./parent.js";//此处注释前一定要有分号,不然会导致无法导出模块
//或者像这样注释另一起行

 

 

 

 

 

 

function divide(a, b) {
    return a / b;
}

//导出方法
export { divide };

//导出常量
export const constA = "aaa"

 

 

 

 

 
 入口文件      
       

 

 

函数

默认值

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

//传入undefined，将触发该参数等于默认值，null则没有这个效果。
function foo(x = 5, y = 6) {
    console.log(x, y);
}
foo(undefined, null)//5 null

 

作用域

ES5 只有全局作用域和函数作用域，没有块级作用域

   ES5原代码   ES5自动转码 
 

 

 

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    //var声明变量会被自动自动提升到函数开头
    var tmp = 'hello world';
  }
}

f(); // undefined

 

 

  ES5中等于

 

 

var tmp = new Date();

function f() {
  var tmp;//变量自动被提升到函数开头
  console.log(tmp);
  if (false) {
    tmp = 'hello world';
  }
}

f(); // undefined

 

 
       
       

 

参考: http://es6.ruanyifeng.com/?search=...&x=0&y=0#docs/let#为什么需要块级作用域？

 

解构

// 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；
// 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
// 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
// 下面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

参考: http://es6.ruanyifeng.com/?search=...&x=0&y=0#docs/destructuring#对象的解构赋值

 

 

 

 

for循环作用域

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

let i = "abc";
for (let i = 0; i < 3; i++) {
  let i = 'def';
  console.log(i);
}

参考: http://es6.ruanyifeng.com/?search=...&x=0&y=0#docs/let#基本用法

 let命令暂时性死区

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

参考: http://es6.ruanyifeng.com/?search=...&x=0&y=0#docs/let#暂时性死区

循环加载函数

少了一倍的时间复杂度,设计比较美妙, 不过用直白的 if-else 反而会更加容易理解, 观赏一下就行

 1 // even.js
 2 import { odd } from './odd'
 3 export var counter = 0;
 4 export function even(n) {
 5   counter++;
 6   return n === 0 || odd(n - 1);
 7 }
 8 
 9 // odd.js
10 import { even } from './even';
11 export function odd(n) {
12   return n !== 0 && even(n - 1);
13 }
View Code

参考自: http://es6.ruanyifeng.com/?search=...&x=0&y=0#docs/module-loader#ES6-模块的循环加载

参考

ES6快速入门==>https://www.jianshu.com/p/e37d902abd91

 

mysql 5.7同步数据到es 7.6.2（集群）==>https://blog.csdn.net/qq_39893313/article/details/123688809

posted @ 2019-01-29 21:08  苦涩泪滴  阅读(199)  评论(0)    收藏  举报