【Javascript点滴知识 】
文章平均质量分 72
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
js 正则表达式判断数字和数字范围
js 正则表达式判断数字和数字范围原创 2022-08-31 14:10:54 · 2515 阅读 · 0 评论 -
js 树查找
const cityData = [ { id: 'axzx', name: '广东省', children: [ { id: 'sdsd', name: '深圳市', children: [ { id: '45dss', name: '南山区' }, { id: 'sdsd11',.原创 2022-03-17 15:28:39 · 685 阅读 · 0 评论 -
前端异常处理
前端异常/错误处理错误处理对于任何前端来说都是必不可少的。任何人写代码都避免不了会有bug,而且很多bug也不是测试用例能完全覆盖的,如果我们没有一个完整的错误处理和错误收集的系统,我们都无法知道我们有bug,不仅如此,很多bug也不一定是前端的问题,比如某个接口返回的数据格式不对了或者少字段了,亦或是在某个特定的浏览器上才有的问题等等。有了错误处理和收集,我们才能更好的通过错误栈来还原这个问题。有哪些错误需要处理JS 语法错误、代码异常 请求错误 静态资源加载异常 Promise异常原创 2022-01-04 14:02:38 · 1261 阅读 · 0 评论 -
前端二进制ArrayBuffer、TypedArray、DataView、Blob、File、Base64、FileReader一次性搞清楚
ArrayBufferArrayBuffer对象代表储存二进制数据的一段内存,它不能直接读写,只能通过视图进行操作。// 创建一个长度为 16 的 buffer 它会分配一个 16 字节(byte)的连续内存空间,并用 0 进行预填充。const buffer1 = new ArrayBuffer(16);复制代码TypedArrayTypedArray是一组构造函数,一共包含九种类型,每一种都是一个构造函数。TypedArray的构造函数接受三个参数,第一个ArrayBuffer转载 2021-12-28 17:55:40 · 1529 阅读 · 0 评论 -
JS实现数组与树结构的相互转换
1、数组转换为树结构let data = [ { id: 0, parentId: null, name: '生物' }, { id: 1, parentId: 0, name: '动物' }, { id: 2, parentId: 0, name: '植物' }, { id: 3, parentId: 0, name: '微生物' }, { id: 4, parentId: 1, name: '哺乳动物' }, { id: 5, parentId: 1, name: '卵原创 2021-11-19 17:00:32 · 5849 阅读 · 0 评论 -
数组 flat
一段代码总结Array.prototype.flat()特性注:数组拍平方法Array.prototype.flat()也叫数组扁平化、数组拉平、数组降维。 本文统一叫:数组拍平const animals = ["????", ["????", "????"], ["????", ["????", ["????"]], "????"]];// 不传参数时,默认“拉平”一层animals.flat();// ["????", "????", "????", "????", ["????",原创 2021-04-01 15:46:28 · 2276 阅读 · 0 评论 -
reduce高级用法
reduce作为ES5新增的常规数组方法之一,对比forEach、filter和map,在实际使用上好像有些被忽略,发现身边的人极少用它,导致这个如此强大的方法被逐渐埋没。如果经常使用reduce,怎么可能放过如此好用的它呢!我还是得把他从尘土中取出来擦干净,奉上它的高级用法给大家。一个如此好用的方法不应该被大众埋没。下面对reduce的语法进行简单说明,详情可查看MDN的reduce()的相关说明。01:代替map和filterconstarr=[0,1,2,3];/...原创 2020-07-21 21:33:54 · 1330 阅读 · 0 评论 -
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-07-21 17:04:54 · 434 阅读 · 0 评论 -
cookie
cookie 的属性cookie属性:name、value、expires、domain、path、secure、max-age、HttpOnly。 name: name属性是必须的,用于定义cookie的名称 value: value属性是必须的,用于指定cookie的值 expires: expires属性用于指定Cookie过期时间。它采用UTC或GMT格式...原创 2020-03-01 09:49:07 · 244 阅读 · 0 评论 -
Javascript算法和数据结构
什么是算法和数据结构 数据结构:计算机中存储和组织数据的方式 算法:解决办法的逻辑/操作 数组JS数组就是API的调用栈栈是受限的线性结构:(生活中类似于自助餐的托盘)只能在一端添加/删除元素(栈顶) 进入:进栈(压栈) 出去:出栈(退 栈) 函数调用栈 A调用B,B调C,C调D D,C,B,A的弹栈顺序 一个栈结构面试题 有6...转载 2020-02-11 09:37:53 · 868 阅读 · 1 评论 -
前端测试框架Jest系列教程 -- Expect(验证)
写在前面 在编写测试时,我们通常需要检查值是否满足某些条件,Jest中提供的expect允许你访问很多“Matchers”,这些“匹配器”允许您验证不同的东西。Expect 可以验证什么Jest中提供了如下的验证方法: 1 2 3 4 5 6 7 8 9 10 11 12 1...转载 2019-12-18 20:03:40 · 2163 阅读 · 0 评论 -
前端测试框架Jest系列教程 -- Matchers(匹配器)
写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看。常用的匹配方式:第一种:相等匹配,这是我们最常用的匹配规则 test('two plus two is four', () => { expect(2 + 2).toBe(4)...转载 2019-12-18 19:52:29 · 970 阅读 · 0 评论 -
学习Jest——语法篇
使用匹配器使用不同匹配器可以测试输入输出的值是否符合预期。下面介绍一些常见的匹配器。普通匹配器最简单的测试值的方法就是看是否精确匹配。首先是toBe()test('two plus two is four', () => { expect(2 + 2).toBe(4);});toBe用的是JavaScript中的Object.is(),属于ES6中的特性,...原创 2019-12-18 19:11:31 · 2050 阅读 · 0 评论 -
Jest 断言归纳
Jest 实在是很方便,上手简单,几乎零配置。记录一下学习 Jest matchers。附上大部分说明及示例。普通匹配器toBe - toBe 使用 Object.is 来测试是否完全相等 .not - 用来测试相反的用例 .toEqual - 如果你想检查某个对象的值,请改用 toEqual。toBe最简单的测试值的方法是看是否精确匹配。test('two plus tw...转载 2019-12-18 19:10:59 · 1380 阅读 · 0 评论 -
Jest测试框架入门
近年来,随着前端工程化的发展,前端发生了翻天覆地的变化。jQuery已经慢慢淡出了我们的视野,React、Vue和anglur三驾马车急速驶来。从此,前端进入了数据驱动的时代,也有了清晰的模块化开发的方式。随之而来的就是如何去保证自己的代码的正确性。为什么需要前端自动化测试为什么我自己写的代码我还要去写测试代码去测试它?就这么不信任自己吗?答案:是的。永远不要相信自己写的代码,不然咋还会有...转载 2019-12-18 11:16:35 · 397 阅读 · 0 评论 -
通过试题理解JavaScript
题目分析 day1函数作用域 day2值类型和引用类型 day3如何将字符串转成驼峰命名 day4中的冒泡排序 day5数组的反转 day6数组去重 day71px物理像素的实现 day8多种方式让元素水平垂直居中 day9利用css实现三角形 day10如何做rem适配 day11js综合题 day12函数节流和防抖 da...转载 2019-12-10 19:34:09 · 376 阅读 · 0 评论 -
JavaScript实现DOM树的深度优先遍历和广度优先遍历
// 深度遍历function interator(node) { console.log(node); if (node.children.length) { for (var i = 0; i < node.children.length; i++) { interator(node.children[i]); ...转载 2020-02-23 10:32:57 · 557 阅读 · 0 评论 -
数组方法的源码
forEach作用: 循环遍历数组 特点: 不改变原数组,返回值为undefined。 改变不了数组的遍历(return/break不好使,会报错) 源码实现 Array.prototype.myForEach = function(func) { var len = this.length; for(var i = 0; i < len; i++) { ...转载 2019-11-27 12:23:19 · 252 阅读 · 0 评论 -
从零发布TypeScript npm工具包
前言编程工作中,经常会封装一些常用的代码片段,比如如何获取时间,格式化时间等。不同的团队,不同的业务就会有多个相互独立的项目。我们可以将公用的一些工具库函数封装成npm包的形式,可以让个人或者团队这些import包就可以直接使用。1.注册NPM账号先去官网注册一个账号,填写好账号、密码、邮箱https://www.npmjs.com/2.初始化项目创建util-sn...转载 2019-11-19 19:32:09 · 470 阅读 · 0 评论 -
各种源码实现,你想要的这里都有
阅读源码的好处,不用说都知道,首先进大厂必备,还可以提升自己的能力,学习前人的经验。源码往往是前人留下的最佳实践,我们跟着前人的脚步去学习会让我们事半功倍。call、apply、bind 实现 new 实现 class 实现继承 async/await 实现 reduce 实现 实现一个双向数据绑定 instanceof 实现 Array.isArray 实现 Object...转载 2019-11-10 10:03:01 · 473 阅读 · 0 评论 -
聊聊编码那些事,顺带实现base64
目录 进制间的转换 对任意进制的数进行任意进制转换 将任意进制数转换为十进制数 几道关于parseInt的面试题 编码发展历史 base64编码 为什么需要base64 如何实现base64 读取buffer转为json对象 将10进制转为2进制 将2进制拼一起3*8然后分隔成4*6 然后将2进制转成10进制 base64码 取到...转载 2019-10-22 11:38:38 · 357 阅读 · 0 评论 -
20道JS原理题
前言本文针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。1. 实现一个call函数// 思路:将要改变this指向的方法挂到目标this上执行并返回Function.prototype.mycall = function (context) { if (typeof this !== 'function') { ...原创 2019-10-20 17:23:21 · 309 阅读 · 0 评论 -
基础算法
起手诗从今天起,做一个牛X的人,早起,健身,修炼算法从今天起,关心代码质量,我有一个梦想,朝九晚五,年薪百万从今天起,和每一个亲人通信,告诉他们我的决心那成功的天使告诉我的我想告诉每一个人给每一个文件、每一个变量取一个温暖的名字陌生人,我也为你祝福愿你有一个灿烂的前程愿你的头发不再减少愿你明天仍是公司栋梁而我,只愿朝九晚五,年薪百万第一天 【2018-03-25】写...转载 2019-10-20 14:10:21 · 261 阅读 · 0 评论 -
TypeScript 完全手册
Stack Overflow 在 90,000 名开发者中开展了一项调查,结果显示 TypeScript 是人们最想学习的工具之一。在过去几年中,TypeScript 的热门程度、社区规模和使用率都在不断提高。如今,甚至Facebook 正将 Jest 项目转移至 TypeScript。什么是 TypeScript?TypeScript 是 JavaScript 的超集,具有静态类型...转载 2019-10-12 09:49:49 · 1001 阅读 · 0 评论 -
自学时候收集的乱七八糟网站
http://www.cnblogs.com/xh831213/category/47652.html//**************************************************www.css88.com//***********************************http://www.css88.com/jqapi-1.9/WEB前端开发原创 2016-08-05 09:35:06 · 1670 阅读 · 0 评论 -
js金额数字格式化实现代码(三位加逗号处理保留两位置小数)
工作中很常用的东西:例1,使数字1111111变成11,111,111.00,保留两位小数。html>head>script type="text/javascript">function outputmoney(number) {number = number.replace(/\,/g, "");if(isNaN(number) || number == "")r转载 2016-08-28 15:58:16 · 5812 阅读 · 0 评论 -
JS判断是否在微信浏览器打开
最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中,点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是在什么浏览器打开的。以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博原创 2016-08-28 15:59:06 · 3757 阅读 · 0 评论 -
ECMAScript 5(ES5)中bind方法简介备忘
http://www.cnblogs.com/leejersey/p/4374695.html一直以来对和this有关的东西模糊不清,譬如call、apply等等。这次看到一个和bind有关的笔试题,故记此文以备忘。 bind和call以及apply一样,都是可以改变上下文的this指向的。不同的是,call和apply一样,直接引用在方法上,而bind绑定this后返回一个方法,但内部转载 2016-08-28 16:04:00 · 536 阅读 · 0 评论 -
js处理url的技巧和归纳
var url = 'http://www.deikang.com/index.php?tel=15811296111&status=1&id=100';var n = url.indexOf('?');//alert(n);var m = url.substring(n + 1, url.length);//alert(m);var arr = m.split('&');//aler原创 2016-08-28 16:43:38 · 1236 阅读 · 0 评论 -
JS 点击复制Copy
1.实现点击按钮,复制文本框中的的内容http://www.cnblogs.com/leejersey/p/3645127.html 1 2 function copyUrl2() 3 { 4 var Url2=document.getElementById("biao1"); 5 Url2.select(); // 选择对象 6 document.execComman转载 2016-08-28 16:50:48 · 922 阅读 · 0 评论 -
jquery 将disabled的元素置为enabled的三种方法
在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态,但是在jquery的API reference中并没说明怎么将页面置为disable的元素重新置为可触发或可编辑的。 这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。 第一种:改变disabled的转载 2016-08-28 16:56:17 · 12073 阅读 · 0 评论 -
jquery each,grap遍历方法
http://www.111cn.net/wy/jquery/46753.htm/*1. $.each(array, [callback]) 遍历[常用]解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回原创 2016-08-04 15:11:52 · 636 阅读 · 0 评论 -
10 个实用的 JavaScript 代码段
推荐10 个短小却超实用的 JavaScript 代码段字数2018阅读5303评论9喜欢219JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语原创 2016-08-09 11:00:47 · 887 阅读 · 0 评论 -
前端跨域请求原理及实践
一、 跨域请求的含义浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。一般的,只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器,分别监听 3000、 3001 端转载 2016-09-13 09:08:12 · 681 阅读 · 0 评论 -
JavaScript学习笔记之对象及继承
JavaScript学习笔记之对象及继承对象属性 ES5中有两种属性,数据属性和访问器属性。 数据属性包括[[writable]](能否修改属性的值)、[[value]]等等; 访问器属性包括[[Configurable]](能否通过delete删除属性、能否修改属性的特性)、[[Enumerable]](能否通过for-in循环返回属性)、[[Get]]、[Set]转载 2016-09-14 11:14:38 · 446 阅读 · 0 评论 -
javascript 获取当前系统时间
Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)my转载 2016-08-24 09:27:46 · 3188 阅读 · 0 评论 -
window.location传递参数
$('#btn1').on('click',function(){var textValue = $('#text1').val();window.location.href = '2.html#&value_='+textValue;})$(function(){var value = getHash('原创 2016-08-04 16:27:36 · 15784 阅读 · 0 评论 -
JS控制静态页面之间传递参数获取参数并应用(window.location)
在项目中遇到这也一个问题:有a.html和b.html。1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用。2.a页面已经打开,b页面无论是否打开。在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面。注意:不涉及跨域问题。 想了很久,终于想到了解决方案转载 2016-08-24 10:18:56 · 5181 阅读 · 0 评论 -
javascript封装自定义滚动条方法,可自定义四个边框滚动条
http://www.cnblogs.com/webhb/p/5755762.html还是根据我的个人习惯封装了一个方法 setScroll({ box :父盒子DOM对象, content : 内容盒子DOM对象, scrollall : 滚动条大盒子DOM对象, scroll : 滚动条DOM对象, direction: 垂直滚动条还是水平滚动条 }) 该方法传入一个obj转载 2016-08-24 10:25:06 · 1697 阅读 · 0 评论 -
Object.keys()js 把对象按照属性名的字母顺序进行排列
js 把对象按照属性名的字母顺序进行排列var obj = {name: "zhangsan", age: 8, ace: 5, nbme: "lisi"};//要排序的对象function objKeySort(obj) {//排序的函数 var newkey = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排转载 2016-08-24 09:49:21 · 30077 阅读 · 3 评论