JS对象

2023-11-05

前言

回顾之前的七种数据类型:

  • number string bool symbol
  • null undefined
  • object

五个falsy值

  • null undefined
  • 0 NaN
  • ‘’(空字符串)

对象的概念

定义

  • 无序的数据集合
  • 键值对的集合

①属性名:每个key都是对象的属性名(property)
②属性值:每个value都是对象的属性值

写法

let obj = { 'name': 'frank', 'age': 18 }
let obj = new Object({'name': 'frank'})
console.log({ 'name': 'frank, 'age': 18 })

细节

  • 键名是字符串,不是标识符,可以包含任意字符
  • 引号可省略,省略之后就只能写标识符
  • 就算引号省略了,键名也还是字符串(重要)

奇怪的属性名

所有属性名会自动变成字符串

let obj = {
  1: 'a',
  3.2: 'b',
  1e2: true,
  1e-2: true,
  .234: true,
  0xFF: true
};
Object.keys(obj)//可以得到所有的键名(key)
=> ["1", "100", "255", "3.2", "0.01", "0.234"]
原因:如果不加引号js会自动计算键名(key)的值,所以建议不要不写引号。

Tips:Object.keys(obj) 可以得到 obj 的所有 key

变量做属性名(key)

如何用变量做属性名
之前都是用常量做属性名
let p1 = 'name'
let obj = { p1 : 'frank'} 这样写,属性名为 'p1'
let obj = { [p1] : 'frank' } 这样写,属性名为 'name'
对比
不加 [ ] 的属性名会自动变成字符串
加了 [ ] 则会当做变量求值
值如果不是字符串,则会自动变成字符串 

对象的隐藏属性

隐藏属性
JS 中每一个对象都有一个隐藏属性
这个隐藏属性储存着其共有属性组成的对象的地址
这个共有属性组成的对象叫做原型
也就是说,隐藏属性储存着原型的地址
代码示例
var obj = {}
obj.toString() // 居然不报错
因为 obj 的隐藏属性对应的对象上有 toString()

超纲知识

除了字符串,symbol 也能做属性名
let a = Symbol()
let obj = { [a]: 'Hello' }

增删改查

1、删

①删除某个属性的写法

delete obj.xxx 或delete obj['xxx']

②判断一个属性是否删除,下面是不含属性名

'xxx' in obj===false

③含有属性名,但是值为 undefined

'xxx' in obj && obj.xxx === undefined

Tips:obj.xxx===undefined,不能断定’xxx’是否为 obj 的属性,这只可判定属性值不可判定属性名是否有

let obj={}//obj.x===undefined
let obj2={x:undefined}//obj2.x===undefined

undefined只删除值
delete都删了
‘name’ in obj查看是否已经删了,返回false表示已经删了

2、查(读)

①查看对象所有自有属性名

Object.keys(obj)

②查看对象所有自有属性值

Object.values(obj)

③查看对象所有自有属性名和属性值

Object.entries(obj)

④查看对象所有属性名(自有和共有)

console.dir(obj)
或者自己依次用 Object.keys 打印出 obj.__proto__,但不推荐

⑤判断一个属性是自身的还是共有的

obj.hasOwnProperty('属性名'

Tips:‘属性名’ in obj可以查看 obj 里是否有这个属性,不管是自身的还是共有的

查看属性

两种方法查看属性

  • 中括号语法:obj[‘key’]
  • 点语法:obj.key
    !!!坑新人语法:obj[key] // 变量 key 值一般不为’key’
var obj={name:'frank',age:18}
obj['name']//是"frank"
obj.name //是"frank"
obj[name]//是 undefined,name 默认是空字符串,默认每一个 window 的 name 都是空字符串,当然你也可以给 name 赋值
window.name='age'
//这个时候 obj[name]是 18。因为 name 是个变量,所以你可以给它赋值。
//如果中括号里面是变量,你必须先求变量的值
obj['na'+'me']//值是"frank"

3、修改或增加属性(写属性)

①直接赋值

let obj={name:'frank'} // name是字符串
obj.name='frank' // name是字符串
obj['name']='frank'
obj[name]='frank' // 错,因为name值不确定
obj['na'+'me']='frank'
let key='name';obj[key]='frank'
let key='name';obj.key='frank' // 错,因为obj.key等价于obj['key']

②批量赋值(是ES6新出的API)

Object.assign(obj,{age:18,gender:'man'})

③修改或增加共有属性
无法通过自身修改或增加共有属性

let obj={},obj2={} // 共有 toString
obj.toString='xxx'//只会在改 obj 自身属性
obj2.toString //还是在原型上

偏要修改或增加原型上的属性

obj.__proto__.toString='xxx' // 不推荐用__proto__
Object.prototype.toString='xxx'
//一般来说,永远不应该修改原型,会引起很多问题,比如代码崩溃,代码异常

④修改隐藏属性
不推荐使用proto

let obj={name:'frank'}
let obj2={name:'jack'}
let common={kind:'human'}
obj.__proto__=common
obj2.__proto__=common

推荐使用 Object.create

let obj=Object.create(common)
obj.name='frank'
let obj=Object.create(common)
obj2.name='jack'

Tips:规范的大概意思是,要改就一开始就改,别后来再改,后来改会非常影响性能
'name' in objobj.hasOwnProperty('name') 的区别
'name' in obj 是判断属性是否在obj对象里
obj.hasOwnProperty('name')是判断属性name是否为自身属性还是共有属性,为true就是自身属性

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS对象 的相关文章

  • OpenLayer和JSTS空间相交应用

    getAreaData DrawGeometry level const that this 多边形绘制结束后获取空间几何数据传递 获取边界 const drawExtent DrawGeometry getExtent 实例化jsts c

随机推荐

  • [230517] TPO71

    7102 Minoan Palaces 目录 7102 Minoan Palaces 正文 题目 Paragraph 1 问题 1 Paragraph 2 问题 2 Paragraph 3 问题 3 4 Paragraph 4 问题 5 6
  • 极速搭建Hexo博客【 CentOS7 + Node.js + Hexo + Github Pages】

    Hexo是一款流行的博客框架 基于Node js 支持Markdown语法 这篇文章记录我如何完成搭建并部署到Github Pages上 创建虚拟环境 养成隔离项目环境的好习惯 python3 m venv venv blog 创建虚拟环境
  • 三相三线与三相四线计算公式

    三相三线与三相四线计算公式 项目 计算公式 备注 视在功率 S UI 有功功率 P 3UxIxcos 3ULILcos Ux 相电压 无功功率 Q 3UxIxsin 3ULILsin UL 线电压 功率因数 cos P S P UI 总视在
  • Linux系统开发

    一 实验目的 设计一款携带多种功能的聊天软件 不仅可以聊天 也能修改字体 计时 绘画等等 二 实验内容 1 ui设计 满分15分 2 画图 timer 多线程 满分20分 3 数据库操作 满分15分 4 TCP网络通信 满分40分 客户端1
  • 红队靶场搭建

    这篇博客主要是讲解一下vulstack红队评估的靶场 从信息收集到控制DMZ区域的WEB服务器 接着联合MSF和CS控制内网机器 随后通过搭建隧道 配置代理 攻击内网机器并且控制域控 主要讲解红队的攻击的全部流程 首先主要讲解一下靶场环境的
  • 几个汇编代码

    文章目录 输入输出 输出2 16进制 冒泡排序 判断正数负数零 以有符号数输出 输入输出 DATAS SEGMENT arr dw 20 dup num db 0 string1 db input the number of interge
  • 【Debug】关于Could not get lock /var/lib/dpkg/lock-frontend解决办法

    作者 柒号华仔 个人主页 欢迎访问我的主页 个人信条 星光不问赶路人 岁月不负有心人 个人方向 专注于5G领域 同时兼顾其他网络协议 编解码协议 C C linux等 感兴趣的小伙伴可以关注我 一起交流 目录 现象 原因 解决办法 现象 在
  • 前端js通过ajax请求下载Blob类型文件(XMLHttpRequest)

    方式一 必须通过原生ajax实现 jquery封装的ajax会有问题 function exportDevice params let xhr new XMLHttpRequest xhr open post http localhost
  • LORA项目源码解读

    大模型fineturn技术中类似于核武器的LORA 简单而又高效 其理论基础为 在将通用大模型迁移到具体专业领域时 仅需要对其高维参数的低秩子空间进行更新 基于该朴素的逻辑 LORA降低大模型的fineturn门槛 模型训练时不需要保存原始
  • 地球坐标,火星坐标,百度坐标转换

    标准地球坐标即GPS设备获得的坐标 该坐标需要经过国家测绘局进行加密后形成火星坐标 WGS 84 我们用的google坐标和高德地图坐标也就是火星坐标 百度地图 在火星坐标的基础上再进行一次加密 形成了百度地图上的坐标 因此 直接将标准地球
  • 电脑出现您的计算机配置似乎正确的,Win10提示你的计算机配置似乎是正确的怎么解决?...

    电脑使用久了总是会出现一些问题 最常见的就是系统提示了 相信不少用户都遇到过win10提示你的计算机配置似乎是正确的 但是又不知道怎么办 为此小编赶紧整理了以下教程帮助大家 大家赶紧来看看吧 访问 解决方法 1 首先进入桌面 按下 win
  • echarts自定义仪表盘实现特殊功能:轴线渐变(半透明) + 刻度颜色变化 + 仪表盘轴线宽度自适应

    如图是我画的两个仪表盘 第一个仪表盘 实现了 轴线渐变 半透明 刻度颜色变化 仪表盘轴线宽度自适应 第二个仪表盘 实现了 仪表盘轴线宽度自适应 关于轴线的渐变 本来打算使用img 但是由于此轴线是透明度渐变 不同位置透明度不一样 所以无法使
  • vue定时器无法停止。

    vue模板里面的定时器问题 文章目录 前言 一 定时器是什么 二 使用步骤 1 使用过程 2 读入数据 总结 前言 有些时候我们在使用vue模板时 不免会使用定时器来定时请求后台获取数据 但是在获取数据的时候 定时器就像踩不住刹车的小车 飘
  • Nuxt.js实现SSR的应用

    seo 即 搜索引擎优化 Search Engine Optimization 它是指通过站内优化 如 网站结构调整 网站内容建设 网站代码优化以及站外优化等方法 来进行搜索引擎优化 简单说 通过各种技术 手段 来确保 你的Web内容被搜素
  • 股海心法60条

    看不懂 看不准 没把握时坚决不进场 先学会做空 再学会做多 君子问凶不问吉 高手看盘先看跌 贪婪与恐惧 投资之大忌 侥幸是加大风险的罪魁 犹豫则是错失良机的祸首 心态第一 策略第二 技术只有屈居第三 任何时候不要轻易满仓 这样做 有利于保持
  • MySQL的多表关联查询

    一 多表关联查询 多表关联查询是使用一条SQL语句 将关联的多张表的数据查询出来 1 1 交叉查询 交叉查询就是将多张表的数据没有条件地连接在一起进行展示 1 1 1 语法 使用交叉查询类别和商品 目标 查询所有分类 以及每个分类下的所有商
  • 企业微信开发(通讯录模块)

    1 前言 关于企业微信通讯录同步的开发 先获取企业corpid 通讯录应用的secret 并在通讯录应用开启API编辑通讯录权限 2 关于token token是通过调用微信api接口由corpid和secret获取 由于token是每隔两
  • 系统提示0x00000709错误怎么办?

    一般都是系统自动更新补丁造成的 系统更新出现大面积打印机造成电脑蓝屏的问题还没解决多久 又出现了更新系统造成打印机无法共享 现在的系统都不带测试就推送的吗 所以我一般强烈建议大家不要更新系统 更新系统就是个定时炸弹 随时可能让你的系统爆炸
  • 链式栈的创建以及各种操作

    目录 一 声明 二 链式栈的初始化和各种操作 2 1 链栈结构定义 2 2 初始化和进栈操作 2 3 进栈结果展示 编辑 2 4 出栈操作 2 5 出栈结果展示 2 6 遍历操作 2 7 遍历结果展示 编辑 2 8 获取栈顶元素 2 9 结
  • JS对象

    前言 回顾之前的七种数据类型 number string bool symbol null undefined object 五个falsy值 null undefined 0 NaN 空字符串 对象的概念 定义 无序的数据集合 键值对的集