程序员经验分享-hwhale

js属性名用变量代替

2023-05-16

    在前端中，我们有时候需要利用变量名来设置属性名，虽然不是很常见，但是也是一个应用场景。这时候，我们如果想当然的，直接使用变量来设置，那么可能不会达到我们想要的结果的。我们先来通过示例来演示一下。

    假设，我们希望设置user = {name:"buejee"}，变量a = "name"，我们直接用变量设置： 

    

    得到的结果出乎意料，并不是我们想要的{name:"buejee"}，而是{a:"buejee"}。 

    1、如下所示，我们改变一下，通过中括号[]方式设置： 

    

    成功通过变量名设置了我们的属性名。

    设想一下，如果我们拼接一下变量是什么结果呢？

     

   2、 貌似拼接是不行的，但是我们非要拼呢？使用eval

    

    在js中使用eval是一种很耗性能的操作，可读性非常差，不适宜优化，在万不得已的情况下是不建议使用的。

    3、另外，还有一种办法就是借助JSON工具，如下所示：

    

     通过以上的代码，发现还是通过中括号[]的方式赋值还是最容易理解，也是最简单的。

 

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

js属性名用变量代替 的相关文章

随机推荐

  • cygwin下vi编辑器的回退键、回车键、方向键均失效解决办法

    如题所示 xff0c windows下的cygwin工具自带的vi可以使用 xff0c 但是几个重要的按键均失效 xff0c 解决办法就是设置vi配置 在用户的根目录下 home Administrator下新建 virc文件 xff0c

  • ubuntu server系统通过命令改时区和24小时时间格式

    ubuntu server系统安装之后 xff0c 系统默认是世界时间 xff0c 在我们东八区 xff0c 会晚8小时 xff0c 另外 xff0c 系统的时间是12小时 xff0c 通过date命令查看时间 xff0c 上午显示AM x

  • ubuntu系统没有/var/log/messages系统日志文件解决办法

    在ubuntu系统中 xff0c 有时候 xff0c 我们需要通过journalctl xe来查看服务启动日志 xff0c 但是这个日志打印不全 xff0c 所以还是需要通过 var log messages这个文件来看 在一些新的ubun

  • visual studio安装vsix插件

    visual studio安装一些插件 xff0c 可以直接在扩展管理即 xff1a Manage Extentions这里就可以搜索关键字 xff0c 如果出现了对应的插件可以直接安装 xff0c 有时候 xff0c 我们的插件可以在网上

  • react+antd form 警告Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.

    如题所示 xff0c 该警告出现在react与antd使用中 xff0c 我们页面表单form中使用了Form Item包含输入框 xff0c 在username输入框的下面 xff0c 加入了一行提示文字 xff0c 代码如下 xff1a

  • ubuntu20.04安装mysql5.7版本

    默认情况下 xff0c ubuntu20 04版本自带的mysql是8 0 xff0c 如果我们需要安装5 7版本 xff0c 我们需要通过如下的方式来安装 1 直接下载二进制压缩包进行安装 xff0c 解压并设置相关的参数就可以运行 2

  • [Warning] root@localhost is created with an empty password ! Please consider switching off the解决办法

    如题所示 xff0c 当我们在ubuntu1804中 xff0c 通过默认的源安装数据库mysql之后 xff0c 直接就可以通过mysql uroot就可以登录了 xff0c 因为他默认生成的密码是空的 如下所示 xff0c ubuntu

  • tmux基本操作

    tmux是什么 tmux xff08 terminal multiplexer xff09 是Linux上的终端复用神器 xff0c 可从一个屏幕上管理多个终端 xff08 准确说是伪终端 xff09 使用该工具 xff0c 用户可以连接或

  • css小技巧之浮动，居中，周围阴影，relative妙用

    css在布局和样式微调中 xff0c 有很多小技巧 xff0c 今天总结一些小妙招 xff0c 这些方法基本上很好用 xff0c 而且不会轻易弄混淆 我们为了看出效果 xff0c 将页面做了一些修饰 xff0c 比如很多地方加上了边框 xf

  • react+antd动态表单以及数组对象示例

    在实际开发中 xff0c 我们会遇到表单中有些数据项是多个 xff0c 并不是普通的一个值 xff0c 或者一组值 xff0c 而是一个数组 xff0c 比如联系人这一项 xff0c 我们通常会有多个联系人 xff0c 这时候 xff0c

  • notepad++安装c/c++简单编程开发环境

    notepad 43 43 作为一个常用的编辑器 xff0c 加上一些插件可以很方便的作为一个简易的编译运行环境 xff0c 说是简易 xff0c 是因为运行简单的程序或者demo可以很方便 xff0c 如果大型的项目 xff0c 还是通过

  • 去掉webpack脚手架构建的vue项目中的eslint检查

    eslint是一个语法格式检测的工具 xff0c 对于规范开发有好处 xff0c 培养严格的书写习惯 xff0c 但是对于新手来说 xff0c 非常的痛苦 xff0c 有时候没有语法错误 xff0c 仅仅是格式中tab space区分不严格

  • Vue中百度地图的应用

    百度地图对于vue项目也做了依赖 xff0c 他就是vue baidu map xff0c 我们在vue项目中 xff0c 只需要安装vue baidu map依赖即可使用 xff0c 另外 xff0c 百度地图javascript api

  • React Hook “useState“ is called in function “xxx“ which is neither a React function component or解决办法

    如题所示 xff0c 在React开发中 xff0c 我们会自定义一些函数 xff0c 比如hook函数 xff0c 或者组件 xff0c 当我们使用了useState useEffect等这些hook函数的时候 xff0c 可能会报错 x

  • electron+vue项目安装vue-devtools插件

    这里记录一下自己安装过程中遇到的问题 xff1a 1 首先需要安装vue devtools xff0c 遇到了源码编译构建的时候的webpack webpack cli反复提示缺失的问题 这个问题很烦 a git clone https g

  • vue+vuetify表格控件v-data-table使用自定义列渲染

    这里先说明一下vue项目中使用vuetify框架进行整合的办法 xff1a 1 加入依赖 npm install vuetify save 2 加入开发依赖 npm install sass sass loader deepmerge sa

  • vue+vuetify构建简单消息确认框

    vue框架自己好像没有弹出框 xff0c 而vuetify有弹出框v dialog xff0c 没有确认框confirm xff0c 虽然确认框本身就是弹出框 xff0c 但是弹出框的功能有个特点 xff0c 就是确定做一件事情 xff0c

  • docker-compose构建mysql服务

    docker安装mysql服务显得很快捷 xff0c 我们如果使用了docker compose那就更快了 xff0c 我们只需要按照我们的要求 xff0c 设置相应的端口映射 xff0c 如果有需求 xff0c 也可以设置数据映射 配置如

  • Nginx核心模块内置变量

    本文根据Nginx官网整理了Nginx的ngx http core module模块的内置变量 xff0c 可与Apache做对比参考 随后做了一次测试观察各变量的值 xff0c 并附上测试结果 1 变量列表 arg name 请求行中参数

  • js属性名用变量代替

    在前端中 xff0c 我们有时候需要利用变量名来设置属性名 xff0c 虽然不是很常见 xff0c 但是也是一个应用场景 这时候 xff0c 我们如果想当然的 xff0c 直接使用变量来设置 xff0c 那么可能不会达到我们想要的结果的 我

热门标签