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对象常用操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3实现手写签名之Vue3-signature的快速应用实例

    Vue3实现手写签名之Vue3-signature的快速应用实例

    签名组件在许多应用场景中都非常有用,比如在线合同签署、电子表格签名等,这篇文章主要介绍了Vue3实现手写签名之Vue3-signature的快速应用的相关资料,需要的朋友可以参考下
    2026-04-04
  • Vue开发实例探究key的作用详解

    Vue开发实例探究key的作用详解

    这篇文章主要为大家介绍了Vue开发实例探究key的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 一文彻底搞懂Vue中scoped和/deep/原理

    一文彻底搞懂Vue中scoped和/deep/原理

    在Vue中,有两种常用的CSS选择器,用于修改组件样式:scoped 和 /deep/(或 ::v-deep),它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下
    2023-08-08
  • 深入理解vue中的$set

    深入理解vue中的$set

    这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 浅析vue3响应式数据与watch属性

    浅析vue3响应式数据与watch属性

    这篇文章主要介绍了vue3响应式数据与watch属性的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • nuxt 路由、过渡特效、中间件的实现代码

    nuxt 路由、过渡特效、中间件的实现代码

    这篇文章主要介绍了nuxt 路由、过渡特效、中间件的实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中使用Datav如何完成大屏基本布局

    Vue中使用Datav如何完成大屏基本布局

    这篇文章主要介绍了Vue中使用Datav如何完成大屏基本布局问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • 详解keep-alive + vuex 让缓存的页面灵活起来

    详解keep-alive + vuex 让缓存的页面灵活起来

    这篇文章主要介绍了keep-alive + vuex 让缓存的页面灵活起来,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解从vue-loader源码分析CSS Scoped的实现

    详解从vue-loader源码分析CSS Scoped的实现

    这篇文章主要介绍了详解从vue-loader源码分析CSS Scoped的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    小编最近在做一个vue前端项目,需要实现弹窗的拖拽,四边拉伸及对角线拉伸,以及弹窗边界处理功能,本文通过实例代码给大家分享我的实现过程及遇到问题解决方法,感兴趣的朋友一起看看吧
    2021-08-08

最新评论