最近一直在学习前端方面的东西，简单来说主要是为了学会使用 React 技术栈开发应用，看了很多文档，感觉收获很多，但是要仔细写写学了什么的话，又发现什么都写不出来，估计真的是知识量太大了，一下消化不了。整理下自己在这个过程中看过的一些文档，有些看完了，有些只是查阅，方便后续继续学习和补充。

开发环境

VS CODE 、 Node.js 、 npm 、Yarn 、 git

HTML5

HTML5教程、DOM模型

JavaScript

JavaScript教程

ES6入门教程

let 、 const 和 var

let 和 const 命令用于声明变量，let 声明的变量是可变的，const 声明的变量是不可变的。

  let foo = 1;
  foo = 2;

  const bar = 1;
  bar = 2; // 报错

  const foo = {
  bar: 1
  };

  foo.bar = 2;

var 一般不使用，因为具有提升和作用域的问题，容易导致出错。

  console.log(a); // undefined
  var a = 1;
  var a = 2;
  console.log(a); // 2    

  for (var i = 0; i < 3; i++) {
      console.log('for: ' + i);

      setTimeout(() => {
          console.log('setTimeout: ' + i);
      })
  }
  // for: 0
  // for: 1
  // for: 2
  // ③ setTimeout: 3

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

  let [a, b, c] = [1, 2, 3];
  console.log(a, b, c); // 1 2 3

  let { foo, bar, beer = 'x' } = { foo: "aaa", bar: "bbb" };
  console.log(foo, bar, beer); // aaa bbb x

对象的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

  const foo = 'bar';
  const baz = { foo }; // const baz = { foo: foo };
  console.log(baz); // {foo: "bar"}

  const o = {
      method() {
          return "Hello!";
      }
  };
  // 等同于
  const o = {
      method: function() {
          return "Hello!";
      }
  };
  o.method(); // Hello

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

  var f = function(v) {
      return v;
  }
  // 改成箭头函数
  var f = (v) => { return v; }
  // 进一步改写
  var f = v => v;

  // 无参数
  var f = () => 5;
  // 多个参数
  var f = (num1, num2, flag) => {
      if (flag === '+') {
          return num1 + num2;
      }
      return num1 - num2;
  };

扩展运算符

扩展运算符（spread）是三个点 ... 。它好比 rest 参数的逆运算，将一个数组或对象转为用逗号分隔的参数序列

  // 数组
  console.log(...[1, 2, 3]); // 1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
  // 对象
  const foo = {a:'1',b:'2'};
  const bar = {...foo, b: '3', c: '4'};
  console.log(bar); // {a: "1", b: "3", c: "4"}
  const beer = {b: '3', c: '4', ...foo}
  console.log(beer); // {b: "2", c: "4", a: "1"}

class

ES6 允许新建“类”（class）。

  class SkinnedMesh extends THREE.Mesh {
      // 构造函数，新建实例的时候，自动调用这个方法。
      constructor(geometry, materials) {
          super(geometry, materials);

          this.idMatrix = SkinnedMesh.defaultMatrix();
          this.bones = [];
          this.boneMatrices = [];
          //...
      }
      // 重写父类方法
      update(camera) {
          //...
          super.update();
      }
  }

module

ES6 意义最重大的语法变化，就是引入了模块（module）。

  // lib/math.js 使用export命令输出对外的接口
  export function sum(x, y) {
      return x + y;
  }
  export var pi = 3.141593;

  // import命令用于引入该模块。
  import * as math from "lib/math";
  alert("2π = " + math.sum(math.pi, math.pi));

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。

  // 传统
  $('#result').append(
      'There are <b>' + basket.count + '</b> ' +
      'items in your basket, ' +
      '<em>' + basket.onSale +
      '</em> are on sale!'
  );
  // 模板字符串
  $('#result').append(`
      There are <b>${basket.count}</b> items
      in your basket, <em>${basket.onSale}</em>
      are on sale!
  `);