精华内容
下载资源
问答
  • JS修改对象属性

    千次阅读 2020-09-18 10:06:07
    当对象以数字为属性名时,其实就是一个数组,用[’’] var foo={1:'a',2:'b'} foo['1']='c' console.log(foo) // { 1: "c", 2: "b" } 当对象以字符为属性名时,直接用.获取属性值 ...可以存取对象属性值

    当对象以数字为属性名时,其实就是一个数组,用[’’]

    var foo={1:'a',2:'b'}
    foo['1']='c'
    console.log(foo)  // { 1: "c", 2: "b" }
    

    当对象以字符为属性名时,直接用.获取属性值

    var bar = {a:1,b:2,c:3}
    bar.a= 'hello';
    console.log(bar)  //{ a: "hello", b: 2, c: 3 }
    

    其中就是[]与.的区别,中括号运算符[]可以存取数组元素值,使用点运算符.可以存取对象属性值。

    搜了一波有的用Object.defineProperty,有的解构重新创建了一个新对象obj,然后用obj.[‘Property’]=val,返回这个对象

    展开全文
  • 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修改标签属性值

    万次阅读 2017-12-02 23:09:31
    获取和设置属性 getAttribute object.getAttribute(attribute) 注:getAttribute方法不属于document对象,它只能通过元素节点对象调用。 setAttribute object.setAttribute(attribute,value) 例子: var ...

    获取和设置属性
    getAttribute
    object.getAttribute(attribute)
    注:getAttribute方法不属于document对象,它只能通过元素节点对象调用。

    setAttribute
    object.setAttribute(attribute,value)

    例子:
    var shopping = document.getElementById("purchases");
    shopping.setAttribute("title","a list of goods");


    参考文章引自脚本之家:http://www.jb51.net/article/47040.htm

    还有一种W3cschool,如图:



    另一种还是W3cschool的:



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

    万次阅读 2019-07-13 17:14:41
    数据类型如下: var dataType=[{"type":"add",state":false},{"type":"update","state":false},{"type":"del","state":...分别修改: for(var i=0;i<dataType.length;i++){ if(dataType[i].type=="add"){ ...

    数据类型如下:

    var dataType=[{"type":"add",state":false},{"type":"update","state":false},{"type":"del","state":false}];

    分别修改:

    for(var i=0;i<dataType.length;i++){
        if(dataType[i].type=="add"){
          dataType[i].state=true;
        }
        if(dataType[i].type=="update"){
          dataType[i].state=true;
          
        }
         if(dataType[i].type=="del"){
          dataType[i].state=true;
        }
        //console.log("Btns.operate======>"+Btns.operate);
        if(dataType[i].type=="onlyLeaf"){
          dataType[i].state=true;
        }
      }

    enen,就这样

    展开全文
  • 本文实例讲述了js简单遍历获取对象中的属性值的方法。分享给大家供大家参考,具体如下:www.jb51.net JS遍历json属性值// js获取对象中的属性值var slideArray = { slides: [{ "imgsrc": "a.jpg", "url": "", "alt":...
  • 如果对象的键-都不可枚举,那么将返回由键组成的数组。这是合理的,因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键:let simpleColo...
  • 如果对象的键-都不可枚举,那么将返回由键组成的数组。这是合理的,因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键:let simpleColor...
  • js修改对象中的数组时视图不更新 解决方案: 使用this.$set方法: this.tableData[i] = { ... //先去修改数组的,再用this.$set去更新视图 } this.$set(this.tableData,i,this.tableData[i]) //this.$set(数组,...
  • Javascript中的数据值有两大类:基本类型的数据值 ,引用类型的数据值。 基本类型的数据值:null、undefined...当原型对象属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象属性值发生变化...
  • 来源 |https://segmentfault.com/a/1190000016155973...JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍...
  • 根据接口返回数据中number属性值,对数据进行截取,并改变属性名. 下面是需要处理的数据 let data = {  value: [  {date: "2021-01", thumb: "1", index: "1"},  {date: "2021-02", thumb: "2", index: "2"},  {...
  • 来源 | ...JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经...
  • 最近项目在使用vue,遇到几次修改对象属性后,页面并不重新渲染,场景如下:HTML页面如下:{{ item.name}}编辑js部分如下:export default {data() {return {tableData:[{id:0,name:"lili",red:false,tip:false}...
  • 属性的特性: writable: true // 可写 是否可设置该属性 enumerable: true // 可枚举 for/in是否可以获得该 configurable: true // 是否可以删除属性修改属性的特性 // 在node中即使是fal...
  • 如果要修改对象的默认特性,必须使用Object.defineProperty方法,它接收三个参数:属性所在的对象、属性的名字、一个描述符对象。下面是MDN上面的解释:数据属性:数据属性包含一个数据的位置,在这个位置可以读取...
  • 在前端开发中经常需要给某个对象添加一个属性值或者修改某一属性值就可以用this.$set()方法 data(){ return{ test:{ cur:0 } } } js methods:{ click(){ this.$set(this.test,'cur',this.test....
  • js对象属性

    2018-05-25 02:47:23
    一、对象属性的类型 数据属性 访问器属性 二、对象属性的特性 数据属性的四个特性: 1. [[Configurable]]:默认为true,表示...3. [[Writable]]:默认为true,表示能否修改属性的 4. [[Value]]:默认为undefin...
  • vue修改对象属性值后页面不重新渲染

    万次阅读 多人点赞 2017-12-15 16:20:23
    最近项目在使用vue,遇到几次修改对象属性后,页面并不重新渲染,场景如下: HTML页面如下: {{ item.name}} 编辑 js部分如下:
  • JS修改class属性

    千次阅读 2019-05-13 00:43:11
    DOM里的每个节点上都有一个classList对象,既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁,替换...
  • 我的需求是想把arr1和arr2添加到resultArr 中,并且给arr2分别添加index属性为arr1的idnex。代码如下: const arr1 = [{ id: 1, name: 'a', index: 0 }, { id: 2, name: 'b', index: 1 }]; const arr2 = [{ id: 3,...
  • js对象属性的特性

    2016-02-13 16:02:00
    数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值。 4个描述的行为特性: writable 表示能否修改属性的值。默认为true Enumerable 表示能否过过for in...读取属性值的时候,从这个位置读取...
  • js dom操作 js 获取元素节点 一份document就是一棵节点树 // 1. 根据元素id名称获取dom, return→对象 document.getElementById('submit_btn') // 2. 根据元素标签名称获取dom, return→对象数组 document....
  • ES5中对象属性可以分为数据属性和访问器属性 数据属性 数据属性包含以下4个特性: [[configurable]]:表示属性是否可以被delete,是否可以被重新修改,或者是否可以被修改成访问器属性 [[enumerable]]:是否可...
  • 对象定义var obj = new Object();或var obj = {};添加属性obj.name = 'tom';obj.ses='man';添加方法obj.say = function(){alert('22222');...修改属性obj.name='jack';删除属性obj.name = undefined;obj....
  • 本文主要讲述了:JS对象声明的方法JS对象属性的操作(增删改查)JS对象的遍历方法以及一些个小区别对象是JavaScript的核心概念,也是重要的数据类型,他是JavaScript的其中数据类型(string,number,bool,symbol,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 802
精华内容 320
关键字:

js修改对象属性值