前端工作实用技巧(个人向，持续更新中···)

蕉君桑

已于 2024-05-04 22:29:08 修改

阅读量328

点赞数

文章标签： javascript 前端 vue.js

于 2022-08-22 23:16:44 首次发布

本文链接：https://blog.csdn.net/weixin_52941842/article/details/126475512

版权

1、函数没有传参数时在内部使用报错

如图：如果函数main没有传参数config则在内部使用config则会报错，所以一般需要先判断一下

判断方式比较麻烦，尤其是多层对象的时候

这时我们可以用?.的方式来判断则非常简洁，释义:？表示判断对象是否存在，存在则点取对象内部值

2、模块动态导入

动态导入的模块是一个promise，所以可以使用.then方法来获取导入的变量，

如果导入的地址也是动态的可以使用require方法传入变量地址，使用inport传入变量地址的方法似乎在目前还不可行

require动态地址导入：

require返回一个普通对象不再是promise对象

//其中url是通过函数传入的地址变量，再通过es6的模板字符串拼接起来
require(`@/common/api/rpm/${url}.js`)

3、关闭语法检查，定义变量未使用报错

在vue.config.js文件贴入以下代码即可，前提是vue脚手架搭建的项目，如果没有vue.config.js就直接在根目录新建一个

module.exports = {
    lintOnSave: false
};

4、对象key值存在symbol()时遍历或枚举对象

平时我们有很多方法拿到对象里面的key 如Object.keys(obj)、Object.getOwnPropertyNames(obj),等一些方法，但是es6出来Symbol()之后就略有不同了，

Symbol()表示唯一值，他也可以作为对象的key值使用，如果这时使用上面两种方法是拿不到的，所以现在有这么一种方法叫：Reflect.ownKeys(obj),他是可以拿到Symbol()类型的key值的，这个方法返回的结果还是一个数组

5、三元表达式多种判断情况

既然叫三元表达式那适合的情况也就是三种情况以下，太多了也不美观，而且vue也推荐使用简单的模板语法

三种条件写法：只需在否的条件后用()包起来再写个条件判断即可

<view class="list-card-approveStatus">{{item.evaluationResult=='1'?'已拒绝':(item.evaluationResult=='2'?'待审核':'同意')}}</view>

超过三种条件写法:使用数组索引来表示

<view class="list-card-contractType">{{contractType[Number(item.contractType)-1]}}</view>

contractType: ['正式合同', '借用合同', '试用合同', '测试合同', '预合同', '框架合同', '虚拟合同','正式合同（含预合同）'],

无序列表时的写法

<u-tag :text="status[item.status].value" :type="status[item.status].type" plain plainFill></u-tag>

					status:{
						'0':{value:'未审核',type:'warning'},
						'1':{value:'审核通过',type:'success'},
						'2':{value:'审核拒绝',type:'error'},
						'3':{value:'审核中',type:'warning'},
						'4':{value:'已撤回',type:'warning'},
						'11':{value:'草稿',type:'primary'},
						'12':{value:'作废',type:'info'},
					}

6、获取对象属性的动态写法

除了点属性外还可以直接中括号里写字符串对象里面的key名，因为对象的key名本身就是字符串，只是平时简写习惯了不加引号

	const obj = {
		name:'张三',
		'item.title':'错误写法示范',
		item:{
			title:'标题'
		}
	}
	obj.name = '张四'//常用写法
	console.log(obj)
	let key = 'name'
	obj[key] = '张五'//单层对象的动态key名写法
	// 或者obj['name'] = '张五'
	console.log(obj)
	let keys = ['item','title']
	obj[keys[0]][keys[1]] = '标题二'//多层动态key名写法
	console.log(obj)
	const item = {title:'item.title'}
	obj[item.title] = '无效'//多层对象时此写法是错误的，因为中括号里面只能是字符串不支持其他数据类型
	console.log(obj)

7、vue循环计算单项属性的值

如模板数据是循环出来的，每一项又是通过每一项（item）里的某个属性又是当前项的其他属性计算出来的，如果是简单的计算还好直接在模板里写表达式就行，如果是复杂的或者不能写的那问题就来了，这时我们可以使用下面的方法

把当前项写成方法通过传参数的方式把当前项的值都传过去然后计算出相应的结果返回

8.巧用replaceAll()方法修改数组中每一项的key值

			const arr = [{name:'周杰伦',age:35},{name:'林俊杰',age:33},{name:'张杰',age:33},{name:'name',age:33},]
			// 普通用法:
			arr.forEach(item=>{
				item.title = item.name
				delete item.name
			})
			console.log(arr,'普通用法')
			// replaceAll()用法
			replaceAll(string,string):字符串的方法,传入两个字符串参数,将第一个匹配到的参数替换成后面的参数
			/**此处有个小细节需要注意一下：如果value值有跟key同样名字的时候也会被替换**/
			const res =JSON.parse(JSON.stringify(arr).replaceAll('name:','title:'))
			console.log(res,'replaceAll()用法')

9.巧用内置函数eval（）求和或者将json字符串转对象

此方法网上普遍不推荐使用，那就尽量不用吧，了解就行了

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

 const data = [{'name':'22'}]
    console.log(eval(JSON.stringify(data)),'eval');//可用来将json字符串转对象
    console.log(eval('('+JSON.stringify(data)+')'),'eval2');//网上较多的是这种写法
    // eval可以直接得到数组求和结果,即使有字符串类型的数字也会相加
    console.log(eval(['1',2,'3'].join('+')),'eval3');//结果：6
    const arr = ['1',2,'3']
    //普通求和，如数组中有字符串则会导致结果错误，一般需要转换一下
    let sum = 0
    arr.map(item=>{
      sum = sum+item
    })
    console.log(sum,'sum')//结果：0123

10.npm i安装依赖的时候某些包安装不了或者安装出问题需要指定版本单独安装的

使用postinstall命令安装依赖，以pdfjs-dist为例，每次拉取代码之后安装依赖总要单独安装它，非常麻烦，此时我们就可以在项目的package.json中script配置命令："postinstall": "npm install pdfjs-dist@2.0.943"，这样就可以避免安装所有依赖之后再单独安装一次性解决