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 = '/'} = {}){}