环境搭建

创建目录

C:\Users\Administrator\WebstormProjects\es6

项目初始化

# 主要用于生成配置文件 package.json
# 静默生成配置文件
# npm init --yes
cd es6 && npm init

安装基础依赖包

常见组件安装

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

# npm install --save-dev @babel/core
# npm install --save-dev @babel/preset-env
# npm install --save-dev @babel/cli
# npm install --save-dev @babel/polyfill
# npm install --save-dev @babel/node
# npm install --save-dev core-js regenerator-runtime
# babel-node全局安装

# in .babelrc 必须要配置，否则无效
# 使用：./node_modules/.bin/babel-node xxx.js
{   
  "presets": [
    "@babel/preset-env"   
  ] 
}

babel

# 1、安装 Babel 转码器
npm install --save-dev @babel/core

2、基础配置文件
vim .babelrc
{
  "presets": [], // presets字段设定转码规则
  "plugins": []
}

3、安装最新转码规则
# 不要使用：babel-preset-es2015
# 建议使用：babel-preset-env 可以根据运行环境来自动将ES2015+的代码转换为es5

npm install --save-dev @babel/preset-env

4、修改配置文件
vim .babelrc
{
  "presets": ["@babel/preset-env"], // presets字段设定转码规则
  "plugins": []
}

5、命令行转码
npm install --save-dev @babel/cli
基本用法如下：
# 转码结果输出到标准输出
npx babel example.js
# 转码结果写入一个文件
npx babel example.js -o compiled.js
# 整个目录转码
npx babel src -d lib
# -s 参数生成source map文件
npx babel src -d lib -s

6、preset-env 会加载 polyfill
npm install --save-dev @babel/polyfill

7、交互式(REPL)环境
npm install --save-dev @babel/node
# 使用(和node用法一样，类似python，不跟文件则进入交互式界面，如果有文件，这执行文件)
# 和node的主要区别就是：包含Node环境的同时也可以直接运行ES6的代码
babel-node

# node不支持es6 module的 import 和 export方法
# babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码，所有命令改成下面即可：
执行命令由：
node test.js		// es6的代码会报import错误
改成：
babel-node test.js

polyfill

# vue不需要polyfill
# Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

# 安装
npm install --save-dev core-js regenerator-runtime
# 使用：在脚本头部，加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';

ES6 的功能侦测库 ES-Checker

https://www.cnblogs.com/cag2050/p/7567248.html
node支持了大部分es6的功能，但还不支持es6模块化(export、import)

npm install -g es-checker
es-checker

# node不支持es6 module的 import 和 export方法
执行命令由：node test.js 改成 babel-node test.js

ESLint

# ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码
# 安装
npm install --save-dev eslint
# 初始化配置文件
# ./node_modules/.bin/eslint --init
eslint --init
# 校验文件
eslint test.js

class

es5传统方法

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

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

es6语法

// 可以看到里面有一个constructor方法，这就是构造方法
// 定义(toString)方法的时候，不需要function关键字
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

// 在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面
class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

类的继承

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {  // 等同于es5： toString：function()
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

Module 的语法

常见export方法

// profile.js
export var firstName = 'Michael';
export function f() {};

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

// xxx.js
function v1() { ... }
function v2() { ... }

// v2可以用不同的名字输出两次
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

// ES6模块
import { stat, exists, readFile } from 'fs';

import 命令

// main.js
import { firstName, lastName, year } from './profile.js';

import { lastName as surname } from './profile.js';
// .js后缀可以省略
import { firstName, lastName, year } from './profile';
// 模块的整体加载
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

export default 命令

// 从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

// 为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}
// 上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

// 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字
// import-default.js
import customName from './export-default';
customName(); // 'foo'

// export default命令用在非匿名函数前，也是可以的
// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

export注意事项

如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。

函数名的首字母应该小写
类名的首字母应该大写
模块默认输出一个对象，对象名的首字母应该大写

函数

# 支持默认值
function log(x, y = 'World') {
  console.log(x, y);
}

箭头函数

https://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4&x=0&y=0#docs/function

// ES6 允许使用“箭头”（=>）定义函数。
var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

// 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

// 箭头函数可以与变量解构结合使用
const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

// 箭头函数使得表达更加简洁
const isEven = n => n % 2 === 0;
const square = n => n * n;

// 带参数的立即执行函数可以写成箭头函数的形式
((num) => {
  console.log('Welcome to the Internet.' + '' + num);
})(111);

作用域

// https://es6.ruanyifeng.com/?search=export&x=0&y=0#docs/let
// let用于for和if，控制作用域
for (let i=0; 0 < xx.length;i++) {
}
// 大括号是基础作用域块(let声明的变量，只能在大括号里面使用)
{let i=1}
{let i=2}

const使用

1、赋值后不能修改
2、必须赋值
3、常量的含义是指向的对象不能修改，但是可以改变对象内部的属性(其实就是不能修改内存地址的指向)
const app = new Vue();

对象增强写法

// 理解对象字面量：
const obj = new Object();
const obj = {}; // {}就是字面量写法

// 1、属性的增强写法
const name = 'zaza';
const obj = {
  name  // 等价于 name: name
}

// 2、函数的增强写法
const obj = {
  run() { // 等价于es5==> run: function()
    }
}

数组高阶用法

// 编程范式：命令式编程/声明式编程
// 编程范式：面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)
// filter/map/reduce
// filter返回布尔值，true的话返回值，false丢弃值
const nums = [12, 20, 111, 222, 40, 50]
// console.log(nums);

// 1、取所有小于100的数字
newNums = nums.filter(value => value < 100)
console.log(newNums);

// 2、取所有小于100的数字进行转化：全部*2
nnewNums = newNums.map(value => value * 2)
console.log(nnewNums);

// 3、所有数字相加，得到结果
// console.log(nums.reduce(function (pre,cur) {
//   return pre + cur
// }, 0));
// console.log(nnewNums.reduce((pre, cur) => pre + cur));
// 第二个参数为是初始值
console.log(nnewNums.reduce((preValue, newValue) => preValue + newValue, 0));
// 实例场景：
// [ 24, 40, 80, 100 ]
// 第一次：preValue 0 newValue 24
// 第二次：preValue 24 newValue 40
// 第三次：preValue 64 newValue 80
// 第四次：preValue 144 newValue 100
// 最后结果是：144+100=244
console.log(nnewNums.reduce((preValue, newValue) => preValue + newValue, 0));

// 一条命令实现，小于100，全部转换*2,计算最后的结果
// 一次计算结果
console.log(nums.filter(value => value < 100).map(value => value * 2).reduce((pre, n) => pre + n, 0))

html之label的好处

<!--label的for值和input的id值一样的时候，点击按钮和'啊啊啊啊'均可以选中对应的input-->
<label for="agree">
    <input type="checkbox" id="agree">啊啊啊啊
</label>

语法糖

  1. ES6语法可以使用``定义字符串，这个是’‘的加强版，支持换行符号