JavaScript对象

news2025/1/31 8:20:46

文章目录

  • 前言
  • 一、对象
    • 1.1什么是对象
    • 1.2为什么需要对象
  • 二、创建对象的三种方式
    • 1.利用字面量创建对象
    • 2.对象的调用
      • 2.1变量、属性、函数、方法总结
    • 3.利用new Object创建对象
      • 3.1利用构造函数创建对象
    • 4.new关键字
  • 总结


前言


一、对象

1.1什么是对象

现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
在这里插入图片描述
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
 属性:事物的特征,在对象中用属性来表示(常用名词)
 方法:事物的行为,在对象中用方法来表示(常用动词)
在这里插入图片描述

1.2为什么需要对象

保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?
例如,将“张三疯”的个人的信息保存在数组中的方式为

var arr = [‘张三疯’, ‘男', 128,154];

二、创建对象的三种方式

在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):

  1. 利用字面量创建对象
  2. 利用 new Object 创建对象
  3. 利用构造函数创建对象

1.利用字面量创建对象

对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

var star = {
 name : 'pink',
 age : 18,
 sex : '男',
 sayHi : function(){
 alert('大家好啊~');
 }
};

2.对象的调用

  1. 对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的 ”
  2. 对象里面属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号,我们后面会用
  3. 对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号

2.1变量、属性、函数、方法总结

  1. 变量:单独声明赋值,单独存在
  2. 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
  3. 函数:单独存在的,通过“函数名()”的方式就可以调用
  • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的 行为和功能。

3.利用new Object创建对象

跟我们前面学的 new Array() 原理一致

  • Object() :第一个字母大写  new Object() :需要 new 关键字
  • 使用的格式:对象.属性 = 值
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
 alert('大家好啊~');
}

3.1利用构造函数创建对象

  1. 构造函数约定首字母大写。 2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
  2. 构造函数中不需要 return 返回结果。
  3. 当我们创建对象的时候,必须用 new 来调用构造函数
