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;
  });
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

领先科技2024年3月5-7日第12届国际生物发酵展-宁泰橡塑

参展企业介绍 湖南宁泰橡塑有限公司(简称“宁泰”)位于国家 级湖南省浏阳经济技术开发区,距离省会城市长沙35公里,距离黄花国际机场18公里,交通便利,区位和地缘优势明显。宁泰是一家专业从事卫生级橡塑制品…

通过 Java 中 5 种流行的方法提取电子邮件

在开发电子邮件处理应用程序时,建立一种从收件箱中提取消息的有效机制对于可靠、及时的传递和可访问性至关重要。处理不断增长的传入消息的组织和企业尤其赞赏它。在本文中,我们将探讨如何利用 Java 库的强大功能,通过 POP3、IMAP、EWS、Grap…

Linux系统部署前后端分离项目

一、Nginx简介 1.1 什么是nginx? Nginx(发音同"engine x")是一个高性能的反向代理和 Web 服务器软件,最初是由俄罗斯人 Igor Sysoev 开发的。Nginx 的第一个版本发布于 2004 年,其源代码基于双条款 BSD 许可证发布&am…

Mysql常见函数和用法(重点)

目录 where子句中经常使用的运算符 order by 子句排序查询结果 合计 (count) 统计函数(sum) 求平均值函数(avg) 最大值(max)和最小值(min) groupby子句对列进行分组 字符串相关函数​编辑 数学相关…

华为ipv6 over ipv4 GRE隧道配置

思路: PC1访问PC2时,会先构造源ipv6为2001:1::2,目的IPV6为2001:2::2的ipv6报文,然后查看PC1的路由表,发送到R1,r1接收后,以目的IPV6地址2001:2::2查询IPV6路由表,出接口为tun0/0/0…

jQuery引入及下载方法

jQuery引入及下载方法 目录 jQuery引入及下载方法【方法1】cdn引入【方法2】下载本地文件 【方法1】cdn引入 直接在head引入jq <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title>&…

面试redis篇-13Redis为什么那么快

Redis是纯内存操作,执行速度非常快采用单线程,避免不必要的上下文切换可竞争条件,多线程还要考虑线程安全问题使用I/O多路复用模型,非阻塞IOI/O多路复用模型 Redis是纯内存操作,执行速度非常快,它的性能瓶颈是网络延迟而不是执行速度, I/O多路复用模型主要就是实现了高效…

消息中间件篇之Kafka-消息不丢失

一、 正常工作流程 生产者发送消息到kafka集群&#xff0c;然后由集群发送到消费者。 但是可能中途会出现消息的丢失。下面是解决方案。 二、 生产者发送消息到Brocker丢失 1. 设置异步发送 //同步发送RecordMetadata recordMetadata kafkaProducer.send(record).get();//异…

python Matplotlib Tkinter-->tab切换1

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.messagebox as messagebox import …

Unity发布webgl获取浏览器的URL

Unity发布webgl获取浏览器的URL Unity发布webgl之后获取浏览器的url 在unity中创建文件夹Plugins&#xff0c;然后添加添加文件UnityGetBrowserURL.jslib var GetUrlFunc {//获取地址栏的URLStringReturnValueFunction: function () {var returnStr window.top.location.hre…

软件无线电SDR加人工智能算法实现无人机频谱探测

通用软件无线电接收机作为传感器实时接收探测无线电信号&#xff0c;加上深度学习算法实现频谱识别&#xff0c;(https://img-blog.csdnimg.cn/5a6c4d89a047453a94f763f4e67aeb17.png)

折腾Chrome插件,让内容脚本与文本交互~

我们要用内容脚本&#xff08;content scripts&#xff09;来给插件装上一双慧眼&#xff0c;让它能在你浏览的页面上跳来跳去&#xff0c;和文字做游戏。这就像给插件喂了一颗智慧豆&#xff0c;让它变得聪明起来&#xff0c;能够直接和网页内容打招呼啦&#xff01; 在本章&…

学成在线_nacos配置_无法连接到nacos上的配置文件

问题 nacos配置完成后启动程序控制台提示无法连接到数据库 问题原因 无法连接到数据库实际上是没能成功找到nacos上的配置。因为自己的bootstrap文件的拓展名为.yml而不是.yaml。 解决方案 确保nacos上、配置文件中以及配置文件本身的拓展名都是yaml nacos, 如果不是重新创…

2024程序员容器化上云之旅-第2集-Ubuntu-WSL2-Windows11版:接近深洞

故事梗概 Java程序员马意浓在互联网公司维护老旧电商后台系统。 渴望学习新技术的他在工作中无缘Docker。 他开始自学Vue3并使用SpringBoot3完成了一个前后端分离的Web应用系统&#xff0c;并打算将其用Docker容器化后用K8s上云。 3 挑选工具 马意浓画好架构图后&#xff…

动态规划-最长公共子串(c)

动态规划 动态规划&#xff08;dynamic programming&#xff09;是一种算法设计方法。基本思想是在对一个问题的多阶段决策中&#xff0c;按照某一顺序&#xff0c;根据每一步所选决策的不同&#xff0c;会引起状态的转移&#xff0c;最后会在变化的状态中获取到一个决策序列。…

JAVA学习笔记11

1.标识符 1.1 标识符的命名规则和规范 1.1.1 标识符概念 ​ 1.Java对各种变量、方法和类等命名时使用的字符序列称为标识符 ​ 2.凡是自己可以起名字的地方都叫标识符 int num1 90。 1.1.2 标识符的命名规则&#xff08;必须遵守&#xff09; ​ 1.由26个英文字母、数字…

golang学习6,glang的web的restful接口传参

1.get传参 //get请求 返回json 接口传参r.GET("/getJson/:id", controller.GetUserInfo) 1.2.接收处理 package controllerimport "github.com/gin-gonic/gin"func GetUserInfo(c *gin.Context) {_ c.Param("id")ReturnSucess(c, 200, &quo…

redis八股

文章目录 数据类型字符串实现使用场景 List 列表实现使用场景 Hash 哈希实现使用场景 Set 集合实现使用场景 ZSet 有序集合实现使用场景 BitMap实现使用场景 Stream使用场景pubsub为什么不能作为消息队列 数据结构机制SDS 简单动态字符串压缩列表哈希表整数集合跳表quicklistli…

Vue3的8大生命周期

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

主从复制实现Redis集群

主从复制实现Redis集群实验 (一主二从): 实验环境: 使用Docker 搭建 Redis 版本 5.0.5 打开一个终端窗口&#xff0c;在其中运行如下命令创建一个名为redis-master的Redis容器。注意&#xff0c;它的端口是6379 (本地的端口:映射到容器的端口) docker run -itd--name redis-m…