微搭低代码入门09对象

文摘   2024-11-22 20:02   内蒙古  

javascirpt一共有8种数据类型,分为基本数据类型和引用数据类型,我们本篇就介绍一下引用数据类型对象。

1 什么是对象

在JavaScript中,对象(Object)是一种复合值,它将多个值(原始值或其他对象)组织在一起,并通过名字(属性名)来访问这些值。对象可以看作是一组键值对(key-value pairs),其中键是字符串(属性名),值可以是任何数据类型,包括函数。

在现实中,对象可以是任何具体或抽象的事物。比如,一个苹果、一张桌子或一只虫子,这些都可以通过JavaScript中的对象来表示。通过对象的属性,我们可以描述它们的特征;通过对象的方法,我们可以描述它们的行为。

如何定义一个苹果

一个苹果可以有颜色、大小、重量等属性,以及被吃掉这样的行为。在JavaScript中,可以这样定义一个苹果对象:

let apple = {    color: "red",    size: "medium",    weight: 150, // 假设单位是克    eat: function() {        console.log("The apple is being eaten.");        this.weight -= 50; // 吃掉一部分后重量减少    }};

console.log(apple.color); // 输出: redapple.eat();console.log(apple.weight); // 输出: 100

2 对象的定义

对象可以通过多种方式定义,最常见的是使用对象字面量:

const person = {    name: 'Alice',    age: 25,    greet: function() {        console.log('Hello, ' + this.name);    }};

3 访问属性

访问对象的属性可以使用点运算符(.)或中括号([])。

点运算符

console.log(person.name); // 输出: Aliceconsole.log(person.age);  // 输出: 25

中括号

console.log(person['name']); // 输出: Aliceconsole.log(person['age']);  // 输出: 25

4 为什么使用中括号来访问属性

动态属性名:中括号允许使用变量作为属性名。

const key = 'name';console.log(person[key]); // 输出: Alice

特殊字符:如果属性名包含特殊字符(如空格、连字符、数字开头等),必须使用中括号。

const obj = {    'first-name': 'John',    'age 25': 'young'};console.log(obj['first-name']); // 输出: Johnconsole.log(obj['age 25']);     // 输出: young

5 使用const定义对象后的操作

如果使用const定义了对象,虽然对象本身不能被重新赋值,但对象的属性可以被修改、添加或删除。

const person = {    name: 'Alice',    age: 25};

// 修改属性person.name = 'Bob';console.log(person.name); // 输出: Bob

// 添加新属性person.gender = 'female';console.log(person.gender); // 输出: female

// 删除属性delete person.age;console.log(person.age); // 输出: undefined

6 对象方法的创建和调用

对象的方法(函数)可以通过对象字面量直接定义,如上例中的greet方法。

const person = {    name: 'Alice',    greet: function() {        console.log('Hello, ' + this.name);    }};

// 调用对象的方法person.greet(); // 输出: Hello, Alice

也可以使用ES6的简写方法语法:

const person = {    name: 'Alice',    greet() {        console.log('Hello, ' + this.name);    }};

// 调用对象的方法person.greet(); // 输出: Hello, Alice

7 访问嵌套对象

嵌套对象是指一个对象中包含另一个对象。要访问嵌套对象的属性,你需要通过链式访问的方式,即使用点号(.)或者方括号([])依次访问每一层的属性。

const person = {    name: "Alice",    address: {        city: "New York",        street: "5th Avenue",        number: 100    },    hobbies: ["reading", "swimming"]};

// 访问嵌套对象的属性console.log(person.name); // Aliceconsole.log(person.address.city); // New Yorkconsole.log(person.address["street"]); // 5th Avenueconsole.log(person["hobbies"][1]); // swimming

8 使用 for…in 循环遍历对象的属性

for…in 循环用于遍历对象的可枚举属性(包括继承的可枚举属性)。在遍历过程中,每次循环的变量会被赋予对象的一个属性名。

const person = {    name: "Alice",    age: 30,    city: "New York"};

// 使用 for...in 循环遍历对象的属性for (let key in person) { console.log(key + ": " + person[key]);}

// 输出:// name: Alice// age: 30// city: New York

9 遍历嵌套对象的属性

如果你需要遍历嵌套对象的属性,可以结合递归函数来实现。下面是一个示例,展示如何遍历一个嵌套对象的所有属性(包括嵌套层级的属性)。

const person = {    name: "Alice",    address: {        city: "New York",        street: "5th Avenue",        number: 100    },    hobbies: ["reading", "swimming"]};

function traverseObject(obj) { for (let key in obj) { if (typeof obj[key] === 'object' && obj[key] !== null) { // 如果是对象且不为null,则递归遍历 traverseObject(obj[key]); } else { // 否则直接输出属性名和值 console.log(key + ": " + obj[key]); } }}

// 遍历嵌套对象traverseObject(person);

// 输出:// name: Alice// city: New York// street: 5th Avenue// number: 100// 注意:hobbies是一个数组,这里不会被递归展开为单个元素,因为typeof hobbies是'object',但在这个示例中我们直接输出了它

总结

本篇是我们低代码入门的最后一篇,好些初学者一点编程基础都没有,就希望做出一款优秀的应用来,这是不现实的。通过这个系列的入门教程,你可以对低代码前端逻辑编写部分有一个概要性的了解,后续在自己编写代码就不至于一片空白无从下手了。


低代码布道师
分享微搭低代码使用教程,提问交流+知识星球50556232
 最新文章