js 对象总结

文章目录

  • 1、创建对象的6种方式总结
    • 一、new 操作符 + Object 创建对象
    • 二、字面式创建对象
  • 2、js 如何判断对象是否为空
  • 3、获取对象长度
  • 4、js 遍历对象的 5 种方法
    • 1、for … in
    • 2、Object.keys(obj)
    • 3、Object.values(obj)
    • 4、Object.getOwnPropertyNames(obj)
    • 5、使用Reflect.ownKeys(obj)遍历
    • 其他
  • 5、js 判断对象是否包含某个属性
  • 6、JS 中对象数组按照对象的某个属性进行排序
    • 菜鸟封装

今天菜鸟整理自己的 goole 书签栏,突然发现,看着确实挺有用,通过标题大致就知道是什么内容,大致就知道了什么时候可以帮助菜鸟解决什么问题,没用的或者太简单的就删除了。

但是菜鸟转念一想,发现菜鸟脑子里是一点印象都没有,如果用的时候来找的话,找得到还好,找不到就像考试作弊,明明考试前还看见了,但是一到考试就找不到答案在哪里的感觉,心态直接炸了。

而且感觉一些基础,即使不好记,也真的需要记在脑子里,而不是书签里,所以就把几个菜鸟感觉很重要、很常用的,这里做个总结,俗话说:好记性不如烂笔头,也希望可以帮助读者!

1、创建对象的6种方式总结

这里菜鸟能力有限,就不班门弄斧了,建议看原文:创建对象的6种方式总结,其实不难,最常用的就是菜鸟下面介绍的两种种的第二种,直接用 {} 创建,顶天加一个构造函数类型 或者 混合模式,但是这两种现在一般用 class 代替了!

一、new 操作符 + Object 创建对象

var person = new Object();
person.name = "lisi";
person.age = 21;
person.family = ["lida","lier","wangwu"];
person.say = function(){alert(this.name);
}

二、字面式创建对象

这里就是直接使用 {} 创建对象!

var person = {name: "lisi",age: 21,family: ["lida","lier","wangwu"],say: function(){alert(this.name);}
};

2、js 如何判断对象是否为空

function goodEmptyCheck(value) {return value && Object.keys(value).length === 0 && value.constructor === Object;
}

至于为什么要这样写,建议看原文:JavaScript 中如何判断对象是否为空

菜鸟大致说一下,就是 value 是为了防止 undefined 、null 出现报错,而 Object.keys(value).length ,是很容易就想到的,就是判断对象是否为空的方法之一,Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组(for …, in 则会去原型链上找)。至于 value.constructor 是为了防止 js 内置的 9 个构造函数,创建的值也被搞成了空对象

在这里插入图片描述

3、获取对象长度

上面的判断对象是否为空的里面有提到 Object.keys() 方法,这个方法也是获取对象长度的关键点!

var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'};
var arr = Object.keys(obj);
console.log(arr);  // ['name','sex','age']
console.log(arr.length);  //3

4、js 遍历对象的 5 种方法

1、for … in

循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性【不含Symbol属性】)
在这里插入图片描述

2、Object.keys(obj)

使用 Object.keys() 遍历 (返回一个数组,包括对象自身的【不含继承的】所有可枚举属性【不含Symbol属性】)
在这里插入图片描述

3、Object.values(obj)

该方法会返回一个包含对象自身可枚举属性值的数组,数组的顺序与通过 for…in 循环获取对象属性的顺序一致。需要注意的是,返回的数组中的属性值的顺序并不是严格按照对象中属性的定义顺序,而是根据 JavaScript 引擎的内部实现而定

代码:

const obj = {name: "sdja",age: 23,txt: "fasfas",phone: "12313123",
};
let arr = Object.values(obj);
console.log(arr);

结果:
在这里插入图片描述

4、Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性【不可枚举属性,需要自己定义在这里插入图片描述
】)

const obj = {a: 1,b: 2,[Symbol('c')]: 3
};
const propertyNames = Object.getOwnPropertyNames(obj);
console.log(propertyNames); // 输出: ["a", "b"]

如果想要获取 Symbol 属性,可以使用 Object.getOwnPropertySymbols() 方法。

5、使用Reflect.ownKeys(obj)遍历

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举

在这里插入图片描述

其他

更多遍历就是和遍历数组一样,使用 forEach、for-of

5、js 判断对象是否包含某个属性

可以简单总结一下,如果我们只需判断对象有没有某个属性,使用 in 运算符就好了。而如果我们还要关心这个属性是不是自身属性,那么推荐 hasOwnProperty() 方法。

详见:JS 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性

6、JS 中对象数组按照对象的某个属性进行排序

在 JavaScript 中,可以使用 Array.prototype.sort() 方法对对象数组按照对象的某个属性进行排序。sort() 方法会原地对数组进行排序,并返回排序后的数组。

假设有一个对象数组 arr,每个对象都包含一个属性 property,我们可以通过传入一个比较函数给 sort() 方法来实现按照 property 属性进行排序。

