浅谈Es6以及解构赋值是什么？

一. Es6的基本认识

1. Es6是什么？

（1） ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6的引入不仅提升了JavaScript的开发效率，也为JavaScript在大型项目和企业级应用中的使用提供了更坚实的基础。

（2）ES6不仅仅是一个版本的更新，它引入了许多新的特性和语法，如箭头函数、模块导入/导出、字符串模板等，这些特性大大增强了JavaScript的开发效率和代码的可读性。另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等，但ES6仍然是使用最多的最新的JavaScript语言标准，因为许多浏览器还不支持ES7等语法。

2. 新增功能

（1）声明命令

① let命令

        ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。下面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

   ☆ 关于为什么有作用域(其中之一)：为了更好的页面性能
   ☆ 为什么叫局部作用域：因为js存在垃圾回收机制 ——> 变量使用完毕之后自动释放

   ☆ let 可以帮助我们完成什么事情？
            A. 声明变量
            B. 解决for循环不能实时获取i值的问题
            C. 防止变量污染
            D. 防止变量提升
                - 什么是变量提升：在声明之前使用不报错
                       如： console.log(a) 
                                var a = 10;
                - 变量提升好不好：不好，不符合编程逻辑
                - 怎么解决：let a = 10;
                - 暂时性死区：ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

            E. 同一块作用域内如果使用了let命令声明了一个变量，则不允许再次声明相同变量，不管是使用let或者var

示例代码：

注意：特殊情况：for循环的时候，小括号里边的使用let声明的变量也算在代码块中

② const命令

   ★ const声明一个只读的常量。一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。const的作用域与let命令相同：只在声明所在的块级作用域内有效。

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

示例代码：

​

   ☆ const声明的是常量,他的值一旦声明则不在发生变化
            - 为什么要有常量存在：变量的内存空间其实是无法确定的，因为你存的值是不固定的。常量的内存空间需求是固定的，计算机可以提前计算出来，这样，从性能上来讲，常量更节省内存
            - 建议：如果你有一个量存在，而且他不会被修改，那么，就用常量
        
   ☆ 数组和对象赋值给常量，数组和对象的值是可变的
            因为对象和数组在内存中是通过指针来进行存储的，只要指针不变量，变量就没变

③ class命令

   ★ ES6 提供了更接近传统语言的写法，引入了Class（类）这个概念（类的数据类型就是函数，类本身就指向构造函数），作为对象的模板。通过class关键字，可以定义类。class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

④ import命令

   ★ import虽然属于声明命令，但它是和export命令配合使用的。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果外部能够读取模块内部的某个变量、函数或类，就必须使用export关键字输出。

（2）解构赋值

        ① ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

        ② 解构赋值允许指定默认值，只有当一个数组成员严格等于，默认值才会生效。

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

解构赋值代码示例：

二. 解构赋值

        注：以下谈个人对解构赋值的理解 。

  1. 解构赋值的类型

       ★ 解构赋值就是快速的把复杂结构中的数据读取出来，可以被解构赋值的数据类型包括：数组、对象、字符串、数字、布尔

  2. 什么是解构赋值

       ★ 解构赋值是一种表达式，它使得我们可以用一种更加方便的方式来获取对象或数组中的数据，解构赋值就相当于是模式匹配，等号左边的模式匹配等号右边的模式，等号右边的值赋值给等号

  3. 对数组的解构赋值

        ①   ★ var [变量1,变量2...] = [值1,值2...] 

                   let arr =  [[1,2],['a','b']]
                   let [,[num]] = arr;
                   console.log(num)

                ★

        ② 字符串可以被解构
                ★ let [a] = 'hello'; // [h,e,l,l,o]
                    console.log(a)

                ★

        ③ 解构赋值的默认值

        ★
            let [a,b=0] = [1,2]
            console.log(b)

        ★

    4. 对象的解构赋值

        ① var obj = {name:'zhagnsan',age:12,sex:1}
           // let {name:name,age:age} = obj;
              let {name,age} = obj;
              console.log(name,age) 

        ② 默认值
                ★ var obj = {name:'zhagnsan',age:12,sex:'nv'}
                    let {name,age,sex='nan'} = obj;
                    console.log(sex) 

        ③ 解构嵌套对象

  5. 解构函数参数 

  6. 解构时忽略某些值

  7. 解构赋值可以做哪些事

        ① 赋值

        ② 可以快速交换两个变量的值
            let x = 10;
            let y = 20;
            [x,y] = [y,x];
            console.log(x,y)

        ③ 跟函数的参数配合使用
            - 对象参数
                function ajax({method='get',url}){
                    console.log(method,url)
                }
                ajax({url:'www.baiduc.om'})
            
        ④ 数组参数
                let arr = [2,2,4]
                function redu([num1,num2,num3=3]){
                    console.log(num1,num2,num3)
                }
                redu(arr)