精华内容
下载资源
问答
  • 对象.属性名称 对象[属性名称]
    • 对象.属性名称
    • 对象[属性名称]

    使用第二种可以实现动态获取数据;

    展开全文
  • JS操作对象属性(获取、添加、删除、修改对象属性) 属性也称为名值对,包括属性名和属性值。属性名可以是包含空字符串在内的任意字符串,一个对象中不能存在两个同名的属性。属性值可以是任意类型的数据。 1. 直接...

    JS操作对象属性(获取、添加、删除、修改对象属性)

    属性也称为名值对,包括属性名和属性值。属性名可以是包含空字符串在内的任意字符串,一个对象中不能存在两个同名的属性。属性值可以是任意类型的数据。

    1. 直接量定义
    在对象直接量中,属性名与属性值之间通过冒号分隔,冒号左侧是属性名,右侧是属性值,名值对(属性)之间通过逗号分隔。
    [示例1]
    在下面示例中,使用直接量方法定义对象 obj,然后添加了两个成员,一个是属性,另一个是方法。

    var obj = {
        x : 1,
        y : function () {
            return this.x + this.x;
        }
    }
    

    2. 点语法定义
    示例2
    通过点语法,可以在构造函数内或者对象外添加属性。

    var obj = {};
    obj.x = 1;
    obj.y = function () {
        return this.x + this.x;
    }
    

    3. 使用 Object.defineProperty
    使用 Object.defineProperty() 函数可以为对象添加属性,或者修改现有属性。如果指定的属性名在对象中不存在,则执行添加操作;如果在对象中存在同名属性,则执行修改操作。

    具体用法如下:

    Object.defineProperty(object, propertyname, descriptor);

    参数说明如下:
    object:指定要添加或修改属性的对象,可以是 JavaScript 对象或者 DOM 对象。
    propertyname:表示属性名的字符串。
    descriptor:定义属性的描述符,包括对数据属性或访问器属性。

    Object.defineProperty 返回值为已修改的对象。
    示例3
    下面示例先定义一个对象直接量 obj,然后使用 Object.defineProperty() 函数为 obj 对象定义属性,属性名为 x,值为 1,可写、可枚举、可修改特性。

    var obj = {};
    Object.defineProperty(obj, "x", {
        value : 1,
        writable : true,
        enumerable : true,
        configurable : true
    });
    console.log(obj.x);  //1
    

    4. 使用 Object.defineProperties
    使用 Object.defineProperties() 函数可以一次定义多个属性。具体用法如下:

    object.defineProperties(object, descriptors);

    参数说明如下:
    object:对其添加或修改属性的对象,可以是本地对象或 DOM 对象。
    descriptors:包含一个或多个描述符对象,每个描述符对象描述一个数据属性或访问器属性。
    示例4
    在下面示例中,使用 Object.defineProperties() 函数将数据属性和访问器属性添加到对象 obj 上。

    var obj = {};
    Object.defineProperties(obj, {
        x : {  //定义属性x
            value : 1,
            writable : true,  //可写
        },
        y : {  //定义属性y
            set : function (x) {  //设置访问器属性
                this.x = x;  //改写obj对象的x属性的值
            },
            get : function () {  //设置访问器
                return this.x;
            },
        }
    });
    obj.y = 10;
    console.log(obj.x);  //10
    

    读写属性

    1. 使用点语法
    使用点语法可以快速读写对象属性,点语法左侧是引用对象的变量,右侧是属性名。
    示例1
    下面示例定义对象 obj,包含属性 x,然后使用点语法读取属性 x 的值。

    var obj = {  //定义对象
        x : 1
    }
    console.log(obj.x);  //访问对象属性x,返回1
    obj.x = 2;  //重写属性值
    console.log(obj.x);  //访问对象属性x,返回2
    

    2. 使用中括号语法
    从结构上分析,对象与数组相似,因此可以使用中括号来读写对象属性。
    示例2
    针对上面示例,可以使用中括号来读写对象属性。

    console.log(obj["x"]);  //2
    obj["x"] = 3;  //重写属性值
    console.log(obj["x"]);  //3
    

    【注意事项】
    在中括号语法中,必须以字符串形式指定属性名,不能使用标识符。
    中括号内可以使用字符串,也可以使用字符型表达式,即只要表达式的值为字符串即可。
    示例3
    下面示例使用 for/in 遍历对象的可枚举属性,并读取它们的值,然后重写属性值。

    for (var i in obj) {
        console.log(obj[i]);
        obj[i] = obj[i] + obj[i];
        console.log(obj[i]);
    }
    

    在上面代码中,中括号中的表达式 i 是一个变量,其返回值为 for/in 遍历对象时枚举的每个属性名。
    3. 使用 Object.getOwnPropertyNames
    使用 Object.getOwnPropertyNames() 函数能够返回指定对象私有属性的名称。私有属性是指用户在本地定义的属性,而不是继承的原型属性。具体用法如下:

    Object.getOwnPropertyNames(object);

    参数 object 表示一个对象,返回值为一个数组,其中包含所有私有属性的名称。其中包括可枚举的和不可枚举的属性和方法的名称。如果仅返回可枚举的属性和方法的名称,应该使用 Object.keys() 函数。
    示例4
    在下面示例中定义一个对象,该对象包含三个属性,然后使用 getOwnPropertyNames 获取该对象的私有属性名称。

    var obj = {x : 1, y : 2, z : 3};
    var arr = Object.getOwnPropertyNames(obj);
    console.log(arr);  //返回属性名:x,yz
    
    1. 使用 Object.keys
      使用 Object.keys() 函数仅能获取可枚举的私有属性名称。具体用法如下:

    Object.keys(object);

    参数 object 表示指定的对象,可以是 JavaScript 对象或 DOM 对象。返回值是一个数组,其中包含对象的可枚举属性名称。
    5. Object.getOwnPropertyDescriptor
    使用 Object.getOwnPropertyDescriptor() 函数能够获取对象属性的描述符。具体用法如下:

    Object.getOwnPropertyDescriptor(object, propertyname);

    参数 object 表示指定的对象,propertyname 表示属性的名称。返回值为属性的描述符对象。
    示例5
    在下面示例中定义一个对象 obj,包含 3 个属性,然后使用 Object.getOwnPropertyDescriptor() 函数获取属性 x 的数据属性描述符,并使用该描述符将属性 x 设置为只读。最后,调用 Object.defineProperty() 函数,使用数据属性描述符修改属性 x 的特性。遍历修改后的对象,可以发现只读属性 writable 为 false。

    var obj = {x : 1, y : 2, z : 3};  //定义对象
    var des = Object.getOwnPropertyDescriptor(obj, "x");  //获取属性x的数据属性描述符
    for (var prop in des) {  //遍历属性描述符对象
        console.log(prop + ':' + des[prop]);  //显示特性值
    }
    des.writable = false;  //重写特性,不允许修改属性
    des.value = 100;  //重写属性值
    
    Object.defineProperty(obj, "x", des);  //使用修改后的数据属性描述符覆盖属性x
    var des = Object.getOwnPropertyDescriptor(obj, "x");  //重新获取属性x的数据属性描述符
    for (var prop in des) {  //遍历属性描述符对象
        console.log(prop + ':' + des[prop]);  //显示特性值
    }
    

    一旦为未命名的属性赋值后,对象就会自动定义该属性的名称,在任何时候和位置为该属性赋值,都不需要定义属性,而只会重新设置它的值。如果读取未定义的属性,则返回值都是 undefined。

    删除属性

    使用 delete 运算符可以删除对象的属性。
    示例
    下面示例使用 delete 运算符删除指定属性。

    var obj = {x : 1};  //定义对象
    delete obj.x;  //删除对象的属性x
    console.log(obj.x);  //返回undefined
    

    当删除对象属性之后,不是将该属性值设置为 undefined,而是从对象中彻底清除属性。如果使用 for/in 语句枚举对象属性,只能枚举属性值为 undefined 的属性,但不会枚举已删除属性。
    使用方法
    方法也是函数,当函数被赋值给对象的属性,就被称为方法。方法的使用与函数是相同的,唯一的不同点是在方法内常用 this 引用调用对象,其实在普通函数内也有 this,只不过不常用。

    使用点语法或中括号可以访问方法,使用小括号可以激活方法。
    示例1
    与普通函数用法一样,可以在调用方法时传递参数,也可以设计返回值。

    var obj = {};
    obj.f = function (n) {  //定义对象的方法
        return 10 * n;
    }
    var n = obj.f(5);  //调用方法,设置参数为5
    console.log(n);  //返回值50
    

    示例2
    在方法内 this 总是指向当前调用对象。在下面示例中,当在不同运行环境中调用对象 obj 的方法 f() 时,该方法的 this 指向时不同的。

    var obj = {  //定义对象
        f : function () {  //定义对象的方法
            console.log(this);  //访问当前对象
        }
    }
    obj.f();  //此时this指向对象obj
    var f1 = obj.f;  //引用对象obj的方法f
    f1();  //此时this指向对象window
    
    展开全文
  • Js 修改对象数组里的对象属性

    千次阅读 2021-02-04 15:36:05
    // array为数组,old_name为修改属性名,new_name为修改属性名 JSON.parse(JSON.stringify(array).replace(/old_name/g, 'new_name')) 解释: JSON.stringify() 把json对象 转成 json字符串 使用正则的 ...

    假设,我们从后端取回来的Json对象数据中,有某些属性名不是我们想要的,就需要给它们重新命名。

    方法:
    // array为数组,old_name为修改前属性名,new_name为修改后属性名
    JSON.parse(JSON.stringify(array).replace(/old_name/g, 'new_name')) 
    
    解释:
    1. JSON.stringify() 把json对象 转成 json字符串
    2. 使用正则的 replace() 方法替换属性名
    3. JSON.parse() 再把json字符串 转成 json对象

    ·

    如需修改多个属性:

    可以多次调用replace方法

    JSON.parse(JSON.stringify(array).replace(/old_name1/g, 'new_name1').replace(/old_name2/g, 'new_name2').replace(/old_name3/g, 'new_name3'))
    
    展开全文
  • js高效修改对象数组里的对象属性

    千次阅读 2019-04-18 10:44:31
    一般修改对象数组的对象属性名,最简便的就是通过遍历对象数组的方法进行修改,但是用这个方法,如果处理的数据量很大,它的执行效率是非常低的。下面介绍一个更高效的方法,即通过正则的方法进行过滤修改。 JSON...

    有些时候,我们前端从后端拿过来的JSON对象数据,某些字段并不是前端想要的,需要对一些字段名进行重命名。一般修改对象数组的对象属性名,最简便的就是通过遍历对象数组的方法进行修改,但是用这个方法,如果处理的数据量很大,它的执行效率是非常低的。下面介绍一个更高效的方法,即通过正则的方法进行过滤修改。
     

    JSON.parse(JSON.stringify(data).replace(/title/g, 'name'))    //data为数组,title为修改前,name为修改后
    

    解释:1)JSON.stringify()把json对象转成json字符串;

              2)使用正则的replace()方法替换属性名;

              3)JSON.parse()把json字符串又转成json对象。

    展开全文
  • js修改数组对象里的对象属性

    千次阅读 2020-12-08 11:03:20
    js修改数组对象里的对象属性名 有时候前端请求接口返回的数据,并不是我们想要的数据格式,一般我们会使用map等方法遍历修改属性名,但如果数据量很大或者数组对象的嵌套复杂,这种方法容易降低效率,下面我们使用...
  • JS Hook对象属性

    2020-06-23 00:39:57
    JS Hook对象属性JS Hook对象属性 JS Hook对象属性 我们要想Hook对象属性,需要用到Object.defineProperties或者Object.defineProperty方法,它可以直接在一个对象上修改原有属性或者定义新的属性,如下所示。 //...
  • const json = JSON.parse(JSON.stringify(options).replace(/name/g,“label”)); 1、options是需要更改属性对象 2、replace(/name/g,“label”) ,将对象里所有属性为name的都修改成label
  • 即数据属性限制使用者对对象属性数据值的读取和写入权限,有四种特性 (1)[[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中...
  • 一般修改对象数组的对象属性名,最简便的就是通过遍历对象数组的方法进行修改,但是用这个方法,如果处理的数据量很大,它的执行效率是非常低的。下面介绍一个更高效的方法,即通过正则的方法进行过滤修改。 JSON....
  • js修改对象中的数组时视图不更新 解决方案: 使用this.$set方法: this.tableData[i] = { ... //先去修改数组的值,再用this.$set去更新视图 } this.$set(this.tableData,i,this.tableData[i]) //this.$set(数组,...
  • JS遍历对象修改属性

    千次阅读 2021-01-05 13:57:45
    根据接口返回数据中number属性值,对数据进行截取,并改变属性名. 下面是需要处理的数据 let data = {  value: [  {date: "2021-01", thumb: "1", index: "1"},  {date: "2021-02", thumb: "2", index: "2"},  {...
  • js修改数组对象属性

    千次阅读 2020-11-02 15:54:19
    我是在用mui框架的picker选择器时,`发现添加的数组不显示,仔细看才发现好像数组对象有固定的属性名称value和text,如下所示 picker.setData([{value:'zz',text:'智子'}]); 我从后台拿到的数组是这样的 ...
  • 在做东钿业务系统的时候,经常碰到写很多重复的ajax对接,于是就想封装一个方法,但是接收data的字段名不一样,所以就需要用到动态对象属性名这个写法了。其实很简单。直接看一下代码吧。 转载于:...
  • JavaScript prototype属性修改对象

    千次阅读 2010-09-02 15:26:00
    JavaScript prototype属性 定义和用法prototype 属性使您有能力向对象添加属性和方法。语法object.prototype.name=value实例在本例中,我们将展示如何使用 prototype 属性来向对象添加属性:输出:20000===========...
  • JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。 例如首先使用类Object来创建一个空对象user: var user = new Object(); 1.添加属性 这时user对象没有任何属性...
  • 在上一篇关于《JavaScript中几个操作元素对象的函数方法》文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象。今天记录两个函数可以用来获取和修改获取的元素对象属性的值。...
  • js修改数组对象属性(key)名

    万次阅读 2019-03-15 15:46:40
    例如:把如下data1的key名称修改成data2中的key名称 data1: [ { appName: '应用1', capacity: 233456 }, { title: '应用2', key: 124535 }] data2: [ { name: '应用1', value: 233456 }, { name: '应用2', ...
  • 修改对象属性值 List<LibraryDO> lib = list.stream().map(p -> {p.setId(p.getId() + 1);return p;}).collect(Collectors.toList()) /** * LibraryDO 对象 */ public class LibraryDO implements Serializable { /...
  • 本篇主要介绍JS对象属性,包括:属性的分类、访问方式、检测属性、遍历属性以及属性特性等内容。 目录 1. 介绍:描述属性的命名方式、查找路径以及分类 2. 属性的访问方式:介绍’.’访问方式、’[ ]’中括号...
  • JS修改class属性

    万次阅读 2019-05-13 00:43:11
    DOM里的每个节点上都有一个classList对象,既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁,替换...
  • 在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,...JavaScript中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。
  • js改变对象属性名方法

    千次阅读 2019-04-19 11:33:56
    根据接口返回数据中number属性值,对数据进行截取,并改变属性名.直接上码: 下面是需要处理的数据 let data={"minValue":7400, "maxValue":"18500", "value":{ "value":[ ...
  • 深入 JS 对象属性

    千次阅读 2019-09-10 07:15:00
    译者:前端小智作者:Dr.Axe l来源:2ality 阿里云最近在做活动,低至2折,有兴趣可以看看: ... ...为了保证的可读性,本文采用意译...属性决定JS对象的状态,本文章主要分析这些属性是如何工作的。 JS几种不同...
  • js对象属性除了包含名字和值之外,也包含一些描述它们可写,可枚举,可配置的特性,ECMAScript5提供了一些API方便我们去配置和修改这些属性特性; js对象属性主要有两种,一种是存储存器属性,一种是数据属性;...
  • JQuery修改对象属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名");修改属性值的结构为:$(obj).attr("属性名", "属性值");  &...
  • js 更改对象属性

    2020-09-16 10:02:04
    var obj = [ { "name":"zhangsan", "age":20 }, { "name":"lisi", "age":22 } ] var newObj = JSON.parse(JSON.stringify(obj).replace(/name/g, 'title')) 如果value和key同名,有问题 ... item ...
  • js 对象属性名为变量

    千次阅读 2016-11-02 12:21:55
    js 对象属性名为变量
  • 移动元素,在changepic直接传入dom对象,在move_to函数中直接修改传入的dom对象属性,但是修改属性之后页面中的元素不生效,找了半天也没找到原因,希望能有人帮我一下啊! js代码: ``` /*********...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,051
精华内容 54,820
关键字:

js修改对象的属性名称