编程笔记 html5cssjs 073 JavaScrip Object数据类型

2024-02-03 07:04

本文主要是介绍编程笔记 html5cssjs 073 JavaScrip Object数据类型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

编程笔记 html5&css&js 073 JavaScrip Object数据类型

  • 一、创建 Object
  • 二、Object 类型的属性与方法
  • 三、示例
  • 四、参考
  • 小结

JavaScript 中的 Object 数据类型是该语言中最复杂也最灵活的数据类型之一,它是其他所有内置对象和用户自定义对象的基础。在 JavaScript 中,几乎任何东西都可以视为对象,包括函数、数组甚至是基本数据类型(通过包装对象)。

一、创建 Object

  1. 使用构造函数创建

    // 使用 new 关键字调用 Object 构造函数创建一个空对象
    let obj1 = new Object();
    // 或者带初始属性
    let obj2 = new Object({ name: 'Alice', age: 30 });// 等同于
    let obj3 = {};
    // 带初始属性
    let obj4 = { name: 'Bob', age: 35 };
    
  2. 使用对象字面量创建
    这是最常见也是最简洁的创建对象的方式,直接用花括号包裹属性名与对应的值。

    let person = {firstName: 'John',lastName: 'Doe',address: {street: '123 Main St.',city: 'Anytown',country: 'USA'},getFullName: function() {return this.firstName + ' ' + this.lastName;}
    };console.log(person.getFullName()); // 输出 "John Doe"
    

二、Object 类型的属性与方法

  • constructor:每个对象实例都有一个 constructor 属性,它指向用于创建该对象的函数引用。

    console.log(person.constructor); // 输出:ƒ Object() { [native code] }
    
  • hasOwnProperty(propertyName):用于检查对象自身(不包括原型链)是否具有指定名称的属性。

    console.log(person.hasOwnProperty('firstName')); // 输出:true
    
  • isPrototypeOf(object):这个方法不是在对象实例上调用,而是在构造函数或任何父级对象上调用,以检查传入的对象是否是其原型链的一部分。

    function Person(name) {this.name = name;
    }let john = new Person('John');
    console.log(Person.prototype.isPrototypeOf(john)); // 输出:true
    
  • propertyIsEnumerable(propertyName):检查给定的属性是否可枚举。

    console.log(person.propertyIsEnumerable('firstName')); // 输出:true
    
  • toLocaleString():返回对象的字符串表示形式,通常依据本地化环境来格式化。

    let dateObj = new Date();
    console.log(dateObj.toLocaleString()); // 输出当前日期时间的本地化格式
    

此外,Object 类型还提供了诸如 toString()valueOf()getOwnPropertyDescriptor()getPrototypeOf()keys()values()entries() 等方法,以及 ECMAScript 6 引入的 Object.assign()Object.create()Object.defineProperties()Object.defineProperty() 等更高级的方法,用于操作对象属性和原型链。

三、示例

let myObject = {a: 1,b: 'two',c: true,method: function() {console.log('Method called on the object!');}
};// 添加动态属性
myObject.d = [1, 2, 3];// 检查属性存在性
console.log(myObject.hasOwnProperty('a')); // 输出:true
console.log(myObject.propertyIsEnumerable('b')); // 输出:true// 调用对象上的方法
myObject.method(); // 在控制台输出 'Method called on the object!'// 获取对象的所有可枚举属性名
console.log(Object.keys(myObject)); // 输出:[ 'a', 'b', 'c', 'method', 'd' ]

四、参考

