ES5/ES6/ES7 特性

var已经被弃用，使用const和let

大多数时间如果变量不会被重新分配使用const。 变量会改变的情况下使用let。

使用for(elem of collection)而不是for(elem in collection)

for of是新的，for in是旧的。 for of解决了for in的问题。

举个例子，你可以像这样迭代一个对象的所以键/值对

for (const [key, value] of Object.entries(someObject)) {
  console.log(key, value);
}

使用 forEach, map, 和 filter

数组新增的函数forEach、 map和 filter 在现代JavaScript中使用都是相当广泛的。

使用解构赋值

假设有一个对象const dims = {width: 300, height: 150}

老的代码

const width = dims.width;
const height = dims.height;

新代码

 const {width, height} = dims;

使用对象声明简写

老的代码

const width = 300;
const height = 150;
const obj = {
  width: width,
  height: height,
  area: function() {
    return this.width * this.height
  },
};

新代码

 const width = 300;
 const height = 150;
 const obj = {
   width,
   height,
   area() {
     return this.width * this.height;
   },
 };

使用扩展运算符…

扩展运算符有大量的用途。例如

 function log(className, ...args) {
   const elem = document.createElement('div');
   elem.className = className;
   elem.textContent = [...args].join(' ');
   document.body.appendChild(elem);
 }

另一个例子

const position = [1, 2, 3];
somemesh.position.set(...position);

使用class

大多数人都不熟悉在ES5之前生成类对象的语法。 ES5之后你现在可以使用class 关键字 接近于C++/C#/Java的语法。

理解 getters 和 setters

Getters和 setters是 在大多数现代语言中常见的。ES6class语法 让他们比ES6之前的更容易。

合理使用箭头函数

回调函数和promise使用箭头函数非常有用

loader.load((texture) => {
  // use textrue
});

箭头函数会绑定this，它是下面的简写

(function(args) {/* code */}).bind(this))

Promises 以及 async/await

Promises改善异步代码的处理。Async/await改善 promise的使用。
这是一个需要深入了解的话题你可以在这里 细读promises 和async/await.

使用模板字符串

模板字符串是使用反引号代替引号的字符串。

const foo = `this is a template literal`;

模板字符串有两个基本的特点。一个是它可以多行

const foo = `this
is
a
template
literal`;
const bar = "this\nis\na\ntemplate\nliteral";

上面的foo和bar是一样的。

另一个是你可以超越字符串模式 使用${javascript表达式}插入JavaScript代码段。这是模板部分。比如:

const r = 192;
const g = 255;
const b = 64;
const rgbCSSColor = `rgb(${r},${g},${b})`;

or

const color = [192, 255, 64];
const rgbCSSColor = `rgb(${color.join(',')})`;

or

const aWidth = 10;
const bWidth = 20;
someElement.style.width = `${aWidth + bWidth}px`;

参考