[JavaScript知识库] ES6数组API方法、声明对象简写、声明属性简写、对象拓展运算符

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> ES6数组API方法、声明对象简写、声明属性简写、对象拓展运算符 -> 正文阅读

[JavaScript知识库]ES6数组API方法、声明对象简写、声明属性简写、对象拓展运算符

<!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>
        const person = { 
            name: "jack", 
            age: 21, 
            language: ['java', 'js', 'css'] 
        }
        // 获取对象的所有 key 形成的数组
        console.log(Object.keys(person));
        // 获取对象的所有 value 形成的数组
        console.log(Object.values(person));
        // 获取对象的所有 key 和 value 形成的二维数组
        console.log(Object.entries(person));

        const target = {a:1}
        const source1 = {b:"2"}
        const source2 = {c:3}
        // Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
        Object.assign(target, source1, source2)
        console.log(target)


        // 对象声明简写
        const age = 23
        const name = "zhangsan"
        const person1 = {age:age, name:name}
        console.log(person1)
        // 简写方式
        const person2 = {age, name}
        console.log(person2)

        // 对象的函数属性简写
        let person3 = {
            name:"jack",
            eat:function(food) {
                console.log(this.name + "在吃" + food)
            },
            // 简写情况下不能使用this
            eat2: food => console.log(this.name + "在吃" + food),
            eat3: food => console.log(person3.name + "在吃" + food)
        }

        person3.eat("apple")
        person3.eat2("apple")
        person3.eat3("apple")

        // 对象扩展运算符
        // 1、拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象  -- 深拷贝
        let person4 = {
            name: "Amy",
            age: 15
        }
        let someone = { ...person4 } 
        console.log(someone) //{name: "Amy", age: 15}

        // 2、合并对象 
        let age1 = { age: 15 } 
        let name1 = { name: "Amy" } 
        let person5 = { ...age1, ...name1 } //如果两个对象的字段名重复，后面对象字 段值会覆盖前面对象的字段值 console.log(person2) //{age: 15, name: "Amy"}
        console.log(person5)
    </script>
</body>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-01-16 12:57:45 更:2022-01-16 12:58:53

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 12:53:51-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码