JavaScript 中的 Object 类型和 C++ 语言中的 object(或类)在概念和实现上有很大的不同,主要区别如下:

  1. 定义与本质

    • JavaScript:在 JavaScript 中,Object 是所有对象的基础类型。每个非原始值都是一个 Object 或是其原型链上的某个对象的实例。这意味着数组、函数、日期等都继承自 Object 原型。在 JavaScript 中,你创建的任何自定义对象也是基于 Object 构造函数的。
    • C++:C++ 是一种静态类型语言,它有类(class)的概念,类是对一组具有相同特征和行为的对象的抽象描述。当你定义一个类时,可以声明成员变量(属性)和成员函数(方法)。C++ 中没有内置的 object 类,但所有的类实例都可以看作是对象。
  2. 动态性与静态性

    • JavaScript:JavaScript 对象是动态的,可以在运行时添加或删除属性,并且支持原型继承(基于原型链的继承机制)。
    • C++:C++ 的对象结构在编译时就已经确定,属性和方法必须在类定义时指定,不能像 JavaScript 那样动态地增加或删除成员。C++ 使用的是类继承机制,子类在编译时就必须明确其父类。
  3. 内存管理

    • JavaScript:JavaScript 引擎自动管理对象的生命周期,通过垃圾回收机制来释放不再使用的对象所占用的内存。
    • C++:C++ 不提供自动垃圾回收机制,程序员需要手动管理对象的内存分配与释放,可以通过构造函数/析构函数、new/delete运算符或者智能指针等方式进行内存管理。
  4. 类型系统

    • JavaScript:JavaScript 是弱类型语言,对象的类型检查较为灵活,变量可以动态改变类型,typeof操作符返回“object”表示非原始类型的值,包括自定义对象和内置对象实例。
    • C++:C++ 是强类型语言,每个对象都有固定的类型,类型转换需要显式进行,编译器会在编译阶段执行严格的类型检查。
  5. 实例化方式

    • JavaScript:使用字面量语法或 new 关键字调用构造函数来创建对象实例。
    • C++:使用 new 关键字结合类名来创建对象实例,也可以通过栈上直接定义(对于局部小对象)或在堆上动态分配。
  6. 面向对象特性

    • JavaScript:尽管不是纯面向对象语言,但提供了封装(通过闭包)、继承(通过原型链或ES6的class关键字)和多态(通过原型委托和函数重载)等功能。
    • C++:全面支持面向对象编程的所有基本特性,包括封装(通过访问修饰符public, private, protected)、继承(通过class派生)、多态(通过虚函数和抽象类)等。同时C++还支持运算符重载等其他面向对象语言不一定具有的特性。

小结

数据类型的概念与定义在不同语言中的区别较大,如果以后学习其他编程语言时注意区分。

这篇关于编程笔记 html5cssjs 073 JavaScrip Object数据类型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/673324

相关文章

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图(Line Ch

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

Spring Boot 3 整合 Spring Cloud Gateway实践过程

《SpringBoot3整合SpringCloudGateway实践过程》本文介绍了如何使用SpringCloudAlibaba2023.0.0.0版本构建一个微服务网关,包括统一路由、限... 目录引子为什么需要微服务网关实践1.统一路由2.限流防刷3.登录鉴权小结引子当前微服务架构已成为中大型系统的标

Java集合中的List超详细讲解

《Java集合中的List超详细讲解》本文详细介绍了Java集合框架中的List接口,包括其在集合中的位置、继承体系、常用操作和代码示例,以及不同实现类(如ArrayList、LinkedList和V... 目录一,List的继承体系二,List的常用操作及代码示例1,创建List实例2,增加元素3,访问元

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Java中将异步调用转为同步的五种实现方法

《Java中将异步调用转为同步的五种实现方法》本文介绍了将异步调用转为同步阻塞模式的五种方法:wait/notify、ReentrantLock+Condition、Future、CountDownL... 目录异步与同步的核心区别方法一:使用wait/notify + synchronized代码示例关键

Java 8 Stream filter流式过滤器详解

《Java8Streamfilter流式过滤器详解》本文介绍了Java8的StreamAPI中的filter方法,展示了如何使用lambda表达式根据条件过滤流式数据,通过实际代码示例,展示了f... 目录引言 一.Java 8 Stream 的过滤器(filter)二.Java 8 的 filter、fi

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue(1)定义实现Delayed接口的实体类 (