首页
前端面试题
前端报错总结
电子书
更多
插件下载
Search
1
JavaScript基础(二)操作符 流程控制
42 阅读
2
HTML基础
20 阅读
3
Vue基础
17 阅读
4
wctype.h
14 阅读
5
Vue2(知识点)
13 阅读
默认分类
HTML CSS
HTML基础
CSS
HTML5 CSS3
javaScript
javaScript基础
javaScript高级
Web APIs
jQuery
js小总结
WEB开发布局
Vue
PS切图
数据可视化
Git使用
Uniapp
c语言入门
标准库
嵌入式
登录
Search
liuxiaobai
累计撰写
108
篇文章
累计收到
12
条评论
首页
栏目
默认分类
HTML CSS
HTML基础
CSS
HTML5 CSS3
javaScript
javaScript基础
javaScript高级
Web APIs
jQuery
js小总结
WEB开发布局
Vue
PS切图
数据可视化
Git使用
Uniapp
c语言入门
标准库
嵌入式
页面
前端面试题
前端报错总结
电子书
插件下载
搜索到
30
篇与
的结果
2021-09-13
常用正则表达式
一、校验数字的表达式数字: ^[0-9]*$ n位的数字: ^\d{n}$ 至少n位的数字: ^\d{n,}$ m-n位的数字: ^\d{m,n}$ 零和非零开头的数字: ^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字: ^([1-9][0-9]*)+(\.[0-9]{1,2})?$ 带1-2位小数的正数或负数: ^(\-)?\d+(\.\d{1,2})$ 正数、负数、和小数: ^(\-|\+)?\d+(\.\d+)?$ 有两位小数的正实数: ^[0-9]+(\.[0-9]{2})?$ 有1~3位小数的正实数: ^[0-9]+(\.[0-9]{1,3})?$ 非零的正整数: ^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$ 非零的负整数: ^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$ 非负整数: ^\d+$ 或 ^[1-9]\d*|0$ 非正整数: ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ 非负浮点数: ^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ 非正浮点数: ^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ 正浮点数: ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ 负浮点数: ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ 浮点数: ^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ 二、校验字符的表达式汉字: ^[\u4e00-\u9fa5]{0,}$ 英文和数字: ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 长度为3-20的所有字符: ^.{3,20}$ 由26个英文字母组成的字符串: ^[A-Za-z]+$ 由26个大写英文字母组成的字符串: ^[A-Z]+$ 由26个小写英文字母组成的字符串: ^[a-z]+$ 由数字和26个英文字母组成的字符串: ^[A-Za-z0-9]+$ 由数字、26个英文字母或者下划线组成的字符串: ^\w+$ 或 ^\w{3,20}$ 中文、英文、数字包括下划线: ^[\u4E00-\u9FA5A-Za-z0-9_]+$ 中文、英文、数字但不包括下划线等符号: ^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$ 可以输入含有^%&',;=?$\"等字符: [^%&',;=?$\x22]+ 禁止输入含有~的字符: [^~\x22]+三、特殊需求表达式Email地址: ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 域名: [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.? InternetURL: [a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ 手机号码: ^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX): ^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$ 国内电话号码(0511-4405222、021-87888822): \d{3}-\d{8}|\d{4}-\d{7} 电话号码正则表达式(支持手机号码,3-4位区号,7-8位直播号码,1-4位分机号): ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$) 身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X: (^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$) 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线): ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线): ^[a-zA-Z]\w{5,17}$ 强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在 8-10 之间): ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$ 强密码(必须包含大小写字母和数字的组合,可以使用特殊字符,长度在8-10之间): ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 日期格式: ^\d{4}-\d{1,2}-\d{1,2} 一年的12个月(01~09和1~12): ^(0?[1-9]|1[0-2])$ 一个月的31天(01~09和1~31): ^((0?[1-9])|((1|2)[0-9])|30|31)$ 钱的输入格式:有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000": ^[1-9][0-9]*$ 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式: ^(0|[1-9][0-9]*)$ 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号: ^(0|-?[1-9][0-9]*)$ 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分: ^[0-9]+(.[0-9]+)?$ 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的: ^[0-9]+(.[0-9]{2})?$ 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样: ^[0-9]+(.[0-9]{1,2})?$ 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样: ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$ 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须: ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$ 备注:这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里xml文件: ^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$ 中文字符的正则表达式: [\u4e00-\u9fa5] 双字节字符: [^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))空白行的正则表达式: \n\s*\r (可以用来删除空白行)HTML标记的正则表达式: <(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式: ^\s*|\s*$ 或 (^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)腾讯QQ号: [1-9][0-9]{4,} (腾讯QQ号从10000开始)中国邮政编码: [1-9]\d{5}(?!\d) (中国邮政编码为6位数字)IPv4地址: ((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
2021年09月13日
4 阅读
0 评论
0 点赞
2021-09-12
js小技巧
{mtitle style='font-size:25px' title="数组扁平化"/}数组扁平化是将一个多维数组变为一个一维数组:const arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6]方法一:使用flat()const arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6] const res1 = arr.flat(Infinity);方法二:利用正则const arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6] const res2 = JSON.stringify(arr).replace(/\[|\]/g,'').split(',');注:但数据类型都会变为字符串方法三:正则改良版本const arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6] const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g,'') + ']');方法四:使用reduceconst arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6] const flatten = arr => { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur) : cur); }, []) } const res4 = flatten(arr)方法五:函数递归const arr = [1, [2, [3, [ 4,5 ]]],6 ] // => [1,2,3,4,5,6] const res5 = []; const fn = arr => { for (let i = 0; i < arr.length; i++){ if (Array.isArray(arr[i])) { fn(arr[i]); } else { res5.push(arr[i]); } } } fn(arr);{mtitle style='font-size:25px' title="数组去重"/}代码和处理后结果如下:const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}]方法一:利用Setconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const res1 = Array.from(new Set(arr));方法二:双层for循环+spliceconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const unique1 = arr => { let len = arr.length; for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]){ arr.splice(j ,1); //每删除一个数,j--保证j的值经过自加后不变。同时,len--,减少循环次数提升性能 len--; j--; } } } return arr; }方法三:利用indexOfconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const unique2 = arr => { const res = []; for (let i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) === -1) res.push(arr[i]); } return res; }方法四:利用includeconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const unique3 = arr => { const res = []; for (let i = 0; i < arr.length; i++) { if (!res.includes(arr[i])) res.push(arr[i]); } return res; }方法五:利用filterconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const unique4 = arr => { return arr.filter((item, index) => { return arr.indexOf(item) === index; }); }方法六:利用Mapconst arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; // => [1, '1', 17, true, false, 'true', 'a', {}, {}] const unique5 = arr => { const map = new Map(); const res = []; for (let i = 0; i < arr.length; i++) { if(!map.has(arr[i])) { map.set(arr[i], true) res.push(arr[i]); } } return res; }{mtitle style='font-size:25px' title="类数组转化为数组"/}类数组是具有length属性,但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。方法一:Array.fromArray.from(document.querySelectorAll('div'))方法二:Array.prototype.slice.call()Array.prototype.slice.call(document.querySelectorAll('div'))方法三:扩展运算符[...document.querySelectorAll('div')]方法四:利用concatArray.prototype.apply([], document.querySelectorAll('div')){mtitle style='font-size:25px' title="Array.prototype.filter()"/}语法:var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])参数callback用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数: element 数组中当前正在处理的元素。 index可选 正在处理的元素在数组中的索引。 array可选 调用了 filter 的数组本身。thisArg可选执行 callback 时,用于 this 的值。返回值一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。Array.prototype.filter = function(callback, thisArg) { if (this == undefined) { throw new TypeError('this is null or not undefined'); } if (typeof callback !== 'function') { throw new TypeError(callback + 'is null or not undefined'); } const res = []; // 让o成为回调函数的对象传递(强制转换对象) const o = Object(this); // >>>0 保证len为number,且为正整数 const len = o.length >>> 0; for (let i = 0; i < len; i++) { // 检查i是否在o的属性(会检查原型链) if (i in o) { // 回调函数调用传参 if (callback.call(thisAry, o[i], i, o)) { res.push(o[i]); } } } return res; }{mtitle style='font-size:25px' title="Array.prototype.map()"/}语法:var new_array = arr.map(function callback(currentValue[, index[, array]]) { // 返回一个新数组 }[, thisArg])参数callback生成新数组元素的函数,使用三个参数: currentValue callback 数组中正在处理的当前元素。 index可选 callback 数组中正在处理的当前元素的索引。 array可选 map 方法调用的数组。thisArg可选执行 callback 函数时值被用作this。返回值一个由原数组每个元素执行回调函数的结果组成的新数组。Array.prototype.map = function(callback, thisArg) { if (this == undefined) { throw new TypeError('this is null or not undefined'); } if (typeof callback !== 'function') { throw new TypeError(callback + 'is null or not undefined'); } const res = []; // 让o成为回调函数的对象传递(强制转换对象) const o = Object(this); // >>>0 保证len为number,且为正整数 const len = o.length >>> 0; for (let i = 0; i < len; i++) { // 检查i是否在o的属性(会检查原型链) if (i in o) { // 回调函数调用传参 res[i] = callback.call(thisAry, o[i], i , this); } } return res; }{mtitle style='font-size:25px' title="Array.prototype.forEach()"/}语法myMap.forEach(callback([value][,key][,map])[, thisArg])参数callbackmyMap 中每个元素所要执行的函数。它具有如下的参数: value 可选 每个迭代的值。 key 可选 每个迭代的键。 map 可选 被迭代的map(上文语法框中的 myMap)。thisArg 可选在 callback 执行中使用的 this 的值。返回值undefined. forEach跟map类似,唯一不同的是forEach是没有返回值的。 Array.prototype.forEach = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not undefined'); } if (typeof callback !== 'function') { throw new TypeError(callback + 'is null or not undefined'); } // 让o成为回调函数的对象传递(强制转换对象) const o = Object(this); // >>>0 保证len为number,且为正整数 const len = o.length >>> 0; let k = 0; while(k < len){ if(k in o){ callback.call(thisArg, o[k], k, o); } k++; } }{mtitle style='font-size:25px' title="Array.prototype.reduce()"/}语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])参数callback执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数: accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。 currentValue 数组中正在处理的元素。 index 可选 数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。 array可选 调用reduce()的数组initialValue可选作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。返回值函数累计处理的结果Array.prototype.forEach = function(callback, thisArg) { if (this == undefined) { throw new TypeError('this is null or not undefined'); } if (typeof callback !== 'function') { throw new TypeError(callback + 'is null or not undefined'); } // 让o成为回调函数的对象传递(强制转换对象) const o = Object(this); // >>>0 保证len为number,且为正整数 const len = o.length >>> 0; let accumulator = initialValue; let k = 0; //如果第二个参数为undefined的情况下 //则数组的第一个有效值最为累加器的初始值 if(accumulator === undefined) { while(k < len && !(k in o)) { k++; //如果超出数组界限还没有找到累加器的初始值,则TypeError if(k >=len) { throw new TypeError('Reduce of empty array with on initial value'); } accumulator = o[k++]; } while (k < len) { if(k in o){ accumulator = callback.call(undefined, accumulator, o[k], k ,o); } k++; } return accumulator; }{mtitle style='font-size:25px' title="Array.prototype.apply()"/}第一个参数是绑定的this,默认为window,第二个参数是数组或类数组。Function.prototype.apply= function(context=window, args){ if(typeof this !== 'function') { throw new TypeError('Type Error'); } const fn = Symbol('fn'); context[fn] = this; const res = context[fn](...args); delete context[fn]; return res; }{mtitle style='font-size:25px' title="Array.prototype.call()"/}注意:该方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。Function.prototype.call= function(context=window, ...args){ if(typeof this !== 'function') { throw new TypeError('Type Error'); } const fn = Symbol('fn'); context[fn] = this; const res = context[fn](...args); delete context[fn]; return res; }{mtitle style='font-size:25px' title="Array.prototype.bind()"/}bind() 函数会创建一个新的绑定函数(bound function,BF)。绑定函数是一个 exotic function object(怪异函数对象,ECMAScript 2015 中的术语),它包装了原函数对象。调用绑定函数通常会导致执行包装函数。Function.prototype.bind= function(context, ...args){ if(typeof this !== 'function') { throw new Error('Type Error'); } // 保存this的值 var self = this; return function F(){ //考虑new的情况 if(this instanceof F){ return new self(...args, ...arguments) } return self.apply(context,[...args, ...arguments]) } }{mtitle style='font-size:25px' title="debounce(防抖)"/}触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间const debounce = (fn, time) => { let timeout = null; return function() { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, time); } }{mtitle style='font-size:25px' title="throttle(节流)"/}高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。const throttle = (fn, time) => { let flag = true; return function() { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, arguments); flag = true; } , time); } } //第二种写法 非定时器写法 function fun(fn,time){ var activeTime=0 return ()=>{ var current =new Date() if(current-activeTime>time){ fn.apply(this,arguments) activeTime=new Date() } } }注: 节流常应用于鼠标不断点击触发 、 监听滚动事件{mtitle style='font-size:25px' title="函数柯理化"/}指的是将一个接受多个参数的函数变为接受一个参数返回一个函数的固定形式,这样便于再次调用,列如f(1)(2)。经典面试题:实现add(1)(2)(3)(4)=10;、add(1)(1,2,3)(2)=9function add() { const _args = [...arguments]; function fn() { _args.push(...arguments); return fu; } fn.toString = function() { return _args.reduce((sum, cur) => sum + cur); } return fn; }{mtitle style='font-size:25px' title="模拟new操作"/}3个步骤:以ctor.prototype为原型创建一个对象。执行构造函数并将this绑定到新创建的对象上。判断构造函数执行返回的结果是否引用数据类型,若是则返回构造函数执行的结果,否则返回创建的对象。function newOperator(ctor, ...args) { if (typeof ctor !== 'function') { throw new TypeError('Type Error'); } const obj = Object.create(ctor.prototype); const res = ctor.apply(obj, args); const isObject = typeof res === 'object' && res !== null; const isFunction = typeof res === 'function'; return isObject || isFunction ? res : obj; }{mtitle style='font-size:25px' title="instanceof"/}instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上const myInstanceof = (left, right) => { //基于数据类型都返回false if (typeof left !== 'object' || left === null) return false; let proto = Object.getPrototypeOf(left); while (true) { if (proto === null) return false; if (proto === right.prototype) return true; proto = Object.getPrototypeOf(proto); } }{mtitle style='font-size:25px' title="原型继承"/}这里只写寄生组合继承了,中间还有几个演变过来的继承但是有一定缺陷。function Parent(){ this.name='parent'; } function Child(){ Parent.call(this); this.type='children'; } Child.prototype=Object.create(Parent.prototype); Child.prototype.constructor=Child;{mtitle style='font-size:25px' title="Object.is"/}Object.is解决的主要的这两个问题+0 === -0 //true NaN === NaN //false const is = (x, y) => { if (x === y) { // +0和-0应该不相等 return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { return x !== x && y !== y; } }{mtitle style='font-size:25px' title="Object.assign"/}Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象(请注意这个操作是浅拷贝)Object.defineProperty(Object, 'assign', { value: function(target, ...args) { if (target == null) { return new TypeError('Cannot convert undefined or null to object'); } //目标对象需要统一是引用数据类型,若不是会自动转换。 const to = Object(target); for (let i = 0; i < args.length; i++) { //每一个源对象 const nextSource = args[i]; if (nextSource !== null) { //使用for...in和hasOwnProperty双重判断,确保只拿到本身属性,方法(不包含继承的) for (const nextKey in nextSource) { if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, //不可枚举 enumerable:false, writable:true, configurable:true, }){mtitle style='font-size:25px' title="深拷贝"/}递归的完整版本(考虑到了Symbol属性)const cloneDeep1 = (target, hash = new WeakMap()) => { //对于传入参数处理 if (typeof target !== 'object' || target === null) { return target; } //哈希表中存在直接返回 if (hash.has(target)) return hash.get(target); const cloneTarget = Array.isArray(target) ? [] : {}; hash.set(target, cloneTarget); //针对Symbol属性 const symKeys = Object.getOwnPropertySymbols(target); if (symKeys.length) { symKeys.forEach(Symbol => { if (typeof target[symKeys] === 'object' && target[symKeys] !== null) { cloneTarget[symKeys] = cloneDeep1(target[symKeys]); } else { cloneTarget[symKeys] = target[symKeys]; } }) } for (const i in target) { if (Object.prototype.hasOwnProperty.call(target, i)) { cloneTarget[i] = typeof target[i] === 'object' && target[i] !== null ? cloneDeep1(target[i].hash) : target[i] } } return cloneTarget; }{mtitle style='font-size:25px' title="Promise"/}
2021年09月12日
5 阅读
0 评论
0 点赞
2021-09-09
28个常用JavaScript方法集锦
经常使用的 JS 方法,今天记下,以便以后查询手机类型判断代码如下:var BrowserInfo = { userAgent: navigator.userAgent.toLowerCase() isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)), }返回字符串长度,汉子计数为2代码如下:function strLength(str) { var a = 0; for (var i = 0; i < str.length; i++) { if (str.charCodeAt(i) > 255) a += 2;//按照预期计数增加2 else a++; } return a; }获取url中的参数代码如下:function GetQueryStringRegExp(name,url) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"); if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return ""; }js 绑定事件 适用于任何浏览器的元素绑定代码如下:function eventBind(obj, eventType, callBack) { if (obj.addEventListener) { obj.addEventListener(eventType, callBack, false); } else if (window.attachEvent) { obj.attachEvent('on' + eventType, callBack); } else { obj['on' + eventType] = callBack; } }; eventBind(document, 'click', bodyClick);获得当前浏览器JS的版本代码如下:function getjsversion(){ var n = navigator; var u = n.userAgent; var apn = n.appName; var v = n.appVersion; var ie = v.indexOf('MSIE '); if (ie > 0){ apv = parseInt(i = v.substring(ie + 5)); if (apv > 3) { apv = parseFloat(i); } } else { apv = parseFloat(v); } var isie = (apn == 'Microsoft Internet Explorer'); var ismac = (u.indexOf('Mac') >= 0); var javascriptVersion = "1.0"; if (String && String.prototype) { javascriptVersion = '1.1'; if (javascriptVersion.match) { javascriptVersion = '1.2'; var tm = new Date; if (tm.setUTCDate) { javascriptVersion = '1.3'; if (isie && ismac && apv >= 5) javascriptVersion = '1.4'; var pn = 0; if (pn.toPrecision) { javascriptVersion = '1.5'; a = new Array; if (a.forEach) { javascriptVersion = '1.6'; i = 0; o = new Object; tcf = new Function('o', 'var e,i=0;try{i=new Iterator(o)}catch(e){}return i'); i = tcf(o); if (i && i.next) { javascriptVersion = '1.7'; } } } } } } return javascriptVersion; } 获取当前点击事件的Object对象代码如下:function getEvent() { if (document.all) { return window.event; //如果是ie } func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; };字符串截取方法代码如下:getCharactersLen: function (charStr, cutCount) { if (charStr == null || charStr == '') return ''; var totalCount = 0; var newStr = ''; for (var i = 0; i < charStr.length; i++) { var c = charStr.charCodeAt(i); if (c < 255 && c > 0) { totalCount++; } else { totalCount += 2; } if (totalCount >= cutCount) { newStr += charStr.charAt(i); break; } else { newStr += charStr.charAt(i); } } return newStr; }JS 弹出新窗口全屏代码如下:var tmp = window.open("about:blank", "", "fullscreen=1") tmp.moveTo(0, 0); tmp.resizeTo(screen.width + 20, screen.height); tmp.focus(); tmp.location.href = 'http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html'; var config_ = "left=0,top=0,width=" + (window.screen.Width) + ",height=" + (window.screen.Height); window.open('http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html', "winHanle", config_); //模拟form提交打开新页面 var f = document.createElement("form"); f.setAttribute('action', 'http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html'); f.target = '_blank'; document.body.appendChild(f); f.submit();全选/全不选代码如下:function selectAll(objSelect) { if (objSelect.checked == true) { $("input[name='chkId']").attr("checked", true); $("input[name='chkAll']").attr("checked", true); } else if (objSelect.checked == false) { $("input[name='chkId']").attr("checked", false); $("input[name='chkAll']").attr("checked", false); } }js 判断浏览器代码如下:判断是否是 IE 浏览器 if (document.all){ alert(”IE浏览器”); }else{ alert(”非IE浏览器”); } if (!!window.ActiveXObject){ alert(”IE浏览器”); }else{ alert(”非IE浏览器”); }判断是IE几var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if (isIE){ if (isIE6){ alert(”ie6″); }else if (isIE8){ alert(”ie8″); }else if (isIE7){ alert(”ie7″); } }判断浏览器代码如下:function getOs() { if (navigator.userAgent.indexOf("MSIE 8.0") > 0) { return "MSIE8"; } else if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { return "MSIE6"; } else if (navigator.userAgent.indexOf("MSIE 7.0") > 0) { return "MSIE7"; } else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { return "Firefox"; } if (navigator.userAgent.indexOf("Chrome") > 0) { return "Chrome"; } else { return "Other"; } }JS判断两个日期大小 适合 2012-09-09 与2012-9-9 两种格式的对比代码如下://得到日期值并转化成日期格式,replace(/\-/g, "\/")是根据验证表达式把日期转化成长日期格式,这样再进行判断就好判断了 function ValidateDate() { var beginDate = $("#t_datestart").val(); var endDate = $("#t_dateend").val(); if (beginDate.length > 0 && endDate.length>0) { var sDate = new Date(beginDate.replace(/\-/g, "\/")); var eDate= new Date(endDate.replace(/\-/g, "\/")); if (sDate > eDate) { alert('开始日期要小于结束日期'); return false; } } }移除事件代码如下:this.moveBind = function (objId, eventType, callBack) { var obj = document.getElementById(objId); if (obj.removeEventListener) { obj.removeEventListener(eventType, callBack, false); } else if (window.detachEvent) { obj.detachEvent('on' + eventType, callBack); } else { obj['on' + eventType] = null; } }回车提交代码如下:$("id").onkeypress = function (event) { event = (event) ? event : ((window.event) ? window.event : "") keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode); if (keyCode == 13) { $("SubmitLogin").onclick(); } }JS 执行计时器代码如下:timeStart = new Date().getTime(); timesEnd = new Date().getTime(); document.getElementById("time").innerHTML = timesEnd - timeStart;JS 写Cookie代码如下:function setCookie(name, value, expires, path, domain) { if (!expires) expires = -1; if (!path) path = "/"; var d = "" + name + "=" + value; var e; if (expires < 0) { e = ""; } else if (expires == 0) { var f = new Date(1970, 1, 1); e = ";expires=" + f.toUTCString(); } else { var now = new Date(); var f = new Date(now.getTime() + expires * 1000); e = ";expires=" + f.toUTCString(); } var dm; if (!domain) { dm = ""; } else { dm = ";domain=" + domain; } document.cookie = name + "=" + value + ";path=" + path + e + dm; };JS 读Cookie代码如下:function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) { return decodeURIComponent(c.substring(nameEQ.length, c.length)) } } return null }Ajax 请求代码如下:C.ajax = function (args) { var self = this; this.options = { type: 'GET', async: true, contentType: 'application/x-www-form-urlencoded', url: 'about:blank', data: null, success: {}, error: {} }; this.getXmlHttp = function () { var xmlHttp; try { xmlhttp = new XMLHttpRequest(); } catch (e) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } if (!xmlhttp) { alert('您的浏览器不支持AJAX'); return false; } return xmlhttp; }; this.send = function () { C.each(self.options, function (key, val) { self.options[key] = (args[key] == null) ? val : args[key]; }); var xmlHttp = new self.getXmlHttp(); if (self.options.type.toUpperCase() == 'GET') { xmlHttp.open(self.options.type, self.options.url + (self.options.data == null ? "" : ((/[?]$/.test(self.options.url) ? '&' : '?') + self.options.data)), self.options.async); } else { xmlHttp.open(self.options.type, self.options.url, self.options.async); xmlHttp.setRequestHeader('Content-Length', self.options.data.length); } xmlHttp.setRequestHeader('Content-Type', self.options.contentType); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200 || xmlHttp.status == 0) { if (typeof self.options.success == 'function') self.options.success(xmlHttp.responseText); xmlHttp = null; } else { if (typeof self.options.error == 'function') self.options.error('Server Status: ' + xmlHttp.status); } } }; xmlHttp.send(self.options.type.toUpperCase() == 'POST' ? self.options.data.toString() : null); }; this.send(); };JS StringBuilder 用法代码如下:function StringBuilder() { this.strings = new Array; }; StringBuilder.prototype.append = function (str) { this.strings.push(str); }; StringBuilder.prototype.toString = function () { return this.strings.join(''); };JS 加载到顶部LoadJS代码如下:function loadJS (url, fn) { var ss = document.getElementsByName('script'), loaded = false; for (var i = 0, len = ss.length; i < len; i++) { if (ss[i].src && ss[i].getAttribute('src') == url) { loaded = true; break; } } if (loaded) { if (fn && typeof fn != 'undefined' && fn instanceof Function) fn(); return false; } var s = document.createElement('script'), b = false; s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); s.onload = s.onreadystatechange = function () { if (!b && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { b = true; if (fn && typeof fn != 'undefined' && fn instanceof Function) fn(); } }; document.getElementsByTagName('head')[0].appendChild(s); }, bind: function (objId, eventType, callBack) { //适用于任何浏览器的绑定 var obj = document.getElementById(objId); if (obj.addEventListener) { obj.addEventListener(eventType, callBack, false); } else if (window.attachEvent) { obj.attachEvent('on' + eventType, callBack); } else { obj['on' + eventType] = callBack; } } function JSLoad (args) { s = document.createElement("script"); s.setAttribute("type", "text/javascript"); s.setAttribute("src", args.url); s.onload = s.onreadystatechange = function () { if (!s.readyState || s.readyState == "loaded" || s.readyState == "complete") { if (typeof args.callback == "function") args.callback(this, args); s.onload = s.onreadystatechange = null; try { s.parentNode && s.parentNode.removeChild(s); } catch (e) { } } }; document.getElementsByTagName("head")[0].appendChild(s); }清空 LoadJS 加载到顶部的js引用代码如下:function ClearHeadJs (src) { var js = document.getElementsByTagName('head')[0].children; var obj = null; for (var i = 0; i < js.length; i++) { if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) { obj = js[i]; } } document.getElementsByTagName('head')[0].removeChild(obj); };JS 替换非法字符主要用在密码验证上出现的特殊字符代码如下:function URLencode(sStr) { return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F'); };按Ctrl + Entert 直接提交表单代码如下:document.body.onkeydown = function (evt) { evt = evt ? evt : (window.event ? window.event : null); if (13 == evt.keyCode && evt.ctrlKey) { evt.returnValue = false; evt.cancel = true; PostData(); } }; 获取当前时间代码如下:function GetCurrentDate() { var d = new Date(); var y = d.getYear()+1900; month = add_zero(d.getMonth() + 1), days = add_zero(d.getDate()), hours = add_zero(d.getHours()); minutes = add_zero(d.getMinutes()), seconds = add_zero(d.getSeconds()); var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds; return str; }; function add_zero(temp) { if (temp < 10) return "0" + temp; else return temp; } Js 去掉空格方法:代码如下:String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } String.prototype.LTrim = function() {return this.replace(/(^\s*)/g, "");} String.prototype.RTrim = function() {return this.replace(/(\s*$)/g, "");}js 动态移除 head 里的 js 引用代码如下:this.ClearHeadJs = function (src) { var js = document.getElementsByTagName('head')[0].children; var obj = null; for (var i = 0; i < js.length; i++) { if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) { obj = js[i]; } } document.getElementsByTagName('head')[0].removeChild(obj); };整个UL 点击事件 加在UL里的onclick里代码如下:function CreateFrom(url, params) { var f = document.createElement("form"); f.setAttribute("action", url); for (var i = 0; i < params.length; i++) { var input = document.createElement("input"); input.setAttribute("type", "hidden"); input.setAttribute("name", params[i].paramName); input.setAttribute("value", params[i].paramValue); f.appendChild(input); } f.target = "_blank"; document.body.appendChild(f); f.submit(); };判断浏览器使用的是哪个 JS 版本代码如下:<script language="javascript"> var jsversion = 1.0; </script> <script language="javascript1.1"> jsversion = 1.1; </script> <script language="javascript1.2"> jsversion = 1.2; </script> <script language="javascript1.3"> jsversion = 1.3; </script> <script language="javascript1.4"> jsversion = 1.4; </script> <script language="javascript1.5"> jsversion = 1.5; </script> <script language="javascript1.6"> jsversion = 1.6; </script> <script language="javascript1.7"> jsversion = 1.7; </script> <script language="javascript1.8"> jsversion = 1.8; </script> <script language="javascript1.9"> jsversion = 1.9; </script> <script language="javascript2.0"> jsversion = 2.0; </script> alert(jsversion);
2021年09月09日
3 阅读
0 评论
0 点赞
1
...
9
10