• 前端培训丁鹿学堂:前端js中Object常用知识点总结


    js中的对象类型

    有人说了,js中的对象是object,还分什么类型吗?
    其实如果掉掉书袋,细分的话是可以分成两种类型的:

    1. Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义对象;
    2. Host:在主机环境(如浏览器)中实现并提供给开发者使用,比如Windows对象和所有的DOM对象;

    我们主要研究的,就是自定义的object对象

    对象的基本操作

    一个对象的基本操作,无非是创建,和增删改查。下来就来一一总结归纳

    创建

    字面量创建:

    const obj = { }
    obj.userName = 'zhangsan'
    
    • 1
    • 2
    获取对象的属性

    通过点语法的方式,简单便捷的获取对象的属性。
    第二种:通过中括号的方式获取,如果属性是一个变量的话,就用这种

    console.log(obj.userName)
    console.log(obj['userName'])
    
    • 1
    • 2
    删除对象的属性

    删除对象的属性,用到了一个关键词:delete

    delete obj.userName
    
    • 1
    遍历对象的方法

    用for…in 可以很方便的遍历对象
    注意:for…in 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)

    for(let i in obj){
        console.log(i)
    }
    
    • 1
    • 2
    • 3
    扩展:常用的对象api总结
    1.**Object.assign() **

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。常用来合并对象
    注意:Object.assign属于浅拷贝

    const obj1 = { a: 1, b: 2 }
    const obj2 = { b: 3, c: 4 }
    const obj3 = Object.assign(obj1, obj2)
    
    • 1
    • 2
    • 3
    2.Object.keys() 和Object.values()

    Object.keys()返回的是对象的属性名key所组成的集合
    Object.values()返回的是对象的属性名value所组成的集合

    const obj = { 0: 'a', 1: 'b', 2: 'c' }
    console.log(Object.keys(obj)) // ['0', '1', '2']
    console.log(Object.values(obj)) // ['a', 'b', 'c']
    
    • 1
    • 2
    • 3
    3.obj.hasOwnProperty(prop)

    这个就是实例对象的方法了,用来用来判断某个对象是否含有指定的属性,而且是本身的属性,如果是继承的属性也会返回false

    const obj1 = { a: 1, b: 2 }
    let result = obj1.hasOwnProperty('a') // true
     let result = obj1.hasOwnProperty('d') // false
    
    • 1
    • 2
    • 3
    小结

    以上就是object对象常用的内容了。有人说,诶,你这总结的不全面啊。当然了,如果要全面直接复制mdn文档就行了,还要我再写这个干嘛,不全面就是特色,总结了最常用的方法,80%的情况下是够用的!
    对于入门的我们来说,贪多嚼不烂!

  • 相关阅读:
    真正靠谱的手机清理APP与方法,轻松帮你干掉几个G垃圾!
    rust - 理解borrow trait
    PTA 7-151 最大公约数
    半路入行软件测试岗—这些建议你最好看一下
    MAC 版PowerPoint 插入latex数学公式
    基于java+springboot+mybatis+vue+elementui的毕业生信息招聘平台
    自动化运维管理平台——spug的搭建和日常使用
    SQL每日一题(多表查询 ==> 薪水高过经理的员工(自连接)
    算法-位运算-数字范围按位与
    解锁内存之谜:从C到Python、Java和Go的内存管理对比
  • 原文地址:https://blog.csdn.net/qq_38525381/article/details/126840062