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分片上传视频并转换为m3u8文件播放的实现示例

    vue分片上传视频并转换为m3u8文件播放的实现示例

    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下
    2023-11-11
  • VUE PC端可拖动悬浮按钮的实现代码

    VUE PC端可拖动悬浮按钮的实现代码

    这篇文章主要介绍了VUE PC端可拖动悬浮按钮的实现代码,通过实例代码介绍了父页面引用的方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 去除element-ui下拉框的下拉箭头的实现

    去除element-ui下拉框的下拉箭头的实现

    我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下
    2023-08-08
  • Vue封装DateRangePicker组件流程详细介绍

    Vue封装DateRangePicker组件流程详细介绍

    在后端管理项目中使用vue来进行前端项目的开发,但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的
    2022-11-11
  • vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀

    vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀

    这篇文章主要介绍了vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现简单loading进度条

    vue实现简单loading进度条

    这篇文章主要为大家详细介绍了vue实现简单loading进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 详解vue表单——小白速看

    详解vue表单——小白速看

    大家可以用 v-model 指令在表单控件元素上创建双向数据绑定。这篇文章主要介绍了vue表单详解,需要的朋友可以参考下
    2018-04-04
  • vue实现web滚动条分页

    vue实现web滚动条分页

    这篇文章主要为大家详细介绍了vue实现web滚动条分页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue组件如何自动按需引入详析

    Vue组件如何自动按需引入详析

    刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下
    2021-12-12
  • axios在Vue3中的使用实例代码

    axios在Vue3中的使用实例代码

    Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js,这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下
    2023-07-07

最新评论