es6 解构对象及数组

最新推荐文章于 2023-10-17 13:43:46 发布

炉火纯青-旺

最新推荐文章于 2023-10-17 13:43:46 发布

阅读量320

点赞数

分类专栏： ES6 文章标签： es6

本文链接：https://blog.csdn.net/qq_34870529/article/details/92384428

版权

ES6 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6  解构</title>
</head>
<body>
    <script>
    /* 
    * 解构 对象
    * 更快、更便捷
    */

    let expense = {
        type:"es6",
        amount:"45"
    };

    // es5
    // let type = expense.type;
    // let amount = expense.amount;

    // console.log(type,amount);

    // es6
    let{type,amount} = expense;
    console.log(type,amount);

    // es5
    let saveFiled = {
        extension: "jpg",
        name:"girl",
        size:14040
    };

    function fileSammary1 (file) {
        return `${file.name}.${file.extension}的大小是${file.size}px`;
    }

    console.log(fileSammary1(saveFiled));
    //es6
    function fileSammary2 ({name,extension,size}) {
        return `${name}.${extension}的大小是${size}px`;
    }
    console.log(fileSammary2(saveFiled));



    /* 
    * 解构 对象、数组
    * 更快、更便捷
    */
    
    const names = ["Henry","Bucky","Emily"];

    // 解构数组
    const [name1,name2,name3] = names;
    console.log(name1,name2,name3);

    // 返回数组个数
    const {length} = names;
    console.log(length);

    // 结合展开运算符
    const [name,...rest] = names;
    console.log(name);
    console.log(rest);

    // 对象数组

    const people = [
        {name:"Henry",age:20},
        {name:"Bucky",age:25},
        {name:"Emily",age:30},
    ]

    // es5
     
    let age1 = people[0].age;
    console.log(age1);

    // es6
    let [{age}] = people;  // 1:解构数组 [age] = {name:"Henry",age:20} 2:解构对象 {age} = {age:20}
    console.log(age);
    

    // 使用场景 将数组转化为对象

    let points = [
        [4,5],
        [10,1],
        [0,40]
    ];

    // 期望实现 let points = [
    //              [x:4,y:5],
    //              [x:10,y:1],
    //              [x:0,y:40]
    //          ];

    let newPoints = points.map(([x,y]) => {
        return {x,y};   // {x,y} = {x:x,y:y}
    });
    console.log(newPoints);
    </script>
</body>
</html>

炉火纯青-旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6 解构对象及数组

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录