快捷導(dǎo)航

js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值實(shí)例代碼

更新時(shí)間：2022年11月25日 09:50:55 作者：卸載引擎

由于項(xiàng)目需要常常會(huì)遇到為某一個(gè)對(duì)象動(dòng)態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關(guān)于js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 訪問對(duì)象屬性

js中訪問對(duì)象屬性一共有兩種方法：點(diǎn)獲取法和方括號(hào)獲取法。

let user = {     // 一個(gè)對(duì)象
  name: "John",  // 鍵 "name"，值 "John"
  age: 30,        // 鍵 "age"，值 30。列表中的最后一個(gè)屬性應(yīng)以逗號(hào)結(jié)尾：便于我們添加、刪除和移動(dòng)屬性
};

使用點(diǎn)符號(hào)訪問屬性值 alert( user.name ); // John
使用方括號(hào)訪問屬性值 alert( user[name]); // John

注意: 如果我們遍歷一個(gè)對(duì)象，我們獲取屬性的順序是和屬性添加時(shí)的順序相同嗎？

簡短的回答是：“有特別的順序”：整數(shù)屬性會(huì)被進(jìn)行排序，其他屬性則按照創(chuàng)建的順序顯示。

2. 刪除對(duì)象屬性

使用delete關(guān)鍵字刪除對(duì)象屬性

delete user.age;
delete user[age];

3. 動(dòng)態(tài)設(shè)置屬性

最常用的對(duì)象屬性獲取方法是點(diǎn)獲取法。

但是當(dāng)我們遇到需要給對(duì)象動(dòng)態(tài)添加屬性和屬性值時(shí)，點(diǎn)獲取法好像就不方便了，尤其是我們不知道屬性名的時(shí)候更麻煩。這時(shí)候，方括號(hào)獲取法就派上用場(chǎng)了。

let order={
    id:1,
    name:'xxxx',
}
// 如果是直接給新屬性賦值
order['logisticsNo']='xxxx';
 
// 如果添加的屬性為[],則可以先創(chuàng)建屬性值為空數(shù)組
order['logisticsNo']=[];
order['logisticsNo'].push(data); //注意數(shù)組才有push,不然會(huì)報(bào)錯(cuò)
 
// 也可以使用變量名
let key='logisticsNo';
order[key]=[];
order[key].push(data);

計(jì)算屬性

當(dāng)創(chuàng)建一個(gè)對(duì)象時(shí)，我們可以在對(duì)象字面量中使用方括號(hào)。這叫做 計(jì)算屬性。

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 屬性名是從 fruit 變量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

計(jì)算屬性的含義很簡單：[fruit] 含義是屬性名應(yīng)該從 fruit 變量中獲取。

所以，如果一個(gè)用戶輸入 “apple”，bag 將變?yōu)?{apple: 5}。

本質(zhì)上，這跟下面的語法效果相同：

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// 從 fruit 變量中獲取值
bag[fruit] = 5;

我們可以在方括號(hào)中使用更復(fù)雜的表達(dá)式：

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

屬性存在判斷: “in” 操作符

相比于其他語言，JavaScript 的對(duì)象有一個(gè)需要注意的特性：能夠被訪問任何屬性。即使屬性不存在也不會(huì)報(bào)錯(cuò)！

讀取不存在的屬性只會(huì)得到 undefined。所以我們可以很容易地判斷一個(gè)屬性是否存在：

let user = {};

alert( user.noSuchProperty === undefined ); // true 意思是沒有這個(gè)屬性

in 的左邊必須是屬性名。通常是一個(gè)帶引號(hào)的字符串。

let user = { name: "John", age: 30 };

alert( "age" in user ); // true，user.age 存在
alert( "blabla" in user ); // false，user.blabla 不存在。

推薦直接使用in來判斷對(duì)象的屬性是否存在。

“for…in” 循環(huán)

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 屬性鍵的值
  alert( user[key] ); // John, 30, true
}

1.檢查空對(duì)象

function isEmpty(obj) {
  for (let key in obj) {
    // 如果進(jìn)到循環(huán)里面，說明有屬性。
    return false;
  }
  return true;
}

2.對(duì)象屬性求和

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
};

let sum = 0;
for (let key in salaries) {
  sum += salaries[key];
}

alert(sum); // 390

3.將數(shù)值屬性值都乘以 2

// 在調(diào)用之前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 調(diào)用函數(shù)之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
      obj[key] *= 2;
    }
  }
}

補(bǔ)充：括號(hào)表示法

這種方式類似于數(shù)組的寫法

const student = {
	name: '張三',
	age:  18,
	action: function eat () {alert('我喜歡吃')}
}

// 括號(hào)表示法（屬性值要加引號(hào)）
student['name'];
student['age'];
student['action']();	// 調(diào)用方法需要在外面加括號(hào)

另：這種方法個(gè)優(yōu)點(diǎn)：

我們想把傳遞過來的數(shù)據(jù)當(dāng)做對(duì)象字面量的屬性名可以用括號(hào)表示法，所以括號(hào)表示發(fā)可以動(dòng)態(tài)的添加屬性名和內(nèi)容。

<input type="text" value="address">
		
<script>
	const student ={};
	let ipt = document.querySelector('input');
	let a= ipt.value;
	
	// 用點(diǎn)表示法不能將輸入框中的值當(dāng)做屬性名來設(shè)置
	student.a = '北京';	// 存入的是a: '北京'
	// 用括號(hào)表示法可以
	student[a] = '北京'; // 存入的是	address: '北京'
	// ↑動(dòng)態(tài)的將輸入框中的內(nèi)容作為這個(gè)對(duì)象的值
</script>

總結(jié)

到此這篇關(guān)于js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值的文章就介紹到這了,更多相關(guān)js對(duì)象動(dòng)態(tài)添加設(shè)置刪除屬性名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: