【JS】for in可能遇到的问题

问题一:for in 打印属性顺序与定义顺序不一致

先来做一道题,请说出打印结果

const obj = {a2: 'aaa',2: 'aaa',1: 'aaaa',a1: 'aaa',
}for(let key in obj){console.log(key)
}

结果: 1 2 a2 a1

属性的书写顺序不一定就是对象遍历时的顺序。这涉及到了浏览器对于内存的管理。
因为JS会对对象的属性进行处理,会把所有Number类型的属性提前,然后将Number类型的属性按照升序排序。

为什么这么做?
浏览器为了提高运行的效率,因为Number类型的属性便于运算,方便定位内存地址,但String类型的属性无序,查找速度不如Number。

问题二:prototype属性的遍历

在Object原型上添加了静态属性c,可以发现for in遍历时可以访问到c属性。

let obj = { a: 1, b: 2 }
Object.prototype.c = function () { console.log('c') }
for (let key in obj) { console.log(key, obj[key]) }

在这里插入图片描述

打印Object.prototype可以发现,不止刚刚定义的c,还有很多其他静态方法,为什么没被打印呢

在这里插入图片描述

因为任何一个对象的属性都会对应一个 「属性描述符」,这里使用Object.getOwnPropertyDescriptor方法查看对象某个属性的属性描述符。

语法:Object.getOwnPropertyDescriptor(obj,key) 「obj:对象,key:obj上的某个属性名 」

返回值:对象上一个自有属性对应的属性描述符。

  • configurable (可配置性): 表示属性是否可以被删除或者修改属性描述符,默认为 false。如果属性是从原型链上继承来的,那么该属性值为 false。
  • enumerable (可枚举性): 表示属性是否可以通过 for…in 循环或者 Object.keys() 方法遍历到,默认为 false。如果属性是从原型链上继承来的,那么该属性值为 false。
  • value (属性值): 表示属性的值。对于数据属性来说,这个值是属性的值。对于存取器属性来说,这个值是 undefined。
  • writable (可写性): 表示属性是否可以被赋值运算符修改,默认为 false。如果属性是从原型链上继承来的,那么该属性值为 false。
const desc = Object.getOwnPropertyDescriptor(Object.prototype,'c') 
console.log(desc)

打印结果为:

在这里插入图片描述
可以看到,刚刚添加的属性c的enumerable为true,即可以遍历,所以for in才能正确拿到c属性。

打印静态方法toString,可以发现enumerable为false,即不可遍历。

const desc = Object.getOwnPropertyDescriptor(Object.prototype,'toString') 
console.log(desc)

在这里插入图片描述

可以使用 Object.defineProperty 修改属性描述符,这里继续操作c,将其变为不可枚举,即enumerable:false。

Object.defineProperty(Object.prototype, 'c', {value: () => { console.log('c') },writable: true,enumerable: false,configurable: true
})

再次for in遍历属性发现:c也不再被打印。

for (let key in obj) { console.log(key, obj[key]) }

在这里插入图片描述

更多Object静态方法可以查看另一篇文章:Object静态方法

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

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

相关文章

【2】华为交换机如何修改Web登录密码?

0x01 问题描述 如果忘记了Web登录密码或者希望修改Web登录密码&#xff0c;用户可以通过Console口、STelnet或Tenet等方式登录交换机后设置新的Web登录密码。 使用Telnet协议存在安全风险&#xff0c;建议使用Console囗或STelnet V2登录设备 0x02 问题解决 <HUAWEI> s…

前端应用开发实验:条件渲染和循环渲染

目录 实验目的相关知识点实验内容图片的隐藏和显示代码实现效果 电影票房排序代码实现效果 代办事项记录代码实现效果 实验目的 (1)熟练掌握v-on 指令的用法&#xff0c;学会使用v-on 指令监听DOM元素的事件&#xff0c;并通过该事件触发调用事件处理程序。 (2)掌握v-on指令修…

算法---排序

目录 插入排序插入排序的思想代码实现 冒泡排序冒泡排序的思想代码实现 堆排序堆排序的基本思想代码实现 希尔排序希尔排序基本思想代码实现 选择排序选择排序基本思想代码展示 总结 插入排序 插入排序的思想 简单来说&#xff0c;插入排序就时将一个数插入一个数插入一个有序…

使用 ReclaiMe Pro 查找并恢复网络中的 SSH 服务器数据

天津鸿萌科贸发展有限公司是 ReclaiMe Pro 数据恢复软件的授权代理商。ReclaiMe Pro 数据恢复软件专注于恢复几乎所有文件系统及各种类型和复杂程度的 RAID 阵列。 在本文中&#xff0c;我们介绍 ReclaiMe Pro 对于采用 SSH 连接方式的网络服务器中数据的恢复方法。 ReclaiMe…

设计模式及其在项目、框架中的应用

设计模式的作用&#xff1a; 1、类之间关系图&#xff0c;明确的角色及其关系、作用&#xff1b; 2、符合开闭原则&#xff0c;职责明确&#xff0c;并且开放的拓展点可以有效应对后期的变化。 &#xff08;一&#xff09;、责任链模式 适用场景&#xff1a; 在一个流程中&…

HWL-41无辅源静态电流继电器 0.5-9.99A 导轨安装 JOSEF约瑟

