ES6中解构赋值

ES6的解构赋值是一种快速方便的方法，可以从数组或对象中提取值并将其赋值给变量。它可以使代码更加简洁、易于理解和维护。

 解构赋值：在ES6中允许通过一定的模式来解析对象、数组等  赋值给变量

            要点：

                1. 两边的模式一致

                2. 左边是变量，右边是数据源(要被解析的数据)

解构分数组解构和对象解构两种

  1)数组解构

                数组：有索引、有顺序   数据结构

const arr = [1, 2, 3];
const [a, b, c] = arr;
 

                完全解构

“完全解构”可以解释为：将一个事物或系统中的所有组成部分分离、分解、细致地分析和理解，并在此基础上重新组合或重构。

    //1.完全解构  变量个数与数据个数一致
        let [a, b, c] = arr;

        let [a1, a2] = ["hello", "wolrd"]

        console.log(a1, a2);

                不完全解构

不完全解构是指对某个结构体系的解构并不彻底，即某些部分仍保持原状。这可能是出于某种目的或限制而故意保留了一些原始结构，或者是由于解构的限制或不完整性而导致的。

 //2.不完全解构(变量个数小于数据个数)
        let [a, b] = [10, 20, 30, 40]


        console.log(a, b);

                解构失败

JavaScript中的解构失败是指尝试解构一个没有定义或undefined的值，或者尝试解构时使用了不支持的语法。如果你在解构数组时使用了一个不支持的语法，可以尝试使用标准的数组解构语法或者使用其他方法来处理数组中的值。

// //3.解构失败 (变量个数大于数据个数)
        let [a, b, c] = [10, 100]

        console.log(a,b,c);

                解构缺省

JS解构缺省指的是在解构赋值时，如果对象或数组中没有对应的属性或元素，可以给它们设置一个默认值。

let { a, b = 2 } = { a: 1 };
console.log(a); // 1
console.log(b); // 2
 

在上面的例子中，我们定义了一个对象 { a: 1 }，然后进行解构赋值，将其属性 a 的值赋值给变量 a，同时给变量 b 设置了一个默认值为 2。由于对象中没有属性 b，因此变量 b 最终取到的是默认值 2。

同样的，数组解构也支持缺省：

let [a, b = 2] = [1];
console.log(a); // 1
console.log(b); // 2
 

不过还有其他情况了：

  //其它情况
        let [, , , a] = [10, 20, ['hello', 'world'], ['小红']]；
        let [a1] = a;
        let [, , , [a]] = [10, 20, ['hello', 'world'], ['小红']]；

        let [[[[a]]]] = [[[[10]], ['哈哈哈']], 100, 200];//

        console.log(a);






        let [a, b, c] = [10, undefined, null]

        console.log(a, b, c);//10 undefined null

         

 2)对象解构

                对象：是一种无序的数据结构

                按照属性来解析

const obj = {x: 1, y: 2};
const {x, y} = obj;
 

                完全解构

    //1.完全解构
       let obj = {
            name: "狗子",
            age: 3,
            attr: "发大招"
        }；
        let { name: sName, age: sAge, attr: att } = obj;

        console.log(sName, sAge, att);

                不完全解构

 //2.不完全解构
         let obj = {
            name: "狗子",
            age: 3,
            attr: "发大招"
        }；
        let {name:sName}=obj;

        console.log(sName);

                解构失败

        //3.解构失败
        let obj = {
            name: "狗子",
            age: 3,
            attr: "发大招"
        }；
        let { no: id, name: sName } = obj;

        console.log(id, sName);

        console.log('hello');
        console.log('world');
        console.log('哈哈哈');

                解构默认值

 //4.解构默认值
        let obj = {
            name: "狗子",
            age: 3,
            attr: "发大招"
        }；
        let {
            name: sName = "张三",
            age: sAge = 0,
            no: id = '10001'
        } = obj;

        console.log(sName, sAge);
        console.log(id);

对象的解构运用在AJax上非常不错，利用对象解构的方式进行获取想要获取的内容：

 //对象解构
        function ajax({
            url = "",
            method = "GET",
            params = ""
        }) {
            //url  method  params
            console.log(url);
            console.log(method);
            console.log(params);
        };



        ajax({
            url: "http://192.223.23.23/api/data",
            method: "POST",
            params: "username=jack&pwd=123"
        });

        ajax({
            url: "http://192.223.23.23/api/data",
            params: "username=jack&pwd=123"
        });

        ajax({
            url: "http://192.223.23.23/api/data"
        });

以上是ES6中解构赋值的简单介绍，它可以方便的从结构数据中提取信息，更易读、更简洁。