精华内容
下载资源
问答
  • js或者vue获取object数组长度

    万次阅读 2017-05-10 10:05:28
    $a=[1,2,3,4]; $b={1,2,3,4}; 一般获取数组长度直接$a.length 但是object类型怎么办呢其实也是差不多吧 ...Object.keys($b).length ...vue里面页面上有事v-if里面写判断也是一样的v-if="Object.keys($b).length >0

    $a=[1,2,3,4];

    $b={1,2,3,4};

    一般获取数组长度直接$a.length

    但是object类型怎么办呢其实也是差不多吧

    Object.keys($b).length

    vue里面页面上有事v-if里面写判断也是一样的v-if="Object.keys($b).length >0"

    展开全文
  • VueObject.assign()对象的使用

    千次阅读 2021-01-25 11:17:01
    VueObject.assign()对象可以实现拷贝。 Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,将返回目标对象。 **用法:**Object.assign(target,sources)(target:目标对象,...

    在Vue中Object.assign()对象可以实现拷贝。

    Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,将返回目标对象。
    **用法:**Object.assign(target,sources)(target:目标对象,sources:源对象,可以多个源对象)。
    一、Object.assign()对象的拷贝

    const Object1={
    	a:1,
    	b:2,
    	c:3
    };
    const Object2={
    	c:4,
    	d:5
    };
    const object2=Object.assign(object2,object1);
    console.log(object2.c);// 4 若目标对象中的属性具有和源对象相同的键,则目标对象的属性会被源对象中的相同属性覆盖。
    console.log(object2);// {c:3,d:5,a:1,b:2}
    console.log(object1);//{a:1,b:2,c:3} 不会影响到源对象
    总结:
    1.如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
    2.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标
    对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如
    果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到
    原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty()

    二、Object.assign()对象的深拷贝

    针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
    let obj1 = { a: 0 , b: { c: 0}}; 
    let obj2 = Object.assign({}, obj1); 
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 
    
    obj1.a = 1; 
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 
    
    obj2.a = 2; 
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
     
    obj2.b.c = 3; 
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
    最后一次赋值的时候,b是值是对象的引用,只要修改任意一个,其他的也会受影响
    
    // Deep Clone (深拷贝)
    obj1 = { a: 0 , b: { c: 0}}; 
    let obj3 = JSON.parse(JSON.stringify(obj1)); 
    obj1.a = 4; 
    obj1.b.c = 4; 
    console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
    

    3、对象的合并

    const o1 = { a: 1 };
    const o2 = { b: 2 };
    const o3 = { c: 3 };
    
    const obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
    其实就是对象的拷贝,o1就是目标对象,后面的是源对象,后面的属性等会拷贝到目标对象
    

    4、合并具有相同属性的对象

    const o1 = { a: 1, b: 1, c: 1 };
    const o2 = { b: 2, c: 2 };
    const o3 = { c: 3 };
    
    const obj = Object.assign({}, o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    1.属性被后续参数中具有相同属性的其他对象覆盖。
    2.目标对象的属性与源对象的属性相同,源的会覆盖目标的属性
    

    5.继承属性和不可枚举属性是不能拷贝

    const obj = Object.create({foo: 1}, { // foo 是个继承属性。
        bar: {
            value: 2  // bar 是个不可枚举属性。
        },
        baz: {
            value: 3,
            enumerable: true  // baz 是个自身可枚举属性。
        }
    });
    创建对象时,如果没有设置enumerable的值,默认为false(不可枚举属性),设置为true,则为可枚举属性
    const copy = Object.assign({}, obj);
    console.log(copy); // { baz: 3 }
    

    6.原始类型会被包装为对象

    const v1 = "abc";
    const v2 = true;
    const v3 = 10;
    const v4 = Symbol("foo")
    
    const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
    // 原始类型会被包装,null 和 undefined 会被忽略。
    // 注意,只有字符串的包装对象才可能有自身可枚举属性。
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }
    7.异常会打断后续拷贝任务
    
    const target = Object.defineProperty({}, "foo", {
        value: 1,
        writable: false
    }); // target 的 foo 属性是个只读属性。
    
    Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
    // TypeError: "foo" is read-only
    // 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。
    
    console.log(target.bar);  // 2,说明第一个源对象拷贝成功了。
    console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。
    console.log(target.foo);  // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
    console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
    console.log(target.baz);  // undefined,第三个源对象更是不会被拷贝到的。
    

    转载自Amy_yqh的https://www.jianshu.com/p/f9ec860ecd81

    展开全文
  • vueObject.freeze()

    2021-01-26 11:32:11
    该方法返回被冻结的对象。 - Object.freeze()存在的意义 如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量...

    - Object.freeze() 方法

    可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

    - Object.freeze()存在的意义
    如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增,对于纯展示的大数据,都可以使用Object.freeze提升性能。

    展开全文
  • vueObject.freeze() 优化数据

    千次阅读 2019-11-27 17:12:16
    freeze翻译成汉语有冻结的意思使用 ,Object.freeze()是ES5新增的特性,可以冻结一个对象,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。 来看他的定义:Object.freeze() ...该方法返回被冻结的对象。 ...

    freeze翻译成汉语有冻结的意思使用 ,Object.freeze()是ES5新增的特性,可以冻结一个对象,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
    来看他的定义:Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
    vue1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换。

    一般我们在需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

    data: {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }
    

    那么Object.freeze()存在的意义(应用场景)是什么呢?

    如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增,

    对于纯展示的大数据,都可以使用Object.freeze提升性能。
    Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:

    <p v-for="item in list">{{ item.value }}</p>
    
    new Vue({
        data: {
            // vue不会对list里的object做getter、setter绑定
            list: Object.freeze([
                { value: 1 },
                { value: 2 }
            ])
        },
        created () {
            // 界面不会有响应
            this.list[0].value = 100;
    
            // 下面两种做法,界面都会响应
            this.list = [
                { value: 100 },
                { value: 200 }
            ];
            this.list = Object.freeze([
                { value: 100 },
                { value: 200 }
            ]);
        }
    })
    

    在看一些他人的例子
    冻结对象

    var obj = {
      prop: function() {},
      foo: 'bar'
    };
    
    // 新的属性会被添加, 已存在的属性可能
    // 会被修改或移除
    obj.foo = 'baz';
    obj.lumpy = 'woof';
    delete obj.prop;
    
    // 作为参数传递的对象与返回的对象都被冻结
    // 所以不必保存返回的对象(因为两个对象全等)
    var o = Object.freeze(obj);
    
    o === obj; // true
    Object.isFrozen(obj); // === true
    
    // 现在任何改变都会失效
    obj.foo = 'quux'; // 静默地不做任何事
    // 静默地不添加此属性
    obj.quaxxor = 'the friendly duck';
    
    // 在严格模式,如此行为将抛出 TypeErrors
    function fail(){
      'use strict';
      obj.foo = 'sparky'; // throws a TypeError
      delete obj.quaxxor; // 返回true,因为quaxxor属性从来未被添加
      obj.sparky = 'arf'; // throws a TypeError
    }
    
    fail();
    
    // 试图通过 Object.defineProperty 更改属性
    // 下面两个语句都会抛出 TypeError.
    Object.defineProperty(obj, 'ohai', { value: 17 });
    Object.defineProperty(obj, 'foo', { value: 'eit' });
    
    // 也不能更改原型
    // 下面两个语句都会抛出 TypeError.
    Object.setPrototypeOf(obj, { x: 20 })
    obj.__proto__ = { x: 20 }
    
    
    
    //被冻结的对象是不可变的。但也不总是这样。下例展示了冻结对象不是常量对象(浅冻结)。
    obj1 = {
      internal: {}
    };
    
    Object.freeze(obj1);
    obj1.internal.a = 'aValue';
    
    obj1.internal.a // 'aValue'
    
    //对于一个常量对象,整个引用图(直接和间接引用其他对象)只能引用不可变的冻结对象。冻结的对象被认为是不可变的,因为整个对象中的整个对象状态(对其他对象的值和引用)是固定的。注意,字符串,数字和布尔总是不可变的,而函数和数组是对象。
    
    //要使对象不可变,需要递归冻结每个类型为对象的属性(深冻结)。当你知道对象在引用图中不包含任何 环 (循环引用)时,将根据你的设计逐个使用该模式,否则将触发无限循环。对 deepFreeze() 的增强将是具有接收路径(例如Array)参数的内部函数,以便当对象进入不变时,可以递归地调用 deepFreeze() 。你仍然有冻结不应冻结的对象的风险.
    
    // 深冻结函数.
    function deepFreeze(obj) {
    
      // 取回定义在obj上的属性名
      var propNames = Object.getOwnPropertyNames(obj);
    
      // 在冻结自身之前冻结属性
      propNames.forEach(function(name) {
        var prop = obj[name];
    
        // 如果prop是个对象,冻结它
        if (typeof prop == 'object' && prop !== null)
          deepFreeze(prop);
      });
    
      // 冻结自身(no-op if already frozen)
      return Object.freeze(obj);
    }
    
    obj2 = {
      internal: {}
    };
    
    deepFreeze(obj2);
    obj2.internal.a = 'anotherValue';
    obj2.internal.a; // undefined
    
    持续冻结的小方法
    var constantize = (obj) => {
    	Object.freeze(obj);
    	Object.keys(obj).forEach( (key, i) => {
    		if(typeof obj[key] === 'object') {
    			contantize(obj[key]);
    			}
    	});
    };
    
    
    

    冻结数组

    let a = [0];
    Object.freeze(a); // 现在数组不能被修改了.
    
    a[0]=1; // fails silently
    a.push(2); // fails silently
    
    // In strict mode such attempts will throw TypeErrors
    function fail() {
      "use strict"
      a[0] = 1;
      a.push(2);
    }
    
    fail();
    
    

    例子来源https://blog.csdn.net/Merciwen/article/details/86544917

    展开全文
  • 解决VUEObject出现的undefined问题

    千次阅读 2020-04-23 21:23:56
    this.axios .get('http://xxx/xxx/xxxxx') .then(res => { this.cxsp = res[0]; console.log(this.cxsp) 调用时显示undefined console.log(this.cxsp.shangp...
  • 返回的数据显示res[object object]是不可读状态的解决办法: 我们应该把对象转为JSON形式显示出来,所以需要使用 JSON.stringify(res) 简单解释以下JSON.stringfy()和JSON.parse()方法的作用: JSON.stringfy():...
  • 我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { ...当父组件没有传这个值或者值是空时,输出的话,返回: ...补充知识:解决vue
  • VueJSON数组,JSON对象,数组的区别 参考博客:JSON数组,JSON对象,数组的区别 在Vue接收到后台的List集合数据中含有对象想转成数据对象的形式(Array)如图一;而不是Object,如图二。虽然可以遍历 图一 ...
  • 快速解决vue传递参数为[Object Object]
  • 首先我们要了解 Object.assgin: ...它将返回目标对象。 举个例子: 输出的结果: 这里我们可以看出,这个函数的作用只是将对象中的值合并(键重复的覆盖),并不是将源对象的值直接赋给目标对象...
  • Vue props中Object和Array设置默认值

    千次阅读 2019-10-07 02:41:58
    Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父...
  • 用 query 传 Object 类型的参数 // 当前页面 let data = { id: 1234, name: 'test' } this.$router.push({ path: "/addres", query: { data: data } }) addres 页面用 this.$route.query.data 接收...
  • Vue 中 数据劫持 Object.defineProperty()

    千次阅读 2020-02-24 11:24:48
    我们都知道vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,本文将由浅到深...
  • 既然要取代Object.... 为了解决这个问题,经过vue内部处理后可以使用以下几种方法来监听数组 (评论区有提到,Object.defineProperty本身是可以监控到数组下标的变化的,具体可参 Vue为什么不能检测数组变动...
  • 一开始 在网上搜了很多方案都没有解决问题!最后通过看书找到了一种方案! 解决方案:script中添加th:inline 获取方法在18行后台的传值和方法
  • 1、在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2、如果子组件的props接收default为 ,如下 报错 原因:props default 数组/对象的默认值应当由一个工厂函数返回 解决: 补充知识:vue的...
  • 使用Vue.set()或者this.$set(), 另外Object.assign也能实现; Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign会拷贝原对象自身可枚举的属性...
  • Object.assign与vue $set

    千次阅读 2018-12-21 14:38:19
    Object.assign Object.assign可以用于js对象浅复制。语法:Object.assign(target, source1, source2); 第一个参数为目标对象,后面的为要合并的对象。... // 将{c:6}与obj合并 返回{a:2,b:4,c:6} 当属性...
  • vue里出现警告信息:data functions should return an object。 原因 component中的 data () {}中return要求返回一个对像。即使无内容也要返回一个空对象 解决方案 返回空对象 data () { return{} }
  • 先上图 报错原因是vue对象中的data属性没有return{};
  • Vue中localStorage取值报[object Object]

    千次阅读 2019-11-28 11:58:56
    解决方法:使用JSON.stringify()和JSON.parse() 存值: localStorage.setItem('user', JSON.stringify(this.$store.getters.uer)) 取值: ··· console.log(JSON.parse(localStorage.getItem(‘user’))) ...
  • vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器。 这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起...
  • //递归对象 ...var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '<ul>', '<li v-for="(key,val) in data">', '<div v-if="is_obj(val)">', ...
  • 1. 在 Vue 中,Object.defineProperty 无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。 2. Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。...
  • VUE如果直接使用window.sessionStorage.setItem和window.sessionStorage.getItem来进行存取对象的话,不能正常使用该对象,并且在Application的Session Storage中会显示[object object]。 window.sessionStorage....
  • 错误截图 ...打开错误信息下面的详情,这个时候找到后缀是自己页面的.vue文件,看看是哪一行,就知道问题在哪了!下面的是我的: warn @ vue.esm.js?efeb:610 assertProp @ vue.esm.js?efeb:1691 vali...
  • 说到vue 双向绑定原理是少不了的知识点,对于vue新版本有关注的小伙伴应该知道尤大大已经宣称在3.0中 双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty,那么我们来看一下Proxy对比defineProperty优势在...
  • 数据劫持指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。 常见的数据劫持的方法 Object.defineProperty(obj,'要监听的属性名',{ set(newVal){ }, get(){ }}) ...
  • 1.简单应用es5中的Object.defineProperty()? var book = { _year: 2004, edition: 1 }; Object.defineProperty(book, "year", { get: function() { return this._year; }, set: function(ne...
  • Vue3.0之proxy代替object.definProperty()

    千次阅读 2019-04-22 11:56:34
    在最新的Vue 3.0,一个很重要的改变就是将使用 ES6的Proxy 作为其观察者机制,取代之前使用的Object.defineProperty。对于Object.defineProperty大家应该在学习Vue中的响应式数据时深有体会,它可以 重写属性的 get ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,753
精华内容 17,101
关键字:

vue返回object

vue 订阅