精华内容
下载资源
问答
  • 解构赋值
    千次阅读
    2022-03-13 20:26:29

    1解构赋值

    ①定义.解析某一数据结构,将我们想要的东西提取出来,赋值给变量或者常量

    ②应用场景:交换变量的值;从函数返回多个值,可以返回一个数组,也可以返回一个对象;函数参数的定义,方便将一组参数与变量名对应起来,数组的参数是有次序的,对象的参数是没有次序的;指定函数参数的默认值;遍历Map解构,方便获取键名和键值;加载模块;提取JSON数据

    2.数组的解构赋值

    ①原理:模式(结构)匹配;索引值相同的完成赋值,不取的就用逗号隔开

    ②默认值:const/let [a,b] = [];是一个空数组时,给a,b赋值后a,b的值就是默认值。const/let [a=1,b=2] = [undefined, undefined];只有当一个或者多个数组成员严格等于(===undefined时,对应的默认值才会生效。如果默认值是表达式,只有当数组成员为undefined时才会用到默认值表达式时,否则就用不到。null在参与运算时,默认会转换成数值0

    ③常见的类数组的结构赋值:argumentsNodeList

           const [a, b] = arguments;
    
            console.log(a, b);
    
            const [p1,p2,p3] = document.querySelectorAll(‘p’);
    
            Console.log(p1,p2,p3);

    ④函数参数的解构赋值

    // 函数参数的解构赋值
    
    const array = [1, 1];
    
    const add = ([x=0, y=0]) => x + y;
    
    console.log(add(array)); // 2

    交换变量的值

    //交换变量的值
    
    let x = 1;
    
    let y = 2;
    
    [x, y] = [y, x]; // 相当于  let [x,y] = [2,1]
    
    console.log(x, y); // x=2,y=1

    3.对象的解构赋值

    ①原理:

     //原理
    
            //1.模式(结构)匹配
    
            //{} = {};
    
            //2.属性名相同的完成赋值(属性名不区分顺序,书写方式有以下三种)
    
            const {age,sex} = {age: 18,sex: '女'};
    
            const {'age': age,'sex': sex} = {age: 18,sex: '女'};
    
            const {age: age,sex: sex} = { age: 18, sex: '女'};
    
            console.log(age, sex);//输出的参数名是属性值

    默认值与数组一样。不同之处是:如果将一个已经被let声明过的变量用于对象的解构赋值,整个赋值需在圆括号中进行;可以取到继承的属性

    let x = 2;
    
            ({x} = {x: 1});
    
            console.log(x); //1

    函数参数的解构赋值

    //函数参数的解构赋值
    
            const fun = ({uname,age = 0,sex}) => {console.log(uname, age, sex);};
    
            fun({age: 18,uname: 'xiaoming'});

    4.其它数据类型的解构赋值

    字符串的解构赋值

     //字符串既可以按数组形式解构赋值,也可以按对象形式解构赋值
    
            //1.数组的解构赋值
    
            const [a, b, , , c] = 'hello';
    
            console.log(a, b); // h e o
    
            //2.对象的解构赋值,属性名就是字符串的索引号
    
            const {0: d,3: e,length} = 'hello';
    
            console.log(d, e, length); // h l 5

    数值和布尔值的解构赋值

    //数值和布尔值的解构赋值只能用对象的形式解构赋值
    
            //现将等号右边的数值或者布尔值转为对象
    
            console.log(new Number(123));
    
            const { a = 1, toString} = 123;
    
            console.log(a, toString); // 1  ƒ toString() { [native code] }
    
    
    
            const {b = 2, toString} = true;
    
            console.log(b, toString); //2   ƒ toString() { [native code] }

    ③undefinednull不能解构赋值,因为他们没有对应的包装对象,无法转为对象,所以对它们进行解构赋值都会报错。

    更多相关内容
  • ES6终于出现了解构赋值的语法糖来解决此类问题。 解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量。解构...
  • 本文实例讲述了ES6解构赋值的功能与用途。分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。 (2)从函数返回多个...
  • ES6中的解构赋值

    2021-01-08 15:49:25
    解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。 解构模型 在解构中,有下面两...
  • 1 什么是解构赋值 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。解构会仅提取出一个大对象中的部分成员来单独使用。 ...
  • 解构赋值

    2021-03-11 19:52:04
    解构赋值解构赋值就是将一个集合中的元素或者说是属性 一个一个的取出来赋给一个或者是多个变量 ​ 每一个数据解构的解构赋值都是不同的 数组的数据解构和对象的数据解构不同 解构方式也不同 ​ 数组的解构赋值 ...

    解构赋值

    ​ 解构赋值就是将一个集合中的元素或者说是属性 一个一个的取出来赋给一个或者是多个变量

    ​ 每一个数据解构的解构赋值都是不同的 数组的数据解构和对象的数据解构不同 解构方式也不同

    ​ 数组的解构赋值 按照顺序进行解构 字符串和数组的数据解构相同 都是有序的 所以和数组保持一致

    ​ 对象的解构赋值 按照键名进行解构

    1.数组的解构赋值

    ​ 数组的解构赋值是按照数组的方式 使用数组进行解构 按照下标的顺序 变量的名字自定义

    1.数组的完全解构

    ​ 完全解构就是将数组中所有的值全部取出 赋给所有的变量 变量的数量和数组元素的数量相等

    /*
        数组的解构赋值
        1.使用数组解构数组   中括号
        2.数组的解构按照下标的顺序
        3.变量可以自定义
    */
    
    // let a,b,c,d,e = arr;
    // console.log(a);
    // console.log(e);
    let [a,b,c,d,e] = arr;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);
    
    2.数组解构的缺省情况

    ​ 缺省情况有两种 变量大于数组元素数量 数组元素数量大于变量

    ​ 但是缺省情况都不会报错 只是对数组的不完全解构

    /*
        缺省情况
            数组元素的数量大于变量的数量
            这种情况  不错报错  只是不完全解构  还是按照数组的下标进行解构
    
            数组元素的数量小于变量的数量
            这种情况  也不会报错  但是多余的变量会被赋值为undefined
    
    */
    // let [a,b] = arr;
    // console.log(a);
    // console.log(b);
    
    let [a,b,c,d,e,f] = arr;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);
    console.log(f);  //undefined
    
    3.解构默认值

    ​ 在解构赋值的时候 如果说变量的数量多余数组元素 那么可以给变量设定默认值

    // 数组解构
    let arr = [22,66,88];
    
    // 默认值从后往前设定默认值
    let [a = 33,b = 55,c = 77,d = 99] = arr;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    
    4.占位符解构

    ​ 主要的目的是尽量少的使用栈空间的内存

    // 占位符解构
    let arr = [11,33,55,666,88,99];
    
    let [,,,num] = arr;
    console.log(num);
    

    2.字符串解构赋值

    ​ 字符串的数据解构和数组是完全相同的 每一个字符都有自己的下标

    ​ 都是有序的数据结构 可以迭代

    // 字符串解构赋值
    let str = "YES";
    // console.log(str[0]);
    
    // 完全解构
    // let [a,b,c] = str;
    // console.log(a);
    // console.log(b);
    // console.log(c);
    
    // 不完全解构
    // let [a,b,c,d] = str;
    // console.log(a);
    // console.log(b);
    // console.log(c);
    // console.log(d);
    
    // 默认值
    // let [a,b,c,d = 'M'] = str;
    // console.log(a);
    // console.log(b);
    // console.log(c);
    // console.log(d);
    
    let [,a] = str;
    console.log(a);
    

    3.对象解构赋值

    ​ 对象解构赋值 因为对象是无序的 所以说对象不能按照顺序进行解构 但是对象有键名

    ​ 所以说 我们可以按照键名进行解构赋值 解构的时候 和数组不同

    ​ 1.使用对象解构对象 使用大括号{}

    ​ 2.按照键名解构赋值

    ​ 3.可以不按照顺序进行解构

    let obj = {
        name : 'Eric',
        age : 18,
        sex : '男'
    };
    
    // console.log(obj);
    // 如果说解构对象的时候   按照键名  不按照顺序
    
    // let {name : uname,sex : usex,age : uage} = obj;
    // console.log(uname);
    // console.log(usex);
    // console.log(uage);
    
    // 缺省情况
    // let {name : uname,age : uage} = obj;
    // console.log(uname);
    // console.log(uage);
    
    // let {name : uname,sex : usex,age : uage,address : addr} = obj;
    // console.log(uname);
    // console.log(usex);
    // console.log(uage);
    // console.log(addr);
    
    // 默认值解构
    let {name : uname,sex : usex,age : uage,address : addr = '吉林长春'} = obj;
    console.log(uname);
    console.log(usex);
    console.log(uage);
    console.log(addr);
    

    ​ 特殊的对象解构赋值

    // 特殊的解构赋值方式
    let {name,sex,age} = obj;
    console.log(name);
    console.log(age);
    console.log(sex);
    

    4.函数参数解构赋值

    // 函数参数解构赋值  参数是数组得情况下
    function fn1([a,b,c] = array) {
        // console.log(array);
        console.log(a);
        console.log(b);
        console.log(c);
    }
    
    // 定义一个数组  作为实参
    let arr = [11,33,88];
    fn1(arr)
    
    // 参数是对象的情况下
    let obj = {name : 'Eric',age : 18};
    
    // 对象的解构赋值和外面有点不一样
    function fn2({name,age} = {name : 'Mary',age : 16}) {
        // console.log(object);
        console.log(name);
        console.log(age);
    }
    fn2();
    fn2(obj);
    
    展开全文
  • ES6解构赋值实例详解

    2020-08-28 23:41:24
    主要介绍了ES6解构赋值,结合实例形式较为详细的分析了ES6结构赋值的基本概念、原理与使用方法,需要的朋友可以参考下
  • 最接近使用旧 ES5 对象和函数解构赋值的方法。 例子 数组的dent : > var tuple = [ 'first' , 'second' , 'third' ] > dent ( tuple ) > var a = dent ( ) // Or in a single statement: dent(tuple)() > var b ...
  • 主要介绍了ES6 对象的新功能与解构赋值介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要...
  • 05-ES6语法:解构赋值

    万次阅读 2022-05-05 14:40:09
    本文介绍了ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。使用了大量了代码片段介绍了具体的使用方式,并且配上了...

    本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。

    下面我们具体来看看解构赋值是什么?以及是如何使用的?

    下面是简单的屏幕分享,不爱看文字的同道中人可以看视频。-_-

    一、获取对象属性值

    在JS中如何去获取对象的属性值呢?我们还是先看ES6之前的代码是如何实现的。无非是通过点(.)语法或者下标([])的方式来获取对象的属性值,代码分别如下。

    通过点语法(.)获取对象的属性值。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk"
    }
    console.info(user.userName);
    console.info(user.blog);
    

    控制台输出的内容如下图所示:

    通过下标([])方式获取对象属性值的代码如下:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk"
    }
    console.info(user["userName"]);
    console.info(user["blog"]);

    可以看到,下标中的字符串,实际上就是属性的名称。这种语法更适合于我们不清楚具体的属性名,或者属性名是动态的情况下。如果属性名本身已经很明确了,还是点语法更简洁些。

    当然了,如果与ES6语法比较起来,上面两种玩法都还是显的就没有那么简洁了。接下来,我们看看ES6是如何来获取对象的属性值的?

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk"
    }
    const {userName, blog} = user;
    console.info(userName);
    console.info(blog);

    上述代码演示了如何通过ES6语法的解构赋值来快速地获取属性值。示例中创建与对象属性名同名的变量,并将对象中同名的属性值分配给新创建的同名变量,大大地减少了许多重复的代码。

    至此,我们大概演示了解构赋值最基本的用法:获取对象的属性值。是不是让代码变地更加的简洁,更加的优雅了。

    二、获取嵌套对象的属性值

    前面我们所看到的示例代码都只是从一个简单的对象中获取属性值,那如果属性值本身就是一个对象,而这个对象的属性值要如何获取呢?解构赋值能做到吗?如何编写代码呢?

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
        details: {
            nickName: "光脚丫思考",
            address: "中国北京",
            signature: "勿以善小而不为,勿以恶小而为之"
        }
    }
    const { userName, blog, details: { signature } } = user;
    console.info(userName);
    console.info(blog);
    console.info(signature);

    输出的结果如下图所示:

    上面的示例还是比较简单了些,如果是更深入的对象嵌套怎么办呢?上面的方法还能有效果吗?我们试一试。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
        details: {
            nickName: "光脚丫思考",
            address: {
                domicileAddress: "户籍地",
                abodePlace: "居住地"
            },
            signature: "勿以善小而不为,勿以恶小而为之"
        }
    }
    const { userName, blog, details: { signature, address: { domicileAddress, abodePlace } } } = user;
    console.info(userName);
    console.info(blog);
    console.info(signature);
    console.info(domicileAddress);
    console.info(abodePlace);

    输出结果如下图所示:

    可以看到,深层次的嵌套的对象也是可以通过解构赋值来获取属性值的,再深层次的也是可以正常获取的,有兴趣小伙伴们可以自己动手尝试下。

    三、设置默认值

    如果我们预期某个属性是会包含属性值的,但是由于某种原因最后没有包含属性值,比如某些状态值为空的情况下,解构赋值是否可以设置一个默认值呢?答案是肯定的。示例如下:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
        status: "online"
    }
    const { userName, blog, status } = user;
    console.info(userName);
    console.info(blog);
    console.info(status);

    如上的代码所示,按照我们的预期,正常情况下status会返回一个值,表示当前用户的登录状态,代码输出结果如下:

    输出的内容一切如常。但是,在某种特殊或意外的情况下,比如后端写接口的大侠忘记返回这个状态的值了,除了让后端的大侠正确的补充上这个状态值以外,我们还可以给它设置一个默认值,比如默认值离线状态offline。代码如下:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
        status: undefined
    }
    const { userName, blog, status = "offline" } = user;
    console.info(userName);
    console.info(blog);
    console.info(status);

    请留意user.status属性值是undefined了,我们假定后端返回的结果出现了这样的情况,但是在我们解构赋值的代码中增加了一个offline的默认值,控制台上的输出结果如下:

    可以看到,在没有获取到相应属性值的情况下,使用了解构赋值中的默认值。

    另外一种情况就是直接就没有这个属性,缺少这个属性,设置默认值的办法同样好使,示例代码如下:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    }
    const { userName, blog, status = "offline" } = user;
    console.info(userName);
    console.info(blog);
    console.info(status);

    请注意上面的user已经没有包含status属性了,输出的结果仍然包含了解构赋值中设定的默认值。

    漂亮!无论是返回的属性值为undefined,还是直接把这个属性值干没了,解构赋值设置的默认值都很好使,具体的使用场景大家自行挖掘和体会。

    在使用默认值的时候,应该注意区分undefined和null,只要undefined的时候才会使用设置的默认值,null是不会使用默认值的。如下代码所示:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
        address: undefined,
        signature: null,
    }
    const { userName, blog, address = "中国北京", signature = "默认签名信息" } = user;
    console.info(`userName=${userName}`);
    console.info(`blog=${blog}`);
    console.info(`address=${address}`);
    console.info(`signature=${signature}`);

    请留意address属性值为undefined,而signature则为null,输出的结果如下图所示:

    可以看到address使用的是设置的默认值,而signature的值则继续保留为null了。

    四、使用别名

    另外一个使用解构赋值必须得面临的一个问题:变量命名冲突的问题,该如何解决呢?

    前面的那些示例代码中,解构赋值中的变量名和对象中的属性名是完全一致的,如果已经定义了同名的变量该怎么办呢?岂不是会发生命名冲突的情况。此时,使用别名就能很好的解决这个问题了。示例代码如下:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    }
    const { userName: name, blog: url } = user;
    console.info(name);
    console.info(url);

    在上面的代码中,我们将user.userName的属性值赋值给了name变量,将user.blog的属性值赋值给了url变量。通过别名的方式,就不需要强制要求解构赋值中的变量名和对象中的属性名

    完全一致了,这就大大地增加了灵活性,也能很好的解决命名冲突的问题。

    五、定义新变量

    解构赋值还可以基于对象的属性值创建新的变量,还是先来看一个示例:

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    }
    const { userName, blog, message = `我是${userName},我的博客地址是:${blog}` } = user;
    console.info(userName);
    console.info(blog);
    console.info(message);

    请留意上面的代码,解构赋值中的message变量并非user对象的某个属性名称,而是由变量userName和blog拼接到一起的字符串变量。

    这里使用到了ES6的字符串的方式拼接的字符串,如果还不太了解这个技术的,可以移步到我的另外一篇博文《03-ES6语法:模板字面量(Template Literals)》。

    上述代码的输出结果如下图所示:

    需要特别强调一点的是,新定义的变量message中使用到的userName和blog并非user中的属性名,而是解构赋值中定义的userName和blog,这2个变量接收了user对象中同名的属性值。

    因此,如果我们把解构赋值中的userName和blog移除掉的话,代码就废掉了。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    }
    const { message = `我是${userName},我的博客地址是:${blog}` } = user;
    console.info(message);

    上述代码在控制台中直接报错了,错误如下:

    如果使用别名的方式就能更加说明这一点了。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    }
    const { userName: name, blog: url, message = `我是${name},我的博客地址是:${url}` } = user;
    console.info(name);
    console.info(url);
    console.info(message);

    上述的代码中,新定义的变量message中拼接的变量名称就是别名,而并非user对象中的属性名,表明它所使用的是解构赋值中定义的变量名,而并非对象中的属性名。

    六、动态名称属性

    在实际的开发过程中,我们通常会通过接口API来获取数据,而这些数据不仅仅内容是动态的,甚至对象的属性键名也是动态的,再或者我们一开始连属性的名称都可能不知道。这样的属性值要如何获取呢?如果不使用解构赋值,可以通过下标[]的方式来获取属性值,那解构赋值又是如何做到的呢?请看示例。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    };
    function getValue(data, key) {
        const { [key]: value } = data;
        return value;
    }
    let userName = getValue(user, "userName");
    let blog = getValue(user, "blog");
    console.info(userName);
    console.info(blog);

    重点放到getValue(data,key) 函数上,其中最为重要的代码如下:

    const { [key]: value } = data;

    可以看到,解构赋值代码也是通过下标[]的方式来获取对象的属性值的,下标中key的内容就是属性的名称。

    有了这项技术,基本上属性的名称可以成为动态的,可以通过参数来传递,无论是明确的属性名,还是后续动态传递过来的属性名,都能轻松的从特定对象中获取该属性的属性值。

    七、函数中的解构赋值

    1、解构赋值传参

    使用对象解构赋值将属性值作为参数传递给函数。

    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    };
    function display({userName, blog}) {
        let message = `大家好,我是${userName},我的博客地址是:${blog}`;
        console.info(message);
    }
    display(user);

    请特别留意函数的参数定义,使用的就是解构赋值的语法,而在调用的时候,直接传递对象就行。输出的结果如下图所示:

    2、解构赋值返回结果

    如果函数返回一个对象,可以将属性值直接解构为变量,如下代码所示:

    function getUSer() {
        const user = {
            userName: "光脚丫思考",
            blog: "https://blog.csdn.net/gjysk",
        };
        return user;
    }
    const { userName, blog } = getUSer();
    let message = `大家好,我是${userName},我的博客地址是:${blog}`;
    console.info(message);

    其实这种使用方法也不难理解,本质上来说仍然是从对象中解构赋值,因为,函数返回的就是一个对象,这和我们在函数外面创建的对象没什么不同。

    上述代码的输出结果如下图所示:

    八、循环中的解构赋值

    接下来我们再看看在循环中如何使用解构赋值。示例代码如下:

    let users = [
        {
            userName: "光脚丫思考1",
            blog: "https://blog.csdn.net/gjysk",
        },
        {
            userName: "光脚丫思考2",
            blog: "https://blog.csdn.net/gjysk",
        },
        {
            userName: "光脚丫思考3",
            blog: "https://blog.csdn.net/gjysk",
        },
    ];
    for (user of users) {
        const { userName, blog } = user;
        let message = `大家好,我是${userName},我的博客地址是:${blog}`;
        console.info(message);
    }

    上面的代码中,我们在for循环的内部使用了解构赋值语法,成功的从每个user对象中获取到了userName和blog的数据。输出结果如下所示:

    也算是最基本的玩法了,下面的方式则更加的简洁一些。

    for ({ userName, blog } of users) {
        let message = `大家好,我是${userName},我的博客地址是:${blog}`;
        console.info(message);
    }

    在for循环的{}中不包含解构赋值的代码,而是直接放到了()中,输出的结果和前面的代码是一样的。

    九、数组解构

    先来看一个简单的数组解构赋值的代码,如下:

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

    上面代码在控制台的输出结果如下图所示:

    就像上面的示例一样,数组解构赋值的过程中,只要把每个解构的部分一一对应起来,就可以层层解构赋值。比如下面的代码:

    let [a, [b], d] = [1, [2, 3], 4];
    console.info(a);
    console.info(b);
    console.info(d);

    请留意[b]这个语句,它对应的是实际数组中的[2,3],因此这个语法解析的便是[2,3]中的元素,因此获得的应该是2这个数值,如下图所示:

    我们把上述的代码稍微做点改变,输出的结果就会大不一样。代码如下:

    let [a, b, d] = [1, [2, 3], 4];
    console.info(a);
    console.info(b);
    console.info(d);

    输出的结果则如下图所示:

    可以看到这次的变量b输出的就是[2,3]这个数组了。

    十、字符串解构

    字符串本身也是一个对象,可以作为对象进行解构赋值。比如下面的代码:

    let { length } = 'Welcome you!';
    console.info(length);

    上述代码实际上解构赋值的是字符串的length属性。

    字符串可以当成一个数组解构赋值。如下代码:

    let [a, b, c] = "Welcome you!";
    console.info(a);
    console.info(b);
    console.info(c);

    输出的结果如下图所示:

     十一、解构规则

    ES6的解构赋值遵循一个规则:要左右两边的模式相同,就可以进行合法赋值。如下面的示例代码:

    let [a, b, c] = [1, 2, 3];
    let [d, [[e], f]] = [1, [[2], 3]];

    如果解构不成功,变量值等于undefined,比如下面的代码:

    let [a, b] = [1];
    console.info(a);
    console.info(b);

    上述代码输出的结果如下图所示:

    十二、其他解构

    通过解构赋值,我们可以很容易的把对象的方法赋值给变量。比如下面的代码:

    const { log } = console;
    log('Welcome you!');

    上面的代码中,我们将console.log()函数解构赋值给了log变量,然后就可以直接通过log变量来调用console.log()了。

    定义别名的语法在这种情况下同样的适用。代码如下:

    const { log:mylog } = console;
    mylog('Welcome you!');

    上面的代码也能成功被执行,并且在控制台输出对应的内容,如下图:

    展开全文
  • js 解构赋值

    2022-06-01 14:33:13
    Javascript ES6 解构运算符,扩展运算符,和rest运算符

    Javascript ES6 有 许多特性其实是为了简化代码。解构运算符扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳。

    *1.解构作用

    **
    可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值

    1.1 数组解构赋值:
    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

    let arr = [1, 2, 3];
    
    //传统方式
    let a = arr[0],
        b = arr[1],
        c = arr[2];
    
    //解构赋值,是不是简洁很多?
    let [a, b, c] = arr
    
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
    

    本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

    let [foo, [[bar], baz]] = [1, [[2], 3]]
    foo // 1
    bar // 2
    baz // 3
    
    //不取的,可以用逗号跳过
    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"
    
    //不取的,可以用逗号跳过
    let [x, , y] = [1, 2, 3]
    x // 1
    y // 3
    
    let [head, ...tail] = [1, 2, 3, 4]
    head // 1
    tail // [2, 3, 4]
    
    let [x, y, ...z] = ['a']
    x // "a"
    y // undefined
    z // []
    
    

    不完全解构:即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

    let [x, y] = [1, 2, 3]
    x // 1
    y // 2
    
    let [a, [b], d] = [1, [2, 3], 4]
    a // 1
    b // 2
    d // 4
    

    默认值
    解构赋值允许指定默认值。

    let [foo = true] = []
    // foo=true
    let [a=1,b=2] = []
    //a=1
    //b=2
    
    let [x, y = 'b'] = ['a'] // x='a', y='b'
    
    //注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。
    //所以,只有当一个数组成员严格等于undefined,默认值才会生效。
    let [x, y = 'b'] = ['a', undefined] 
    // x='a'
    // y='b'
    
    //数组成员是null,默认值就不会生效,因为null不严格等于undefined。
    let [x, y = 'b'] = ['a', null] 
    // x='a'
    // y=null
    
    let [x,y] = [] 
    // x:undefined
    // y:undefined
    
    

    变量互换

    var x = 1,
        y = 2;
    var [x, y] = [y, x];
    
    console.log(x); //2
    console.log(y); //1
    

    默认值表达式

    . // 3.默认值表达式.
    //.如果默认值是表达式,默认值表达式是惰性求值的
    const func = (name) => {
    	console. log( ${name}被执行了");
    	return 2;
    };
    const [x1 = func('x1')] = [1];
    const [x2 = func('x2')] = [];
    
    console.log(x1);
    console.log(x2);
    x2被执行了
    

    元素节点

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8" />
        <title>常见的类数组的解构赋值</title>
    </head>
     
    <body>
        <p>123</p>
        <p>321</p>
        <p>34567</p>
        <script>
            // NodeList
            console.log(document.querySelectorAll('p'));
            const [p1, p2, p3] = document.querySelectorAll('p');
            console.log(p1, p2, p3);
            //p1: <p>123</p>
            //p2: <p>321</p>
            //p3: <p>34567</p>
        </script>
    </body>
    

    函数参数的解构赋值

    const array = [1, 1];
    const add1 = arr => arr[0] + arr[1];
    console.log(add1(array));
    const add2 = ([x, y]) =>x+ y;
    console.log(add2(array));
    2
    2
    

    1.2 对象解构赋值

    解构不仅可以用于数组,还可以用于对象。

    //缩写版
    let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
    foo // "aaa"
    bar // "bbb"
    
    //完整版
    let { foo:foo, bar:bar } = { foo: 'aaa', bar: 'bbb' }
    foo // "aaa"
    bar // "bbb"
    
    //取别名版
    let { foo:f, bar:b } = { foo: 'aaa', bar: 'bbb' }
    f// "aaa"
    b// "bbb"
    
    
    
    let obj = {
        name: '小红',
        sex: '女',
        age: 26,
        son: {
          sonname: 'panda',
          sonsex: '男',
          sonage: 2
        }
      }
    
      const {name, sex, age, son} = obj
      console.log(name + ' ' + sex + ' ' + age) //小红 女 26
      console.log(son)  // { sonname: 'panda', sonsex: '男', sonage: 2 }
    

    };

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

    // 等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响
    let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
    foo // "aaa"
    bar // "bbb"
    
    let { baz } = { foo: 'aaa', bar: 'bbb' }
    baz // undefined,变量没有对应的同名属性,导致取不到值
    

    对象解构赋值的默认值

    const { userName = '小红',age=18 } = {userName:'小明'}
    //userName:小明
    //age:18
    

    将一个已经声明的变量用于解构赋值,需要括号包着,成一个整体代码块

    //一个已经声明的变量用于解构赋值,需要括号包着
    let x= 2
    ( {x} = {x:1} )
    //x:1
    
    {x} = {x:1}
    //undefined
    

    解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
    表达式虽然毫无意义,但是语法是合法的,可以执行
    在这里插入图片描述

    对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量

    // 例一
    let { log, sin, cos } = Math;
    
    // 例二
    const { log } = console;
    log('hello') // hello
    

    如果变量名与属性名不一致,必须写成下面这样。

    //注意:对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。
    //真正被赋值的是后者,而不是前者。
    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    foo //error: foo is not defined
    
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f // 'hello'
    l // 'world'
    

    函数参数的解构赋值

    const  func1 = (user)=>{
    	console.log(user.name,user.age)
    }
    //等同于
    const  func2 = ({name,age})=>{
    	console.log(name,age)
    }
    func1({name:'小红',age:18})
    func2({name:'小红',age:18})
    

    由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

    //数组arr的0键对应的值是1,[arr.length - 1]就是2键,对应的值是3。
    //方括号这种写法,属于“属性名表达式”。
    let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;
    first // 1
    last // 3
    

    字符串的解构赋值

    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"
    

    类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

    let {length : len} = 'hello';
    len // 5
    

    1.4数值和布尔值的解构赋值
    解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

    let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    let {toString: s} = true;
    s === Boolean.prototype.toString // true
    

    上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

    解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。

    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError
    

    1.5 函数参数的解构赋值
    函数的参数也可以使用解构赋值。

    function add([x, y]){
      return x + y;
    }
    
    add([1, 2]); // 3
    
    

    上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。

    下面是另一个例子。

    [[1, 2], [3, 4]].map(([a, b]) => a + b);
    // [ 3, 7 ]
    

    函数参数的解构也可以使用默认值。

    function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]
    

    注意,下面的写法会得到不一样的结果。

    function move({x, y} = { x: 0, y: 0 }) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, undefined]
    move({}); // [undefined, undefined]
    move(); // [0, 0]
    

    上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。

    undefined就会触发函数参数的默认值。

    [1, undefined, 3].map((x = 'yes') => x);
    // [ 1, 'yes', 3 ]
    

    1.6 for循环解构:

    var arr = [[11, 12], [21, 22], [31, 32]];
    for (let [a, b] of arr) {
        console.log(a);
        console.log(b);
    }
    //11
    //12
    //21
    //22
    //31
    //32
    

    2.扩展运算符
    扩展运算符(spread运算符)用三个点号(…)表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值。

    let foo = function(a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
    }
    
    let arr = [1, 2, 3];
    //传统写法
    foo(arr[0], arr[1], arr[2]);
    
    //使用扩展运算符
    foo(...arr);
    //1
    //2
    //3
    

    特殊应用场景:

    数组深拷贝-数组中的元素为基本类型,若为object,依然会拷贝引用地址

    var arr = [1, 2, 3];
    var arr2 = arr;
    var arr3 = [...arr];
    console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组的引用地址
    console.log(arr===arr3); //false, 说明arr3和arr指向不同数组引用,在堆内存中为arr3另外分配了内存空间
    

    把一个数组插入另一个数组字面量

    var arr4 = [...arr, 4, 5, 6];
    console.log(arr4);//[1, 2, 3, 4, 5, 6]
    

    字符串转数组

    var str = 'love';
    var arr5 = [...str];
    console.log(arr5);//[ 'l', 'o', 'v', 'e' ]
    

    函数调用

     function push(array, ...items) {
        array.push(...items)
      }
    
      function add(x, y) {
        return x + y
      }
    
      const numbers = [4, 38]
      add(...numbers) // 42
    

    替代数组的 apply 方法
    由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

    // ES5 的写法
    function f(x, y, z) {
    // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6 的写法
    function f(x, y, z) {
    // ...
    }
    var args = [0, 1, 2];
    f(...args);
    

    另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

    // ES5 的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    
    // ES6 的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2)
    

    3.rest运算符

    rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组。

    //主要用于不定参数,所以ES6开始可以不再使用arguments对象
    var bar = function(...args) {
        for (let el of args) {
            console.log(el);
        }
    }
    
    bar(1, 2, 3, 4);
    //1
    //2
    //3
    //4
    
    bar = function(a, ...args) {
        console.log(a);
        console.log(args);
    }
    
    bar(1, 2, 3, 4);
    //1
    //[ 2, 3, 4 ]
    
    rest运算符配合解构使用:
    
    // 数组
    const [a, ...rest] = [1, 2, 3, 4];
    console.log(a);//1
    console.log(rest);//[2, 3, 4]
    
    // 对象配合
    const {age, ...rest} = {name: 'qxj', age: 24, hobby: 'write code'};
    console.log(age);					//24
    console.log(rest);					//{ name: 'qxj', hobby: 'write code' }
    

    rest运算符和spread运算符的区别:

    spread运算符:放在赋值一方,即放在实参或者等号右边
    rest运算符:放在被赋值一方,即放在形参或者等号左边

    展开全文
  • 前端面试题:什么是解构赋值解构赋值的用途有哪些?
  • 本文主要给大家介绍了关于es6中解构赋值、扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较...
  • [JavaScript]解构赋值详解

    千次阅读 多人点赞 2021-12-27 08:41:48
    文章目录概念数组解构声明分别赋值解构默认值交换变量值解构函数返回的数组忽略返回值(或跳过某一项)赋值数组剩余值给一个变量嵌套数组解构字符串解构对象解构基础对象解构赋值给新变量名解构默认值赋值给新对象名...
  • ES6中的Set、Map和解构赋值 ::: tip 开始讲之前我们通过几个案例,来对比ES5来看看ES6+语法新特性。 ::: ????案例1:可选链 读取一个被连接对象的深层次的属性的值 const user = { address: { street: '深圳市南山...
  • vue解构赋值_ES6解构赋值

    千次阅读 2021-02-11 15:20:11
    解构赋值主要分为对象的解构和数组的解构,在没有解构赋值的时候,我们的赋值是这样的let arr = [1,2,3]let a= arr[0]let b= arr[1]let c= arr[2]这样写很繁琐,解构赋值可以轻松解决上面的问题。一、数...
  • ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  • 主要介绍了ES6数组与对象的解构赋值,结合实例形式详细分析了ES6中数组与对象的解构赋值原理、用法及相关操作注意事项,需要的朋友可以参考下
  •  允许将对象或者数组’分解’成多个单独的值, 以对象的解构开始.  代码示例 2. 说明 1). 定义一个对象  const obj={b:2,c:3,d:4};  此时系统中没有变量b, 变量c与变量d   2). 开始解构该对象,  const {a,b,c...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,018
精华内容 16,807
关键字:

解构赋值