在对象上添加新属性的几种方法:

直接附代码:

法一Es6扩展运算符添加属性

法二利用语法Object.assign(target, ...sources)    target目标对象、sources源对象、返回值目标对象。

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String类型和 Symbol 类型的属性都会被拷贝。
在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。
注意,Object.assign 会跳过那些值为 null 或 undefined 的源对象。

法三Vue.set( target, key, value )返回值:设置的值;

设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象
语法:Object.defineProperties(obj, props)
obj-------------->在其上定义或修改属性的对象。
props--------------> 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器描述符
configurable-------------->(默认为 false)true 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。
enumerable-------------->(默认为 false)true 当且仅当在枚举相应对象上的属性时该属性显现。
value-------------->(默认为 false) 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。默认为 undefined.
writable--------------> true当且仅当与该属性相关联的值可以用assignment operator改变时。
get-------------->(默认为 undefined)作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。
set-------------->(默认为 undefined)作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。

object方法具体详细参考这里:(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

vue ---- Object的一些常用的方法的更多相关文章

  1. Java类和数据结构中常用的方法

    1.Object类里面常用的方法: protected Object clone()创建并返回此对象的一个副本. boolean equals(Object obj)指示其他某个对象是否与此对象“相等 ...

  2. JOptionPane类提示框的一些常用的方法

    JOptionPane类提示框的一些常用的方法 XMLOracleSwing 最近在做swing程序中遇到使用消息提示框的,JOptionPane类其中封装了很多的方法. 很方便的,于是就简单的整理了 ...

  3. 常用js方法

    function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...

  4. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  5. .net学习之多线程、线程死锁、线程通信 生产者消费者模式、委托的简单使用、GDI(图形设计接口)常用的方法

    1.多线程简单使用(1)进程是不执行代码的,执行代码的是线程,一个进程默认有一个线程(2)线程默认情况下都是前台线程,要所有的前台线程退出以后程序才会退出,进程里默认的线程我们叫做主线程或者叫做UI线 ...

  6. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  7. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  8. Vue深度学习(4)-方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...

  9. Python魔法方法(magic method)细解几个常用魔法方法(上)

    这里只分析几个可能会常用到的魔法方法,像__new__这种不常用的,用来做元类初始化的或者是__init__这种初始化使用的 每个人都会用的就不介绍了. 其实每个魔法方法都是在对内建方法的重写,和做像 ...

随机推荐

  1. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  2. 添加和删除节点(HTML元素)

    创建新的HTML元素 <div id="div1"> <p id="p1">这是一个段落</p> <p id=&quo ...

  3. IDE配置jvm参数

    -------- IntelliJ IDEA 配置参数:-Xms34m -Xmx234m 内存初始化大小,最小和最大值: 测试代码: public class JVMDemoTest { public ...

  4. ubuntu切换中英文通用方法,ubuntu中文语言

    1:点击桌面右上角的齿轮,选择“system settings”进入系统设置界面

  5. GridView认识(一)

    GridView认识(一)导读:一.显示数据 a.通过代码绑定显示数据 b.通过数据源控件绑定显示数据 二.外观控制 a.整体外观控制 b.列表行的控制 c.列表列的控制 内容:一.显示数据(一)代码 ...

  6. jQuery - AJAX 级联变动

    此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 : 当第一个下拉框变动时,第二个下拉列表框中也将会随之变动. JSP: ---------------------------- ...

  7. ios app 上架AppStore

    一.证书的导出      1.1 前期工作        首先你需要有一个苹果的开发者帐号,一个Mac系统.        如果没有帐号可以在打开http://developer.apple.com/ ...

  8. 并不对劲的bzoj4817:loj2001:p3703:[SDOI2017]树点涂色

    题目大意 有一棵\(n\)(\(n\leq10^5\))个节点的树,每个点有颜色\(c\),一开始所有颜色互不相同 要进行\(m\)(\(m\leq10^5\))次操作,每次操作是以下三种中的一种: ...

  9. 并不对劲的bzoj5341:loj2553:uoj400:p4565:[Ctsc2018]暴力写挂

    题目大意 有两棵\(n\)(\(n\leq366666\))个节点的树,\(T\)和\(T'\),有边权 \(dep(i)\)表示在\(T\)中\(i\)号点到\(1\)号点的距离,\(dep'(i) ...

  10. BZOJ2049:Cave 洞穴勘测 (LCT入门)

    辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好两个洞穴.假如两个洞穴可 ...