如何向 JavaScript 对象添加元素?

javascriptobject oriented programmingprogramming

在 JavaScript 中,对象是包含属性和方法的实时实体。简单来说,我们可以说对象是类的一个实例。它以键和值对的形式存储数据。键通常称为属性,值称为属性值

在 JavaScript 中定义对象有两种方法。

语法

var obj = new Object();

(或)

var obj = {property1: value, property2 : value2 …….}

使用点 (.) 运算符

在 JavaScript 中,使用点 (.) 运算符我们可以访问存储在对象中的变量。点 (.) 运算符将充当对象和要添加的变量之间的连接器。

此运算符不仅有助于向对象添加新元素,还可用于在程序中的任何其他位置访问对象中的现有元素。

let obj = {property: value, …..};
obj.property = value;

让我们用一个合适的例子来讨论这种方法。

示例

在下面的示例程序中,我们使用了点 (.) 运算符方法来访问和添加对象中的元素。

<!DOCTYPE html> <html lang="en"> <head> <title>Add Element in an Object</title> </head> <body> <script> var student = { name: 'abc', age: 20, city: 'Hyderabad', } student.marks = 80; document.write( "Name: " + student.name + "<br>" + "Age: " + student.age + "<br>" + "City: " + student.city + "<br>" + "Marks: " + student.marks ) console.log(student); </script> </body> </html>

使用assign ()方法

在JavaScript中,assign()是一种内置方法。使用assign()方法,我们可以为现有对象分配或添加新值,也可以在不更改现有对象值的情况下创建新对象。

语法

Object.assign(target,source);

在 JavaScript 中,assign(target, source) 方法接受两个参数,第一个参数是目标,这通常意味着我们可以定位现有对象,也可以将空对象放在目标的位置,因此它将创建一个新对象而不更改现有对象。

source 表示我们想要分配对象的属性。

示例 1

让我们了解 assign() 方法如何在 JavaScript 中向对象添加新元素而不更改现有对象。

Object.assign({},objectname,{property: value});

在示例中,我们使用 assign() 方法向现有对象添加新元素。为此,我们使用了一个空的目标位置并创建一个新对象,因此它不会改变现有的对象值。

<!DOCTYPE html> <html lang="en"> <head> <title>Add Element in an Object</title> </head> <body> <script> var book = { name: 'English', price: 250, } var newobj = Object.assign({}, book, {publishyear : 2015}); document.write( "Name: " + newobj.name + "<br>" + "Price: " + newobj.price + "<br> " + "Publish year: " + newobj.publishyear ) </script> </body> </html>

示例 2

在此示例中,我们将通过修改现有对象来了解assign()方法的工作原理。

Object.assign(objectname,{prooerty:value});

在程序中,我们将assign方法中的目标参数作为现有对象名称给出,以便它也会更改现有对象值。让我们看看下面的示例是如何发生的 -

<!DOCTYPE html> <html lang="en"> <head> <title>Add Element in an Object</title> </head> <body> <script> var book = { name: 'English', price: 250, } var newobj = Object.assign(book,{publishyear : 2015}); document.write( "Name: " + newobj.name + "<br>" + "Price: " + newobj.price + "<br> " + "Publish year: " + newobj.publishyear ) </script> </body> </html>

使用方括号 []

使用方括号 []: 在 JavaScript 中,我们可以使用 [] 括号将元素添加到对象。这是向 JavaScript 对象添加元素的另一种方法。

let obj = {};
obj[property] = value;

示例

在下面的示例程序中,我们使用方括号 [] 来获取任何特定索引中的元素数组。我们也可以将元素添加到数组中。

<!DOCTYPE html> <html lang="en"> <head> <title>Add Element in an Object</title> </head> <body> <script> var student = { name: 'abc', age: 20, } student['city'] = 'Hyderabad'; document.write( "Name: " + student.name + "<br>" + "Age: " + student.age + "<br>" + "City: " + student.city ) console.log(student); </script> </body> <html>

相关文章