个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

    • 防抖与节流
    • 本地存储
    • PWA
    • 地理位置
    • 对象 Object
      • 事件坐标详解
      • 常用函数
      • class类
      • Array 数组
      • 其他
      • blob下载文件
      • 深度克隆
      • 模块化
      • 常用工具函数
      • 拖拽
      • Map与Set
    • TypeScript

    • 前端基础
    • JavaScript
    NeverStop1024
    2022-06-19
    目录

    对象 Object

    # 遍历

    // 1.fon...in...
    let person = { name: 'Matt', age: 27,  job: 'develop'}; 
    for(let i in person){
        console.log(i,person[i])
    }
    // "name",  "Matt“
    // "age",  27
    // "job",  "develop"
    
    1
    2
    3
    4
    5
    6
    7
    8

    # 获取所有key、value

    // 获取所有key
    Object.keys(person) // ["name", "age", "job"],用keys()是无序的
    Object.getOwnPropertyNames(person) // ["name", "age", "job"],用getOwnPropertyNames()是有序的
    // 获取所有value
    Object.values(person) // ["Matt", 27, {"title": "标题"}]
    // 获取所有[key,value]数组
    Object.entries(person) // [["name", "Matt"], ["age", 27], ["job", {"title": "标题"}]] 
    
    1
    2
    3
    4
    5
    6
    7

    # 判读是否存在某个属性

    let person = { 
     name: 'Matt', 
     age: 27, 
     job: { 
     title: '标题' 
     } 
    }; 
    // 方式一:hasOwnProperty,不会去原型上查找
    console.log(person.hasOwnProperty("name"));
    
    //方式二:in操作符,会去原型上查找
    console.log("name" in person); // true
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    # 对象解构

    let person = { 
     name: 'Matt'
    }; 
    // 单层解构
    // 引用属性不存在时,返回undefined,可设置默认值避免
    let { name = '刘备', age = '19' } = person;
    console.log(name,age) // Matt 19
    
    // 嵌套解构
    let person = { name: 'Matt', age: 27, job: { title: '标题' }}; 
    let { job: { title }, name, age } = person;
    console.log(title, name, age); // "标题",  "Matt",  27 
    
    // 部分解构
    let { job: { title }, ...others } = person;
    console.log(title, others) // "标题", {"name": "Matt", "age": 27} 
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    # 对象合并

    1. Object.assign()

    将多个源对象浅复制到目标对象 接收多个参数:参数1:目标对象,剩余参数:多个源对象

    注意:

    1. 简单类型复制值,复杂类型还是只复制引用
    const obj = {a:1,b:2}
    const res = Object.assign(obj,{c: 3}, {d: 4})
    console.log(res) // {"a": 1, "b": 2, "c": 3, "d": 4} 
    
    1
    2
    3

    # 数据属性、访问属性

    对象的每个属性有数据属性和访问属性

    1. 数据属性

    有4个特性描述每个对象属性的行为

    • Configurable:是否可以删除该对象属性,默认:true
    • Enumerable:是否可以通过for-in循环该对象属性,默认:true
    • Writable:该对象属性是否可以被修改,默认:true
    • Value:该对象属性的实际值,默认:undefeated

    2. 访问属性

    有4个特性描述它们的行为

    • Configurable:是否可以删除该对象属性,默认:true
    • Enumerable:是否可以通过for-in循环该对象属性,默认:true
    • Get:获取函数,在读取属性时调用,默认:undefeated
    • Set:设置函数,在设置属性时调用,默认:undefeated

    获取与修改

    • Object.getOwnPropertyDescriptor() 获取一个
    • Object.getOwnPropertyDescriptors() 获取多个
    • Object.defineProperty() 修改一个
    • Object.defineProperties()修改多个

    # 对象属性简写

    let name = 'Matt'; 
    let person = { 
    	name 
    }; 
    console.log(person); // { name: 'Matt' }
    
    1
    2
    3
    4
    5

    # 可计算属性

    []

    const label = 'city'
    const obj = {
        [label]:'test',
        [`${label}1`]:'test'
    }
    console.log(obj)
    
    1
    2
    3
    4
    5
    6

    # 方法名简写

    let person = { 
      sayName(name) { 
       console.log(`My name is ${name}`); 
      } 
    };
    
    1
    2
    3
    4
    5

    # 删除属性

    const obj = {a:1,b:2}
    delete obj.a
    console.log(obj) //{ "b": 2 } 
    
    1
    2
    3
    编辑 (opens new window)
    #Object
    上次更新: 2023/02/16
    地理位置
    事件坐标详解

    ← 地理位置 事件坐标详解→

    最近更新
    01
    mock使用
    07-12
    02
    websocket即时通讯
    07-12
    03
    前端面试题
    07-09
    更多文章>
    Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式