百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

JS 对象基本用法

csdh11 2025-03-06 13:53 3 浏览

对象object

定义

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

写法

let obj = { 'name':'Frank','age':18 } //常用写法
let obj = new Object({'name':'Frank'}) //正规写法
console.log({'name'='Frank','age':18})

判断是否是对象

console.log(obj instanceof Object)

细节

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

属性名(key)、属性值(value)

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

使用变量做属性名

  • 之前都是用常量做属性名
let p1 = 'name'
let obj = { p1 : 'xx'}  //这样写,属性名为'p1'
let obj = { [p1] : 'xx'}  //这样写,属性名为'name'

对比

  • 不加[]的属性名会自动变成字符串
  • 加了[]则会当做变量求值
  • 值如果不是字符串,则会自动变成字符串

对象的隐藏属性

隐藏属性

  • JS中每一个对象都有一个隐藏属性
  • 这个隐藏属性储存着其共有属性组成的对象的地址
  • 这个由共有属性组成的对象叫做原型
  • 也就是说,隐藏属性储存着原型的地址

代码示例

var obj = {}
obj.toString() //居然不报错

因为obj的隐藏属性对应的对象上有toString()

删除属性

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

  • 即可删除obj 的xxx属性
  • 请区分 属性值为undefined 和 不含属性名
  • 属性值为undefined:属性名存在,还占着坑位
  • 不含属性名:坑位都没有,完全不存在

不含属性名

'xxx' in obj === false

含有属性名,但是值为undefined

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

注意obj.xxx === undefined

  • 不能断定 'xxx' 是否为obj 的属性
  • 不是和是但值为undefined都返回true

类比

  • 你身上有没有现金
  • A:没有//不含属性名
  • B:有,但是没带//含有属性名,但是值为undefined

查看所有属性(读属性)

查看自身所有属性

  • Object.keys(obj)

查看自身+共有属性

  • console.dir(obj)
  • 或者依次用Object.keys打印出obj.__proto__

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

  • obj.hasOwnProperty('toString')

两种方法查看属性

  • 中括号语法:obj['key']
  • 点语法:obj.key
  • 坑新人的语法:obj[key] //key是变量,但值一般不为'key'

注:(优先使用中括号语法,因为会被点语法误导,会让你误以为key不是字符串)

原型

每个对象都有原型

  • 原型里存着对象的共有属性
  • 比如obj的原型就是一个对象
  • obj.__proto__存着这个对象的地址
  • 这个对象里有toString/constructor/valueOf等属性

对象的原型也是对象

  • 所有的对象的原型也是原型
  • obj = {}的原型即为所有对象的原型
  • 这个原型包括所有对象的共有属性,是对象的根
  • 这个原型也有原型,是null

obj.name 等价于 obj['name']

obj.name 不等价于 obj[name]

简单来说,这里的name 是字符串,不是变量

let name = 'xx'

obj[name]等价于 obj['xx']

let list = ['name', 'age', 'gender']
let person = {
        name:'xx', age:18, gender:'man'}
for(let i = 0; i < list.length; i++){
    let name = list[i]
console.log(person__???__)
}
//使得person的所有属性被打印出来
  1. console.log(person.name) ×
  2. conole.log(person[name]) √

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

直接赋值

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

批量赋值

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

修改或添加共有属性

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

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

两种强行修改或增加原型上的属性

obj.__proto__.toString = 'xxx' //不推荐用__proto__
Object.prototype.toString = 'xxx'
  • 一般来说,不要修改原型,会引起很多问题

修改隐藏属性

不推荐使用__proto__

let obj = {name:'x'}

let obj2 = {name: 'xx'}

let common = {kind: 'human'}

obj.__proto__ = common

obj2.__proto__ = common

推荐使用Object.create

let obj = Object.create(common)

obj.name = 'x'

let obj2 = Object.create(common)

obj2.name = 'xx'

规范大概意思是,要改一开始就改,别后来再去改

总结

delete obj['name']
'name' in obj //false
obj.hasOwnProperty('name') //false

'name' in obj

  • 查看name是不是对象obj的属性,返回true则是,返回false则不是。但是这个方法不能区分name是对象自身的属性,还是原型的共有属性。

obj.hasOwnProperty('name')

  • 查看name是不是对象obj的自身属性,返回true则是其自身属性,返回false,则不是其自身属性,有可能是其原型的属性,也有可能什么都没有。
  • hasOwnProperty 只检查是否为自身属性,配合操作符 in 检查是否为共有属性。

Object.keys(obj) //自身属性
console.dir(obj) //自身属性+共有属性
obj['name'] //查属性值
obj.name //这里的name是字符串
obj[name] //这里的name是变量

