ES6 语法详解(变量的解构赋值)

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        /**
         * 变量的解构赋值
         * 理解:
         *     从对象或数组中提取数据,并赋值给变量(多个)
         * 对象的解构赋值:
         *     let {name, age} = {name:'dance', age: 18}
         * 数组的解构赋值:
         *     let [a,b] = [1,'dance']
         * 用途:
         *     给多个形参赋值
         */
        
        // 定义对象
        let obj = {
            username: 'dance',
            age: 18,
            sex: 'man'
        }
        
        // 对象解构赋值 就是从指定对象中提取存在的属性,如果属性不存在就是undefined,只提取自己需要的属性就可以了,不是必须提取全部的
        let {username, age} = obj
        console.log(username,age)
        
        // 定义数组
        let arr = [1, 'flower', 2, 4]
        
        // 数组解构赋值 就是从数组中提取指定下标的值,同样的不存在就是undefined,也是只提取需要的下标的值即可,不是必须提取全部的
        let [a,b,c,d] = arr
        console.log(a,b,c,d)
        
        // 提取指定下标的值 中间不需要的不写就可以了
        let [one,,three] = arr
        console.log(one,three)
        
        // 函数形参解构
        // 定义普通函数
        function srcFoo(obj){
            console.log(obj.username + ':' + obj.age)
        }
        srcFoo(obj)
        
        // 定义形参解构函数  相当于 {username, age} = obj 也就是上面写的解构对象
        function descFoo({username, age}){
            console.log(username + ':' + age)
        }
        descFoo(obj)
    </script>
</html>
复制代码

作者：彼岸舞

时间：2021\08\16

内容关于：前端知识库

本文属于作者原创,未经允许,禁止转发

posted @   彼岸舞  阅读(92)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示