es6 解構 學習 總結

  =====================對象結構============================
    什麼是解構： 
    使用es6的一種語法規則，將一個對象或數組的某個屬性提取到某個變量中，解構不會影響原始對象
    例如：
     const user = {
            name: 'twinkle',
            age: '12',
            address: {
                province: '江西',
                city: '南昌'
            }
        }
        // 使用地址城市
        const city = user.active.city; // 如果好多的時候會一直寫點下去
        // 或者
        // let name, age, address;
        // name = user.name;
        // age = user.age;
        // address = user.address;

        // 使用解構
        let { name, age, address } = user;
        // 或者
        let name, age, address;
        ({name, age, address} = user)




    在解構中使用的默認值,前提是解構中含有相同的變量名稱:
    在解構中如果沒有默認值，會返回一個undefined，
    我們自己也可以定義一個默認值
    {同名變量名=默認值}
    如：
    const user = {
        age: "12",
        name: "twinkle",
        abc: ""
    }
    let {name, age, abc="123"} = user;


    在解構中非同名屬性解構
    {屬性名：解構中要替換成的名字}
    如：
     const user = {
            gender: "男",
            name: "twinkle"
        }

        const { name, gender: sex } = user
        console.log(name, sex)

     進一步解構：嵌套解構
      const user = {
            name: 'twinkle',
            age: '12',
            address: {
                province: '江西',
                city: '南昌'
            }
        }
        //   要獲取name 和city
        const { name, address: { city } } = user;
        console.log(name, city)  // ‘twinkle’ 南昌


    解構name屬性，其他的放到一個新的對象中，名字爲obj
      const user = {
            name: 'twinkle',
            age: '12',
            address: {
                province: '江西',
                city: '南昌'
            }
        }

      const {name, ...obj} = user;
      // 使用展開運算符來自動蒐集  

     ===========================數組的解構========================
        解構一個數組：
        如：利用解構對象的方法
        const numbers = ["a", "b", "c", "d"];
        // 如：要獲取數組的第一位和第三位
        const { 0:n1, 3:n2 } = numbers;
        // 裏面的0代表數組的第一位， 3代表數組的第三位
        // n1 n2 是別名

        數組的解構方法：
        const [n1, , n2] = numbers;
        // 對應的位數， 中間空格就可以


        進一步解構：嵌套結構
        const numbers = ["a", "b", "c", "d",[1,2,3,4]];
        // 要獲取最後一項的第二項
        const [ , , , , [ , n52]] = numbers;
        console.log(n52)  // 2

       數組解構若干項，其他的放到 nums數組裏面
       如：
        const numbers = ["a", "b", "c", "d"];
        const [a, b, ...nums] = numbers;

        交互兩個變量；
        let a = 1, b = 2 ;
        [b, a] = [a, b];
        結果： a = 2, b= 1


        ===================參數解構================
       const user = {
            name: 'twinkle',
            age: '12',
            address: {
                province: '江西',
                city: '南昌'
            }
        }


        function print(user) {
            connsole.log("性名", user.name);
            connsole.log("年齡", user.age);
            // ...
        }

        print(user);


        // 使用解構, 在參數位置來解構
        function print({ name, age }) {
            connsole.log("性名", name);
            connsole.log("年齡", age);
            // ...
        }


        // 第二種場景：
        // 在以前使用ajax的時候，ajax方法，使用者不傳遞參數我們可以以下寫法

        function ajax(options){
            const defaultOptions = {
                methods: 'get',
                url: '/',
            }

            const opt = {...defaultOptions, ...options};
        }

        // 調用
        ajax();

        // 使用解構：
      function newAjax({methods = "get", url = '/'} = {}){}