ECMAScript 6常用语法

1.let(变量) 与 const(常量)

• 之前定义变量，用 var 关键字；有如下主要缺点：
  • 存在变量提升问题，降低 js 代码的可阅读性
  • 没有块级作用域，容易造成变量污染
• let 主要特性：
  • 不存在变量提升问题，只有定义之后才能使用此变量
  • 有 { } 作用域
• const 主要特性：
  • 不存在变量提升问题，只有定义之后才能使用此变量
  • const 定义的常量，无法被重新赋值
  • 当定义常量的时候，必须定义且初始化，否则报语法错误
  • const 定义的常量，也有 块级作用域

2.解构赋值

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

2.1数组的解构赋值

es6之前,变量赋值:

let a = 1;
let b = 2;
let c = 3;

而es6,可以写成

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

如果解构不成功，变量的值就等于undefined(等号左边项>右边项)

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组(等号左边项<=右边项)。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

 2.2 对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果解构失败，变量的值等于undefined

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

当然,字符串,函数,布尔值,函数参数都可以结构赋值,这里就不做详细介绍了.

需要了解的,可以参考:ES6 入门教程

3.模板字符串

传统的 JavaScript 语言，输出模板写法相当繁琐不方便，在ES6 引入了模板字符串解决这个问题.

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中.如果不想要，可以使用trim方法消除它

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

4.箭头函数

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;
};

使用注意点

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

注:Promise 对象将在下一篇文章单独讲解,等不及的,可以点击下方参考文档查阅

参考文档:ES6 入门教程   ECMAScript 6 入门  阮一峰

5.ES6+ 可选链操作符

日常开发中有时间需要取接口返回的数据最底层某个字段，一般情况下也没有和后端约定某个字段没有值是返回空还是null，因此有时需要前端一个个去判断每一层的字段是否有值。

row.car_source.selling_price&&row.car_source.selling_price

比如取selling_price这个字段，就需要一个个去判断，比较繁琐。当然也可以在开发之初和后端约定好。这里不做另外说明。简单说下另一个方法：es6新增的语法：可选链操作符，就可以很好的解决这个问题。上面代码可以简化为

row?.car_source?.selling_price&&row?.car_source?.selling_price

对，你没看错，只需要在.的前面加个?，英文状态下的就可以很好的解决这个问题

参考链接：

ES6+ 可选链操作符