在 JavaScript 中枚举对象属性

最新推荐文章于 2023-05-15 17:31:36 发布
最新推荐文章于 2023-05-15 17:31:36 发布
阅读量1k 收藏
点赞数 1
分类专栏： 对象方法 文章标签： javascript 前端 开发语言
原文链接：https://www.delftstack.com/howto/javascript/javascript-enumerate-object/
版权

本教程将教您使用不同的方法来枚举 JavaScript 对象的属性。这些方法将使用内置的 JavaScript 功能，如for...in、object keys和 object.entries

目录

1.用于for. ..in枚举JavaScript 中的对象属性

2.用于object.keys枚举JavaScript 中的对象属性

3.用于object.entries()枚举JavaScript中的对象属性

4.用于underscore.js枚举JavaScript 中的对象属性

1.用于for. ..in枚举JavaScript 中的对象属性

您可以使用 枚举 JavaScript 对象属性for...in。但是，如果 JavaScript 符号是属性名称，它们将被忽略。

此外，for...in返回继承的可枚举属性；hasOwnProperty()您可以使用该方法避免这种情况。这些hasOwnProperty()方法确保返回的属性属于当前对象。

在下面的示例代码中，我们有一个具有一些属性和值的对象。此外，属性名称之一是 JavaScript 符号。

当您使用 枚举对象时，结果将不包括 JavaScript 符号for...in。

let Java = Symbol("Java");

let inventors = {
  "HTML": 			"Sir Tim Berners-Lee",
  "JavaScript": 	"Brendan Eich",
  [Java]: 			"James Gosling",
  "PHP": 			"Rasmus Lerdorf",
  "Ruby on Rails": 	"DHH",
  "Python": 		"Guido van Rossum"
}

for (let propName in inventors) {
  if (inventors.hasOwnProperty(propName)) {
    console.log(propName);
  }
}

输出： 

HTML
JavaScript
PHP
Ruby on Rails
Python

2.用于object.keys枚举JavaScript 中的对象属性

您可以通过将对象作为参数传递给object.keys(). 结果是可枚举属性名称的数组，按对象中出现的顺序排列。

以下代码有一个包含星期几及其数值的对象。我们只想获取星期几，所以我们object.keys()在对象上使用。

 

let daysOfTheWeek = {
  "Sunday": 		1,
  "Monday": 		2,
  "Tuesday": 		3,
  "Wednesday": 		4,
  "Thursday": 		5,
  "Friday": 		6,
  "Saturday":		7
}

let daysArray = Object.keys(daysOfTheWeek);

for (let i = 0; i < daysArray.length; i++) {
  console.log(daysArray[i]);
}

输出： 

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

3.用于object.entries()枚举JavaScript中的对象属性

Object.entries()返回一个数组。该数组的每个元素都是一个由对象属性名称和值组成的数组。 

但是，我们需要属性名称。因此，我们将遍历结果数组以获取属性名称。

我们Object.keys()在下面的代码中使用数组。之后，我们使用for...of循环来提取属性名称。

请注意，我们使用的是与上一节相同的数组

let daysOfTheWeek = {
  "Sunday": 		1,
  "Monday": 		2,
  "Tuesday": 		3,
  "Wednesday": 		4,
  "Thursday": 		5,
  "Friday": 		6,
  "Saturday":		7
}

let daysArray = Object.entries(daysOfTheWeek);

for (const [propName, propValue] of daysArray) {
  console.log(`${propName}`);
}

输出： 

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

4.用于underscore.js枚举JavaScript 中的对象属性

Underscore.js具有.keys()将对象属性作为数组返回的方法。但是，由于要枚举属性，因此需要遍历数组。

您可以在循环期间一个接一个地列出属性名称。

在以下代码中，我们Underscore.js通过 CDN 使用。当Underscore.js我们的脚本下载并可用时，我们使用它的.keys()方法。

 

<body>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"
	integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous"
	referrerpolicy="no-referrer"
	>
	</script>
	<script>
		let daysOfTheWeek = {
  			"Sunday": 			1,
  			"Monday": 			2,
  			"Tuesday": 			3,
  			"Wednesday": 		4,
  			"Thursday": 		5,
  			"Friday": 			6,
  			"Saturday":		7
  		}

  		let underscore = _;
  		let days = _.keys(daysOfTheWeek);

  		days.forEach((propKey, propValue) => {
  			console.log(propKey);
  		});
	</script>
</body>

