ES6里新增变量声明与解构赋值

ES6的变量声明

ES6中新增了let和const关键字来定义变量：
let: 声明的变量只在 let 命令所在的代码块内有效。
const:声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

let:局部变量

• let声明的变量不会挂在window中，不会造成全局变量的污染
• 新增了一个块级作用域{}，以前只有函数作用域，全局作用域
• let是不允许重复声明
• let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘x’ before
  initialization）
  const:常量
• const声明的变量不会挂在window中，不会造成全局变量的污染
• const是不允许重复声明
• const不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before
  initialization） 面试点
• const不允许被修改,不允许改变内存空间的地址
• const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址
• 用const，不能使用就用let。常量的效率比变量要高

变量的解构赋值

字符串解构赋值

//JavaScript中字符串可以看成只读的数组，在字符串的结构赋值中有一个length属性可以获取该字符串长度
const [a,b,c,d,e] = 'hello';
//a = 'h',b = 'e',c = 'l' ...

let {length : len} = 'hello';
//len = 5

//数组的解析是适合Set 和lterator
let [x,y,z] = new Set(['a','b','c']);
//X = 'a', y = 'b', z = 'c'

数值的解构赋值

let [a,b,c] = [1,2,3]
//本质上，这种写法属于“模式匹配”
//只要等号两边的模式相同，左边的变量就会被赋予对应的值

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

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

let [g, ...h] = [1, 2, 3, 4];
// g = 1, h = [2,3,4]

如果变量对应没有值呢？

let [a] = [];
// a = undefined

let [b, c] = [1];
// b = 1, c = undefined

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

结果显示如果变量对应没有值，则变量赋值为undefined
但是如果等号两边的类型不同，则解析时会报错。

如果变量存在默认值，如果该变量对应的值为undefined，那么变量就会被赋予默认值，否则就是对应值。

//ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
//所以，只有当一个数组成员严格等于undefined，默认值才会生效
let [a = true] = [];
// a = true

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


//如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值
//默认值可以引用解构赋值的其他变量，但该变量必须已经声明
function fn(){}
let [x = fn()] = [1];

let [x = 1, y = x] = [1, 2]; 
// x=1; y=2
let [x = y, y = 1] = [];     
// ReferenceError: y is not defined

对象的解构赋值

//语法 let{a,b} = {a : 'aaa', b ：'bbb'} 
let obj = {
	a : 'aa',
	b : 'bb',
	c : 'cc'
}
let [a,b,c] = obj;

如果变量对应没有值解析，那么变量为undefinded

let { c } = { a : 'a' , b ：'b' };
//c = undefinded

对象的解构赋值的内部机制，是先找到同名属性，
然后再赋给对应的变量。真正被赋值的是后者，而不是前者

let { a: c } = { a: 'aaa', b: 'bbb' };
// c = "aaa"
// a = error: a is not defined

函数参数的解构赋值

//语法：[[1, 2], [3, 4]].map(([a, b]) => a + b); \\ [3, 7]

function fn({
    a,
    b,
    c = 10,
    d = 20,
} = {}){
    return a+b+c+d;
}

fn({a:1,b:2})
// 33

模板字符串

语法：把字符串写在``里面，${变量、表达式、函数}：获取值

var obj ={
    name: '刘卿',
    age: 22
}

// 传统打印
console.log("我的名字叫" + obj.name + ",今年" + obj.age + "岁");

// ES6
console.log(`我的名字叫${obj.name},今年${obj.age}岁`);

//如果模板字符串的变量没有声明，将报错
//由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出
//模板字符可以嵌套，但是没有必要

标签模板

alert`hello` //==> alert(['hello'])
//标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数