JS遍历对象的七种方法

2023-11-10

一、for...in

let obj ={
name:"cheng",
sex:'man'

}
Object.defineProperty(obj,'age',{
    value:"18",
    enumerable:true
})
for(item in obj){
    console.log(item)
}

1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

2.其实for...in的特性会导致一个问题,其继承的属性会被遍历到,所以当我们不想要遍历被继承的属性,那么我们就可以使用Object.keys()

二、Object.keys()

可以遍历到所有对象本身的可枚举属性,但是其返回值为数组

let obj ={
name:"cheng",
sex:'man'

}

Object.keys(obj)//['name','sex']

1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

Object.keys()来代替for...in遍历操作

三、Object.values()

可以遍历到所有对象本身的可枚举属性值,但是其返回值为数组

let obj ={
name:"cheng",
sex:'man'

}

Object.values(obj) // ['cheng', ‘man’]
Object.defineProperty(obj, 'sex', {
  value: "666",
  enumerable: false
});
Object.values(obj) // ['cheng', ‘man’]

1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

四、Object.entries()

返回值为Object.values()与Object.keys()的结合,返回一个二维数组,每个小数组都是[ [属性名,属性值],[属性名,属性值] ]

let obj ={
name:"cheng",
sex:'man'

}

Object.entries(obj) // [['name', ‘cheng’],['sex','man']]

其遍历特性与Object.values()Object.keys()相同

1.Object.defineProperty,使用enumerable:true,才能被枚举,默认enumerable:false不可被枚举

五、Object.getOwnPropertyNames()

其返回结果与Object.keys()对应,但是他得特性与其相反,会返回对象得所有属性,包括了不可枚举属性

var arr = [];
console.log(Object.getOwnPropertyNames(arr)); // ['length']
Object.getOwnPropertyDescriptor(arr,"length").enumerable // false

声明一个空数组,使用Object.getOwnPropertyNames()方法,返回了length,而length属性的enumerablefalse

六、Object.getOwnPropertySymbols()

返回对象内的所有Symbol属性,返回形式依旧是数组,值得注意的是,在对象初始化的时候,内部是不会包含任何Symbol属性

let obj = {
    name:"obj"
}
Object.getOwnPropertySymbols(obj) // []

初始化一个对象,通过这个方法返回的是一个空数组

let sym = Symbol()
console.log(sym)
obj[sym] = "cheng" 
Object.getOwnPropertySymbols(obj) // Symbol()

 新建symbol,再为声明好的对象添加进去,通过遍历得到Symbol()

var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

var objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols) // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) // Symbol(a)

可以看出,可以得到对象中,可以获取包含Symol属性的所有的属性值

七、Reflect.ownKeys()

返回的是一个大杂烩数组,即包含了对象的所有属性,无论是否可枚举还是属性是symbol,还是继承,将所有的属性返回

let arr = [0,66,222]
Reflect.ownKeys(arr) // ['0', '1', '2', 'length']

返回的是数组下标和length属性。

根据遍历目标区分

根据返回值区分

根据遍历值区分

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS遍历对象的七种方法 的相关文章

