ES6学习笔记（一）

1. let和const

ES6新增了两个声明变量的命令，let和const。

let命令：

1. let可以替代var，两者语义相同，且let没有副作用。
2. let为JavaScript增加了块级作用域，let声明的变量仅在它所在的块级作用域有效。
3. let没有变量提升，变量必须在声明之后使用，否则会报错。
4. 如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域，不受外部影响。凡是在声明之前就使用这些变量，就会报错。“暂时性死区”
5. let不允许在相同作用域内重复声明同一个变量。

const命令：

1. 声明一个只读的常量，声明后常量的值不可改变，且必须在声明时初始化。
2. const只在声明的块级作用域有效。
3. const没有变量提升，存在暂时性死区，仅在声明之后才能使用。
4. const同样不允许在相同作用域内重复声明。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[2](); // 2

2. 解构赋值

1.数组的解构赋值

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

let [d, [[e], f]] = [1, [[2], 3]]; //d=1,e=2,f=3

let [ , , third] = ["foo", "bar", "baz"]; //third=baz

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

let [head, ...tail] = [1, 2, 3, 4]; //head=1,tail=[2,3,4]

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

//解构赋值可以指定默认值
[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

//当未赋予值或赋予的值===undefined，则默认值会生效
var [x = 1] = [undefined];//x=1
var [x = 1] = [null];//x=null

//当默认值是一个表达式，则采用惰性求值，只有在用到的时候才会求值
function f() {
  console.log('aaa');
}
let [x = f()] = [1];//因为x取到了1，所以不会执行f函数

//默认值可以引用解构赋值的其他变量，但该变量必须已经声明
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

2.对象的解构赋值

数组的解构赋值按照数组的顺序，对象的解构赋值按照属性同名赋值，变量必须与属性同名才能取到值。对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

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

var { baz } = { foo: "aaa", bar: "bbb" }; //baz=undefined

//变量名与属性名不一致时，需写成如下：
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //此时变量是baz，将foo的值赋给baz变量，所以结果是baz="aaa"

//用于嵌套结构的对象时
var node = {
  loc: { 
       start: { line: 1, column: 5 } 
   }
  };
var { loc: { start: { line }} } = node;
//line=1
//loc和start都是模式，不是变量，因此不会赋值

3.字符串的解构赋值

此时字符串被转换成了类数组对象

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

//可以对类数组的length属性解构复制
let {length : len} = 'hello';
len // 5

4.函数参数的解构赋值

//函数参数的默认值是一个空对象，并且空对象默认的属性x=0,y=0
function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

//直接解构对象，并获得对应的属性值赋予变量
function getFullName({ firstName, lastName }) {
    console.log(firstName+' '+lastName);
}
var a= { firstName:"Jonathan", lastName:"Chan" };
getFullName(a);//Jonathan Chan

5.用途

• 交换变量的值 [x, y] = [y, x];
• 函数返回多个值，可以将需要返回的多个值放在数组或对象里返回

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example(); //a=1,b=2,c=3

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example(); //foo=1,bar=2

• 函数参数的定义
• 提取json数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

• 遍历map解构

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

• 输入模块的指定方法

3. 模板字符串

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

var a=`this is a test`;

2.多行字符串
表示多行字符串时，所有的空格换行缩进都被保留在输出之中

var b=`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`;

3.字符串中嵌入变量
需要将变量名写在${}之中，如果模板字符串中的变量未声明，则会报错

var a='Jonathan',b='Chan';
`${a} ${b}`; //"Jonathan Chan"

//大括号内部可以放入任意JavaScript表达式
var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

//模板字符串中也可以调用函数
function fn() {
  return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar

---

参考资料：《ECMAScript 6 入门》——阮一峰