输出： 

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
码农六六
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JavaScript中的属性:如何遍历属性
12-01
在JavaScript中，遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单。这主要有两个方面的原因：一个是,JavaScript中的对象通常都处在某个原型链中，它会从一个或多个的上层原型上继承一些属性.第二个原因是，JavaScript中的属性不光有值，它还有一些除了值以外的其他特性，其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true，则称这个属性是可枚举的，否则反之。 知道了这些,我们就可以把属性的遍历分为四种情况. 注：示例代码中，我们要遍历的对象是浏览器中的window，环境为Firefox 19，代码运行在空白页面中的scr
重学JS（一）：什么是枚举？
weixin_41082623的博客
06-26 8406
一、枚举是什么？ 枚举是指对象中的属性是否可以被遍历。 二、可枚举与不可枚举 JavaScript对象的属性可分为可枚举和不可枚举，它是由属性的enumeration值决定的，true为可枚举，false为不可枚举 问题1：如何设置可枚举性与不可枚举型？ Object.defineProperty()是干什么的？ 给对象添加属性(指定描述符) O...
JavaScript对象属性操作实例解析
11-21
这篇文章主要介绍了JavaScript对象属性操作实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js对象中，我们可以对对象属性进行操作。 上图的要点为：for-in会把原型链上的可枚举属性也列出来。 上图的要点为：可以使用逻辑运算符&&进行层层查找对象是否为undefined，从而在赋值过程中不报错。 上图的要点为： 1.delete不存在的属性，依旧返回true。 2.Object.getOwnPropertyDescriptor()是返回某个对象的描述对象，这有点像Java的反射类。 3.Object.prototype
通过实例解析js可枚举属性与不可枚举属性
01-21
在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。 一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的代码遍历其中的属性： var num = new Number(); for(var pro in num) { console.log(num. + pro + = + num[pro]); } 它的输出结果会是空。这是因为Number中内置的属性是不可枚举的，所以不能被for…in访
JavaScript对象的property属性详解
12-10
JavaScript中对象的property有三个属性：1.writable。该property是否可写。2.enumerable。当使用for/in语句时，该property是否会被枚举。3.configurable。该property的属性是否可以修改，property是否可以删除。 在ECMAScript 3标准中，上面三个属性的值均为true且不可改：新建对象的property是可写的、可被枚举的、可删除的；而在ECMAScript 5标准中，可通过property的描述对象(property descriptor)来对这些属性进行配置和修改。 如果将property的值信息也作为pr
使用JS枚举简化if else
08-05
NULL 博文链接：https://weijs.iteye.com/blog/2064336
JavaScript中的枚举
weixin_34336292的博客
07-24 86
在JavaScript目前的版本中，没有枚举这个概念（当然，ECMA-262第三版中已经将enum作为关键字保留）。然而，如同JavaScript中没有class一样，但我们仍然可以通过间接的方式——JSON来实现它。 　　如下，我们来定义Week的枚举： 　　　　　　　 if(typeof WeekDay == "undefined"){ 　　　　　　　　　　　 var WeekDay...
JavaScript——对象的枚举
coising的博客
02-12 411
for in var obj = { name : 'asd', sex : 'male', height : 180, weight : 75 } for(var prop in obj) { // console.log(obj.prop); // 枚举里面必须只能写[] con
JS中的对象枚举
m0_47071530的博客
04-20 360
for in 循环 遍历对象属性的循环。通过对象属性的个数来控制循环圈数，每一圈将对象的属性名赋值给变量prop ( String类型 )。prop–property 格式：for( xx in obj) { } var obj = { a : 1, b : 2, c : 3 } for(var prop in obj)...
js枚举对象中的属性
码码猿
03-09 329
JS枚举对象中的属性 通过使用for…in 语句,可以获取对象中的所有属性,再通过 "对象[]"可获取属性对应的属性值 var obj = { name:"孙悟空", age:28, gender:"男", address:"花果山" } for(o in obj){ console.log("属性:"+o,"属性值:"+obj[o]); } //属性:name 属性值:孙悟空 //属性:age 属性值:28 //属性:gender 属性值:男 //属性:address 属性值:花果山
JavaScript中的Proxy对象
01-21
Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为，例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler); target: 要使用Proxy包装的目标对象，可以是任何类型的对象，包括原生数组，函数，甚至另一个代理。 handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理proxy的行为。 描述 Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这
html 中怎样显示enum,JavaScript如何枚举？
weixin_39771987的博客
06-15 453
JavaScript中对象的属性分为两种：数据属性和访问器属性。然后根据具体的上下文环境的不同，又可以将属性分为：原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性，而实例属性一方面来自构造的函数中，然后就是构造函数实例化后添加的新属性。在JavaScript中除了检测对象的属性是否存在，还会经常对对象的属性进行遍历(枚举)。而在JavaScript中遍历一个对象的属性并...
在JavaScript中4种创建枚举方式
奇舞周刊
05-15 2632
本文译者为 360 奇舞团前端开发工程师原文标题：4 Ways to Create an Enum in JavaScript原文作者：Dmitri Pavlutin原文地址：https://dmitripavlutin.com/javascript-enum/使用枚举（enum）可以方便地表示一个变量，从一个有限的预定义常量集合中获取值，枚举可以避免使用魔法数字和字符串（这被认为是一种反模式）。...
在JavaScript中写枚举
热门推荐
JiaWei
09-26 2万+
在接触JavaScript一周之后果断的想要做一个JavaScript版的贪吃蛇，使用面向对象的编程思想进行属性的封装，但在蛇的方向上当初想要用基本数据类型表示四个方向，也就是上、下、左、右。因为之前学习javaEE的时候是有枚举类型的，感觉到了特大的好处，想着JavaScript里面是不是也枚举类型的呢？因此，就有了以下的博客内容了。希望对自己、对其他人有所帮助！ 下文转载于简书原链接 ...
JavaScript —— Symbol数据类型的延伸之（enum枚举）
LizequaNNN的博客
04-07 2022
Symbol数据类型的延伸之（enum枚举） 导语：Symbol是一种基本数据类型，每个从Symbol()返回的值都是唯一的。一个Symbol的值能作为对象属性的标识符，这是该数据类型仅有的目的。 ---- 《摘自MDN》 敲黑板：唯一的、标识符 上一回我们说了const常量，这回我们来说说同样值得我们讨论的，具有相对唯一性的，enum枚举类型。 一、Enum枚举的数字和字符串枚举 enum枚举类型： 我们知道，JavaScript是没有枚举类型的，只有TypeScript有枚举类型。 使用枚举，我们可以
JavaScript之对象枚举
c__dreamer的博客
02-11 3044
对象的访问有两种方法，第一种是对象名.属性名（obj.name）、第二种是对象名['属性名']（obj['name']）。其实第一种是在内部变成第二种的形式，然后再执行。var obj = { name : "wang"; age : 20; sex : "male"; } console.log(obj['name']);这种也是有好处，看下面例子。var obj = { color1 : {...
JavaScript对象的枚举
vfjcgg的博客
03-08 138
对象的枚举： for in 栗子： 1. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 遍历 枚举 enumeration for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } ...
JS枚举对象中的属性
weixin_40929263的博客
08-15 209
<script> //枚举对象中的属性 //使用for ... in for ... in 语句 /* * 语法： * for （ var 变量 in 对象）{ * } * * for ... in 中对象有几个循环体，循环就执行几次 * *每次执行时 ，会将对象中的一个属性名字赋值给变量 */ var obj = { name: "Tom", age: 18, gender: "男", address: "shanghai" };
JavaScript 枚举
沐唐风宋雨
12-21 299
enum Color { RED,GREEN,BLUE } var Color; (function (Color) { Color[Color["RED"] = 0] = "RED"; Color[Color["GREEN"] = 1] = "GREEN"; Color[Color["BLUE"] = 2] = "BLUE"; })(Color || (Color...
javascript 枚举
最新发布
10-22
在JavaScript中，虽然没有真正的枚举类型，但是我们可以通过模拟枚举来实现类似的功能。一种常见的实现方式是使用对象字面量来定义一个枚举对象，其中每个属性都代表一个枚举成员，属性值可以是任意类型的值。例如： ``` const Direction = { UP: 'UP', DOWN: 'DOWN', LEFT: 'LEFT', RIGHT: 'RIGHT' }; ``` 这里定义了一个名为Direction的枚举对象，其中包含四个枚举成员：UP、DOWN、LEFT和RIGHT。这些成员的值都是字符串类型的，但也可以是数字、布尔值等其他类型的值。使用枚举成员时，可以通过对象属性访问它们的值，例如： ``` let snakeDirection = Direction.UP; ``` 这里将snakeDirection变量的值设置为Direction枚举对象的UP成员。这样做的好处是可以避免使用魔法数值，使代码更加可读和可维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值