ES6

1. let 和 const

// console.log(b); let 本身不会进行预解析。先声明再使用 
let b = 0;
// let b = 10; let 在同一作用域下不能重复声明
console.log(a,b); 

var a = 10;

// 常量 不能重新赋值,声明时必须赋值
const b = 10;
console.log(b);

2. 数组的解构赋值

按次序排列并按次序解构

// 1.模式匹配  按照对应位置，对变量赋值
let [a, b, c] = [1, 2, 3];

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

// 2.嵌套数组解构
let [a, [[b], c]] = [1, [[2], 3]];
a = 1;
b = 2;
c = 3;

// 3. 对应位置
let [x, , y] = [1, 2, 3];
x = 1;
y = 2;

// 4.数组的length属性

  let arr = ["一", "二", "三", "四"];
  let { length: len } = arr;
   len = 4

// 5.如果解构不成功，变量的值就等于undefined。
let [x, y, ...z] = ['a'];
 x = "a"
 y = undefined
 z = []

// 6. 交换值
let x = 1;
let y = 2;
[x, y] = [y, x];
x = 2
y = 1

3. 对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值

// 1. 等号左边需要赋值的对象名必须和等号右边对象的key相等，与位置无关
let { foo, bar } = {  bar: 'bbb',foo: 'aaa' };
 foo = "aaa"
 bar = "bbb"

// 2.如果解构不成功，变量的值就等于
let {foo} = {bar: 'baz'};
foo // undefined

// 3. 重命名
let obj={ a : '18',  n : '007', c : '2' }
let { a : age , n : name , count : c  }
 age = '18'
 name = '007'
 count = '2'

// 4. 嵌套
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
 x = "Hello"
 y = "World"

4.字符串的解构赋值

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

// 可以对这个属性解构赋值
let {length : len} = 'hello';
len = 5

5.模板字符串 反引号``

// JS里面不用拼接  直接在模板字符串里换行写HTML代码
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

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

${ } 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

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

6.箭头函数

// 1. 带参数   函数体只有简单的一行代码 
var f = v => v;
// 等同于
var f = function (v) {
  return v;
};

// 2.带多个参数   如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var f = ( a, b ) =>{ return a + b };
// 等同于
var f = function ( a, b ) {
  return a + b;
};

// 3.不带参数
var f = () => 5;
// 等同于
var f = function () {
   return 5
 };

// 4.this指向
// function 默认情况下谁调用   this 就指向谁
// 箭头函数中的this指向其定义时所在的作用域的this  
document.onclick = ()=>{
    console.log(this);
};   

7. Map和Set

// Map
let m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的Adam
m.set('Adam', 67); // 覆盖之前的Adam, 一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值冲掉
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

// Set 去重
//向 Set 加入值的时候，不会发生类型转换，所以3和"3"是两个不同的值。
    var s = new Set([1, 2, 3, 3, '3']);
    console.log(s); // Set {1, 2, 3, "3"}
    s.delete(3); // 删除3
    console.log(s); // Set { 1, 2, '3' }