• 对象的解构赋值


    对象的解构赋值中,与顺序无关,需要注意的是,变量名与属性名必须一致
    const {name} = obj;这一步是数据解构赋值,相当于声明了保存在obj中的name属性值,意思是可以通过obj访问到name属性,因此还可以打印到name。
    对象与数组不同,对象是无序的。所以它是通过属性名来标志的,不需要逗号分开:
    用const进行对象的解构赋值时,遇到同名的键值对可以这样重新命名:
    {skillName:sklName},意思是取该对象的skillName的属性并赋值给sklName

    1、对象的解构赋值

    //对象的解构赋值
                const obj = {
                    saber :'阿尔托利亚',
                    archer:'卫宫'
                };
                const {saber, archer1 } = obj;

    2、稍微复杂的解构条件

    //稍微复杂的解构条件
                
                const player = {
                    nickname:'感情的戏我没演技',
                    master:'东海龙王',
                    skill: [{
                        skillName:'龙吟',
                        mp:'100',
                        time:6000
                    },{
                        skillName:'龙卷雨击',
                        mp:'400',
                        time:3000
                    },{
                        skillName:'龙腾',
                        mp:'900',
                        time:60000
                    }]
                };
                const { nickname } = player; //梦幻西游
                const { master } = player; //东海龙王
                const { skill:[ skill1, { skillName }, { skillName : sklName} ] } = player;
                
                const { skill } = player;//得到数组龙吟龙腾龙卷

    const [ skill1 ] = skill;//得到数组第一项龙吟
    
    
    
    
    

    3、结合扩展运算符,

    通过扩展运算符“...”来获取obj中的属性和属性值是可以的:扩展运算符有一个作用就是取出参数对象中的所有可遍历属性,拷贝到当前对象之中,就是通过“...”可以拿到obj中的键值对拷贝到a上。
    //结合扩展运算符
                const obj = {
                    saber:'阿尔托利亚',
                    archer:'卫宫',
                    lancer:'瑟坦达'
                };
                const { saber, ...oth } = obj;
                
                对象的合并
                const obj1 = {
                    archer:'卫宫',
                    lancer:'瑟坦达'
                }
                const obj = {
                    saber:'阿尔托利亚',
                    ...obj1
                }
    //oth得到后两项组合的一个对象(即剩下的所有没有匹配到的内容)
    
    
     
    
    

    4、如何对已经申明的变量进行解构赋值(不建议这种写法)

    //如何对已经申明来的变量进行解构赋值(不建议这种写法)
                let age;
                const obj = {
                    name:'小明',
                    age:22
                };
                ( { age } = obj );
                //
    //得到age的值22
    
    

    5、默认值(在对象传入乱序的排序参数时会经常使用)

    
    
                //默认值
                let girlfriend = {
                    name:'小红',
                    age:22,
                };
                let { name, age = 24, hobby = ['学习']} = girlfriend
                

    6、提取对象属性

                //提取对象属性
                const { name, hobby: [ hobby1 ] , hobby } = {
                    name: '小红',
                    hobby: ['学习']
                };
                

    6、使用对象传入乱序的函数参数

                //使用对象传入乱序的函数参数
                function AJAX({
                    url,
                    data,
                    type = 'get'
                }){
                    console.log(type);
                };
                
                AJAX({
                    
                    data:{
                        a:1
                    },
                    url:'/getinfo',
                });
                

    7、获取多个函数的返回值

                //获取多个 函数返回值
                function getUserInfo(uid){
                    //..AJAX
                    return{
                        status:true,
                        data:{
                            name:'小红'
                        },
                        msg:'请求成功'
                    };
                };
                
                const{ status, data, msg:message } = getUserInfo(123);
                 
                
  • 相关阅读:
    防止论坛用户重复登录的方法 .
    配置Windows服务器支持json文件的方法
    在线修改ServU密码注意问题。
    a href=#与 a href=javascript:void(0) 的区别,以及location.href含义
    使用sql命令连接字符串类型和整型类型的数据
    数据库SQL Server 2005 的级联设置 外键赋值
    使用VS发布网站后遇到的Fill为Null的奇怪错误。
    使用Visual Studio 2005 IDE的宏,自动为c#变量生成属性
    推荐Zen Garden
    使用 aspnet_regsql.exe 向 SQL Express 数据库中注册脚本
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/13122205.html
Copyright © 2020-2023  润新知