1. 首页
  2. 新闻中心
  3. 日常分享

JavaScript 对象

60 阅读 0 评论

JavaScript 对象

JavaScript 对象是该语言的基本构建块。它们是属性的集合，其中每个属性都定义为一个键值对。键是字符串（或 Symbol），值可以是任何数据类型，包括其他对象、函数或基元类型。

例：

let person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello!');
    }
};
 

在此示例中，是一个具有三个属性的对象：person

  • name（字符串）
  • age（一个数字）
  • greet（功能）

您可以使用点表示法或方括号表示法访问属性：

console.log(person.name); // John
console.log(person['age']); // 30
person.greet(); // Hello!
 

对象用途广泛，可用于对真实世界的实体进行建模、存储配置、管理状态等。

属性和方法

对象可以具有属性和方法。Properties 是与对象关联的值，而 methods 是属于对象的函数。

例：

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2021,
    start: function() {
        console.log('Car started');
    }
};
 

其中， ， ， 和 是属性， 并且 是一个方法。brandmodelyearstart

访问和修改属性

您可以使用点表示法或方括号表示法访问和修改属性。

例：

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

// Accessing properties
console.log(person.name); // Alice
console.log(person['age']); // 25

// Modifying properties
person.name = 'Bob';
person['age'] = 30;

console.log(person.name); // Bob
console.log(person.age); // 30
 

添加和删除属性

您可以添加新属性或删除现有属性。

例：

let book = {
    title: '1984',
    author: 'George Orwell'
};

// Adding a property
book.year = 1949;
console.log(book.year); // 1949

// Deleting a property
delete book.author;
console.log(book.author); // undefined
 

嵌套对象

对象可以包含其他对象，从而允许使用复杂的数据结构。

例：

let student = {
    name: 'John',
    grades: {
        math: 90,
        science: 85
    }
};

console.log(student.grades.math); // 90
 

迭代属性

您可以使用循环迭代对象的属性。for...in

例：

let user = {
    username: 'jdoe',
    email: 'jdoe@example.com'
};

for (let key in user) {
    console.log(key + ': ' + user[key]);
}
// Output:
// username: jdoe
// email: jdoe@example.com
 

对象方法

JavaScript 提供了多种用于处理对象的内置方法，例如 、 和 。Object.keys()Object.values()Object.entries()

例：

let person = {
    name: 'Jane',
    age: 28
};

console.log(Object.keys(person)); // ['name', 'age']
console.log(Object.values(person)); // ['Jane', 28]
console.log(Object.entries(person)); // [['name', 'Jane'], ['age', 28]]
 

在 JS 中创建对象（4 种不同的方式）

1. 对象字面量

这是在 JavaScript 中创建对象的最简单和最常见的方法。您可以使用大括号定义对象，并在其中指定属性和值。{}

例：
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2021
};
 

在此示例中， 是一个具有三个属性的对象： 、 和 。carbrandmodelyear

2. 构造函数

构造函数是一种特殊类型的函数，用于创建对象的多个实例。您可以使用 .this

例：
function Car(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

let myCar = new Car('Toyota', 'Corolla', 2021);
 

此处 是构造函数，是对象的实例。CarmyCarCar

3. Object.create（）

该方法使用指定的 prototype 对象和属性创建一个新对象。Object.create()

例：
let proto = {
    greet: function() {
        console.log('Hello!');
    }
};

let obj = Object.create(proto);
obj.name = 'Alice';
obj.greet(); // Hello!
 

在此示例中，是使用 创建作为其原型的，并且它继承了该方法。objprotogreet

4. 类语法

ES6 引入了语法，它提供了一种更直观、更简洁的方式来创建对象和处理继承。class

例：
class Car {
    constructor(brand, model, year) {
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    start() {
        console.log('Car started');
    }
}

let myCar = new Car('Toyota', 'Corolla', 2021);
myCar.start(); // Car started
 

在此示例中，是一个类，并且是具有方法的类的实例。CarmyCarCarstart

JS JSON 对象

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式，易于人类读写，也易于机器解析和生成。JSON 通常用于在服务器和 Web 应用程序之间传输数据。

例：

{
    "name": "John",
    "age": 30,
    "city": "New York"
}
 

这是一个 JSON 对象，表示具有 、 和 属性的 人员。nameagecity

在 JSON 和 JavaScript 对象之间转换

JavaScript 提供了在 JSON 和 JavaScript 对象之间进行转换的内置方法。

JSON 到 JavaScript 对象

您可以使用 将 JSON 字符串转换为 JavaScript 对象。JSON.parse()

例：
let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonString);

console.log(obj.name); // John
console.log(obj.age); // 30
console.log(obj.city); // New York
 

JavaScript 对象转 JSON

您可以使用 将 JavaScript 对象转换为 JSON 字符串。JSON.stringify()

例：
let obj = {
    name: 'John',
    age: 30,
    city: 'New York'
};

let jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"John","age":30,"city":"New York"}
 

