html 中怎样显示enum,JavaScript如何枚举?
JavaScript中对象的属性分为两种:数据属性和访问器属性。然后根据具体的上下文环境的不同,又可以将属性分为:原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自构造的函数中,然后就是构造函数实例化后添加的新属性。
在JavaScript中除了检测对象的属性是否存在,还会经常对对象的属性进行遍历(枚举)。而在JavaScript中遍历一个对象的属性并不太简单,主要有两个原因:
JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则这个属性是可枚举的,否则反之
这篇文章将总结有关于JavaScript中对象属性枚举的几种方法:for ... in
Object.keys()
Object.getOwnPropertyNames()
for ... of
for ... in
for...in循环可以遍历对象中所有可枚举的对象属性(包括对象自有属性和继承的属性)。不过需要注意的是,使用for...in循环遍历对象属性时返回的属性会因为各个浏览器不同导致对象属性遍历的顺序有可能不是当初构建时的顺序。var obj = {
'x': 1,
'y': 2,
'z': 3
}
obj.propertyIsEnumerable('toString'); // false,不可枚举
for (prop in obj) {
console.log(prop); // 输出x,y,z;但不会输出toString
}
其实for...in操作的主要目的就是遍历对象的属性,如果只需要获取对象的实例属性(跳过继承属性),可以使用hasOwnProperty()进行过滤:for (prop in obj) { if (!obj.hasOwnProperty(prop)) continue; // 跳过继承属性}
如此一来,可以这样来使用for...in循环遍历对象属性:(function() {
var getEnumPropertyNames = function(obj) {
if (typeof obj !== 'object') throw TypeError(); // 参数必须是对象
var props = []; // 将要返回的数组
for (var prop in obj) { // 遍历所有可枚举的属性
if (obj.hasOwnProperty(prop)) { //判断是否是自有属性
props.push(prop); //将属性名添加到数组中
}
}
return props; //返回这个数组
}
// 实例化
var obj = {
'x': 1,
'y': 2
}
obj.propertyIsEnumerable('toString') var propertys = getEnumPropertyNames(obj);
console.log(propertys.length); //2
console.log(propertys.join(",")); //x,y
})()
Object.keys()
Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。两者最大的区别在于for...in还会遍历出一个对象从其原型链上继承到的可枚举属性。
Object.keys() 返回一个所有元素为字符串的数组,其元素来自于从给定的对象上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。var obj = {
'x': 1,
'y': 2,
'z': 3
}
obj.propertyIsEnumerable('toString');
console.log(Object.keys(obj)); // ["x", "y", "z"]
Object.keys()可以遍历对象可枚举的自身属性。也就是说对象的属性不是从原型链上继承下来的。
注意:在 ES5 环境,如果传入的参数不是一个对象,而是一个字符串,那么它会报 TypeError。在 ES6 环境,如果传入的是一个非对象参数,内部会对参数作一次强制对象转换,如果转换不成功会抛出 TypeError。// 在 ES5 环境
Object.keys('foo'); // TypeError: "foo" is not an object
// 在 ES6 环境
Object.keys('foo'); // ["0", "1", "2"]
// 传入 null 对象
Object.keys(null); // Uncaught TypeError: Cannot convert undefined or null to object
// 传入 undefined
Object.keys(undefined); // Uncaught TypeError: Cannot convert undefined or null to object
Object.getOwnPropertyNames()
Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性)组成的数组,但不会获取原型链上的属性。该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。// 类数组对象var obj = {
0 : "a",
1 : "b",
2 : "c"
};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]
for...of
for...of为ES6新增的方法,主要来遍历可迭代的对象(包括Array, Map, Set, arguments等),它主要用来获取对象的属性值,而for...in主要获取对象的属性名。var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow');
for (var i in colors) {
console.log(colors[i]); // red green blue yellow
}
for (var j of colors) {
console.log(j); // red green blue undefined undefined yellow
}
可以看到使用for...of可以输出包括数组中不存在的值在内的所有值。
其实除了使用for...of直接获取属性值外,我们也可以利用Array.prototype.forEach()来达到同样的目的。var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow');
for (var i in colors) {
console.log(colors[i]); // red green blue yellow
}
for (var j of colors) {
console.log(j); // red green blue undefined undefined yellow
}
总结一下
其实这几个方法之间的差异主要在属性是否可可枚举,是来自己原型,还是实例。
想要了解更多相关知识,可访问 前端学习网站!!
html 中怎样显示enum,JavaScript如何枚举?相关推荐
- java枚举类型enum用法_Java枚举类型——Enum的简单用法
枚举类型是Java1.5的新特性,是指由一组固定的常量组成合法的类型.Java中由关键字enum来定义一个枚举类型.我们可以使用枚举来取代用public final static修饰的一批相关数据.如 ...
- js html保存json,如何在json文件中存储jQuery或javascript变量?
我可以知道有没有机会将jquery变量保存在json文件中?提前致谢.如何在json文件中存储jQuery或javascript变量? 我: var image='/test/test.png'; 我 ...
- 枚举类型enum用法_Java枚举深度解读,看这篇就够了
作者 | 涛GuoGuo的跟屁虫丶博Ke 来源 | urlify.cn/aaamQf 66套java从入门到精通实战课程分享 Java枚举 1.枚举类概念的理解与定义 一个类的对象是有限个,确定的,我 ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- Java分享笔记:自定义枚举类 使用enum关键字定义枚举类
在JDK1.5之前没有enum关键字,如果想使用枚举类,程序员需要根据Java语言的规则自行设计.从JDK1.5开始,Java语言添加了enum关键字,可以通过该关键字方便地定义枚举类.这种枚举类有自 ...
- 在html中不显示内容是,网页中显示的内容在源文件中找不到是什么原因_html/css_WEB-ITnose...
源文件中只显示主页相关的源码,单词的解释都不显示 回复讨论(解决方案) 因为是ajax获取的 javascript运算的结果在html中当然没有. 可以在dom结构中查看. 因为是ajax获取的 aj ...
- linux 省内存的桌面,Linux_在Linux中可视化显示内存占用情况的方法,物理内存不足对Linux桌面系统 - phpStudy...
在Linux中可视化显示内存占用情况的方法 物理内存不足对Linux桌面系统和服务器系统的性能影响都很大.当你的计算机变慢时,要做的第一件事就是释放内存.尤其是在多用户环境以及执行关键任务的服务器环境 ...
- html中输出 u263c,《 JavaScript程序设计》—— 第三章 数据
3.1 数据类型 JavaScript实际上有6种数据类型: 布尔值,只有true和false两个值 数值,比如 81 和 4.21 文本,JavaScript里称之为字符串 特殊值undefined ...
- VB.NET 打开Excel文件,读取Excel内容,添加到DataGridView中并显示
'Excel添加:工程->参照追加→COM→Microsoft Excel *.* ObjectLibrary 'DataGridView 列枚举型定义 Private Enum ...
最新文章
- python一行代码的威力
- java POI Excel 单元格样式
- onnxruntime安装
- nginx重定向到其他url方法_高级开发必须掌握Nginx之四,if、set、return
- Enterprise Library 2.0 -- Caching Application Block
- 神经网络的物理学解释(一)---权重与概率幅
- POI异步导入Excel兼容xsl和xlsx
- afe模拟前端的重要性_UCD3138模拟前端(AFE)模块:模拟前端模块(AFE)简介
- java json特殊字符处理_java json字符串传递给 js 时 特殊字符转义错误 研究
- 一份深度学习相关的面试题
- Vue.js之初印象
- java常规普氏分析法_人脸对齐:Procrustes analysis 普氏分析
- C++新特性探究(八):初始化列表(Initialization List)再探究
- 一篇相当不错的function入门文章
- 对JSP和Servlet的理解
- antd table动态表头_React项目使用ant Table组件动态生成columns
- 从HCNA到HCIE的运营商工程师走过的路,迈过的坎,欢迎参考自身情况
- 【寻址方式】基地址与偏移地址的详细解释
- vbs的msgbox的恶搞文件
- matlab画线段加箭头
热门文章
- 各种学习资源 文档、手册 (Docker 、springboot 、Guava、git、logback 、Linux 、MQ、vue、Axios)
- [Git高级教程(二)] 远程仓库版本回退方法
- BUAA-OO 第二单元作业“电梯调度”总结与思考
- php输出多余的空格或者空行
- css各兼容应该注意的问题
- [hackerrank]Manasa and Stones
- 【一周一算法】算法2:邻居好说话——冒泡排序
- 高并发 高负载 网站系统架构 !深入讨论!【转载】
- 接口,new,匿名内部类
- Redis原理及拓展