javascript
yezitoo
这个作者很懒,什么都没留下…
展开
-
普通对象添加iterator
// 1.为对象添加Symbol.iterator属性const todos = { life: ['吃饭', '睡觉', '打豆豆'], learn: ['语文', '数学', '外语'], work: ['喝茶'], // 添加Symbol.iterator标识接口以及iterator实现 [Symbol.iterator]: function () { const all = [...this.life, ...this.learn, ...this.work] .转载 2021-02-26 14:44:58 · 355 阅读 · 0 评论 -
写一个前端性能监控工具
用什么监控关于前端性能指标,W3C 定义了强大的 Performance API,其中又包括了 High Resolution Time 、 Frame Timing 、 Navigation Timing 、 Performance Timeline 、Resource Timing 、 User Timing 等诸多具体标准。本文主要涉及 Navigation Timing 以及 Resource Timing。截至到 2018 年中旬,各大主流浏览器均已完成了基础实现。...转载 2020-08-25 12:53:58 · 322 阅读 · 0 评论 -
浏览器的回流与重绘 (Reflow & Repaint)
写在前面在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时转载 2020-08-24 17:30:47 · 203 阅读 · 0 评论 -
JavaScript基础——深浅拷贝
前言说到深浅拷贝,必须先提到的是JavaScript的数据类型,之前的一篇文章JavaScript基础心法——数据类型说的很清楚了,这里就不多说了。需要知道的就是一点:JavaScript的数据类型分为基本数据类型和引用数据类型。对于基本数据类型的拷贝,并没有深浅拷贝的区别,我们所说的深浅拷贝都是对于引用数据类型而言的。浅拷贝浅拷贝的意思就是只复制引用,而未复制真正的值。const originArray = [1,2,3,4,5];const originObj = {a:'a转载 2020-08-18 00:04:41 · 135 阅读 · 0 评论 -
Promise 必知必会(十道题)
Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。以下 promise 均指代 Promise 实例,环境是 Node.js。题目一const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2)})promise.then(() =>转载 2020-08-17 10:50:38 · 390 阅读 · 0 评论 -
JavaScript基础——this
什么是this在传统面向对象的语言中,比如Java,this关键字用来表示当前对象本身,或当前对象的一个实例,通过this关键字可以获得当前对象的属性和调用方法。在JavaScript中,this似乎表现地略有不同,这也是让人“讨厌”的地方~ECMAScript规范中这样写:this 关键字执行为当前执行环境的 ThisBinding。MDN上这样写:In most cases, the value of this is determined by how a function转载 2020-08-12 14:19:49 · 110 阅读 · 0 评论 -
在数组的指定位置插入一个数组
问题:arr1 = ['a', 'b', 'c']arr2 = ['1', '2', '3']把数组arr2插入数组arr1的第二个元素b后面;思路:插入特定的位置,我们首先会想到splice,splice用法如下。index是索引,howmany是删除多少个元素,后面的item是插入的元素arrayObject.splice(index,howmany,item1,.....,itemX)直接splice(2, 0, arr2),但是结果:['a', 'b', ...转载 2020-07-24 12:13:50 · 2771 阅读 · 0 评论 -
无限级递归树
const data = [ { "area_id": 5, "name": "广东省", "parent_id": 0, }, { "area_id": 6, "name": "广州市", "parent_id": 5, }, { "area_id": 7, "name": "深圳市", "parent_id": 5,.转载 2020-07-10 00:01:42 · 230 阅读 · 0 评论 -
JavaScript 高性能数组去重
一、测试模版数组去重是一个老生常谈的问题,网上流传着有各种各样的解法为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2 = Array.from(new Arra...转载 2019-12-27 11:52:29 · 87 阅读 · 0 评论 -
js实现窗口全屏示例
前言该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装 以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery) 请在这里查看示例☞ fullscreen示例示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...转载 2018-10-06 23:13:49 · 2606 阅读 · 0 评论 -
ScrollInToView方法(滚动页面)
[html] view plain copyhtml> head> title>HTML5_ScrollInToView方法title> meta charset="utf-8"> script type="text/javascript"> window转载 2017-11-13 22:25:41 · 6666 阅读 · 0 评论 -
window.open()打开窗口的几种方式
1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.window.open("http://www.baidu.com/", "_search");window.open("http://www.baidu.com/", "_self"); 2. 在一个新的窗口打开百度window.open("http://www.baidu.com/", "_bla转载 2017-11-17 22:44:55 · 96797 阅读 · 2 评论 -
判断对象类型
在js 中 , 有一种判断数据基本类型的方法 typeof , 只能判断5中基本类型:即 “number”,”string”,”undefined”,”boolean”,”object” 五种。可见: typeof 会根据对象类型返回对应的类型字符串, 但是有几个缺点:对于数组、函数、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串, null也...转载 2019-03-28 15:12:50 · 1411 阅读 · 0 评论 -
CommonJS,AMD,CMD和ES6的模块
在JavaScript中,模块是把实现某个特定功能的代码放在一起并包装,实现解耦和复用。在ES6之前,ECMA Script并不包含模块的概念,自然也没有模块语法,但的确有一些通用的模式来创建模块,比较流行的就是CommonJS,AMD以及CMD。在ES6中,引入了模块的语法。本文讲按照时间顺序,依次介绍上述几种模块。最早的模块模式在没有CommonJS、AMD之前,开发者也会想一些办法...转载 2019-09-25 15:16:48 · 102 阅读 · 0 评论 -
Antd合并
let group_row_span = [];let x = '';let count = 0;let start_index = 0;for (let index = 0; index < data.group.length; index++) { const ele = data.group[index].exec_target; if (in...原创 2019-05-24 11:52:55 · 259 阅读 · 0 评论 -
JS跳出循环的三种方法(break, return, continue)
Break语句:break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。for(var i = 519; i < 550; i++)...转载 2018-12-03 14:19:58 · 10453 阅读 · 0 评论 -
冒泡获取元素位置
$(document).delegate(".problem_detail_wrap", "mouseover", function (e) {var left = e.target.getBoundingClientRect().left;var top = e.target.getBoundingClientRect().top + 20;$($(this).children()[...转载 2018-11-29 13:50:17 · 370 阅读 · 0 评论 -
通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件:Html代码 form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> h1 >测试通过Rest接口上传文件 h1>转载 2017-10-25 11:22:30 · 178 阅读 · 0 评论 -
正则表达式(手机号、身份证号、src地址)
一、手机号:/^1[34578]\d{9}$/二、身份证号:/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/原创 2017-09-15 13:55:51 · 7971 阅读 · 1 评论 -
location.href用法总结(最主要的)
javascript中的location.href有很多种用法,主要如下。 self.location.href=”/url” 当前页面打开URL页面 location.href=”/url” 当前页面打开URL页面 windows.location.href=”/url” 当前页面打开URL页面,前面三个用法相同。 this.location.href=”/url转载 2016-08-29 23:43:25 · 568 阅读 · 0 评论 -
ES6 箭头函数中的 this
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”。箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了,虽然它早已不稀奇,却给我们一种刚刚发现的新鲜感。 粉我的人都知道俺因为某些原因不怎么喜欢 => 的语法,不过别担心,本文并非讲述我为何不喜转载 2017-08-22 15:57:03 · 204 阅读 · 0 评论 -
es6中为什么要bind(this)
在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法 需要bind(this), 而使用react.createClass方法 就不需要. 请问这是为什么呢解释:React.createClass 是es5的写法默认是绑定了bind方法,而es6中 新增加了class,绑定的方法需要绑定this,如果是箭头函数就不需要绑定this,用箭转载 2017-08-22 15:28:05 · 657 阅读 · 0 评论