JSON 的用例

  • 数据交换：JSON 通常用于在客户端和服务器之间交换数据。
  • 配置文件： JSON 由于其可读性和简单性，通常用于配置文件。
  • API：许多 Web API 使用 JSON 来格式化它们返回的数据。

JSON 语法规则

  • 数据采用键/值对形式。
  • 数据用逗号分隔。
  • 大括号用于保存对象。{}
  • 方括号包含数组。[]

例：

{
    "employees": [
        { "firstName": "John", "lastName": "Doe" },
        { "firstName": "Anna", "lastName": "Smith" },
        { "firstName": "Peter", "lastName": "Jones" }
    ]
}
 

此 JSON 对象包含 employee 对象数组。

JS 对象参考

在 JavaScript 中，对象是通过引用传递的。这意味着，当您将一个对象分配给另一个变量时，两个变量都引用内存中的同一对象。通过一个变量对对象所做的任何更改都将反映在另一个变量中。

例：

let obj1 = { key: 'value' };
let obj2 = obj1;

obj2.key = 'new value';
console.log(obj1.key); // new value
 

在此示例中，两者都引用同一对象。更改 through 属性也会更改 。obj1obj2keyobj2obj1

复制对象

要创建对象的副本，您需要创建新对象并复制属性。有几种方法可以执行此作：

浅拷贝

浅层副本会复制对象的属性，但如果属性本身是对象，则仅复制引用。

用Object.assign()
let obj1 = { key: 'value' };
let obj2 = Object.assign({}, obj1);

obj2.key = 'new value';
console.log(obj1.key); // value
console.log(obj2.key); // new value
 
使用 Spread 运算符
let obj1 = { key: 'value' };
let obj2 = { ...obj1 };

obj2.key = 'new value';
console.log(obj1.key); // value
console.log(obj2.key); // new value
 

深拷贝

深层复制会创建一个新对象，并以递归方式复制所有属性，包括嵌套对象。

