es6常用语法（一）

let 和 const 命令

let 命令

• 只在let命令所在的代码有效

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块即{}内有效。

{
  let a = 1;
  var b = 2;
}
console.log(a) // ReferenceError: a is not defined.
console.log(b) // 2

• 不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

// var 的情况
console.log(a); // 输出undefined
var a = 2;

// let 的情况
console.log(b); // 报错ReferenceError
let b = 2;

• 暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let a;
}

• 不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

---

• const 命令

const 声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

变量的解构赋值

• 数组的解构赋值

数组中提取值，按照对应位置，对变量赋值

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

嵌套数组进行解构的例子

let [ , , x] = ["a", "b", "c"];
console.log(x) // c
let [head, ...end] = [1, 2, 3, 4];
console.log(head)  // 1
console.log(end) // [2,3,4]

解构赋值允许指定默认值。

let [x, y = 'b'] = ['a']; // x='a', y='b'

• 对象解构赋值

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

let { a, b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"

实际上面的写法等于下面这个{ a, b }是 { a:a, b:b }的简写形式

let { a:a, b:b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"

对象的解构也可以指定默认值。

 var {a = 3} = {};
 console.log(a) // 3
 
 var {a, b = 2} = {x: 1};
 console.log(a) // 1
 console.log(b) // 2

• 函数参数的解构赋值

函数的参数使用解构赋值是平时最常见的用法。用法类似数组和对象结构赋值，包括默认值，非常好用。

function test([x = 5, y]){
  return x + y;
}

test([1, 2]); // 3
test([, 2]); // 7

function test2({x = 0, y = 0} = {}) {
  return [x, y];
}

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

数组和对象扩展运算符

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

• 数组扩展运算符

  console.log(...[1, 2, 3])
  // 1 2 3
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  //用于函数参数
  function push(array, ...items) {
    array.push(...items);
  }
  function add(x, y) {
    return x + y;
  }
  const numbers = [4, 38];
  add(...numbers) // 42

• 对象扩展运算符

关于属性简写

//属性简写
const a = 'a';
const b = {a};
console.log(b) // {foo: "bar"}
// 等同于
const b = {a: a};

//方法简写。
let c = {
 method() {
   return "Hello!";
 }
};
// 等同于
let c = {
 method: function() {
   return "test!";
 }
};

对象的扩展符用于从一个对象取值，相当于将目标对象自身的所有可遍历的

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

Symbol

---

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型

let s = Symbol();
typeof s
// "symbol"
let a = Symbol('foo');
let a = Symbol('bar');
console.log(Symbol('test') == Symbol('test')) //fase
a // Symbol(foo)
b // Symbol(bar)

a.toString() // "Symbol(foo)"
b.toString() // "Symbol(bar)"

作为属性名的 Symbol

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

Set 和 Map 数据结构

---

• Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
//数组去重
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

Set 实例的属性和方法

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。
• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

let a =new Set();
a.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

Set 遍历操作

• Set.prototype.keys()：返回键名的遍历器
• Set.prototype.values()：返回键值的遍历器
• Set.prototype.entries()：返回键值对的遍历器
• Set.prototype.forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

• Map

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

const m = new Map([['name','yzg'],['age',25]]);
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.has('name')  // true
m.get('age') //25

Map 遍历操作

• Map.prototype.keys()：返回键名的遍历器
• Map.prototype.values()：返回键值的遍历器
• Map.prototype.entries()：返回键值对的遍历器
• Map.prototype.forEach()：使用回调函数遍历每个成员