前端Object的基础使用

news2024/12/23 15:50:14

Object.assign()

通过复制一个或多个对象来创建一个新的对象。旧对象+旧对象+…=新对象

console.log('学习让人进步', Object.assign({name:'zhangsan'},{age:18}))

Object.create()

使用指定的原型对象和属性创建一个新对象。旧对象+新属性=新对象

这个是把属性挂到原型上,不能枚举出来的。

console.log('学习让人进步', Object.create({ age: 18 }))

Object.defineProperty()

给对象添加一个属性并指定该属性的配置。多用于配置 get,set

    const obj1 = {}

    // 向对象obj1中添加一个属性a,并设置数据描述符的示例
    Object.defineProperty(obj1, "a", {
      value: '我是属性value',
      writable: true,
      enumerable: true,
      configurable: true
    })

    // 对象obj1有了属性a,其值为1
    console.log(obj1.a) // 输出: 1,表示属性a的【value: 1】默认值已生效

 

const obj1 = {};

    // 向对象中添加一个属性b,并设置存取描述符的示例
    var bValue;
    Object.defineProperty(obj1, "b", {
      get: function () {
        return bValue;
      },
      set: function (newValue) {
        bValue = newValue;
      },
      enumerable: true,
      configurable: true
    });

    obj1.b = 2;

    // 对象obj1有了属性b,其值为2
    console.log(obj1.b); // 输出: 2,表示属性b的getter和setter均生效

Object.freeze()

冻结对象:其他代码不能删除或更改任何属性

Object.seal() 

防止其他代码删除对象的属性。

Object.entries() 

返回给定对象自身可枚举属性的 [key, value] 数组

 

const sss = { name: 'zhangsan', age: 14 }
    let aaa = Object.entries(sss)
    console.log('学习让人进步', sss, aaa)

 Object.keys()

返回一个包含所有给定对象自身可枚举属性名称的数组。

 

const sss = { name: 'zhangsan', age: 14 }
    console.log('学习让人进步', Object.keys(sss))

 Object.values()

返回给定对象自身可枚举值的数组。

const sss = { name: 'zhangsan', age: 14 }
    console.log('学习让人进步', Object.values(sss))

 练习题

写出来一个name:张三,age:14岁,职业:上学,身份证号:123(不可以枚举),当更改年龄时候自动加上岁字,名字不可以更改,打印这个对象的可枚举属性。

const obj = Object.assign({ job: '上学' })
    var bValue
    Object.defineProperty(obj, 'code', {
      // get: function() {
      //   return bValue
      // },
      // set: function(newValue) {
      //   bValue = newValue
      // },
      value: '123',
      enumerable: false,
      configurable: true,
      writable: false
    })
    Object.defineProperty(obj, 'name', {
      // get: function() {
      //   return bValue
      // },
      // set: function(newValue) {
      //   bValue = newValue
      // },
      value: '张三',
      enumerable: true,
      configurable: true,
      writable: false
    })
    Object.defineProperty(obj, 'age', {
      get: function() {
        return bValue
      },
      set: function(newValue) {
        bValue = newValue + '岁'
      },
      enumerable: true,
      configurable: true
    })
    obj.age = 18
    console.log('学习让人进步', obj, Object.keys(obj), Object.values(obj))

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1289391.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件产品研发过程 - 二、概要设计

软件产品研发过程 - 概要设计 相关系列文章 软件产品研发管理经验总结-管理细分 软件研发管理经验总结 - 事务管理 软件研发管理经验总结 - 技术管理 软件产品研发过程 - 二、概要设计 目录 软件产品研发过程 - 概要设计一、概要设计概述二、概要设计过程1、模块概述2、应用场景…

设计字体必备工具推荐:5款好用的字体设计软件

字体设计作为设计中的一个重要模块,如果字体软件选择正确,将给字体设计工作带来极大的便利,易于使用的字体设计软件,可以创造出优秀的排版设计。在日常工作中,设计师可能会在字体网站上下载字体,然后安装字…

记录 | linux静态库和动态库的理解

hello.cpp&#xff1a; #include <cstdio>void hello() {printf("Hello, world!\n"); }main.cpp&#xff1a; #include <cstdio>void hello();int main() {hello();return 0; }静态库编译配置&#xff1a; cmake_minimum_required(VERSION 3.12) proj…

【AI数字人-论文】DINet论文解读

DINet 方法形变修补损失函数perception lossGAN lossLip-sync loss 实现细节参考 如下图所示&#xff0c;人脸视觉配音&#xff08;Face visually dubbing&#xff09;旨在根据输入的驱动音频同步源视频中的嘴型&#xff0c;同时保持身份和头部姿势与源视频帧一致。然而在少样本…

DTCC2023大会-基于eBPF观测数据库-附所有PPT下载链接

DTCC2023大会-基于eBPF观测数据库-附所有PPT下载链接 8月16日—18日,第14届中国数据库技术大会(DTCC-2023)在北京国际会议中心举行。聚好看在大会上首次发布基于eBPF观测数据库性能的产品DBdoctor&#xff0c;受到了业界广泛的关注。近期几位业内同仁过来要大会的PPT&#xff…

Shopify二次开发之五:元字段(Metafields)

解释 Shopify Metafields 是一种用于存储和管理自定义数据的功能。它们允许商户在商城中的产品、订单、客户、Page等对象上添加自定义字段&#xff0c;以满足特定业务需求。 操作 1、添加Custom data 可以为Products、Pages添加自定义数据&#xff0c;比如选择了Pages&#…