使用 和JSON.parse()JSON.stringify()
let obj1 = { key: 'value', nested: { innerKey: 'innerValue' } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.nested.innerKey = 'new inner value';
console.log(obj1.nested.innerKey); // innerValue
console.log(obj2.nested.innerKey); // new inner value
 

实际意义

了解对象引用对于避免代码中出现意外的副作用至关重要。使用对象时，请注意需要对原始对象的引用还是副本。

可变性和不可变性

JavaScript 对象是可变的，这意味着在创建对象后可以更改其属性。这种可变性是理解对象引用很重要的一个关键原因。

例：

let obj1 = { key: 'value' };
let obj2 = obj1;

obj2.key = 'new value';
console.log(obj1.key); // new value
 

在此示例中，both 和 引用同一个对象。更改 through 属性也会更改 。obj1obj2keyobj2obj1

避免意外的副作用

使用对象时，如果修改由多个变量引用的对象，则可能会发生意外的副作用。为避免这种情况，您可以创建对象的副本。

浅层复制与深层复制

  • 浅层复制：复制对象的属性，但如果属性本身是对象，则仅复制引用。
  • 深层复制：递归复制所有属性，包括嵌套对象。

浅拷贝示例：

let obj1 = { key: 'value', nested: { innerKey: 'innerValue' } };
let obj2 = Object.assign({}, obj1);

obj2.nested.innerKey = 'new inner value';
console.log(obj1.nested.innerKey); // new inner value
 

在此示例中， 是 的浅表副本。更改 中的嵌套对象的属性也会更改 中的 嵌套对象。obj2obj1innerKeyobj2obj1

Deep Copy 示例：

let obj1 = { key: 'value', nested: { innerKey: 'innerValue' } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.nested.innerKey = 'new inner value';
console.log(obj1.nested.innerKey); // innerValue
console.log(obj2.nested.innerKey); // new inner value
 

在此示例中， 是 的深层副本。更改 中的嵌套对象的属性不会影响 。obj2obj1innerKeyobj2obj1

实际用例

在各种情况下，了解对象引用至关重要，例如：

  • 状态管理：在 React 等框架中，不可变地管理状态对于确保可预测的行为非常重要。
  • 数据作：使用复杂的数据结构时，知道何时创建副本可以防止错误和意外的副作用。
  • 函数参数：将对象传递给函数时，请注意，如果通过引用传递原始对象，则函数可以修改原始对象。

例：

function modifyObject(obj) {
    obj.key = 'new value';
}

let obj = { key: 'value' };
modifyObject(obj);
console.log(obj.key); // new value
 

在此示例中，该函数修改原始对象，因为它是通过引用传递的。modifyObject

在 JS 中将数组推送到 Object 中

在 JavaScript 中，您可以通过将数组分配给属性来将数组添加到对象中。当您想在对象的单个键下存储多个值时，这非常有用。

例：

let obj = {};
obj.array = [1, 2, 3];

console.log(obj.array); // [1, 2, 3]
 

在此示例中，将数组添加到属性 下的对象 。[1, 2, 3]objarray

将元素添加到数组中

你可以使用数组方法，例如将元素添加到对象内的数组中。push()

例：

let obj = {};
obj.array = [1, 2, 3];

// Adding elements to the array
obj.array.push(4);
obj.array.push(5);

console.log(obj.array); // [1, 2, 3, 4, 5]
 

在此示例中，该方法用于将元素添加到对象中的数组中。push()45obj

迭代数组

您可以使用类似 或 的循环来迭代对象中的数组。forforEach

例：

let obj = {};
obj.array = [1, 2, 3, 4, 5];

// Iterating over the array
obj.array.forEach(function(element) {
    console.log(element);
});
// Output:
// 1
// 2
// 3
// 4
// 5
 

在此示例中，该方法用于迭代数组并将每个元素记录到控制台。forEach

实际用例

  • 存储多个值：当您需要在对象的单个键下存储多个值时。
  • Grouping Related Data（对相关数据进行分组）：当您要将相关数据分组在一起时，例如购物车中的商品列表。

当然，让我们更多地探索有关在对象中使用数组和一些高级技术的信息。

访问和修改数组元素

您可以使用对象的索引访问和修改对象内数组中的元素。

例：

let obj = {};
obj.array = [1, 2, 3];

// Accessing elements
console.log(obj.array[0]); // 1
console.log(obj.array[1]); // 2

// Modifying elements
obj.array[0] = 10;
console.log(obj.array[0]); // 10
 

在此示例中，使用数组的索引访问和修改数组的元素。

从数组中删除元素

您可以使用 、 和 等方法从对象内的数组中删除元素。pop()shift()splice()

例：

let obj = {};
obj.array = [1, 2, 3, 4, 5];

// Removing the last element
obj.array.pop();
console.log(obj.array); // [1, 2, 3, 4]

// Removing the first element
obj.array.shift();
console.log(obj.array); // [2, 3, 4]

// Removing elements by index
obj.array.splice(1, 1); // Removes 1 element at index 1
console.log(obj.array); // [2, 4]
 

在此示例中，使用不同的方法从数组中删除元素。

在数组中查找元素

您可以使用 、 和 等方法在对象内的数组中查找元素。indexOf()find()filter()

例：

let obj = {};
obj.array = [1, 2, 3, 4, 5];

// Finding the index of an element
let index = obj.array.indexOf(3);
console.log(index); // 2

// Finding an element using a condition
let element = obj.array.find(function(el) {
    return el > 3;
});
console.log(element); // 4

// Filtering elements based on a condition
let filteredArray = obj.array.filter(function(el) {
    return el > 2;
});
console.log(filteredArray); // [3, 4, 5]
 

在此示例中，使用不同的方法在数组中找到元素。

实际用例

  • 动态数据存储：当您需要动态添加、删除或修改集合中的元素时。
  • 数据处理：当您需要处理和作存储在对象内数组中的数据时。

访问和修改数组元素

您可以使用对象的索引访问和修改对象内数组中的元素。

例：

let obj = {};
obj.array = [1, 2, 3];

// Accessing elements
console.log(obj.array[0]); // 1
console.log(obj.array[1]); // 2

// Modifying elements
obj.array[0] = 10;
console.log(obj.array[0]); // 10
 

在此示例中，使用数组的索引访问和修改数组的元素。

从数组中删除元素

您可以使用 、 和 等方法从对象内的数组中删除元素。pop()shift()splice()

例：

let obj = {};
obj.array = [1, 2, 3, 4, 5];

// Removing the last element
obj.array.pop();
console.log(obj.array); // [1, 2, 3, 4]

// Removing the first element
obj.array.shift();
console.log(obj.array); // [2, 3, 4]

// Removing elements by index
obj.array.splice(1, 1); // Removes 1 element at index 1
console.log(obj.array); // [2, 4]
 

在此示例中，使用不同的方法从数组中删除元素。

在数组中查找元素

您可以使用 、 和 等方法在对象内的数组中查找元素。indexOf()find()filter()

例：

let obj = {};
obj.array = [1, 2, 3, 4, 5];

// Finding the index of an element
let index = obj.array.indexOf(3);
console.log(index); // 2

// Finding an element using a condition
let element = obj.array.find(function(el) {
    return el > 3;
});
console.log(element); // 4

// Filtering elements based on a condition
let filteredArray = obj.array.filter(function(el) {
    return el > 2;
});
console.log(filteredArray); // [3, 4, 5]
 

在此示例中，使用不同的方法在数组中找到元素。

实际用例

  • 动态数据存储：当您需要动态添加、删除或修改集合中的元素时。
  • 数据处理：当您需要处理和作存储在对象内数组中的数据时。

检查 JS 对象中是否存在 Key

在 JavaScript 中，您可以使用多种方法检查对象中是否存在键。这对于在尝试访问或修改属性之前验证属性是否存在非常有用。

使用运算符in

该运算符检查对象中是否存在属性（包括通过 prototype 链继承的属性）。in

例：
let obj = { key: 'value' };

console.log('key' in obj); // true
console.log('nonExistentKey' in obj); // false
 

用hasOwnProperty()

该方法检查对象是否将指定的属性作为其自己的 （非继承） 。hasOwnProperty()

例：
let obj = { key: 'value' };

console.log(obj.hasOwnProperty('key')); // true
console.log(obj.hasOwnProperty('nonExistentKey')); // false
 

使用 Checkundefined

您还可以检查属性是否为 ，但如果属性存在但具有值，则此方法可能不太可靠。undefinedundefined

例：
let obj = { key: 'value' };

console.log(obj.key !== undefined); // true
console.log(obj.nonExistentKey !== undefined); // false
 

实际用例

  • 条件逻辑：当您需要根据属性的存在来执行代码时。
  • 数据验证：验证数据结构以确保存在所需的属性时。

例：

let user = {
    username: 'jdoe',
    email: 'jdoe@example.com'
};

if ('email' in user) {
    console.log('Email exists: ' + user.email);
} else {
    console.log('Email does not exist');
}
 

在此示例中，代码检查对象中是否存在该属性并记录相应的消息。emailuser

常见对象方法

1.Object.keys()

此方法返回给定对象自己的可枚举属性名称的数组。

例：
let obj = { a: 1, b: 2, c: 3 };
let keys = Object.keys(obj);

console.log(keys); // ['a', 'b', 'c']
 

2.Object.values()

此方法返回给定对象自己的 enumerable 属性值的数组。

例：
let obj = { a: 1, b: 2, c: 3 };
let values = Object.values(obj);

console.log(values); // [1, 2, 3]
 

3.Object.entries()

此方法返回给定对象自己的可枚举属性 [key， value] 对的数组。

例：
let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);

console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]
 

