javascript
TianNicholas
一路走来,雕刻时光,记录点滴。
合作可 email - cheungdennis@foxmail.com
展开
-
包含函数的对象属性相等对比
/*** 用法和 isEqual 一样。不过对于函数值,会对比函数的 toString 结果* @type {*}*/export const isEqualWithFunc = _.partialRight(_.isEqualWith, (val1, val2) => { if (_.isFunction(val1) && _.isFunction(val2)) { return val1.toString() === val2.toString...原创 2021-10-13 10:29:27 · 209 阅读 · 0 评论 -
TS基础类型
let isDone: boolean = false;let decimal: number = 6;let color: string = "blue";// 数组,有两种写法let list: number[] = [1, 2, 3];let list: Array<number> = [1, 2, 3];// 元组(Tuple)let x: [string, number] = ["hello", 10];// 枚举enum Color {Red = 1, .原创 2021-07-22 16:12:17 · 79 阅读 · 0 评论 -
TS类型声明包
类型声明包React、及其他各种著名框架、库都有TS类型声明,我们可以在项目中通过npm install @types/react方式安装,可以在这个网站搜索你想要安装的库声明包。安装后,写和那些框架、库相关的代码将会是一种非常爽的体验,函数的定义和注释将会自动提示出来,开发效率将会得到提升。...原创 2021-07-22 15:55:13 · 426 阅读 · 0 评论 -
换行符与行首
Windows中:回车符为 ‘\r’,回到行首;换行符为 ‘\n’,换到当前位置的下一行;\r\n 代表转行回到行首原创 2021-03-16 14:59:24 · 411 阅读 · 1 评论 -
JS数组转树状结构
function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item => { delete item.children; }); ...原创 2021-03-11 10:05:45 · 331 阅读 · 0 评论 -
vue中移动端自适应的postcss-plugin-px2rem插件
flexible 主要是用来响应式改变根元素的字体大小 安装命令npm install lib-flexible --save 在main.js里面导入命令import 'lib-flexible' 要把index.html里面的<meta name='viewport'>标签会自动添加,但是会有缩放建议加上 <metaname="viewport"content="width=device-width,initial-scale=1,maximu...原创 2020-12-25 16:35:26 · 3559 阅读 · 0 评论 -
JS汉字拼音排序
var arr=['中国','中啊','hao',"好",'西']arr.sort((item1,item2)=>item1.localeCompare(item2,'zh-Hans-CN'))["好", "西", "中啊", "中国", "hao"]原创 2020-12-15 15:19:00 · 454 阅读 · 0 评论 -
JS字符串padStart()方法,padEnd()方法
padStart()方法,padEnd()方法ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'上面代码中,padStart(..原创 2020-12-01 15:50:30 · 4708 阅读 · 0 评论 -
科学计数每隔三位增加一个,号
可以将数字或者字符串型数字转成带逗号格式,如3243.00456=>3,243.00456"3243.00456" =>3,243.00456function thousandsFunc(num){ var str = num.toString(); var reg = str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g; return str.replace(reg,",.原创 2020-11-11 14:58:48 · 130 阅读 · 0 评论 -
可选链和双问号语法babel插件
项目使用目前vue3.0后的搭建可以直接使用可选链和双问号。旧项目的话需要借助插件解析可选链和双问号写法:babel-plugin-proposal-optional-chaining 插件可以帮助我们将可选链式的代码转化1、 检查项目package.json的babel-core版本是否是7.x升级babel 7,官方提供了一个工具babel-upgrade,对于已有的项目,只需要运行一行命令就可以升级到7版本以上了。运行命令:npm babel-upgrade --write --原创 2020-10-30 14:27:28 · 4121 阅读 · 0 评论 -
js浮点数计算加减乘除精度处理
js浮点数的加减乘除存在着严重的bug例如:在google浏览器下,0.1+0.2=0.30000000000000004;这不是我们想要的结果。对于这一问题的解决方案就是重写浮点数的加减乘除方法,其原理是现将浮点数转换为整数。进行加减乘数,再除以相应的倍数,使之成为对应的浮点数结果。解决方案//小数乘法export const floatMul = (a, b) => { let m = 0, n = 0, //记录a,b的小数位数原创 2020-10-14 10:10:58 · 849 阅读 · 0 评论 -
lodash常用函数简介
_.isEmpty(value)检查 value 是否为一个空对象,集合,映射或者set。判断的依据是除非是有枚举属性的对象,length 大于 0 的 arguments object, array, string 或类jquery选择器。对象如果被认为为空,那么他们没有自己的可枚举属性的对象。类数组值,比如 arguments对象,array,buffer,string或者类jQuery集合的length 为 0,被认为是空。类似的,map(映射)和set 的size 为 0,被认为是空。.原创 2020-09-10 14:57:36 · 1182 阅读 · 0 评论 -
JS 新语法「可选链」「双问号」
?? 这个和 || 几乎一样,但是它不会屏蔽掉 false和 0,当等于0、false也会返回0、false?? 左边的值是 null 或者 undefined,那么就返回右边的值?.引用为空(null或者undefined) 的情况下不会引起错误,该表达式短路返回值是undefinedconst result = response?.settings?.n ??100如果 response 或者 response.settings 或者 response.setti...原创 2020-08-19 16:26:55 · 1247 阅读 · 2 评论 -
JS事件绑定三种方式
1. 在html标签中直接绑定; <input type="button" id="btn0" onclick="alert('执行了html绑定的方法')" value="html中绑定"></input>2. 在js中获取到相应的dom元素后绑定;重复绑定会覆盖之前绑定的onclick事件let button1 = document.getElementById("btn1")button1.onclick = function() { consol原创 2020-08-19 10:58:06 · 433 阅读 · 0 评论 -
ES6的class类的使用
1、class 类通过new 出来的实例,访问的属性,叫实例属性静态属性:通过构造函数访问到属性注意1:在class的{}区间内,只能写构造器、静态方法和静态属性、实例方法注意2:在class关键字内部,还是原来配方实现的,所以把class关键称为语法糖class Animal{ //每个类都有一个构造器,没有手动指定,就可以认为隐形存在空构造器,类似于constructor(){} //构造器的作用,每当new这个类的时候,必然优先执行这个构造器的代码 const...原创 2020-08-11 21:34:44 · 888 阅读 · 0 评论 -
60个提升工作效率的JS工具方法
// 1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}// 2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}// 3.电话号码export const isPhone = (s) => .原创 2020-06-03 17:43:37 · 264 阅读 · 0 评论 -
JS的isNaN()函数 (数字转化)
isNaN() 函数其实并不能像它的描述中所写的那样,数字值返回 false,其他返回 true。实际上,它是判断一个值能否被 Number() 合法地转化成数字。这中间有什么区别呢,主要提现在一些特别的情况如下:1、数字形式的字符串。例如 "123"、"-3.14",虽然是字符串型,但被 isNaN() 判为数,返回 false。("12,345,678","1.2.3" 这些返回 true) 2、空值。null、空字符串""、空数组[],都可被Number()合法的转为0,于是被isN..原创 2020-06-02 10:07:30 · 2476 阅读 · 0 评论 -
git提交失败——running pre-commit hook: lint-staged
git 提交预校验失败1、按提示解决校验失败代码2、删除.git文件夹下边的pre-commit文件原创 2020-05-12 11:33:48 · 2237 阅读 · 0 评论 -
Vue解决echart在element的tab切换图表宽度
原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab<el-tabs type="border-card" v-model="echarts_tabItem"> <el-tab-pane label="SH" name="SH"> ...原创 2020-05-08 17:52:06 · 722 阅读 · 0 评论 -
自定义组件的 v-model
2.2.0+ 新增一个组件上的v-model默认会利用名为value的 prop 和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将valueattribute 用于不同的目的。model选项可以用来避免这样的冲突:Vue.component('base-checkbox', { model: { prop: 'checked', ...原创 2020-04-28 13:55:39 · 114 阅读 · 0 评论 -
15个必须知道的JavaScript数组方法
在JavaScript中,数组是一个特殊的变量,用于存储不同的元素。它具有一些内置属性和方法,可用于根据需要添加,删除,迭代或操作数。并且了解JavaScript数组方法可以提升你的开发技能。在本文中,我们将介绍15种关于JavaScript的数组方法,这些方法可以帮助你正确地处理数据。 1.some() 2. reduce() 3. Every() 4...原创 2020-03-13 15:29:42 · 126 阅读 · 0 评论 -
Vue组件watch监测数据变动
Vue组件watch监测数据变动的简单应用<div id="app"> <input type="text" v-model="childrens.name" /> <input type="text" v-model="lastName" /></div><script type="text/javascript"> ...原创 2019-10-09 08:55:31 · 652 阅读 · 0 评论 -
vue 中 filters 如何获取data里的数据
注意:vue 中的filters过滤器this指向并不是vue 中的this,而是undefined,要指向this获取vue的data数据,可以如下操作1,声明一个全局变量let that;2,在生命周期 beforeCreate里面改变this指向 beforeCreate: function () { that = this; }, filters: { ...原创 2019-09-30 11:42:17 · 5465 阅读 · 1 评论 -
element-ui的部分模块定制,设置覆盖某些属性
按需全局设置import { Dialog } from 'element-ui';Vue.component('countTo', countTo)Vue.use(ElementUI)Vue.use(VueAxios)Vue.component(Dialog.name, { props: { closeOnClickModal: { type: Boolean,...原创 2019-09-27 15:29:48 · 223 阅读 · 0 评论 -
npm安装包参数配置说明
npm 5 开始 通过npm install不加--save 和npm install --save一样 都是局部安装并会把模块自动写入package.json中的dependencies里。npm install --save 局部安装,并会把模块自动写如入package.json中的dependencies里。npm install --dev局部安装,并会把模块自动写入packa...原创 2019-06-04 09:22:40 · 776 阅读 · 0 评论