首页 > 编程语言 >JavaScript 对象的基本操作及相关知识点详解

JavaScript 对象的基本操作及相关知识点详解

时间:2024-09-24 13:21:11浏览次数:9  
标签:知识点 console log 对象 JavaScript person let 基本操作 属性

在JavaScript中,对象是一种基本的数据结构,以键值对形式保存数据且数据没有顺序,它可以包含多种数据类型的属性和方法。

1. 创建对象的方法

  • 字面量写法:  let 自定义对象名 = {}
  • 构造函数写法: let 自定义对象名 = new Object();
// 字面量写法
let person = {};

// 构造函数写法
let person = new Object();
(1)保存数据
  • 在对象容器中,用来描述对象基本特征的都叫属性 (姓名、年龄、性别、肤色、身高、体重....),属性都是一个名称。
  • 在对象容器中,用来描述对象具有什么功能或者对象会干什么事情叫方法 (会跳舞、会算卦...), 方法都是一个函数。
// 格式: 
// 自定义属性名: 值
// 自定义方法名: function() {}

let person = {
  name: 'Alice',
  age: 30,
  greet: function() {
    console.log('你好');
  }
};
// name和age就是属性,greet就是方法
(2)操作对象(增、删、改、查)

(a)获取对象中的值

  • 获取属性的值:对象名['属性名']  或者  对象名.属性名
  • 获取对象中的方法:对象名['方法名']()  或者  对象名.方法名()
console.log(person['name']); // Alice
console.log(person.age); // 30

person['greet'](); // 你好
person.greet(); // 你好

(b)修改或新增对象,

  • 修改或新增属性的值:对象名['属性名'] = 值  或者  对象名.属性名 = 值
  • 修改或新增对象中的方法:对象['方法名'] = function(){}  或者  对象.方法名 = function(){}

person['name'] = '王五';
person.name= '王五';
console.log(person); // 王五

person['greet'] = function() {
    console.log('正在喝水...');
}

person.greet= function() {
    console.log('正在喝水...');
}
person.greet(); // 正在喝水...

二者区别:

  • 如果对象中有对应的属性或方法,则表示修改。
  • 如果对象中没有对应的属或方法,则表示添加。

(c)删除对象中的值

delete person.name;
delete person.greet;

console.log(person); // {age: 30}

2. 遍历对象的方法

由于对象容器中也可以同时保存多个值,所以也可以通过遍历对象获取对象中的每一个值。

for(let 变量 in  要被遍历的对象) {}

语法解释:

  • for in 语法也是一个循环,循环次数会自动根据对象中的属性个数进行遍历。
  • for in 语法中,变量就是对象中的属性名 (方法名)。
  • 哪个对象要被遍历,那么就将当前对象写到 in 后面。
  • 获取对象中的值,必须通过  对象名[变量]  获取。
let zs = {
    uname: '张三',
    age: 23,
    myheight: 180,
}

// 遍历对象
for(let abc in zs) {
    // abc变量保存了对象中的所有属性和方法
    console.log(abc);
    // uname
    // age
    // myheight
    // 获取对象中的每一个属性对应的值
    console.log(zs[abc]);
    // 张三
    // 23
    // 180
}

遍历对象注意:

  • 获取对象中的值必须通过  对象名[变量]  获取。
  • 在遍历对象的时候,坚决不可以使用点的方式获取值,否则获取的结果是undefined。

标签:知识点,console,log,对象,JavaScript,person,let,基本操作,属性
From: https://blog.csdn.net/dlmyrt/article/details/142387622

相关文章

  • Python知识点:如何使用Python与Java进行互操作(Jython)
    开篇,先说一个好消息,截止到2025年1月1日前,翻到文末找到我,赠送定制版的开题报告和任务书,先到先得!过期不候!Jython是一种完全兼容Java的Python实现,它将Python代码编译成Java字节码,这样就可以在Java虚拟机(JVM)上运行。使用Jython,你可以无缝地调用Java类库和P......
  • 大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开
    ......
  • 【期末大作业】基于HTML+CSS+JavaScript南京大学网页校园教育网站html模板(3页) (1)
    ......
  • python3 numpy的一些小知识点
    简介一个用python实现的科学计算,包括:1、一个强大的N维数组对象Array;2、比较成熟的(广播)函数库;3、用于整合C/C++和Fortran代码的工具包;4、实用的线性代数、傅里叶变换和随机数生成函数。numpy和稀疏矩阵运算包scipy配合使用更加方便。NumPy(NumericPython)提供了许多高级的数值......
  • JavaScript引入到文件的三种方式
    直接嵌入到HTML文件当中利用script标签,将js文件引入到HTML文件中<body><script>varnum=10;</script><!--在Script标签中写入js语句--></body>引入本地独立的js文件 首先命名一个由.js为后缀的文件,然后在HTML文件中使用Script标签......
  • JavaScript语法特点
    let用来声明变量数组可通过数组名直接输出数组全部元素数组名.length可以返回长度NaN为数字型字符串可用单引号,双引号,反引号进行包裹字符串用反引号包裹,才可以使用模板字符串字符串.replace(正则,替换字符串)返回的是新字符串'',0,undefined,null,false,NaN布尔值都是false未......
  • JavaScript数据类型转换 数字类型转换
    除了在算术函数和表达式中,会自动进行number类型转换之外,可以使用Number(Value)进行显式的转换。 数字类型转换规则类型类型转换后undefinedNaNnull0true1false0string去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空,则转换结果为 0。否则,将会从剩余字符串中“读......
  • JavaScript 学习路线图
    基础阶段主要内容:掌握JavaScript的基本语法,如变量、数据类型(字符串、数字、布尔、对象、数组等)、运算符等。理解程序的控制流,包括条件语句(如if-else)、循环语句(如for、while)。学会使用函数来封装代码,理解函数的参数、返回值以及作用域等概念。学习网站:W3Schools:https://w......
  • Javascript调试命令——你只会Console.log() ?
    Javascript调试命令——你只会Console.log()?https://segmentfault.com/a/1190000012957199Console对象提供对浏览器控制台的接入(如:Firefox的WebConsole)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问,......
  • DM(达梦数据库基本操作)
    1、创建用户XTF密码为XTF123321SQL>CREATEUSERXTFIDENTIFIEDBY"XTF123321";2、权限(1)--给用户建表权限SQL>GRANTCREATETABLEtoXTF;总共1个语句正依次执行...[执行语句1]:GRANTCREATETABLEtoXTF;执行成功,执行耗时7毫秒.执行号:10322影响了0条记......