随机推荐

  • Vue 使用 mqttws31.js 实现消息实时推送功能(WebSocket)

    1 在 vue 文件中引入 mqttws31 js 文件 mqttws31 js 文件代码在本页底部 import utils mqttws31 2 在 vue 文件中添加代码 export default data return clie
  • MapReduce官方案例wordcount

    wordcountReduce java package MaperReduce import java io IOException import org apache hadoop io LongWritable import org
  • Python后端Flask学习项目实践---搭建一个问答网站

    1 项目效果展示 这里主要以后端为主 前端的代码不做展示 如果需要代码可以评论或者私信 用户注册 登录相关 用邮箱进行注册 并通过向邮箱发送验证码来进行判断 一个邮箱只能注册一个账号 首页相关 用户登录后可以进行发布问题和回答 同时也提供搜
  • 外罚函数法计算机,罚函数法与障碍函数法

    罚函数法与障碍函数法 罚函数法与障碍函数法是求解约束极小化问题的较好的算法 其基本原理是在原目标函数中加上一个罚 障碍 函数 而得到一个增广目标函数 罚 障碍 函数的功能是对非可行或企图穿越边界而逃离可行域的点赋予一个极大的函数值 可以作一
  • 使用 Date 和 SimpleDateFormat 类表示时间以及Calendar 类的应用

    在程序开发中 经常需要处理日期和时间的相关数据 此时我们可以使用 java util 包中的 Date 类 这个类最主要的作用就是获取当前时间 我们来看下 Date 类的使用 使用 Date 类的默认无参构造方法创建出的对象就代表当前时间
  • sql:SQL优化知识点记录(七)

    1 索引优化5 2 索引优化6 3 索引优化7 查询 百分号加右边 否则索引会失效 没建立索引之前都是全表扫描 没建立索引 建立索引 建立索引 id是主键 他也可以从主键上取 覆盖索引要到了name 索引没有失效 覆盖索引要到了age 索引
  • 使用OpenCV,Python和dlib进行眨眼检测及计数

    前三篇博客学习了 windows10 Python3 7安装dlib库进行面部标志识别 python dlib实现面部标志识别 使用python dlib OpenCV提取眼睛 鼻子 嘴唇及下颌 这篇博客将进行进阶版的学习 眨眼检测 眨眼检
  • 如何利用codesense的GJB8114模板对c++源码进行进行规则检测

    2013年7 10 中国 民解放军总装备部发布了中华 民共和国国家军 标准GJB 8114 全称为 8114 2013 C C 语 编程安全 集 提出软件编程标准 以提 国家军 软件的安全性 并作为静态规则检查的依据 量数据表明 软件存在的
  • Python可视化图系列(1)-----jupyter notebook

    Python可视化 复杂的散点图 文章目录 Python可视化 复杂的散点图 前言 一 我们的目标是什么 二 实现目标的知识准备 1 引入库 2 导入数据 3 准备标签的列表和颜色 三 画目标图片 复杂的散点图 四 解读图像 总结 前言 提
  • 五大常用算法之四:分治法

    分治法和动态规划有点像 都是分解成子问题 中科大的张署老师课件很清楚 摘录如下 1 什么是分治法 当求解的问题较复杂或规模较大时 不能立刻得到原问题的解 但这些问题本身具有这样的特点 它可以分解为若干个与原问题性质相类似的子问题 而这些子问
  • 加载超炫动画

    1 MainActivity 1 package com zyhui zyh splash 2 3 import android os Bundle 4 import android os Handler 5 import android
  • 谈谈中间件开发,给想从事中间件开发的同学

    前言 本文主要是写给那些想从事中间件开发的同学看的 如果你没有这个打算 那么本文的学习路线非但不实用 还可能会影响你正常的工作 什么是中间件开发 随着国内软件行业的发展 国内互联网公司规模越来越大 业务越来越复杂 随之使用大量的中间件来提高
  • 【unity3d之UI界面学习】NGUI插件的导入步骤

    首先将下载好的NGUI资源包 我下载的是3 11 4版本 导入到引擎中进行使用 在unity3d界面点击鼠标右键 弹出的菜单送选中import package 然后选择custom package 自定义资源包 弹出资源路径窗口 找到NGU
  • 得物H5页面url中sign逆向分析

    一 抓包分析 https app dewu com api v1 h5 activity fire activity platform product feeds recommend detail sign b3e37ea512b177be
  • Java 字符流和字符缓冲流

    文章目录 1 字符的编码解码 2 字符流 2 1 字符输出流 写数据 2 2 字符输入流 读数据 2 3 案例 3 字符缓冲流 3 1 字符缓冲输入流 读数据 3 2 字符缓冲输出流 写数据 3 3 案例 4 小结 1 字符的编码解码 wi
  • emWin - BMP图片显示

    BmpCvt exe 用途 利用BMP图片 进行GUI显示 ICON等图标都是小BMP图片 核心是将BMP图片 转成emWin支持的方式 最终显示到TFT屏上 使用BmpCvt exe工具 将各个图片转成相应的C文件 emWin有关的工具
  • 微信小程序练手项目(云开发)

    入门回顾 微信开放社区 https developers weixin qq com community develop doc 000c2e7a3d0c501c95b9c3c935640d 1 小程序 注册 使用 配置 2 小程序的逻辑层
  • Unity5.3资源热更新

    转载自 http blog csdn net l jinxiong article details 50877926 Unity5以下的版本 要导出AssetBundle需要自己写一大坨导出的代码 BuildPipeline 想正确处理好资
  • 教妹学Java(十七):do-while 循环

    大家好 我是沉默王二 一个和黄家驹一样身高 和刘德华一样颜值的程序员 本篇文章通过我和三妹对话的形式来谈一谈 do while 循环 教妹学 Java 没见过这么有趣的标题吧 语不惊人死不休 没错 本篇文章的标题就是这么酷炫 接受不了的同学
  • JS遍历对象的七种方法

    一 for in let obj name cheng sex man Object defineProperty obj age value 18 enumerable true for item in obj console log i