ES6声明变量与变量的解构赋值

      个人笔记，部门内容源于阮一峰先生的ES6 入门教程，这里只是列一些我工作中用到的，想深入了解这些内容的高级运用，建议看原书进行学习。

1.变量声明

       let和const是ES6新增的声明变量的方法，在项目中我们会比较常用，let一般用于循环方法里，可以避免变量提升，造成全局混乱，const更为常用，一般用于定义常量，对常量赋值，值得一提的是，const的值不可改变，只能为你一开始初始化时定义的值。而且let和const都有其块级作用域，可以只在方法内生效，不会污染全局，非常常用。

1. let命令
   let只在所在代码块中有效
   

       for循环器就适用let命令,在for循环中，设置for循环那部分是父作用域，循环体内是单独的子作用域。

       因为var存在变量提升即可以在变量声明前调用变量，而且作为全局变量很容易在某些适用时产生未知的错误，所以谨慎用var，多用let和const，因为我目前比较少接触到会频繁使用var的代码部分，在使用前就需要明白自己所写出的代码的作用和含义，以减少出错。

       let和const可能会导致暂时性死区，听起来吓人，但只要养成良好编码习惯先赋值再使用，就不容易出错。编码指南还是挺重要的，自己舒服代码写的简洁高效明了，也方便后期。

ES6 规定暂时性死区和 let 、 const 语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。
这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获
取和使用该变量。

2.const
2.1    const 声明一个只读的常量。一旦声明，常量的值就不能改变,加入想要变动const声明的量，会报错read-only或者 Assignment to constant variable.
2.2    const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效

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

     结论：在目前的开发中，尽量可能用let代替var，减少出错，多用let以及const，当运用熟练时，var也就不那么可怕了。

2.变量的解构赋值

      解构赋值是ES6新增的一种赋值方式，比起以往的直接赋值来说，更加便捷与高效，通俗来说

//ES5
var a = 1 ; 
var b = 2;
var c = 3;
//ES6数组的解构赋值
let [a,b,c] = [1,2,3];

       这种是数组解构赋值，从数组中提取值按照对应位置进行赋值，这种数组的元素赋值是按照次序排列的，变量的取值由它的位置决定。

//ES6对象的解构赋值
let {aaa,bbb} = {aaa:'1',bbb:'2'};
aaa //1
bbb //2

       对象的解构赋值不用按次序，但是变量必须与属性同名，这样才能匹配取到正确的值。对象解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者。

let {a:aaa} = {a:'111',b:'222'}
aaa // '111'
a //error:a is not defined

字符串也可以进行解构赋值

//ES6字符串的解构赋值
cosnt[a,b,c,d,e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'

这部分工作中用到的目前不是很多，近乎没有，所以粗略一下，以后补充

函数的解构赋值，这部分我感觉用到的还是蛮多的。函数的参数也可以使用解构赋值,map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

变量解构赋值的用途：
(1)交换变量的值，简洁易读清晰

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

(2)从函数返回多个值，函数只能返回一个值，只能将它们放在数组或对象里返回才能返回多个值，解构赋值可以非常方便地取值。

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

返回对象同理，使用对象解构赋值。
(3)函数参数的定义，解构赋值可以方便地将一组参数与变量名对应起来。
(4)提取JSON数据
(5)函数参数的默认值
(6)遍历Map解构，可以方便地获取键名和键值

(7)输入模块的指定方法

2020-07-08更新一下变量解构赋值的运用

//举个栗子 遍历赋值
data() {
    return {
      text: [
        { key: "1", value: [] },
        { key: "2", value: [] }
      ],
      value: [{ label: "one" }, { label: "two" }]
    };
  },
created() {
    this.myFunction();
  },
methods: {
    myFunction() {
      for (const item of this.text) {
        if (item.key === "1") {
          let value = [];
          for (const item1 of this.value) {
            const par = {
              value: item1.label
            };
            value.push(par);
          }
          item.value = value;
        }
      }
      console.log(this.text);
    },	
  }							

//举个栗子 提取json数据 这个能减少代码行数 更精简
let jsonData = {
    id: 42,
    status: 'OK',
    data: [867, 5309]
};
let { id, status, data } = jsonData;