4.Object.assign()

此方法将所有可枚举的 own 属性从一个或多个源对象复制到目标对象。它返回目标对象。

例：
let target = { a: 1 };
let source = { b: 2, c: 3 };
let returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget); // { a: 1, b: 2, c: 3 }
 

5.Object.freeze()

该方法冻结对象。冻结的对象无法再更改;冻结对象可以防止向其添加新属性、删除现有属性和更改现有属性。

例：
let obj = { a: 1 };
Object.freeze(obj);

obj.a = 2; // This will not change the value of 'a'
console.log(obj.a); // 1
 

6.Object.seal()

此方法将密封对象，防止向其添加新属性并将所有现有属性标记为不可配置。只要现有属性的值是可写的，就可以更改它们。

例：
let obj = { a: 1 };
Object.seal(obj);

obj.a = 2; // This will change the value of 'a'
delete obj.a; // This will not delete the property 'a'
console.log(obj.a); // 2
 

7.Object.create()

此方法使用指定的 prototype 对象和属性创建新对象。

例：
let proto = { greet: function() { console.log('Hello!'); } };
let obj = Object.create(proto);

obj.greet(); // Hello!
 

当然，让我们探索一些可用于 JavaScript 对象的其他方法：

其他对象方法

8.Object.getOwnPropertyNames()