function Person(name, age, sex) {
 this.name = name;
 this.age = age;
 this.sex = sex;
 this.sayHi = function() {
 alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
 }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

4.new关键字

在这里插入图片描述

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了对象的使用,而对象方法与属性提供了大量能使我们快速便捷使用的函数和方法。

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

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

相关文章

vue-在组件中使用v-model

一、使用场景 子组件想要使用父组件的值,又想去改父组件的值 二、V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过来的值赋给父组件的变量 三、关键步骤 1. props 的使用 在自定义的 vue 文件中,声明父组件要向子组件传递的 pr…

左右等高布局

开篇概述 作为这个专栏的开篇,简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时,经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码,当遇到一些特殊情况时,界面显示就有可能出现问题。其中&#…

uniapp/vue虚拟列表,数据列表渲染优化

引言 相信大家经常会遇到展示一堆数据的需求,几十条数据还好,要是几百上千条,甚至带上了图片。那就会卡得不行。这时候就需要按需加载。 按需加载有懒加载和虚拟列表。 懒加载:通过JS滚动或触底触发事件来加载更多的数据&#…

报错“Cannot read properties of null (reading ‘addEventListener‘)“

场景 控制台报错"Cannot read properties of null (reading addEventListener)" 错误原因 因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用…

css鼠标变成小手(css中鼠标悬停是为小手)

CSS控制鼠标样式变换如何写代码呢? 代码::p stylecursor: crosshair演示:定位指示/p如果需要将鼠标变换成帮助状态的时候。代码:p stylecursor: help演示:帮助/p当然这些只是一些常见的比较实用的代码。我们…

前端实现可拖拽流程的js框架

1 AntV X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。 XFlow是基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的…

前端使用print.js实现打印

前言 项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用qrcodesjs2生成二维码 注&#xff1a…

【学姐面试宝典】—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天开始学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录http 和 https 的基本概念http 和 https 的区别https 协议的工…

【React Router v6】这17个API,你真的都懂了吗?(建议收藏)

😇本文目录😇 Component1.` <BrowserRouter> `2.`<HashRouter>`3.`<Routes />与<Route />`4.`<Link>`5.`<NavLink>`6.`<Navigate />`7.`<Outlet>`Hooks1.`useRoutes()`2.`useNavigate()`3.`useParams()`

【微信小程序】电商移动前端API文档

文章目录一、文档更新说明1、返回值调整2、分类页图片3、订单支付接口二、路径说明三、电商登录实现方式四、API详情1、全局权限访问&#xff08;1&#xff09;主页API获取首页轮播图数据获取首页分类选项数据获取首页楼层数据&#xff08;2&#xff09;商品API商品列表搜索搜索…

pinia详细使用步骤(0基础)

Pinia简介 学vue2的都知道vuex状态管理&#xff0c;所谓状态管理&#xff0c;简单来说就是一个存储数据的地方&#xff0c;存放在Vuex中的数据在各个组件中都能访问到&#xff0c;它是Vue生态中重要的组成部分。 而pinia同理也是起到状态管理的作用&#xff0c;但是它又不完全…

TDesign小程序组件库体验

原来小程序开发有组件库选择的问题&#xff0c;可以使用WeUI或者Vant。今年腾讯开源了前端的框架TDesign&#xff0c;我也分享了两篇使用文章。 年初分享的主要是PC端的框架&#xff0c;除了有PC端的框架外&#xff0c;最近TDesign又新出了小程序的框架&#xff0c;组件比较丰…

前端vue视频vue-video-player插件总结知识点案例(带源码)

目录文档安装main.js文件全局引入视频格式组件方法切换视频清晰度基础案例效果如下完整案例1效果如下完整案例2效果如下最后文档 文档地址 选项参考 API文档 配置函数方法等 Git地址 Git地址 安装 1.vue-video-player 插件下载 npm install vue-video-player --save2.推…

vue3-admin商品管理后台项目(登录页开发和功能实现)

今天来实现vue3-admin商品管理后台项目的登录页功能 首先在pages文件夹下面添加一个login.vue文件&#xff0c;里面先写入简单的template <template><div>登录</div> </template>然后在router文件夹下面的Index.js里面编辑&#xff0c;仍然是引入页面…

【前端开发工具】VUE3 devtools安装

背景 尤雨溪在2020年9月19日晚正式发布vue3.0 one piece。此版本相较于vue2版本&#xff0c;更快、更小、更易维护、更易于原生、让开发者更轻松&#xff1b;所以学习vue3&#xff0c;对于一个前端开发者来说是一个刻不容缓的学习趋势。 学习vue3自然也离不开debug啦~~ Vue官方…

JS——正则表达式(超详细)

正则表达式概念创建正则表达式正则表达式常用方法test(字符串)search(正则表达式&#xff09;正则表达式.exec(字符串&#xff09;字符串.match(正则表达式)字符串.replace(正则表达式&#xff0c;新的内容&#xff09;断言范围类字符类字符类取反修饰符g&#xff1a;global全文…

Web前端 | HTML嵌入JS代码的三种方式

✅作者简介&#xff1a;一位材料转码农的选手&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;每天都要敲代码的个人主页 &#x1f525;系列专栏&#xff1a;Web前端 目录 一&#xff1a;JavaScript概述 二&#xff1a; HTML嵌入…

如何升级Vue的版本 vue2.9.6升级到vue3.0

背景&#xff1a;电脑使用多年&#xff0c;一直使用vue 2.x版本&#xff0c;项目开发过程中由于一个模块涉及的集成模块过多&#xff0c;导致需要进行定义的变量越来越多&#xff0c;代码出现冗余&#xff0c;因此在同事的推动下&#xff0c;鉴于vue 3.x的优化&#xff0c;故对…

HTML学生个人网站作业设计:个人主页博客web网页设计制作 (HTML+CSS) (1)

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

React函数式组件传值(父子,兄弟,祖先等)以及父子之间方法的调用。

一.前言 react作为一门前端语言&#xff0c;具有独特灵活性&#xff0c;这也是它的魅力所在。前端组件化&#xff0c;也是将整个前端分成了一个一个组件&#xff0c;本期我们讲解的就是react组件之间的传值&#xff08;包括父子&#xff0c;兄弟&#xff0c;祖先&#xff09;等…