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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
angular2使用简单介绍
Mar 01 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
js 调用百度分享功能
Feb 27 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
微信小程序实现底部导航
Nov 05 Javascript
详解vue-cli3多页应用改造
Jun 04 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
javascript数组详解
2014/10/22 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
简单的Python的curses库使用教程
2015/04/11 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python 多线程重启方法
2019/02/18 Python
详解python的四种内置数据结构
2019/03/19 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
毕业生的自我评价
2013/12/30 职场文书
财务主管自我鉴定
2014/01/17 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
婚前协议书范本
2014/04/15 职场文书
员工培训协议书
2014/09/15 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年团支部工作总结
2014/11/17 职场文书
文明单位汇报材料
2014/12/24 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
js作用域及作用域链工作引擎
2022/07/07 Javascript