此方法返回直接在给定对象中找到的所有属性（包括不可枚举属性）的数组。

例：
let obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'c', { value: 3, enumerable: false });

let propNames = Object.getOwnPropertyNames(obj);
console.log(propNames); // ['a', 'b', 'c']
 

9.Object.getOwnPropertyDescriptor()

此方法返回对象上命名属性的属性描述符。

例：
let obj = { a: 1 };
let descriptor = Object.getOwnPropertyDescriptor(obj, 'a');

console.log(descriptor);
// Output:
// {
//   value: 1,
//   writable: true,
//   enumerable: true,
//   configurable: true
// }
 

10.Object.getPrototypeOf()

此方法返回指定对象的原型（即 internal 属性的值）。[[Prototype]]

例：
let proto = {};
let obj = Object.create(proto);

console.log(Object.getPrototypeOf(obj) === proto); // true
 

11.Object.is()

该方法确定两个值是否为同一值。

例：
console.log(Object.is('foo', 'foo')); // true
console.log(Object.is({}, {})); // false
 

12.Object.isExtensible()

此方法确定对象是否可扩展（即是否可以向其添加新属性）。

例：
let obj = {};
console.log(Object.isExtensible(obj)); // true

Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // false
 

13.Object.preventExtensions()

此方法可防止将新属性添加到对象中（即，它使对象不可扩展）。

例：
let obj = { a: 1 };
Object.preventExtensions(obj);

obj.b = 2; // This will not add the property 'b'
console.log(obj.b); // undefined
 

14.Object.defineProperty()

此方法直接在对象上定义新属性，或修改对象上的现有属性，并返回该对象。

例：
let obj = {};
Object.defineProperty(obj, 'a', {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true
});

console.log(obj.a); // 1
 

15.Object.defineProperties()

此方法直接在对象上定义新属性或修改现有属性，并返回对象。

例：
let obj = {};
Object.defineProperties(obj, {
    a: {
        value: 1,
        writable: true
    },
    b: {
        value: 2,
        writable: false
    }
});

console.log(obj.a); // 1
console.log(obj.b); // 2
 

实际用例

  • Object.keys（）：用于迭代对象的属性。
  • Object.values（）：用于访问对象中的所有值。
  • Object.entries（）：用于将对象转换为键值对数组。
  • Object.assign（）：用于合并对象或克隆对象。
  • Object.freeze（）：用于创建不可变对象。
  • Object.seal（）：用于防止添加或删除属性，同时允许修改现有属性。
  • Object.create（）：用于创建具有特定原型的对象。
  • Object.getOwnPropertyNames（）：用于检索所有属性名称，包括不可枚举的属性名称。
  • Object.getOwnPropertyDescriptor（）：用于检查属性属性。
  • Object.getPrototypeOf（）：有助于理解原型链。
  • Object.is（））：对于严格的相等性检查很有用。
  • Object.isExtensible（）：用于检查是否可以添加新属性。
  • Object.preventExtensions（）：用于使对象不可扩展。
  • Object.defineProperty（）：用于定义或修改具有特定属性的属性。
  • Object.defineProperties（）：用于一次定义或修改多个属性。

 

出处：https://dev.to/

点赞(0) 打赏
  • 本文分类：日常分享
  • 本文标签：
  • 浏览次数：60 次浏览
  • 发布日期：2025-03-31 15:18:41
  • 本文链接：https://www.willenyao.com/a/259.html

    • 本站所有素材均来自网络或用户分享，版权归属原作者，如果侵犯了您的版权，请随时联系我们（邮箱：970251487@qq.com）进行删除。

3D 动画：您网站的终极游戏规则改变者
3D 动画：您网站的终极游戏规则改变者
一文学习JavaScript运算符
一文学习JavaScript运算符
详解JavaScript各种算法在并行、并发、增量上的优化方案
详解JavaScript各种算法在并行、并发、增量上的优化方案
JavaScript 用法
JavaScript 用法

评论列表 共有 0 条评论

暂无评论
意见
建议
发表
评论 返回
顶部