JS对象属性的检测与获取操作实例分析


Posted in Javascript onMarch 17, 2020

本文实例讲述了JS对象属性的检测与获取操作。分享给大家供大家参考,具体如下:

1.1 in运算符

in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值), 如果包含就返回true,否则返回false

var obj = { p: 1 }
'p' in obj // true
'toString' in obj // true

上面代码中,obj对象上有一个p属性,所以使用in运算符时,得到true,但toString并没有在obj对象上,为什么也返回true呢,这是因为in运算符,不能识别哪些属性是对象自身的,哪些是继承的。因为toString是继承自obj的原型对象,所以会返回true。

1.2 for … in 循环

for … in 循环用来遍历一个对象的全部属性。

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
 console.log(obj[i]);
}

for … in 循环有两个使用注意点

  1. 它遍历的是对象所有可遍历的属性,会跳过不可遍历的属性。
  2. 它不仅遍历对象自身的属性,还遍历继承的属性。

如果想得到自身的属性,需要结合hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。

var person = { name: '老张' };

for (var key in person) {
 if (person.hasOwnProperty(key)) {
  console.log(key);
 }
}

想要得到自身的属性还有另外两种方法:

es5:

利用Object.getOwnPropertyNames(obj)

var person = { name: '老张' }
var props = Object.getOwnPropertyNames(person)

es6:

利用Object.keys(obj)

var person = { name: '老张' }
var props = Object.keys(person)

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 #Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 #Javascript
用js编写留言板
Mar 17 #Javascript
Vue脚手架编写试卷页面功能
Mar 17 #Javascript
基于JavaScript实现留言板功能
Mar 16 #Javascript
JS实现简易留言板(节点操作)
Mar 16 #Javascript
You might like
PHP MySql增删改查的简单实例
2016/06/21 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP 断点续传实例详解
2017/11/11 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
详解JS函数重载
2014/12/04 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
js a标签点击事件
2017/03/30 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
pandas实现选取特定索引的行
2018/04/20 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
小区门卫岗位职责
2013/12/31 职场文书
项目经理任命书范本
2014/06/05 职场文书
远程培训的心得体会
2014/09/01 职场文书
融资合作协议书范本
2014/10/17 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python