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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
简单的js表格操作
Sep 24 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
webpack的移动端适配方案小结
Jul 25 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的autoLoad自动加载机制
2012/09/27 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python对html过滤处理的方法
2018/10/21 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Python的两道面试题
2013/06/29 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
执行总经理岗位职责
2014/02/03 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
公司庆典欢迎词
2015/01/26 职场文书
合作意向协议书
2015/01/29 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
天鹅湖观后感
2015/06/09 职场文书