【JS003】ES6的学习笔记之变量解构

最新推荐文章于 2024-07-30 22:06:46 发布

Commas.KM

最新推荐文章于 2024-07-30 22:06:46 发布

阅读量124

点赞数

分类专栏： javascript 文章标签： js javascript 变量解构解构赋值的作用 es6

本文链接：https://blog.csdn.net/qq_35844043/article/details/119567604

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

日期：2021年8月10日
作者：Commas
注释：如果您觉得有所帮助，帮忙点个赞；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
(ง •_•)ง 积跬步以致千里，ES6的学习笔记
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

一、解构的定义

定义：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //（1）数组解构
        const aryName = ["张三","李四","王五","赵六"];
        //（1-1）old
        // let zhang = aryName[0];
        // let li = aryName[1];
        // let wang = aryName[2];
        // let zhao = aryName[3];
        // console.log(zhang,li,wang,zhao);
        //控制台输出：张三 李四 王五 赵六
        //（1-2）new
        let [zhang,li,wang,zhao] = aryName;
        console.log(zhang,li,wang,zhao);
        //控制台输出：张三 李四 王五 赵六

        //（2）对象解构
        const qian = {
            name:"钱七",
            age:18,
            say:function(){
                console.log("Hello World");
            }
        };
        //（2-1）old
        // let name =qian.name;
        // let age =qian.age;
        // let say =qian.say;
        //（2-2）new
        let {name,age,say}=qian;
        console.log(name); //钱七
        console.log(age);  //18
        console.log(say);  //ƒ(){console.log("Hello World");}
        say();             //Hello World
    </script>
</body>
</html>

二、变量解构赋值的用途

序号	说明
1	交换变量的值
2	解构函数返回的多个值
3	函数参数的定义
4	提取JSON数据
5	函数默认值

（2-1）交换变量的值

 let [x,y]=[1,2];
 console.log(x,y);  \\1 2
 [x,y]=[y,x];
 console.log(x,y);  \\2 1

（2-2）解构函数返回的多个值

        //（1）数组
        function getAryName(){
            return ["张三","李四"]
        };
        let [zhang,li] = getAryName();
        console.log(zhang,li);  //张三 李四

        //（2）对象
        function getXY(){
            return {"x":1,"y":2}
        };
        // let {x,y}=getXY()
        let {y,x}=getXY()
        console.log(x,y);       //1 2

（2-3）函数参数的定义

function positionAry([x,y,z]){
    console.log(x,y,z);
};
positionAry([9, 8, 5]);
//控制台输出：9 8 5
//即参数x=9,y=8,z=5,变量名与参数一一对应；

//（2）对象
function positionObj({x,y,z}){
    console.log(x,y,z);
};
positionObj({z:5,y:8,x:9});
//控制台输出：9 8 5
//即参数x=9,y=8,z=5,变量名与参数一一对应；

（2-4）提取JSON数据

const qian = {
    name:"钱七",
    age:18,
    say:function(){
        console.log("Hello World");
    }
};
//NO1:
// let say =qian.say;
//NO2:
let {say}=qian;
say();   //Hello World

（2-5）函数默认值

    test = function({x=1,y=2,z} = {}) {
        console.log(x,y,z)
    };

    test({});                   //1 2 undefined
    test({z:3});                //1 2 3
    test({x:111,y:222,z:333});  //111 222 333

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/119567604

Commas.KM

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS003】ES6的学习笔记之变量解构

日期：2021年8月10日作者：Commas注释：如果您觉得有所帮助，帮忙点个赞；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^(ง •_•)ง 积跬步以致千里，ES6的学习笔记1.01365 = 37.7834；0.99365 = 0.02551.02365 = 1377.4083；0.98365 = 0.0006文章目录一、解构的定义二、变量解构赋值的用途一、解构的定义定义：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructu.
复制链接

扫一扫