小多的博客

原因：这个和vue的事件绑定原理有关。如果直接在函数体内部使用的话，结果就是，一个匿名的立即执行函数来进行执行。由于每次触发点击事件都会返回一个新的匿名函数， 就会生成一个新的函数执行期上下文(称之为执行栈)，所以就会防抖/节流就会失效。防抖/节流使用无效，（例如防抖，按钮点击多次依旧执行多次）----> 查看是闭包无效，定义的局部变量依旧为初值。----> 没有相应清除定时器。// 以下方法调用不生效。

可以将json文件数据写在js文件中并定义成全局变量，然后再其他js文件中使用即可。

运用场景：如刷新菜单默认展开。

是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 api，尤其适合前端接口测试使用。只需指定一个 json 文件作为 api 的数据源即可，使用起来非常方便，30秒入门——可以对接口数据进行增删改查。进阶操作还支持分页，排序等操作。开源地址主页地址Github项目地址。

【代码】后端返回文件流格式数据导出成Excel文件。

【代码】替换富文本编辑器转换字符串的图片属性。

一个简单的手机号+固号的校验方法。

方法通过条件判断截取原数组相应内容组成新数组。

一个简单的img地址转base64格式，并可以设置压缩比例以及图片格式。

可以通过正则匹配式，去除简单的富文本的标签样式，返回纯内容格式。

下载文件

