0

0

JavaScript对象的基本用法

WBOY

WBOY

发布时间:2022-08-04 09:49:07

|

1812人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于javascript对象的相关问题,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数值,数组,函数等,下面一起来看一下,希望对大家有帮助。

JavaScript对象的基本用法

【相关推荐:javascript视频教程web前端

一、 声明对象的两种语法

什么是对象?

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数值,数组,函数等

对象是由属性和方法组成的:

立即学习Java免费学习笔记(深入)”;

  • 属性:事物的特征,在对象中用属性来表示(常用名词)

  • 方法:事物的行为,在对象中用方法来表示(常用动词)

let obj = {'name': 'frank','age' : 18}  // 简单写法 let obj = new Object({'name': 'frank'}) // 正规写法
注意:键名(key)是字符串,不是标识符,可以包含任意字符引号可以省略,但是当键名里面存在汉字,空格,符号等特殊字符时候不可以省略,省略之后就只能写标识符。就算引号省略了,键名也还是字符串

二、删除对象的属性

1.delete obj.xxx或delete obj[‘xxx’]

即可删除obj的xxx属性。只能删属性不能用来删对象。

注意:区分「属性值为undefined」和「不含属性名」

delete obj.xxx 或 delete obj['xxx'] 可以对属性名进行删除。

在这里插入图片描述

用 ‘xxx’ in obj 来检查是否属性名删除成功

2.不含属性名

'xxx' in obj===false

3.含属性名,但是值为undefined

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

注意:obj.xxx === undefined,不能断定’xxx’是否为obj的属性

在这里插入图片描述

obj.name = undefined 只是把属性值变为空,但是属性名还存在。

在这里插入图片描述

三、查看对象的属性

  1. 查看自身所有属性

Object.keys(obj)

在这里插入图片描述
2. 查看自身+共有属性

console.dir(obj)

在这里插入图片描述

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

在这里插入图片描述
3. 判断一个属性是自身的还是共有的

obj.hasOwnProperty('toString') // false 不是自身的 // ture 是自身的。

在这里插入图片描述
4. 查看单一属性值

.net全诚外卖叫餐(订餐)系统
.net全诚外卖叫餐(订餐)系统

全诚外卖通是全诚团队继“全诚商城”之后以叫餐(预订)为核心的又一力作,或者称之为“特色店铺系统”,系统是基于.net2.0 + SQL构架、B/s框架的多用户店铺管理系统;外卖通的开发旨在以商家和消费者为服务对象,借以二者相互依存的关系,以互动的形式成就全诚外卖通一个完善的WEB系统平台,在这个平台里,商家可以扩大销售

下载

有两种方法:

  • 中括号法:obj['key']

  • 点语法: obj.key

  • obj['k'+'ey'] 也可以 就是说里面是字符串

 obj.name <==> obj['name']
 obj.name 不等价于 obj[name]
let name ='frank'
obj[name]等价于obj['frank']
而不是obj.name 或 obj['name']
除非let key = 'name';
此时obj[key] = 'frank'

四、修改或增加对象的属性

  1. 直接赋值 用中括号语法或者点语法="xxx"赋值
let obj={name:'frank'} //name是字符串
obj.name='frank'       //对字符串name进行修改
obj['name']='frank'
~~obj[name]='frank'~~   因为name值不确定 可能不等于字符串name
obj['na'+'me']='frank' //运算的形式赋值
let key='name'; obj[key]='frank' // 通过引入变量来赋值
let key='name';~~obj.key='frank'~~ obj.key等价于obj['key']

在这里插入图片描述

2. 批量赋值

Object.assign(obj,{age:18,gender:'name',...}) (赋值给谁,{什么东西})

在这里插入图片描述
3.修改或增加共有属性

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

(读的时候走原型,写的时候只走自身属性,如果你要运行的话只运行自身的属性)

let obj = {},obj2 = {};obj.toString='xxx'//只会修改自身属性obj2.toString//还是在原型上
  • 偏要修改或增加原型上的属性, 一般来说不要修改原型,会引起很多问题
   obj.__proto__.toString='xxx'  //不推荐
   window.Object.prototype.toString='xxx' //与上式子相同
  • 修改隐藏属性(修改原型)

    不推荐使用__proto__ 代码:obj.__proto__=common

    推荐使用Object.create

let obj=Object.create(common)obj.name='frank'obj.age='jack' //简单用法

规范大概的意思是,要改就一开始改,别后来再改,影响性能。

var common={'国籍':'中国',hairColor:'black'}
var person=Object.create(common,{name:{value:'frank'}})
cosole.log(person)  // 正规 但是复杂用法

提问:

‘name’ in obj和obj.hasOwnProperty(‘name’) 的区别?

'name' in obj 是查看name属性是否在 obj 对象里面。这里是包含了 自身属性和共有属性。

obj.hasOwnProperty('name') 是查看这个name属性属于自身属性还是共有属性

// false 不是自身属性 //ture 是自身属性

变量,属性,函数,方法的区别?

相同点:变量和属性都是用来存储数据的

不同点:

变量:单独声明并赋值,使用的时候直接写变量名 单独存在

属性:在对象里面不需要声明,使用的时候必须是  对象.属性

相同点:函数和方法都是实现某种功能的

不同点:        

 函数:是单独声明的并且调用的 函数名()   单独存在

方法:在对象里面 调用的时候  对象.方法()

【相关推荐:javascript视频教程web前端

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号