JavaScript 如何创建对象属性

JavaScript基于一个基本的面向对象框架。属性是键和值之间的链接，而对象是一组属性的集合。JavaScript对象是一组没有特定顺序的属性。

JavaScript属性的值也可以是方法或函数。对象的属性可以被更新、修改、添加和删除。有时候属性是静态的，不能被修改。在本文中，让我们看看如何访问和创建对象属性。

有几种方法可以用来创建对象属性：

• 使用点操作符
• 使用方括号表示法
• 对象初始化器（字面量）语法
• Object.assign() 方法
• 使用 spread 操作符
• 使用 Object.defineProperties() 方法

方法1：使用点操作符

在这种方法中，我们使用点符号（.）将值直接赋给对象属性，指定对象名称后跟属性名称和值。

语法：

objectName.property;      // Using dot notation  

示例1： 在下面的代码中，我们使用点运算符创建一个对象，并添加属性和它们的关联值。

Javascript

let student = new Object();
student.name = "ishika";
student.section = "b9";
student.cgpa = "9.52";
student.branch = "CSE";
console.log(student);

输出

{ name: 'ishika', section: 'b9', cgpa: '9.52', branch: 'CSE' }

方法 2：使用方括号表示法

在这个方法中，我们使用方括号来为对象属性赋值。键是在方括号内指定为字符串，值被赋给相应的属性。这种方法在属性名是动态的，或者属性名包含特殊字符或空格时特别有用。

语法：

const objectName = {};  

objectName["propertyName"] = propertyValue;  

示例2： 在这个示例中，我们使用上面解释的方法。

Javascript

const student = {};
 
student["name"] = "pratyusha";
student["section"] = "b9";
student["cgpa"] = "9";
student["branch"] = "CSE";
 
console.log(student);

输出

{ name: 'pratyusha', section: 'b9', cgpa: '9', branch: 'CSE' }

方法3：对象初始化（字面量）语法

JavaScript中的对象初始化（字面量）语法允许您在花括号内直接创建对象并定义其属性和值

语法：

const objectName = {  
    propertyName1: propertyValue1,  
    propertyName2: propertyValue2,  
    // More properties and values...  
};  

示例: 以下是使用对象字面量的基本示例。

JavaScript

const student = {
    name: "Aman",
    age: 25,
    gender: "Male",
    subjects: ["Math", "Science", "History"],
};
 
console.log(student);

输出

{
  name: 'Aman',
  age: 25,
  gender: 'Male',
  subjects: [ 'Math', 'Science', 'History' ]
}

方法4：Object.assign() 方法

Object.assign() 方法是JavaScript中的内置函数，用于将多个源对象的属性合并到目标对象中。它通过将一个或多个源对象的属性复制到目标对象来创建一个新对象或修改现有对象。

语法：

Object.assign(target, ...sources)  

示例： 在此示例中，我们使用了上述解释的方法。

JavaScript

// Source objects
const person = {
    name: "Nikita",
    age: 30,
};
 
const address = {
    city: "Haldwani",
    state: "Uttarakhan",
};
 
// Creating a new object and merging properties using Object.assign()
const mergedObject = Object.assign({}, person, address);
 
console.log(mergedObject);

输出

{ name: 'Nikita', age: 30, city: 'Haldwani', state: 'Uttarakhan' }

方法5：使用扩展运算符

使用扩展运算符{ … }，可以将多个对象的属性合并到一个新对象中，或者将新属性添加到现有对象中。

语法：

let variablename1 = [...value];   

示例： 在这个示例中，我们使用上面解释过的方法。

Javascript

// Step 1: Create a new object 
//with existing properties
const existingObject =
    { name: "Rishab Pant", age: 30 };
 
// Step 2: Add or override properties 
//using the spread operator
const newObject = {
    ...existingObject,
    city: "India",
    occupation: "Cricketer",
};
 
console.log(newObject);

输出

{
  name: 'Rishab Pant',
  age: 30,
  city: 'India',
  occupation: 'Cricketer'
}

方法6：使用 Object.defineProperties() 方法

JavaScript 中的 Object.defineProperties() 方法是一个标准内置对象，用于在对象上直接定义新的属性或修改现有属性，并返回该对象。

语法：

Object.defineProperties(obj, descriptors);  

示例： 在此示例中，我们使用上述解释的方法。

Javascript

const person = {};
 
Object.defineProperties(person, {
    name: { value: "Aman", writable: true, enumerable: true },
    age: { value: 30, writable: false, enumerable: true },
    gender: { value: "Male", enumerable: true },
});
 
console.log(person);

输出

{ name: 'Aman', age: 30, gender: 'Male' }