['name'] = 'x' //改自身obj
Object.assign(obj,{age:18,...}) //批量改自身 
obj.proto['toString'] = 'xxx' //改共有属性 
Object.prototype['toString'] = 'xxx' //改共有属性 
obj.__proto__=common //改原型 
let obj = Object.create(common) //改原型 
  • 注:所有__proto__代码都是强烈不推荐写的

  • 基本同上:有属性则改,没有属性则增

相关推荐

音视频命令转换工具 - FFmpeg

随着自媒体兴起,许多人会自拍视频或者找视频素材裁剪,配上背景音乐或解说,加上各种特效边框,处理后再生成新的视频文件,发布到各大平台。生成的原始视频文件都很大,我们需要转换格式或者压缩大小,便于上传或者...

视频剪辑软件,如何批量将h264转换为h265格式的视频

最近有很多朋友在问,因为剪辑、或者上传的原因,需要将视频编码转换成H265格式编码,该怎么操作呢?不知道怎么办的宝贝们,下面请随小编一起来试试吧。需要哪些工具?安装一个媒体梦工厂视频素材若干怎么快速剪...

1080秒变4K,让PotPlayer开启“超分辨率”播放视频文件

大家好,我是大卫呆。1080P的视频能秒变4K视频吗?通过上期节目的实机测试,答案是:...

视频编码H.265与H.264的区别-------深入浅出说监控

我们在购买监控摄像头或者录像机产品的时候,一般情况下,经销商会问你是要H.265编码格式与H.264编码格式的,很多人都会好奇,什么是H.265和H.264?他们的实际效果有什么区别?今天就从定义和作...

H.265已落后!下一代视频技术实现重大突破

来源:快科技下一代视频技术实现重大突破。从阿里云官微获悉,阿里达摩院XG实验室参与制定的新一代国际视频编码标准H.266(VVC)出炉,同等画质下将节省近50%传输流量,清晰度越高,码率节省越多。前不...

VP9 或 H.265 的 6 个比较点

直播很复杂。广播流和通过Internet传输流的整个过程涉及一系列可以采用多种格式的方法。一个重要的组件是用于媒体文件编码和解码的编解码器。编解码器还定义了可用于进行流式传输的工具类型。大大简化流...

融合通信系统播放不了H.265视频怎么解决

在融合通信项目中,视频的融合是很多项目的落地要求,随着技术的进步,需要融合的视频也是多种多样,很多项目中需要接入视频监控,布控球,无人机,视频会议等视频资源。这些视频资源使用不同的技术,不同的传输协议...

别被忽悠了!视频编码H.265与H.264的区别有多大?看完你就懂了

相信大家都听过H.265和H.264这两种编码,也看过专业术语的解释。包括电视机都会标注支持H.265格式4K视频编码,视频监控系统也会标注支持H.265。但是还是有很多人不知道什么是视频编码H.26...

视频行业迎来巨变!H.265将被淘汰,电视及流媒体全受影响

这两天,姐夫自己遇到一个问题,从一些流媒体网站上下载来的视频,比如油管上的视频,居然无法正常在Windows10上播放,必须要重新下载一个视频编码插件才行。甚至于这些视频都无法通过现有的编辑软件去做...

对于Mybaits缓存的理解

...

你居然还去服务器上捞日志,搭个 Graylog 日志收集系统不香么

一、前言...

Java 代理从 0 到彻底搞懂

一、为什么出现代理?咱们先抛开编程,想象一下生活中的场景。假如你是一位大明星,每天都有无数的活动邀约、采访请求,还有各种商务合作的洽谈。要是你亲自去处理这些事情,那你哪还有时间去拍戏、唱歌、提升自己的...

SpringBoot系列——cache缓存

  前言  日常开发中,缓存是解决数据库压力的一种方案,通常用于频繁查询的数据,例如新闻中的热点新闻,本文记录springboot中使用cache缓存。...

Spring的缓存帝国,得益于这 5个注解!

在微服务,分布式的大环境下,缓存绝对是提升系统性能的关键手段,Spring作为Java生态中最流行的企业级应用框架,它是如何实现缓存的呢?这篇文章,我们将深入探讨Spring中5个核心的缓存注解...

JVM缓存EhCache在实际业务系统中的应用及复杂场景探讨

本文将介绍JVM缓存EhCache的基本概念、原理以及在实际业务系统中的使用。文章将重点讨论EhCache在复杂场景下的应用,并提供Java语言实现的示例。1.JVM缓存EhCache简介EhCa...