如何向 JavaScript 对象添加元素?
在 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>