Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等

 更新时间:2024年01月03日 16:43:36   作者:你好,打工人  
最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下

1. 取得某一个属性的值

let obj = {'name':'lxc','age':26}

方法一:点号操作符  obj.name

方法二:方括号操作符:obj[name]

方法三:解构赋值 let {name} = obj

...

2.取得对象的key和value值

let obj = {'name':'lxc','age':26}

取Object key值

方法一:Object.keys(obj) //['name','age'] 返回一个字符串数组

方法二:for in

for(let i in obj){
console.log(i); //name,age
}
...

Object value值

方法一:Object.value(obj) //['lxc',26] 返回一个字符串数组

方法二:for in

for(let i in obj){
console.log(obj[i]); //lxc,26
}

方法三:map

Object.keys(obj).map((key)=>{ console.log(obj[key])})  //lxc,26

3.对象合并(会将key值相同的进行覆盖去重操作)

方法一:Object.assign

      const a = { a: 1, b: 4 }
      const b = { b: 2, c: 3 }
      console.log(Object.assign(a, b));

方法二:扩展运算符

    console.log({ ...a, ...b });

注:展开运算符的只进行浅拷贝,不支持深拷贝。Object.assign()方法会修改目标对象。如果不希望修改原对象,需要提供一个空对象作为目标对象。此外,Object.assign()方法只能合并顶层的属性,不支持递归地合并嵌套对象。

4.对象转为数组

方法一:只需要对象的key或value转化为数组

通过上面的Object.key、value等方法实现

方法二:通过for in 整理成想要的数组

方法三:object.entries

总结

到此这篇关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的文章就介绍到这了,更多相关Vuejs对象常用操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解vue身份认证管理和租户管理

    详解vue身份认证管理和租户管理

    本篇开始功能模块的开发,首先完成ABP模板自带的身份认证管理模块和租户管理模块。同样的,参考ABP的Angular版本来做。
    2021-05-05
  • Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    这篇文章主要介绍了Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue3 Pinia如何修改全局状态变量值

    Vue3 Pinia如何修改全局状态变量值

    这篇文章主要介绍了Vue3 Pinia如何修改全局状态变量值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue 如何从单页应用改造成多页应用

    vue 如何从单页应用改造成多页应用

    这篇文章主要介绍了vue 如何从单页应用改造成多页应用,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • 在vue中,v-for的索引index在html中的使用方法

    在vue中,v-for的索引index在html中的使用方法

    下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue环形进度条组件实例应用

    vue环形进度条组件实例应用

    在本文中我们给大家分享了关于vue环形进度条组件的使用方法以及实例代码,需要的朋友们跟着测试下吧。
    2018-10-10
  • vue登录成功之后的token处理详细步骤

    vue登录成功之后的token处理详细步骤

    Token是身份验证后服务端返回的令牌,常用于访问授权API和页面权限校验,Token数据可存储在本地或Vuex中,本地存储可实现数据持久化,这篇文章主要介绍了vue登录成功之后的token处理详细步骤,需要的朋友可以参考下
    2024-10-10
  • 解决vue字符串换行问题(绝对管用)

    解决vue字符串换行问题(绝对管用)

    这篇文章主要介绍了解决vue字符串换行问题(绝对管用),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • Element Input输入框的使用方法

    Element Input输入框的使用方法

    这篇文章主要介绍了Element Input输入框的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论