ES6 语法一（部分）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

摘要

ES6 是 ECMAScript 6.0 的简称，是 JavaScript 语言的下一代标准。ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

新的声明方式

let

ES6 新增了 let 声明变量的命令，用法类似于 var。

• 不属于顶层对象 window

• 不允许重复说明

• 不存在变量提升

• 暂时性死区：防止变量声明之前使用

• 块级作用域

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

  不合理的场景：内层变量覆盖外层变量

  var index = 10;
  for (var index = 0; index < 3; index++) {
      console.log('循环内：', index)
  }
  console.log('循环外', index)
  

let n = 5;
if (true) {
    let n = 10;
}
console.log(n); // 5

const

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

const A = 5;
console.log(A);
A = 10;
console.log(A);

const 一旦声明变量，就必须立即初始化赋值。

const A;

解构赋值

数组解构赋值

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

// ES6
let [a, b, c] = [1, 2, 3]

对象解构赋值

let { name, age } = { name: '张三', age: 18, sex: '未知' }

字符串解构赋值

此时字符串转成类数组的对象

const [a, b, c, d, e] = 'hello'
console.log(a) // 'h'

let { length: len } = 'hello'
console.log(len) // 5

数值和布尔值解构赋值

数值和布尔值会转成对象

let { toString: s } = 123

let { toString: s } = true

解构赋值应用场景

• 交换变量的值

let x = 1
let y = 2

[x, y] = [y, x]

• 从函数返回多个值

function example() {
  return {
    foo: 1,
    bar: 2
  }
}
let { foo, bar } = example()