const stringToHex = (str: string) => { if (str === '') return ''; const hexCharCode = []; for (let i = 0; i < str.length; i += 1) { // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 hexCharCode.push(str.charCodeAt(i).toStri

由于JS本身机制问题，如果直接乘以100+%进行字符串拼接会导致精度出现问题解决方法：

hexToRgba(hex, ...opacity) { let rgbaArry = [] opacity.forEach(item => { rgbaArry.push( `rgba(${parseInt('0x'+hex.slice(1, 3))},${parseInt('0x'+hex.slice(3, 5))},${parseInt('0x'+hex.slice(5, 7))},${item})` ) }) return rgbaArry}

比较字符串相似度// s,t 是比较的字符串 f 是精度const similar = (s, t, f) => { if (!s || !t) { return 0 } let l = s.length > t.length ? s.length : t.length let n = s.length let m = t.length let d = [] f = f || 3 let min = functi

安装npm install dayjs --save使用var dayjs = require('dayjs')//import dayjs from 'dayjs' // ES 2015dayjs().format()// 日期格式化export formatDate = (value, format = 'YYYY-MM-DD HH:mm:ss') => { return dayjs(value).format(format);}

let arry = [{a:1,b:2},{a:2,b:3}]方法一：arry.forEach(item => { if(!(item.hasOwnProperty('c'))) { // 不存在执行的操作 }})方法二：arry.forEach(item => { if(!('c' in item)) { // 不存在执行的操作 }})

方法一：// 有时候需要eval一下的 data = eval("("+data+")")；var info = JSON.stringify(result);var data = eval('(' + info + ')');alert(data.district);方法二：使用forEach()this.registerForm.forEach(item => { console.log(item.data)});...

async 函数函数的返回值为promise 对象promise 对象的结果由async 函数执行的返回值决定await 表达式await 右侧的表达式一般为promise 对象, 但也可以是其它的值如果表达式是promise 对象, await 返回的是promise 成功的值如果表达式是其它值, 直接将此值作为await 的返回值注意await 必须写在async 函数中, 但async 函数中可以没有await如果await 的promise 失败了, 就会抛出异常, 需要

中断 promise链当使用 promise的 then链式调用时 , 在中间中断 , 不再调用后面的回调函数办法 : 在回调函数中返回一个 pendding状态的 promise对象const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('OK') }, 1000)}).then(value => { console.log(1) //中断 promise 链，有且只有一个方式

有时候我们需要根据条件获取不同的值，但又不方便写条件语句（比如：根据不同的值获取不同的字符段以渲染不同的数据）,此时我们就需要三元表达式的嵌套来完成a = 条件1 ? 值1 : (条件2 ? 值2 : (条件3 ? 值3 : (条件4 ? 值4 : 值5)));...

方法一：双数组在获取全部列表数据的接口上，将返回的数据赋值到 dataList 和 renderList 两个数组中dataList ：是存储所有数据的数组renderList：是页面渲染的数组// 获取列表数据async getList () { const { data: res } = await this.$http.get('list', { params: this.queryInfo }) // 数据赋值 this.renderList= this.dataLis

方法：把空格通过正则匹配替换为空字符串// this.inputValue——input输入值//----判断是否为空或者空格---if (this.inputValue.replace(/(^\s*)|(\s*$)/g, "") == "") { console.log('未输入或者输入为空格')} else { console.log('输入：', this.inputValue)};...

箭头函数函数名 = (参数...) => {函数体}由于函数较为简单只有一行，可简写为const fn1 = (data) => { return data}//简写为const fn1 = data => data但是如果想返回一个对象直接用{}包括会默认为函数体，但又不想写 return，则可以使用({})包裹const fn1 = data => ({name: 'Tom', data}) // data同名简写，实际是data:data...

state = { msgData: [ {id: '01', title: '标题1'}, {id: '02', title: '标题2'} ]}传递 params 参数{ msgData.map((msgObj) => { <div key={msgObj.id}> {/* 向路由组件传递 params 参数 */} <Link to={`/home/msg/${msgObj.id}/${msgObj.title}`}>{msgObj.

连续解构赋值let obj = {a: {b:{c:1}}}// 想拿到c的值// console.log(obj.a.b.c) // 1 一般方法// 解构赋值let {a: {b:{c}}} = objconsole.log(c) // 1 但是不能直接打印a和b,会报错:a,b没有定义连续解构赋值+重命名let obj = {a: {b:{c:1}}}let {a: {b:{c:data}}} = objconsole.log(data) // 1 ...

对象中的中括号用法：传入变量let a = 'name'let obj = {}obj[a] = 'jack'console.log(obj); // {name: "jack"}在 react 中的使用，以 setState() 为例this.setState({a:b}) // 等同于 this.setState({'a':b}) 此时 a 是一个字符串，不变this.setState({[a]:b}) // 此时 a 是一个变量，由传入值决定...

var obj1 = { foo: 'bar', x: 42 };var obj2 = { foo: 'baz', y: 13 };var clonedObj = { ...obj1 };// 克隆后的对象: { foo: "bar", x: 42 }var mergedObj = { ...obj1, ...obj2 };// 合并后的对象: { foo: "baz", x: 42, y: 13 }const merge = ( ...objects ) => ( { ...obj

什么时候对函数进行注释不一定说任何函数方法都必须使用JSDoc，但是如果是自己封装的方法，有必要使用JSDoc可以让其他成员更容易的去了解你封装的方法的属性或返回值，这样可以降低维护成本和提高开发效率。函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参考 JSDoc中文文档语法/** * 函数说明 * @关键字 */常用注释关键字...

什么是防抖和节流防抖：在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次节流：指一定时间内执行的操作只执行一次，即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，才进入下一个周期防抖// 防抖const debounce = (fn, gapTime = 500) => { let timer =null return function (...args) { clearTimeout(timer) timer = setTimout(() =&g

使用Object.defineProperty定义新属性或修改原有的属性let number = 18let person = { name: '张三', sex: '男',}Object.defineProperty(person, 'age', { // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false //

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { position: relative; } table { border-spacing: 0;

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

## 1. 正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式，本阶段我们主要是利用 JavaScript 正则表达式完成

一、函数的定义和调用1. 函数的定义方式函数声明方式 function 关键字 (命名函数)函数表达式 (匿名函数)new Function()var fn = new Function(‘参数1’,‘参数2’…, ‘函数体’)Function 里面参数都必须是字符串格式第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象)函数也属于对象// 函数的定义方式// 1. 自定义函数(命名函数) function fn() {};

一、面向对象编程1. 两大编程思想2. 面向过程编程 POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。例子：将大象装进冰箱，面向过程做法面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。3. 面向对象编程 OOP (Object Oriented Programming)面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。例子：将大象装进冰

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

一、触屏事件1. 触屏事件移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下：// 1. 获取元素 // 2. 手指触摸DOM元素事件 var div = docu

一、元素偏移量 offset 系列1. offsetoffset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意： 返回的数值都不带单位offset 系列常用属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。