// 假设有一个对象数组
const arr = [{ name: 'John', age: 30 },{ name: 'Alice', age: 25 },{ name: 'Bob', age: 35 }
];// 按照 age 属性进行升序排序
arr.sort((a, b) => a.age - b.age);console.log(arr);
// 输出:
// [
//   { name: 'Alice', age: 25 },
//   { name: 'John', age: 30 },
//   { name: 'Bob', age: 35 }
// ]// 按照 name 属性进行字母顺序排序(不区分大小写)
arr.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));console.log(arr);
// 输出:
// [
//   { name: 'Alice', age: 25 },
//   { name: 'Bob', age: 35 },
//   { name: 'John', age: 30 }
// ]

菜鸟封装

这里是菜鸟做项目的时候封装的一个公共函数,是提供一个排序方式,让数组的某个属性名按照该方式排序的函数

/*** 对象按什么属性名和排序方式排序* @param {Array} arr 对象数组* @param {*} propertyName 属性名* @param {Array} order 排序方式* @returns {Array}**/
export const Objsort = (arr, propertyName, order) => {return arr.sort((a, b) => {const indexA = order.indexOf(a[propertyName]);const indexB = order.indexOf(b[propertyName]);return indexA - indexB;});
};

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

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

相关文章

C# OpenVINO Nail Seg 指甲分割 指甲检测

目录 效果 模型信息 项目 代码 数据集 下载 C# OpenVINO Nail Seg 指甲分割 指甲检测 效果 模型信息 Model Properties ------------------------- date:2024-02-29T16:41:28.273760 author:Ultralytics task:segment version&#…

VirtualBox虚拟机安装 Linux 系统

要想学习各种计算机技术,自然离不开Linux系统。并且目前大多数生产系统都是安装在Linux系统上。常用的Linux系统有 Redhat,Centos,OracleLinux 三种。 三者的区别简单说明如下: Red Hat Enterprise Linux (RHEL): RHEL 是由美国…

InnoDB锁介绍

本文主要介绍MySQL InnoDB引擎中的各种锁策略和锁类别,并针对记录锁做演示以便于理解。 以下内容适用于MySQL 8.0版本。 读写锁 处理并发读/写访问的系统通常实现一个由两种锁类型组成的锁系统。这两种锁通常被称为共享锁(shared lock)和排他锁(exclusive lock)&…

如何在Window系统部署BUG管理软件并结合内网穿透实现远程管理本地BUG

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

【数据分享】2001-2022年我国省市县镇四级的逐日平均降水量数据(免费获取\excel\shp格式)

降水数据是我们在各项研究中最常用的气象指标之一!之前我们给大家分享过来源于国家青藏高原科学数据中心发布的1961—2022年全国范围的逐日降水栅格数据(可查看之前的文章获悉详情)! 本次我们分享的是2001-2002年我国省市县镇四个…

Linux零基础快速入门

Linux的诞生 Linux创始人:林纳斯 托瓦兹 Linux 诞生于1991年,作者上大学期间 因为创始人在上大学期间经常需要浏览新闻和处理邮件,发现现有的操作系统不好用,于是他决心自己写一个保护模式下的操作系统,这就是Linux的原型,当时他…

方格分割644--2017蓝桥杯

1.用dfs解决,首先这题的方格图形就很像一个走迷宫的类型,迷宫想到dfs,最中心点视为起点,起点有两个小人在这个方格里面对称行动,直到走出迷宫(一个人走出来了另一个人就也走出来了,而走过的点会…

【力扣白嫖日记】550.游戏玩法分析IV

前言 练习sql语句,所有题目来自于力扣(https://leetcode.cn/problemset/database/)的免费数据库练习题。 今日题目: 550.游戏玩法分析IV 表:Activity 列名类型player_idintdevice_idintevent_datedategames_played…

Python 从文件中读取JSON 数据并解析转存

文章目录 文章开篇Json简介Json数据类型Json硬性规则Json数据转化网站Json和Dict类型转换json模块的使用Python数据和Json数据的类型映射json.dumps1.字典数据中含有**存在中文**2.json数据通过缩进符**美观输出**3.对Python数据类型中键进行**排序输出**4.json数据**分隔符的控…

Python调用ChatGPT API使用国内中转key 修改接口教程

大家好,我是淘小白~ 有的客户使用4.0的apikey ,直接使用官方直连的apikey消费很高,有一位客户一个月要消费2万,想使用4.0中转的apikey,使用中转的apikey 需要修改官方的openai库,下面具体说下。 1、首先确保安装的op…

代码随想录算法训练营第二十一天|530.二叉搜索树的最小绝对差、 501.二叉搜索树中的众数 、236. 二叉树的最近公共祖先

530.二叉搜索树的最小绝对差 题目链接/文章讲解: 代码随想录 视频讲解:二叉搜索树中,需要掌握如何双指针遍历!| LeetCode:530.二叉搜索树的最小绝对差_哔哩哔哩_bilibili 1.方法1 1.1分析及思路 了解到差值最小的数…

上门服务系统|上门服务小程序|上门服务软件开发

随着移动互联网技术的普及,上门服务小程序系统成为现代企业数字化转型的关键一环。这一系统为消费者提供了更加便捷、高效以及个性化的服务体验,同时也为企业带来了更广阔的商业机会。让我们来看看上门服务小程序系统的优势和功能。 首先,上门…