JavaScript
文章平均质量分 75
乐夫天命兮
一名默默无闻欺负键盘的人,坚持做我自己!!!!
展开
-
前端面试(7)—— 异步和单线程
面试时,关于同步和异步,可能会问以下问题:同步和异步的区别是什么?分别举一个同步和异步的例子一个关于 setTimeout 的笔试题前端使用异步的场景哪些?面试时,关于js运行机制,需要注意以下几个问题:如何理解JS的单线程什么是任务队列什么是 EventLoop理解哪些语句会放入异步任务队列理解语句放入异步任务队列的时机。原创 2022-10-17 09:51:22 · 234 阅读 · 0 评论 -
some() 方法详解
定义和用法some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。作用:用于检测数组中的元素是否满足指定条件(函数提供)。会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。every:一假即假:some:一真即真注意: some() 不会对空数组进行检测。注意:原创 2022-05-02 11:05:40 · 8551 阅读 · 0 评论 -
map()方法详解
map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。因为map生成一个新数组,当你不打算使用返回的新数组却使用map是违背设计初衷的,请用forEach或者for-of替代。你不该使原创 2022-05-02 10:55:23 · 7368 阅读 · 0 评论 -
reduce()方法详解
定义和用法reduce() 方法将数组缩减为单个值。reduce() 方法为数组的每个值(从左到右)执行提供的函数。函数的返回值存储在累加器中(结果/总计)。注释:对没有值的数组元素,不执行 reduce() 方法。注释:reduce() 方法不会改变原始数组。语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数值参数描述function(total, curren原创 2022-05-02 10:17:06 · 22790 阅读 · 3 评论 -
Object.keys()的详解和用法
一、语法Object.keys(obj)参数:要返回其枚举自身属性的对象返回值:一个表示给定对象的所有可枚举属性的字符串数组在实际开发中,我们有时需要知道对象的所有属性;ES5 引入了Object.keys方法,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。二、处理对象,返回可枚举的属性数组let person = {name:"张三",age:25,address:"深圳",getName:function(){}}Object.keys(person原创 2022-05-01 09:50:09 · 56759 阅读 · 0 评论 -
JavaScript BOM的介绍
JavaScript的组成JavaScript基础分为三个部分:ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。什么是BOMBOM:Browser Object Model,浏览器对象模型。BOM的结构图:从上图也可以看出:window对象是BOM的顶层(原创 2021-09-13 09:55:56 · 248 阅读 · 0 评论 -
JavaScript原型对象
原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name);原创 2021-09-13 09:52:40 · 93 阅读 · 0 评论 -
JavaScript事件委托
事件委托事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素。比如说有一个列表 ul,列表之中有大量的列表项 <a>标签:<ul id="parent-list"> <li><a href="javascript:;" class="my_link">超链接一</a></li> <li><a href="javascript:;" class="my_原创 2021-09-10 14:23:35 · 108 阅读 · 1 评论 -
JavaScript事件的传播和事件冒泡
DOM事件流事件传播的三个阶段是:事件捕获、事件冒泡和目标。事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。事件冒泡阶段:事件从事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一级标签。如下图所示:PS:这个概念类似于 Android 里的 touch 事原创 2021-09-10 14:20:37 · 340 阅读 · 1 评论 -
JavaScript浅拷贝和深拷贝
概念浅拷贝:只拷贝最外面一层的数据;更深层次的对象,只拷贝引用。深拷贝:拷贝多层数据;每一层级别的数据都会拷贝。总结:拷贝引用的时候,是属于传址,而非传值。关于传值和传址的区别,是很基础的内容,详见《JavaScript 基础/对象简介.md》这篇文章。深拷贝会把对象里所有的数据重新复制到新的内存空间,是最彻底的拷贝。浅拷贝的实现方式用 for in 实现浅拷贝(比较繁琐)const obj1 = { name: 'qianguyihao', age: 28,原创 2021-09-10 14:15:16 · 62 阅读 · 0 评论 -
JavaScript作用域和变量提升
作用域(Scope)的概念概念:通俗来讲,作用域是一个变量或函数的作用范围。作用域在函数定义时,就已经确定了。目的:为了提高程序的可靠性,同时减少命名冲突。作用域的分类在 JS 中,一共有两种作用域:(ES6 之前)全局作用域:作用于整个 script 标签内部,或者作用域一个独立的 JS 文件。函数作用域(局部作用域):作用于函数内的代码环境。作用域的访问关系在内部作用域中可以访问到外部作用域的变量,在外部作用域中无法访问到内部作用域的变量。代码举例:var a原创 2021-09-10 14:12:16 · 171 阅读 · 1 评论 -
JavaScript变量的数据类型:基本数据类型和引用数据类型
变量的数据类型为什么需要数据类型在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型。而且,不同的数据类型,寓意也不同。我们都知道,无论这个变量是字符串类型,还是数字类型,我们都可以直接用 var 去定义它。比如:var a = 'hello word';var b = 123;为什么可以这样做呢?这是因为:JavaScript 是一种「弱类型语言」,或者说是一种「动态语言」,这意味着不需要提前声明变量的类型,在程序运行过程中,类型会自动被确定。JS原创 2021-09-10 09:54:39 · 148 阅读 · 0 评论 -
JavaScript简介
JavaScript背景Web前端有三层:HTML:从语义的角度,描述页面结构CSS:从审美的角度,描述样式(美化页面)JavaScript:从交互的角度,描述行为(实现业务逻辑和页面控制)发展历史JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇(Brendan Eich,1961年~)在1995年开发出了 JavaScript 语言。JavaScript是由网景公司(Netscape)发明,最初命名为LiveScript;1995年12月与SUN公司合作,原创 2021-09-10 09:52:06 · 1051 阅读 · 0 评论 -
call、apply、bind的区别
call()和apply()介绍这两个方法都是函数对象的方法,需要通过函数对象来调用。当函数调用call()和apply()时,函数都会立即执行。都可以用来改变函数的this对象的指向。第一个参数都是this要指向的对象(函数执行时,this将指向这个对象),后续参数用来传实参。显式绑定thisJS提供的绝大多数函数以及我们自己创建的所有函数,都可以使用call 和apply方法。它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象,因此我们称之为显式绑定。例1原创 2021-09-09 09:56:16 · 52 阅读 · 0 评论 -
作用域和闭包
前言面试问题:说一下对变量提升的理解说明this的几种不同的使用场景创建10个<a>标签,点击的时候弹出来对应的序号如何理解作用域实际开发中闭包的应用涉及到的知识点:执行上下文this作用域作用域链闭包执行上下文执行上下文主要有两种情况:全局代码: 一段<script>标签里,有一个全局的执行上下文。所做的事情是:变量定义、函数声明函数代码:每个函数里有一个上下文。所做的事情是:变量定义、函数声明原创 2021-09-09 09:55:21 · 172 阅读 · 0 评论 -
变量、作用域与内存
JavaScript 变量可以保存两种类型的值:原始值和引用值。原始值可能是以下 6 种原始数据类型之 一: Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点。原始值大小固定,因此保存在栈内存上。从一个变量到另一个变量复制原始值会创建该值的第二个副本。引用值是对象,存储在堆内存上。包含引用值的变量实际上只包含指向相应对象的一个指针,而不是对象本身。从一个变量到另一个变量复制引用值只会复制指针,因此结果是两原创 2021-09-02 16:46:41 · 86 阅读 · 0 评论 -
精确判断数据类型
在JavaScript里使用typeof判断数据类型,只能区分基本类型,即:number、string、undefined、boolean、object。对于null、array、function、object来说,使用typeof都会统一返回object字符串。要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中,可以通过Object.prototype.toString方法,判断某个对象之属于哪种内置类型。分为null、string、boolean、number、undefined、原创 2020-07-01 17:26:37 · 256 阅读 · 0 评论 -
求距离今天N天前的日期
function databox_request(startDataTime, endDataTime,n) { var dataTime = new Date(); //获取当前系统时间 var date = dataTime.getDate(); var fullYear = dataTime.getFullYear(); var month = dataTim...原创 2018-06-28 14:21:58 · 568 阅读 · 0 评论 -
JavaScript 的 this 原理
一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 ...转载 2018-07-03 16:25:04 · 135 阅读 · 0 评论 -
碰撞运动与自由落体运动
<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8' /> <style> #div1 { width: 100px; height: 100px; background: red; po原创 2018-10-29 15:53:36 · 460 阅读 · 0 评论 -
js防止注入实现
前端给后台传json格式参数,输入字段向后台传参时前端要做防止注入。html转义是将特殊字符或html标签转换为与之对应的字符。如:< 会转义为 &lt;> 或转义为 &gt;像“<script>alert('test');</script>”这段字符会转义为:“&lt;script&gt;alert('test');&...原创 2018-12-25 17:49:58 · 3506 阅读 · 0 评论 -
js常用语句整理
1.清空对象属性值便捷方法var a = {a:1,b:2}Object.keys(a).forEach(key =&amp;amp;amp;amp;gt; a[key]= '');原创 2019-01-21 14:06:54 · 276 阅读 · 0 评论 -
HTML显示json字符串并且进行格式化
实现如下图一个效果:函数如下: //将数据整理为json格式 formatJson (json, options) { var reg = null, formatted = '', pad = 0, PADDING = ' '; // one can also use '\t' or a differen...原创 2019-04-19 17:08:01 · 1379 阅读 · 0 评论 -
Barrage 弹幕实现原理
给自己提出一个挑战。用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。每个小程序都会给出详细的教程,保证每个新手都能看懂(不出意外的话每天都会更新)项目地址: cwyaml/JavaScript-Programs教程目录: JavaScript 每天一个小程序如果喜欢的话 请给个** star** 非常感谢!!第七天、讲一下 弹幕 的实现原理。...转载 2019-05-08 12:00:50 · 5500 阅读 · 0 评论 -
JS+DIV 实现拖动
效果如下:源码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:300px; height:400px; background:url(i...原创 2019-05-13 17:47:24 · 3139 阅读 · 0 评论 -
JavaScript网页小游戏:过河游戏
JavaScript网页小游戏:过河游戏代码,好像是几个人都需要做船,但只能坐两人个人,应该采取什么办法让几个人都顺利过河呢?游戏玩法: 1.无论大人、小孩,每次最多只能承载两人。 2.只有爸爸、妈妈、警察可以驾船。 3.妈妈看到爸爸离开儿子打儿子。 4.爸爸看到妈妈离开女儿打女儿。 5.土匪离开警察会伤害家人。 6.先选择人物,然后点击"移动"按钮。 7.移动过程中若...原创 2019-05-09 09:15:57 · 870 阅读 · 4 评论 -
运动函数(一)
function move(obj,attr,target,time,step){ //取消定时器 if(obj.timer){ clearInterval(obj.timer); } //给形参赋默认值 if(!time){ time=10 } if(!step){ if(attr=="opacity"){ step=1/100; ...原创 2019-05-14 09:37:08 · 1109 阅读 · 0 评论 -
运动函数(二)
function move(obj,attr,target,time,step){ //取消定时器 if(obj.timer){ clearInterval(obj.timer); } //给形参赋默认值 if(!time){ time=10 } if(!step){ step =10; } //console.log(step);...原创 2019-05-14 09:38:01 · 239 阅读 · 0 评论 -
获取鼠标在屏幕的X,Y坐标
getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || do...原创 2019-05-16 16:22:59 · 6477 阅读 · 0 评论 -
JavaScript常用公共函数整理总结
1、清除空格function removeSpace(value){ return value.replace(/\s+/g,"")}2、数组去重function dedupe(array){ return Array.from(new Set(array))}3、对象去重function dedupeObject(obj) { var uniqu...原创 2019-08-13 10:25:31 · 582 阅读 · 0 评论 -
js数组去重的三种实现方式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js去重方法</title> </head> <body> </bod原创 2018-06-21 14:16:58 · 192 阅读 · 0 评论