精华内容
下载资源
问答
  • 而在对对象的数据处理中,操作最频繁的是“数据引用”、“值的修改”、“获取关键字(属性)”。平时最烦的也是“获取关键字”,经常忘记怎么去获取,这里做一下整理。 既然要"获取关键字",那么得首先有.....

    转载地址https://www.cnblogs.com/donghuang/archive/2017/11/01/7765761.html

    平时在写的代码过程中,经常会遇到对对象Object的数据处理。而在对对象的数据处理中,操作最频繁的是“数据引用”、“值的修改”、“获取关键字(属性)”。平时最烦的也是“获取关键字”,经常忘记怎么去获取,这里做一下整理。

    既然要"获取关键字",那么得首先有一个对象才行。创建对象的方式很多,我自己惯用的方式有三种:

    1、通过原始构造函数 new Object();创建一个对象,然后赋值;

    var testObj= new Object();
    testObj.name = "shangguan";
    testObj.age= 25;
    testObj.action = function () {
        return this.name;
    }

    2、直接新建对象,不通过构造函数(而且直接新建速度比构造器还快一些!)

    var testObj={};
    testObj.name = "shangguan";
    testObj.age= 25;
    testObj.action = function () {
        return this.name;
    };

    3、重载构造器,让构造器在构造对象时按预定的属性构建。

     

    // 创建一个对象的构造方法
    function newObj(name, age) {
        this.name = name;
        this.age= age;
        this.action = function () {
            return this.name;
        }
    }
    // 创建一个对象
    var testObj= new newObj("shangguan", 25);

     

     

    1、对象内置属性方法:Object.keys();该方法返回一个数组,数组内包括对象内可枚举属性以及方法名称。数组中属性名的排列顺序和使用 for...in 遍历该对象时返回的顺序一致。

      // 通过调用Object.keys()方法,获取对象上已定义(可枚举)的属性和方法

      var keys= Object.keys(testObj);
      console.log(keys); // 输出 keys ["name", "age", "action"]

       

      注意:在ES5里,如果此方法的参数不是对象(而是一个原始值),那么它会抛出 TypeError。而在ES2015中,非对象的参数将被强制转换为一个对象。

      Object.keys("testObj");
      // TypeError: "testObj" is not an object (ES5 code)
      Object.keys("testObj");
      //["name", "age", "action"]              (ES2015 code)

    2、Object.getOwnPropertyNames():方法返回一个指定对象所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组

      该数组是 obj自身拥有的枚举或不可枚举属性名称字符串集合。 数组中枚举属性的顺序与通过 for...in 循环(或 Object.keys())迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

      var keys = Object.getOwnPropertyNames(testObj);
      console.log(keys);  // 输出 keys ["name", "age", "action"]

       

    3、当然除了以上两个外,还有最原始的 for...in 循环(估计是平时循环用的多了,反倒是这个不怎么用!)

      var keys =[];
      for(var i in testObj){
          keys.push(i);
      }
      console.log(keys);   // keys ["name", "age", "action"]

      

    下面通过一个实例,直观说明三者之间的区别:

     

    var testObj = Object.create({}, {
        getFoo: {
            value: function () {
                return this.foo;
            },
            enumerable: false
        }
    });
    testObj.name = "shangguan";
    testObj.age = 25;
    testObj.action = function(){
      return this.name;
    };
    function getKeys() {
        // 获取对象可枚举和不可枚举的属性
        console.log(Object.getOwnPropertyNames(testObj));   //输出:["getFoo", "name", "age", "action"]
        // 获取对象可枚举的属性
        console.log(Object.keys(testObj));  //输出:["name", "age", "action"]
        // 获取对象可枚举的属性
        for (var i in testObj) {
            console.log(i);     //输出 name,age,action
        }
        //返回直接定义在该对象上的可枚举属性,非继承。通过hasOwnProperty()方法可以将那些属性是对象自身(非继承)属性筛选出来,从而将不可枚举属性排除出去
        //obj.hasOwnProperty(prop): prop要检测的属性,字符串 名称或者 Symbol。     返回值:用来判断某个对象是否含有指定的属性 的Boolean值
        for (var i in testObj) {
            if(testObj.hasOwnProperty(i)) {
                console.log(i);
            }    //输出 name,age,action
        }
    }

     

      

      总结:如果只需要获取可枚举属性,那么Object.keys()for...in循环迭代即可(Object.getOwnPropertyNames()也可以获取到原型链上的可枚举属性,不过需要通过hasOwnProperty()方法过滤掉不可枚举属性)。

    展开全文
  • var a={"id":1,"name":"xiaocai"}; //添加属性 a.age=18; console.log(a); //结果:Object { id: 1, name...//修改属性 a.age="你猜"; console.log(a); //结果:Object { id: 1, name: "xiaocai", age: "我怎么知道"...
    var a={"id":1,"name":"xiaocai"};
    //添加属性
    a.age=18;
    console.log(a);
    //结果:Object { id: 1, name: "xiaocai", age: 18 }
    
    //修改属性
    a.age="你猜";
    console.log(a);
    //结果:Object { id: 1, name: "xiaocai", age: "我怎么知道" }
    
    delete a.age;
    console.log(a);
    //结果:Object { id: 1, name: "xiaocai" }
    
    总结:删除对象属性使用delete就可以了,删除哪个就delete哪个
    展开全文
  • js删除对象某一个属性

    千次阅读 2018-11-14 11:44:00
    var a={"id":1,"name":"danlis"}; //添加属性 a.age=18; console.log(a); ...//结果:Object { id: 1, ...//修改属性 a.age="我怎么知道"; //结果:Object { id: 1, name: "danlis", age: "我怎么知道" } //删除...
    var a={"id":1,"name":"danlis"};
    //添加属性
    a.age=18;
    console.log(a);
    //结果:Object { id: 1, name: "danlis", age: 18 }
    //修改属性
    a.age="我怎么知道";
    //结果:Object { id: 1, name: "danlis", age: "我怎么知道" }
    //删除属性
    delete a.age;
    //结果:Object { id: 1, name: "danlis" }
    

      

    转载于:https://www.cnblogs.com/guoliping/p/9957141.html

    展开全文
  • 对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。 具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该...
  • 浅比较概念:浅比较也称引用相等,在js中===是做浅比较,只检查左右两边是否是同一个对象的引用;{如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会...

    1fa2b2a3c92327bb9906991ab89789b0.png

    浅比较

    概念:浅比较也称引用相等,在js中===是做浅比较,只检查左右两边是否是同一个对象的引用;
    {a:1} === {a:1} // false
    const m = {a:1};
    const n = {a:1};
    m === n //false
    const m = {a:1};
    const n = m;
    m === n //true
    const m = {a:1};
    m === {a:1} //false;
    changeValue(params) {
      params.a = 2;
      return params;
    }
    const m = {a:1};
    const n = changeValue(m);
    m === n //true
    m //{a:2}
    n //{a:2}
    ps: 这里`changeValue`方法直接修改了传入的参数`params`这么做造成的后果是把  `m`的值也改变了
    因为javascript中基本类型是传值调用引用类型是传引用调用
    所以这种做法在`webstrom`中也会有警告尽量不要这么做;
    

    如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。

    这种引用只局限于对象,如果两个变量指向同一个原始类型的值。那么,变量这时都是值的拷贝。

    1 === 1 //true
    const m = 1;
    const n = 1;
    m === n //true
    const m = 1;
    const n = m;
    m === n //true
    changeValue(params) {
      params = params + 1;
      return params;
    }
    const m = 1;
    const n = changeValue(m);
    m === n //false
    m //1
    n //2
    

    深比较

    深比较也称原值相等,深比较是指检查两个对象的所有属性是否都相等,深比较需要以递归的方式遍历两个对象的所有属性,操作比较耗时,深比较不管这两个对象是不是同一对象的引用。
    javascript没有提供深比较的api,需要自己实现,网上有很多,具体查一下吧

    实现深比较:首先实现个深拷贝

    思路:

    1、传递进来的是函数时,不需要操作,直接返回即可
    因外执行环境栈中一个名字的函数只能有一个,如果我们自己在克隆一个会把原来的替换掉,这样做没有任何意思;
    2,传递的参数是基本的数据类型,不操作直接返回;
    3,传递的是对象类型时
    (1).正则对象:创建一个新实列存储当前正则返回即可(因为我们的目的是让当前的地址不一样即可)
    (2).日期对象创建一个日期实列存储当前日期,
    (3)普通对象,创建一个新的实列,循环存储当前的信息;
    function _cloneDeep(obj) {
    	// 传递进来的如果不是对象,则无需处理,直接返回原始的值即可(一般Symbol和Function也不会进行处理的)
    	if (obj === null) return null;
    	if (typeof obj !== "object") return obj;
    
    	// 过滤掉特殊的对象(正则对象或者日期对象):直接使用原始值创建当前类的一个新的实例即可,这样克隆后的是新的实例,但是值和之前一样
    	if (obj instanceof RegExp) return new RegExp(obj);
    	if (obj instanceof Date) return new Date(obj);
    
    	// 如果传递的是数组或者对象,我们需要创建一个新的数组或者对象,用来存储原始的数据
    	// obj.constructor 获取当前值的构造器(Array/Object)
    	let cloneObj = new obj.constructor;
    	for (let key in obj) {
    		// 循环原始数据中的每一项,把每一项赋值给新的对象
    		if (!obj.hasOwnProperty(key)) break;
    		cloneObj[key] = _cloneDeep(obj[key]);
    	}
    	return cloneObj;
    }
    
    

    2、深比较实现

    语法:let res = _assignDeep(obj1,obj2)

    思路:

    1.首先克隆一份obj1
    2.循环拿obj2中的每一项与克隆的obj1比较
    如果当前拿出这一项是对象数据类型 并且 克隆的obj1 中相同属性名对应的也是对象数据类型的值
    再次进行深比较用递归处理一下即可
    其余情况都直接用obj2的值替换obj1的值即可
    function _assignDeep(obj1, obj2) {
        // 先把OBJ1中的每一项深度克隆一份赋值给新的对象
        let obj = _cloneDeep(obj1);
    
        // 再拿OBJ2替换OBJ中的每一项
        for (let key in obj2) {
            if (!obj2.hasOwnProperty(key)) break;
            let v2 = obj2[key],
                v1 = obj[key];
            // 如果OBJ2遍历的当前项是个对象,并且对应的OBJ这项也是一个对象,此时不能直接替换,需要把两个对象重新合并一下,合并后的最新结果赋值给新对象中的这一项
            if (typeof v1 === "object" && typeof v2 === "object") {
                obj[key] = _assignDeep(v1, v2);
                continue;
            }
            obj[key] = v2;
        }
        return obj;
    }
    
    展开全文
  • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。源代码(Sourc...
  • 现在有一个对象,我希望监听对象里面的某个属性,然后当这个属性增加到一定大小时比如4的时候,把这个属性改回-1,但是不知道为什么return没有生效,并且,在控制台中我看到的属性是这样的 ![图片说明]...
  • 我需要根据Session中用户个人信息 给用户生日和性别填充值 但是不知道怎么写 这是我代码 <pre name="code" class="js"> //个人信息reader var reader=new Ext.data.JsonReader({ root : '...
  • VUE对象属性改变视图未更新问题

    千次阅读 2018-08-23 16:05:40
    VUE响应式使得赋值变得非常简单,但最近却碰到了改变对象属性视图没有更新问题,代码如下: // 添加/修改属性 this.obj.pro = ‘pro1’; // obj在data中有定义 // 删除属性 delete this.obj.pro; 想了很...
  • 在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型缩写,HTML DOM 定义了用于 HTML 一系列标准的对象,以及访问和处理 HTML 文档标准方法。  通过 DOM,可以访问所有 HTML 元素,连同...
  •  查看文档发现,easyui的渲染是在在网页加载完成后,相当于在$(document).ready()事件中,对整个网页进行了一次扫描,发现某个input标签含有easyui的属性,就在相应的地方进行ui的修改。  因此,如果我们用什么...
  • 先看下效果图实现原理1、给目标div增加鼠标按下事件,记录下div对象的位置...然后再将div的位置修改,这样就实现了div位置的变动ps:目标div的属性position要设置absolute或者relative3、div可以移动了,但什么时候停...
  • Vue.js非常有用Vue 全局配置Vue.config 是一个对象,包含 Vue 全局配置。可以在启动应用之前修改下列属性:silent类型:boolean默认值:false用法:Vue.config.silent = true作用:取消 Vue 所有日志与警告。...
  • 本文实例讲述了JS基于...它是作为window对象的属性。你可以生成一个包含当前url的新location对象: var currentURL=[removed]; 在这片文章你将看到location对象的所有属性和方法,你将学到: 怎么读取url不同部
  • 我们打开浏览器控制台,在里面随便定义一个对象,来看看里面有什么属性:我们可以看到,控制台里面输出了很多属性,其中就包括了toString,我们可以猜想,一个对象的属性不仅仅是它自身的属性,通常还会从其他对象...
  • Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性并返回这个对象 其自带get()和set()两个访问器,可在对象属性取值赋值的时候自定义方法。 1.赋值取值时...
  • 万物皆对象,而对象完全可以用键值对来表示,所以,在js中,也是通过键值对来表示对象的,在开发中,我在修改的时候,知道属性值可以直接用点.符号来获取值,但是写common.js的时候,发现这个属性名称是变化的,也...
  • JS的栈内存与堆内存

    2020-04-23 11:02:35
    最近跟着组里大佬面试碰到这么一个问题, Q:说说var、let、const区别 ...const定义基本类型不能改变,但是定义对象是可以通过修改对象属性等方法来改变。如, >>> const a = 1 >>&...
  • 最近跟着组里大佬面试碰到这么一个问题, Q:说说var、let、const区别 ...const定义基本类型不能改变,但是定义对象是可以通过修改对象属性等方法来改变。如, >>> const a = 1 >>&...
  • 我在一个页面调用这个方法(方法是子页面子页面)obj_frm["frm_"+CallID].ReceiveData(Data),报错对象不支持“ReceiveData”属性或方法。应该怎么修改呢?
  • 在html中调用js函数

    2021-03-26 20:11:42
    html是静态的,为了让网页更加生动,具有互动性,加入js是必不可少...其中先用getElementById() 方法返回对拥有指定 ID 的第一个对象的引用。然后再用innerHTML属性设置或返回表格行的开始和结束标签之间的 HTML。 ...
  • 最近跟着组里大佬面试碰到这么一个问题,Q:说说var、let、const...const定义基本类型不能改变,但是定义对象是可以通过修改对象属性等方法来改变。如,>>> const a = 1>>> a<<...
  • JS原型理解

    2017-06-18 19:43:00
    突然脑袋发热,看了下张容铭的javascript设计模式。 = =,然后不知道怎么就扯到 prototype和 __proto__之间的区别和联系上了。 看了很多, 总结: __proto__是官方给的原型,...当寻找一个对象的属性时,找不到...
  • js location访问Url,重定向,刷新页面 本文介绍怎么使用javascript Location对象读和修改Url.怎么重载或刷新页面。...它是作为window对象的属性。你可以生成一个包含当前url的新location对象: var currentU...
  • important这个属性值,而我们用是同一个插件,为了不影响她之前代码,我决定在条件上重置回来我自己所需地方,尝试了很多遍,不管怎么修改,就是达不到我想要效果,不管用原生JS,dom.style.backgr...

空空如也

空空如也

1 2 3 4 5
收藏数 90
精华内容 36
关键字:

js怎么修改对象的属性