如何在给js起变量名时,拼接变量?

需求

最近在传参时,需要给成吨的变量起名,例如:tree_1, tree_2, tree_3,甚至是这种:testList[0].id,testList[0].name,testList[1].id,testList[1].name…

问题

本想着在循环中拼接字符串与变量 i

// 错误示范 错误示范 错误示范 
for(let i = 0;i < 20, i++;){
let 'tree_' + i = ’balabala‘;
}

经过尝试,这种方法不可行,原因是:在定义变量时,=号的左边不许使用表达式

解决方法

经查阅与测试,整理到以下3种比较常用的处理方式:

1.通过对象的形式

一个对象可以有多个属性,每个属性都有属性名和属性值。
所以,这种方式的思路是:
把原本要起的变量名当成对象的一个属性名,把原本要给变量赋的值赋给此属性名。

好比:
let 'a' + i = 'balabala'//错误!
let test = {'a'+i : 'balabala'}//正确!

之后在使用变量a+i时候就可以通过调用test这个对象的 a+i属性来访问变量值。

举个正确例子

//正确方法
var test = {};
    for(var i = 0; i < 20; i++){
        test['test_'+i]=‘你想要赋的值’;
    }
console.log(test_0); //输出:ReferenceError: test_0 is not defined
console.log(test['test_0']); //输出:你想要赋的值

2.通过数组的形式

使用数组与使用对象的形式实现原理一致,只是代码稍有区别

//正确示例
var test = [];
    for(var i = 0; i < 3; i++){
        test[i]='我是字符串'+i;
    }
console.log(test[0]); //输出:我是字符串0

3.利用window全局变量

这个方法可读性较高,不过只能生成全局变量。

    var name = "test";//在这里拼接想要的变量
    window[name] = "内容";
    console.log(window[name]);  //输出:内容
    console.log(name);  //输出:test

后记

在给对象赋值属性之后,调用该属性的时候有两种写法

let demo = {};
let name = 'wantName';
demo[name] = 'value';//赋值

//第一种写法
console.log(demo.wantName)//输出:value

//第二种写法
console.log(demo[name])//输出:value

//注意:下面这种是错误的,编译不通过
console.log(demo[wantName])
### 实现变量名拼接 在 Vue 3 中,通过使用 SASS 函数可以方便地实现 BEM 规范下的类名拼接。这不仅提高了代码的可读性和维护性,还使得样式管理更加高效[^2]。 #### 使用 SASS 进行类名拼接 为了简化开发流程,在项目中引入了三个辅助函数 `blockClass`、`elementClass` 和 `modifierClass` 来处理不同场景下所需的 CSS 类名组合: ```scss // _bem.scss 文件内容示例 @mixin block($name) { .#{$name} { @content; } } @mixin element($parent, $child) { &__#{$child} { @content; } } @mixin modifier($modiferName, $value: true) { &[#{$modiferName}="#{if($value === true, '', $value)}"] { @content; } } ``` 上述 SCSS 片段展示了如何创建基于 BEM 命名约定的基础 mixins。这些 mixin 能够帮助开发者快速构建复杂的 HTML 结构对应的样式规则。 #### 将 SASS 辅助方法注册至全局属性 为了让整个应用程序都能轻松调用这些工具函数而无需重复导入,可以在项目的入口文件(main.ts 或 main.js)中配置如下所示: ```typescript import { createApp } from 'vue' import App from './App.vue' // 导入用于生成BEM类名的帮助函数 import { blockClass, elementClass, modifierClass } from './handleScssVar'; const app = createApp(App); // 注册为全局可用的方法 app.config.globalProperties.$blockClass = blockClass; app.config.globalProperties.$elementClass = elementClass; app.config.globalProperties.$modifierClass = modifierClass; app.mount('#app') ``` 这样做的好处在于任何组件都可以直接访问 `$blockClass`, `$elementClass` 和 `$modifierClass` 方法来动态计算所需的应用于模板中的 class 名称字符串。 #### 组件内实际运用案例 下面是一个简单的例子展示怎样利用已定义好的 global properties 完成具体操作: ```html <template> <div :class="$blockClass('my-block')" role="button"> <span :class="$elementClass('my-block', 'text')">Click me!</span> </div> </template> <script lang="ts"> export default defineComponent({ setup() { return {}; }, }); </script> ``` 在这个例子中,假设有一个名为 "my-block" 的区块(block),其中包含了文本元素(element)。“$blockClass” 和 “$elementClass” 分别用来获取对应级别的 CSS 类名,并将其绑定给 div 和 span 标签作为其 className 属性值的一部分。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值