使用pandas制作图表

数据可视化对于数据分析的重要性不言而喻&#xff0c;一个优秀的图表有足以一眼就看出关键所在。pandas利用matplotlib实现绘图。能够提供各种各样的图表功能&#xff0c;包括: 单折线图多折线图柱状图叠加柱状图水平叠加柱状图直方图拆分直方图箱型图区域块图形散点图饼图多子…

网络和Linux网络_11(数据链路层)以太网(MAC帧)协议+局域网转发+ARP协议

目录 1. 以太网协议 1.1 MAC地址 1.2 以太网帧格式 2. 局域网转发原理 2.1 数据碰撞和交换机 2.2 最大传输单元MTU 3. ARP协议 3.1 ARP协议格式 3.2 模拟APR协议工作过程 3.3 ARP缓存表 4. 重看TCP/IP四层模型 本篇完。 1. 以太网(MAC帧)协议 网络层的IP协议并不是…

怎么下载抖音视频无水印?教你三个无水印下载抖音视频方法

怎么下载抖音视频无水印&#xff1f;抖音已经成为了我们日常生活与工作的无法割舍的一部分&#xff0c;每天数以亿计的用户在进行创作分享。在这个平台上&#xff0c;用户可以通过自己的所见所想进行创作和分享记录美好瞬间。然而&#xff0c;有些用户希望能够将自己喜欢的抖音…

PHP:解决一个字符串中的斜杠 / 进行 JSON 编码时,斜杠被转义为 \/

一、修改前 问题代码 直接通过JSON编码&#xff0c;就会出现问题 代码 $url SO/.$fileName; echo json_encode($url); 效果 二、解决后 代码 使用 json_encode 函数的第二个参数 JSON_UNESCAPED_SLASHES 来禁止对斜杠进行转义 $url SO/.$fileName; echo json_encode…

电力仪表在工厂车间设备电能管理系统的设计-安科瑞黄安南

摘 要&#xff1a;基于车间用电设备的电能管理系统架构思路及实施方法&#xff0c;从硬件和软件方面对此方法进行了阐述。对车间旧设备改造以及新的电能管理系统提供一种思路和便捷的方法。 关键词&#xff1a;电能管理系统&#xff1b;多功能电力仪表&#xff1b;PLC&#x…

【后端】JVM 远程调试

前言 再好的代码,也还是有瑕疵的,不是代码不给力,是线上问题太牛逼太玄幻。这不刚部署就出现了问题,幸好还是测试的时候,早点发现早点解决,不给任何人带来不必要的损失,是我做人的原则,只要钱到位,任何问题都不是问题。 JVM 远程调试 不得不说 IDEA 和 宝塔配合是真…

【FastApi】—— uvicorn启动程序出现端口冲突

文章目录 &#x1f356; 前言&#x1f3b6;一、问题描述✨二、更改方案&#x1f3c0;三、运行结果&#x1f3c6;四、知识点提示 &#x1f356; 前言 【FastApi】—— uvicorn启动程序出现端口冲突 &#x1f3b6;一、问题描述 描述&#xff1a; INFO: Will watch for changes …

Spring Cloud版本导致的java.lang.NoSuchFieldError: sharedInstance异常

目录 一、问题现象二、解决办法1、本次异常配置2、修改后的配置 三、原因分析 一、问题现象 2023-12-05 16:21:53.680]|[ INFO]|[80173]|[main]|[]|[]|[trationDelegate$BeanPostProcessorChecker:335]|[Bean org.springframework.cloud.client.loadbalancer.reactive.LoadBal…

css 3D背景反转实现

body{/* 透视 */perspective: 800px; } div{transform-style:preserve-3d;width:259px;height:396px;margin: 100px auto;position: relative; } div img{position: absolute;width:259px;height:396px;left:0;top:0;transition: all linear 2s;z-index: 0; } div img:nth-chil…

使用Python内置库实现数据的加密与校验

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 数据的安全性是现代应用程序中不可忽视的一个重要方面。在Python中&#xff0c;我们可以利用内置的加密和校验库来保护敏感信息。本文将深入讨论如何使用Python内置库实现数据的加密和校验&#xff0c;为开发者提…

java实验:数据库应用(idea+mysql+php)设计用户注册和登录

设计用户注册和登录界面&#xff0c;实现用户注册和登录操作。 设计用户注册/登录界面;使用工具在MySQL中创建user表&#xff0c;包括学号、姓名、密码、专业、班级&#xff1b;实现注册操作&#xff1a;在user表中插入一条新纪录&#xff0c;但学号不能重复&#xff1b;实现登…

通用plantuml 时序图(Sequence Diagram)模板头

通用plantuml文件 startuml participant Admin order 0 #87CEFA // 参与者、顺序、颜色 participant Student order 1 #87CEFA participant Teacher order 2 #87CEFA participant TestPlayer order 3 #87CEFA participant Class order 4 #87CEFA participant Subject order …

群晖Docker搭建HomeAssistant,结合内网穿透实现远程访问智能家居控制中心

使用群晖Docker搭建HomeAssistant并实现异地公网访问 文章目录 使用群晖Docker搭建HomeAssistant并实现异地公网访问一、下载HomeAssistant镜像二、内网穿透HomeAssistant&#xff0c;实现异地控制智能家居三、使用固定域名访问HomeAssistant HomeAssistant是一个可以控制 苹果…