HWL-40系列无辅源静态电流继电器 HWL-41HWL-42 HWL-43HWL-61 HWL-62HWL-63 HWL-71HWL-72 HWL-73HWL-81 HWL-82HWL-83 产品概述 1、HWL系列集成电路无辅源电流继电器用于发电机、变压器和输电线的过负荷和短路保护装置中作为启动元件。本继电器为集成电路静态型继电器&a…

Token的详解

Token的详解 文章目录 Token的详解前言:简介:使用token&#xff1a; 前言: 为什么会用到Token&#xff0c;因为cookie和session一些自身的缺点&#xff0c;限制了一些功能的实现&#xff0c;比如&#xff1a; cookie&#xff1a;优点是节省服务器空间&#xff0c;缺点不安全。…

启动Vue-demo时引发的一系列问题—解决办法

目录 1.初始遇到的问题&#xff1a;输入npm run dev 1.治标的解决方法 2.治本的解决方法 第一步&#xff1a;检查是否安装了cnpm 第二步&#xff1a;手动找到cnpm目录 第三步&#xff1a;配置系统环境变量 第四步&#xff1a;查看是否安装成功 1.初始遇到的问题&#xf…

宝塔面板系列——两种方式安装青龙面板

因为最近旧windows服务器到期了&#xff0c;在搬服务器&#xff0c;新服务器尝试用Linux系统。过程中有很多不懂的地方&#xff0c;只能边搬迁边学边弄&#xff0c;顺带记录下来&#xff0c;哪天又要搬迁了&#xff0c;翻翻自己的文章也就一应俱全了。 非科班出身&#xff0c;选…

【计算机网络实践】Cisco Packet Tracer局域网组网(FTP服务器通过交换机连接客户端)

本文为应对计算机网络第一次实验所写的预习报告 一、实验准备 一台装有Cisco Packet Tracer的PC机&#xff0c;一个大学生大脑。 二、了解FTP和Cisco Packet Tracer 具体内容可在百度搜索&#xff0c;在物理机上用FileZilla Server实现ftp可参看我前面的文章。Cisco Packet Tr…

【LabVIEW FPGA入门】FPGA不同传递数据方法比较

数据共享方法的选择应基于应用的需要。根据应用程序的重要特性&#xff0c;所讨论的任何一种方法都可能是合适的。 传输方法FPGA资源损耗&#xff1f;不同时钟源之间传递数据&#xff1f;新数据通知&#xff1f;常见用途变量逻辑片是是否提取最新数据存储器存储器是否否提取最新…

深入理解MySQL中的JOIN算法

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、引言二、嵌套循环连接&#xff08;Nested-Loop Join&#xff09;2.1 工作原理2.2 性能考虑2.3 优化策略 三、块嵌套循环…

Java代码基础算法练习-递归求数-2024.03.22

任务描述&#xff1a; 利用递归函数调用方式&#xff0c;将所输入的5个字符&#xff0c;以相反顺序打印出来。 任务要求&#xff1a; 代码示例&#xff1a; package march0317_0331;import java.util.Scanner;/*** m240322类&#xff0c;提供了一个反转输入字符串前5个字符的…

软考复习笔记day3(计算机体系结构和指令系统基础)(精简版)

计算机体系结构分类 处理机数量分类&#xff1a; 单处理&#xff08;一个处理单元&#xff09;并行处理系统&#xff08;两个以上处理机互联&#xff09;.分布式处理系统 Flynn分类&#xff1a;&#xff08;常考&#xff09; 以指令流和数据流进行区别 指令流由控制部分进…

vue3初步学习

vue3初步学习 vue模版 练习代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>实验4</ti…

计算机二级(python)【二】

真题5 1、考生文件夹下存在一个文件PY101.py&#xff0c;请写代码替换横线&#xff0c;不修改其他代码&#xff0c;实现以下功能&#xff1a; 键盘输入正整数n&#xff0c;按要求把n输出到屏幕&#xff0c;格式要求&#xff1a;宽度为15个字符&#xff0c;数字右边对齐&#…

【小米汽车SU7实测】 小米汽车su7到底行不行?小米新能源轿车体验感怎么样?

小米汽车SU7是小米汽车的首款车型&#xff0c;定位“C级高性能生态科技轿车”&#xff0c;也是小米迈入新能源赛道的首次成果落地。 首先&#xff0c;让我们来谈谈它的性能。试驾过程中&#xff0c;小米SU7展现出了惊人的加速能力&#xff0c;0-100km/h加速仅需2.78秒&#xf…

Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题

1.process.env 是Node.js 中的一个环境 1.打开命令行查看环境: 2.process.env与Vue CLI 项目 Vue Cli 有以下三种运行模式 development 模式用于 vue-cli-service serve test 模式用于 vue-cli-service test:unit production 模式用于 vue-cli-service build 和 vue-cli-se…

【STL学习】(1)string类

前言 本文将详细讲解STL中string类的常用的接口函数。 一、为什么学习string类&#xff1f; 1、字符串类型的重要性 在现实生活中有很多复杂类型是以字符串来表达的&#xff0c;比如我们在搜索引擎输入的“数据”&#xff0c;一个人的姓名、身份证号等等。 所以字符串类型是很…

ETCD跨城容灾与异地多活网络故障的相关表现分析

ETCD跨城容灾与异地多活网络故障的相关表现分析 1. 网络架构2. 单个网络中断-跟leader区中断2.1. 网络中断2.2. 网络恢复 3. 单个网络中断-跟非leader区中断4. 两个网络中断-leader区中断5. 两个网络中断-非leader区中断6. 两个网络中断-非leader区中断7. 总结8. 参考文档 etcd…