【JS】js给对象动态添加、设置、删除属性名和属性值

这篇具有很好参考价值的文章主要介绍了【JS】js给对象动态添加、设置、删除属性名和属性值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 访问对象属性

js中访问对象属性一共有两种方法:点获取法和方括号获取法。

let user = {     // 一个对象
  name: "John",  // 键 "name",值 "John"
  age: 30,        // 键 "age",值 30。列表中的最后一个属性应以逗号结尾:便于我们添加、删除和移动属性
};
  1. 使用点符号访问属性值 alert( user.name ); // John
  2. 使用方括号访问属性值 alert( user[name]); // John

注意: 如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗?
简短的回答是:“有特别的顺序”:整数属性会被进行排序,其他属性则按照创建的顺序显示。

2. 删除对象属性

使用delete关键字删除对象属性

delete user.age;
delete user[age];

3. 动态设置属性

最常用的对象属性获取方法是点获取法。
但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不方便了,尤其是我们不知道属性名的时候更麻烦。这时候,方括号获取法就派上用场了。

let order={
    id:1,
    name:'xxxx',
}
// 如果是直接给新属性赋值
order['logisticsNo']='xxxx';
 
// 如果添加的属性为[],则可以先创建属性值为空数组
order['logisticsNo']=[];
order['logisticsNo'].push(data); //注意数组才有push,不然会报错
 
// 也可以使用变量名
let key='logisticsNo';
order[key]=[];
order[key].push(data);

计算属性

当创建一个对象时,我们可以在对象字面量中使用方括号。这叫做 计算属性

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

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

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

计算属性的含义很简单:[fruit] 含义是属性名应该从 fruit 变量中获取。

所以,如果一个用户输入 “apple”,bag 将变为 {apple: 5}。

本质上,这跟下面的语法效果相同:

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

// 从 fruit 变量中获取值
bag[fruit] = 5;

我们可以在方括号中使用更复杂的表达式:

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

属性存在判断: “in” 操作符

相比于其他语言,JavaScript 的对象有一个需要注意的特性:能够被访问任何属性。即使属性不存在也不会报错!

读取不存在的属性只会得到 undefined。所以我们可以很容易地判断一个属性是否存在:

let user = {};

alert( user.noSuchProperty === undefined ); // true 意思是没有这个属性

in 的左边必须是 属性名。通常是一个带引号的字符串。

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

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

推荐直接使用in来判断对象的属性是否存在。文章来源地址https://www.toymoban.com/news/detail-412461.html

“for…in” 循环

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. 检查空对象
function isEmpty(obj) {
  for (let key in obj) {
    // 如果进到循环里面,说明有属性。
    return false;
  }
  return true;
}
  1. 对象属性求和
let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
};

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

alert(sum); // 390
  1. 将数值属性值都乘以 2
// 在调用之前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 调用函数之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

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

到了这里,关于【JS】js给对象动态添加、设置、删除属性名和属性值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月08日
    浏览(54)
  • vue.js中如何给元素动态添加属性?

    由于已经在一个对象中有属性,可以直接将它传递给v-bind;如下例子

    2024年02月14日
    浏览(63)
  • js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法

    js之删除对象属性的三种方法 判断对象中是否有某一属性的四种方法 示例 1、基础版 2、进阶版 1、删除一个对象上的属性 1.1、delete 语法 delete 对象.属性名 1.2、es6之解构赋值 1.3、es6之反射 语法 Reflect.deleteProperty(对象,属性名) 2、判断对象中是否有某一属性的四种方法 2.1、

    2024年02月13日
    浏览(51)
  • TS 对象,为对象动态添加属性

    TypeScript 对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等,如下实例: 如果我们使用以上的方法定义对象是无法做到为对象动态添加属性 以上代码会报错: 定义一个包含数组属性的接口,让对象实现该接口 方法一: 方法二:

    2024年02月11日
    浏览(39)
  • JS数组删除指定下标元素 JS删除对象指定元素

    一、JS数组删除指定下标元素 splice方法——Array.splice(index,n) 参数语义化理解:删除以下标index为起点的n个元素。(之后的元素会往前移动) 注意:splice会直接改变原数组  参考:JS数组删除指定下标元素_大浩籽的博客-CSDN博客_js数组删除指定下标元素 二、JS删除对象指定元素 参

    2024年02月13日
    浏览(44)
  • js对象里面添加对象

    实际工作学习中我们经常会遇到需要 将一个对象添加到另一个对象中 去, 在js对象里面添加对象有三种方式: 直接添加,Object.assign() ,展开运算符(...) 1. 直接添加: 2.Object.assign() 3. es6新增的展开运算符(...) 需要 注意 的是,使用Object.assign()和展开运算符(...),重复添

    2024年02月11日
    浏览(66)
  • js获取对象属性值的方法

    场景:已知对象的某属性,我们需要获取对象中的属性值 js获取对象属性值的方法 通过 . 获取 通过 [ ] 获取 接下来介绍一下两种方法的不同点 [ ]运算符可以用 数字 作为属性名,点运算符不能 [ ]运算符可以用 变量 作为属性名,点运算符不能 ps: 用变量key获取对象中的属性

    2024年02月02日
    浏览(47)
  • js对象获取属性的方法(.和[]方式)

    js对象获取属性有两种方法:1.通过.的方式  2. 通过[]方式 // 通过.方式获取属性值,key是静态的 var aa = {name: \\\"zhang\\\", age: 18}; console.log(aa.name);   // 通过[]获取属性值, key是动态的,可以是字符串,或者数字的形式 var bb = {\\\"apple\\\": 3, \\\"pear\\\": 2} var cc = {1: \\\"number1\\\", 2: \\\"number2\\\"} console.log(b

    2024年02月01日
    浏览(42)
  • js中遍历对象数组并获取对象相应的属性值

    JavaScript中遍历对象数组的方法有很多种。以下是常见的四种常见的方法: for ​循环, for...of ​循环, forEach ​方法和 map ​方法,在遍历的同时,通过访问对象的属性来获取相应的值。 ​ for ​循环: ​ for...of ​循环: ​ forEach ​方法: ​ map ​方法(通常用于创建一个

    2023年04月25日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包