最近前端杂项

JS获取时间戳

// 是以毫秒为单位,精确到秒, 后三位是0, 以秒为单位需要除以1000
const currentTime = Date.parse(new Date()) / 1000		// 获取当前时间的时间戳(单位秒)
const oneHourBefore = Date.parse(new Date(currentTime * 1000 - 1 * 60 * 60 * 1000)) / 1000		// 获取一小时前的时间戳(单位秒)

// 是以毫秒为单位,精确到毫秒
const timeStamp = new Date().getTime()

const a = (new Date()).toLocaleString()			// 2022/10/25 02:22:34
const a = (new Date()).toLocaleDateString()		// 2022/10/25
a =a.replace(/\//g,'-')							// 替换2022/10/25 为 2022-10-25

// 时间戳转日期
//第一种
new Date(parseInt(1293072805) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')		// 2010/12/23 10:53
//第二种
new Date(parseInt(1293072805) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")	// 2010/12/23 10:53:25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

JS截取数组

使用slice方法

使用变量作为键名

	const tmp = 'egerhersht'
	const queryInfo = {
		[tmp]: 'g243ce'
	}
	
	this.metricDetails[tmp]
1
2
3
4
5
6

TypeError: Cannot read properties of undefined (reading ‘data’)

// 当err.response存在时,才计算err.response.data.msg
_this.$message.error(err.response && err.response.data.msg);
1
2

vue-router路由传递多个参数

npm view @antv/g6 versions		// 查看该模块的各种版本信息
1

数组去重

let arr = ['ffsd','fgd']
console.log('==', arr)					// "==",["ffsd", "fgd"]

arr.push('ffsd')
console.log('===', arr)					// "===",["ffsd", "fgd", "ffsd"]

arr = Array.from(new Set(arr))
console.log('====', arr)				// "====",["ffsd", "fgd"]
1
2
3
4
5
6
7
8

xxx is assigned a value but never used no-unused-vars

在报错的那行代码后面加上注释 // eslint-disable-line no-unused-vars
1

localStorage存储数组以及取数组方法

let weekArray = ['周一', '周二', '周三', '周四', '周五']
localStorage.setItem('weekDay', JSON.stringify(weekArray))
weekArray = JSON.parse(localStorage.getItem('weekDay'))
1
2
3

遍历对象

const obj = {
	id:1,
	name:'zhangsan',
	age:18
}

for(let key  in obj){
	console.log(obj[key])
}
1
2
3
4
5
6
7
8
9

清理 yarn缓存包

yarn cache list		# 查看已缓存包的列表
yarn cache dir		# 查询cache缓存文件路径

yarn cache clean	# yarn 清除缓存
npm cache clean --force		# npm清除缓存

yarn config set cache-folder <path>
yarn <command> --cache-folder <path>	# 指定缓存目录
1
2
3
4
5
6
7
8

类型判断

typeof(返回值为字符串)
判断数据类型, 返回值为6个字符串, 分别为string、Boolean、number、function、object、undefined。
能快速区分基本数据类型 缺点:不能将Object、Array和Null区分,都返回object
typeof(null) -> "object"
typeof([]) -> "object"
typeof(NaN) -> "number"
typeof(undefined); // 'undefined'


instanceof判断该对象是谁的实例
"cegreg" instanceof String			// false
str instanceof String 				// 只有左侧是右侧类的对象时才会返回ture

data[key] instanceof Array
(typeof duration === 'string') && (this.durationTime = duration)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

关于使用 a && b=c，解决Invalid left-hand side in assignment页面报错问题。
b=c只是一个赋值语句，并不是js表达式，得不到返回条件。
a && (b=c)，这时候(b=c)小括号会将其中的表达式结果隐式的转换成布尔值。
js类型判断
instanceof测字符串为啥是false

antv/g2相关

G2封装图形组件
封装antv/g2折线图所遇到的问题
AntV中折线图的显示
antv/g2中的柱状图一些配置
相关文档地址
语雀文档
国内镜像文档
官网文档

Axios升级至1.x后报错

axios版本升级导致，0.x升级为1.x，在请求参数数组序列化时出现

// 修改前
    paramsSerializer: function(params) {
      return Qs.stringify(params, { arrayFormat: 'repeat' })
    }
// 修改后
    paramsSerializer: { 
      serialize:function(params) {
       return Qs.stringify(params, { arrayFormat: 'repeat' })
     }
    }
1
2
3
4
5
6
7
8
9
10

AxiosError: options must be an object ERR_BAD_OPTION_VALUE

布尔值为false的情况

在JavaScript中布尔值为false总共有六种情况：NaN，0，false，“”(空双引号）或 ‘’（空单引号），null，undefined
注意：空数组，空对象，负值转的布尔值都为true
js中布尔值为false的六种情况
JS中布尔值为false

处理执行npm命令需要管理员权限

在node的安装位置，将文件夹 node_cache和node_global赋予用户权限
赋予执行权限

Ant Design

Ant Design Vue Input 输入框设置只读

// 只读 readonly 需要写成 readOnly
<a-input v-model="A" placeholder="请输入" readOnly/>
1
2

  :row-selection="{
    selectedRowKeys: selectedRowKeys,
    type: 'radio',
  }"
1
2
3
4

table表格实现单选功能