html 中怎样显示enum,JavaScript如何枚举?

JavaScript中对象的属性分为两种:数据属性和访问器属性。然后根据具体的上下文环境的不同,又可以将属性分为:原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自构造的函数中,然后就是构造函数实例化后添加的新属性。

5d68c5eea797c663.jpg

在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

}

总结一下

其实这几个方法之间的差异主要在属性是否可可枚举,是来自己原型,还是实例。

1567147450798755.jpg

想要了解更多相关知识,可访问 前端学习网站!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454496.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iperf测试网卡性能

Iperf是一个网络性能测试工具。可以测试TCP和UDP带宽质量,可以测量最大TCP带宽,具有多种参数和UDP特性,可以报告带宽,延迟抖动和数据包丢失 因为产品上确定要要用的PHY是千M的&a…

acrobat 控件可以发布吗_短视频可以同时在多个平台发布吗?

我们在做自媒体内容创业中,很多人都在做视频版块,那么一个短视频到底能不能多平台同时发布呢?那么今天,我来分享给大家,希望能够帮到你解决困惑。1.作品可以多平台分发:大家不确定是否能多平台分发&#xf…

CentOS四种方法自建yum仓库

将ISO光盘镜像作为yum本地仓库(适用于不能联外网的环境): 1、 禁用所有可用的yum仓库,为方便演示,直接全部删除: # cd /etc/yum.repos.d # ls # rm -rf * 2、 创建光盘挂载点,挂载光盘&#x…

python substr_python数据分析-数据对象(一)

Python基本数据类型一般分为:数字、字符串、列表、元组、字典、集合这六种基本数据类型。不可变(3 个):Number(数字)、String(字符串)、Tuple(元组)&#xff…

html表格里的超链接点不了,Excel如何添加和取消超链接 Excel超链接打不开是怎么回事...

很多用户在制作excel表格的时候都会添加一些超链接,在制作完成后发布到网页,阅读者可以通过超链接打开指引的网页或者文件,超链接对制作excel表格的用户有非常大的帮助,虽然添加超链接的步骤非常简单,不过还是有些exce…

yum 安装apache php mysql

安装: yum install -y httpd php 查看版本:、 rpm -qa httpd php httpd-2.2.15-54.el6.centos.x86_64 php-5.3.3-48.el6_8.x86_64 修改apache配置文件: vim /etc/httpd/conf/httpd.conf 在#ServerName www.example.com:80行下添加一行 Server…

Python 散点图线性拟合_机器学习之利用Python进行简单线性回归分析

前言:在利用机器学习方法进行数据分析时经常要了解变量的相关性,有时还需要对变量进行回归分析。本文首先对人工智能/机器学习/深度学习、相关分析/因果分析/回归分析等易混淆的概念进行区分,最后结合案例介绍如何利用Python进行简单线性回归…

Flask 第三方组件之 Migrate

flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的.类似于Django的python manage.py migrate 官方文档: http://flask-migrate.readthedocs.io/en/latest/ 安装 pip install flask-migrate 使用举例 from flask import Flask from flask_sqlalchemy import SQLA…

html section 布局,section标签的用法

标签的用法由于昨晚发了一篇文章http://www.zcool.com.cn/article/ZMzA3MzI.html,有一个网友评论问 的用法。所以现在举例来说明一下:html5引入了标签,用于描述文档的结构,它同标签的意思一样。但是在特定环境中,两者又…

清北学堂Day4

(1)第一题 财富(treasure) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有n个小伙伴。每个小伙伴有一个身高hi。 这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在这里的每个人都羡慕比自己身高高的人&#xff…

visio中公式太小_visio绘图中的数据计算

在绘流程图时,我们有时候会想直接在流程图上做计算,比如化工设计时精馏塔计算理论塔板数。在VISIO中,实现这个功能还是比较容易,举一个最简单的例子。如下图所示,等号后面的数字可以根据前面的数字变化。实现过程如下&…

ltsc系统激活_WIN10_X64企业版LTSC 电脑公司装机版 202008

文件: WIN10_X64_LTSC_ZJ202008.esd大小: 7431429353 字节(6.92G)MD5: A3A3B15ED47216E177C924D2E07E0799SHA1: 3A647265E0C8234225C633407093BAA07253FB34CRC32: 32E791E9(注意,下载文件有一定几率损坏,如文件值不对请重新下载!)360安全云盘…

zabbix 安装_安装zabbix

准备一个纯净环境10.0.0.99首先修改yum源,修改为zabbix清华源,清华源玉zabbix官方源都是同步的,下载速度更快!zabbix官方Download Zabbix​www.zabbix.com点击下载,下面有zabbix的历史版本以及官方安装文档可以查看到不…

拓展欧几里得 [Noi2002]Savage

对于一个野人,他(她?)所在的位置,(C[i]x*p[i])%ans,是的,暴力枚举每一个ans,用拓展欧几里得求出每两个wildpeople(wildrage?)相遇的年份,如果小于最小的寿限…

CCNP-19 IS-IS试验2(BSCI)

CCNP-19 IS-IS试验2 实验拓扑:试验要求:R1 R2 R3全部采用集成的ISIS路由协议,R1 R2在区域49.0001内,R3在区域49.0002内,R1与R2之间的链路类型为L1,R2与R3之间的链路类型为L2。 试验目的:掌握基…

dijkstra算法代码_数据科学家需要知道的5种图算法(附代码)

在本文中,我将讨论一些你应该知道的最重要的图算法,以及如何使用Python实现它们。作者:AI公园导读因为图分析是数据科学家的未来。作为数据科学家,我们对pandas、SQL或任何其他关系数据库非常熟悉。我们习惯于将用户的属性以列的形…

大暴搜 chess

仔细读题,会发现吃掉敌人点对方案数的贡献很神奇。如果走的空格相同,而走的敌人点不同,对答案无贡献,而对于走的空格相同,但一种走了敌人点,另一种没走,算两个方案。。。。sb出题人语文简直是和…

html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表

点击图片,实现预览图片功能,并且可循环预览图片列表!image.png一、多张图片预览html代码js代码data(){return {photos:[{ src: 图片路径1},{ src: 图片路径2},{ src: 图片路径3},……]}},methods: {// 预览图片previewImage(index) {let phot…

git ssh拉取代码_阿里云搭建git服务器

一.搭建步骤,分为两步搭建中心仓库自动同步代码到站点目录二.详细步骤如下1.先检查一下服务器上有没有安装gitgit --version如果出现版本号,说明服务器已经安装git,如图所示:2.如果没有版本信息,则先安装git&#xff1…

Word -- 列表重新编号

Word -- 列表重新编号office一言:我小心翼翼地灌溉,一日复一日地期待,那么费力,植成参天的乔木,岂愿见你终有一日从容赴死?问题 word 文档早就想解决的一个问题,这次遇到了就上网找解决掉了&…