ES6 - 变量、解构赋值及展开运算符

基础知识

由于ie低版本不兼容es6新语法，所以在使用的使用优先考虑兼容性的问题
如果不考虑兼容的话， 优先推荐使用let/const

let / const
let

写法和var 一致， 用来声明变量
let 和 var 的具体区别

var a = 15;
	let b = 1;

• var :

  • 重复声明
  • 作用域： 全局作用域 函数作用域(局部作用域)
  • 可以预解析(变量提升)

• let :

  • 不可以重复声明
  • 作用域： 全局作用域 { } 块级作用域(一对花括号包裹的区域)
  • 不可以预解析 ( 变量提升 ) 严格遵守先声明 后使用

let 声明时出错

• 重复声明
  

• 变量提升（未提前声明）
  
  .
  const
  声明数据时
  变量： 可以改变的
  常量：不可以改变的

与let的区别

• 使用let声明的常量可以修改， 使用const声明的常量，不可以修改
• 声明的时候，必须赋值其他情况，
• 可以let一致(不重复，块级作用域，不预解析)

const b = 10;
 	b = 20;
    console.log(b);

const 声明的常量修改时报错

块级作用域

只要是一个对花括号 就是一个块级作用域
块级作用域类似ES5中局部作用域，声明在其中的变量，出了该作用域，失效

<ul>
    	<li>列表1</li>
    	<li>列表2</li>
    	<li>列表3</li>
	</ul>

var lis = document.querySelectorAll("li");
	for(let i = 0; i < lis.length; i++){
		lis[i].onclick = function () {
			console.log(this.textContent);
	    }
	}
	// 上述for相当于  循环几次，出现几个块级作用域
	// 不需要再像最初的var 声明的变量一样 每次都必须保存才能使用过程中的变量

解构赋值

• 关于对象
  每个对象都可以有 若干的属性 / 方法
  冒号赋值，逗号间隔、 最后一个属性 / 方法 不需要逗号

 let obj = {
        a:1,
        b:2
    }

通过点语法来访问对象中存储的内容

let b = obj.b;

解构： 解开目标的整体结构
赋值：将目标中的数据 赋值到我们定义的变量中

• 对象的解构赋值：
  注意点：{ }中，名字必须和obj中保持一致
  也就是说 变量名必须和属性名一致

let {a,b} = obj;
console.log(a,b);

• 数组的解构赋值：
  注意点：保持顺序一致

let arr = [1,2,3,4,5];
	let [q,w,e,r] = arr;
	console.log(q,w);

• 字符串的解构赋值：
  注意点：和数组一致
  变量名的存储顺序 和 字符串中存储的顺序一致

  let str = "abc";
    let [d,f] = str;
    console.log(d,f);

展开运算符 …
在需要展开的目标前加… ,即可将该目标的值取出
不影响原有数据，对原有数据，做一个拷贝的动作

let arr1 = ["a","b","c","d"];
    let arr2 = [1,2,3,...arr1,4,5];
    let arr3 = [...arr1,"av"];
    console.log(arr3);
    console.log(arr1);

剩余参数 ： 解构赋值+展开运算符

   let obj = {
        a:1,
        b:2
    }
    let obj2 = {
        ...obj,
        c:3,
        d:4
    }
    console.log(obj2);
    let {a,b,...c} = obj2; 
    // let a = obj2.a   let b = obj2.b
    console.log(a,b,c);