![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 55
DOM曼珠沙华
学如逆水行舟,不进则退
展开
-
JS运算符 (...)了解及使用
这个运算符(...)一般用于数组数据获取数据解构合并等这个一般用于数组,对对象直接使用的话会报错。原创 2022-07-23 22:59:11 · 1498 阅读 · 0 评论 -
js实现indexOf()、实现 strStr() 函数
先说一下这个题,这个是力扣里简单的题实现strStr()函数给你两个字符串haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串出现的第一个位置(下标从 0 开始)。如果不存在,则返回-1 。说明:当needle是空字符串时,我们应当返回什么值呢?这是一个在面试中很好的问题。对于本题而言,当needle是空字符串时我们应当返回 0 。这与 C 语言的strstr()以及 Java 的indexOf()定义相符。...原创 2021-06-23 14:56:42 · 843 阅读 · 1 评论 -
js实现instanceof
instanceof可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的prototype。function instanceof1(obj,Object) { let prototype = Object.prototype if (obj === null || obj === undefined || !obj || (typeof obj !== 'object' && typeof obj !== 'function')) ..原创 2021-05-19 18:08:54 · 323 阅读 · 0 评论 -
js正则使用及示例
正则详细的介绍可以看菜鸟教程正则介绍,很详细用法这里统一拿数字举例子1.通过构造函数创造正则对象原创 2021-05-14 15:28:58 · 91 阅读 · 1 评论 -
try-catch语句的简单用法
ECMA引入try catch语句,作为Js中处理异常的一种标准方式。与java内的try-catch语句完全相同。try{ // 可能会导致错误的代码 }catch(error){ // 在错误发生时怎么处理}finally{ // 可选 ,但是如果添加了,就一定会执行 // 内部的内容会被执行,即使上面有return也会执行}如果try块内的任何代码发生了错误,就会立即退出代码执行过程,然后立即执行catch块。此时,catch块会接收到原创 2021-02-23 22:56:17 · 1589 阅读 · 0 评论 -
document.write与innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open,浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。innerHTML则是页面DOM元素的一个属性,代表该元素的html内容,你可以精确到某一个...原创 2020-08-09 14:08:08 · 474 阅读 · 0 评论 -
js实现图片懒加载【附代码】
图片懒加载<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} ul{overflow:hidden;} li{ list-style:none;原创 2020-06-17 12:19:59 · 210 阅读 · 0 评论 -
JavaScript random() 方法
返回介于 0(包含) ~ 1(不包含) 之间的一个随机数:Math.random(); 实例:1.介于 1 到 10 之间的一个随机数:转载 2020-06-17 10:51:20 · 837 阅读 · 0 评论 -
一些JS小点 杂
1.alert()是Javascript中BOM对象window的方法。在全局bai作用域内,duwindow是默认的this,因此可以省略掉。2.在Javascript浏览器对象模型中,window对象的(status)属性用来指定浏览器状态栏中显示的临时消息。3.下方代码的运行结果为16var age = 16;var person = { age: 18, getAge: function(){ var age = 22; setTimeout(function(){.原创 2020-06-16 20:23:07 · 527 阅读 · 0 评论 -
知道url的情况下获取其后的参数,并将其转换为json对象
这里有一个 url=https://www/.baidu.com/s?id=111&name=xiaoming,需要将它变成 {id: "123", name: "xiaoming"}var url="http://www.baidu.com?id=123&name=xiaoming"console.log(getJson(url));function getJson(url){ var object = {}; arr = url.split("?")[1].split(转载 2020-06-16 13:38:25 · 450 阅读 · 0 评论 -
js确定原型和实例的基本关系
可以通过两种方式实现原型和实例的关系。第一种实现方式使用instanceof操作符,只要用这个操作符来测试实例和原型链中出现过的构造函数,结果就会返回true。代码演示(原型链的代码实现):function SuperType(){ this.property = true; }//在SuperType函数的原型链上创建实例共享方法 SuperType.prototype.getSuperValue = function(){ return this.property; };原创 2020-06-15 10:27:20 · 183 阅读 · 0 评论 -
了解 js 实现继承的六种方式
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。继承:子类可以使用父类的所有功能,并且对这些功能进行扩展。继承的过程,就是从一般到特殊的过程。继承目的: 把子类型中共同的成员提取到父类型中,代码重用JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = func原创 2020-06-15 09:59:48 · 200 阅读 · 0 评论 -
深入理解JavaScript中的作用域、作用域链
作用域先来谈谈变量的作用域变量的作用域无非就是两种:全局变量和局部变量。全局作用域:最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的:var outerVar = "outer";function fn(){ console.log(outerVar);}fn();//result:outer局部作用域:和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,而对于函数外部是无法访问的,最常见的例如函数内部function fn(.转载 2020-06-14 16:25:24 · 140 阅读 · 0 评论 -
javascript内call()、apply()、bind()方法的作用
1.call()、apply()、bind()这三个方法均可改变this的指向可以看下面的例子:可以看到,在未添加这三个方法前:obj内年龄属性没有值,this指向的是obj,因为obj没有值,所以是undefined。在添加了三个方法后,可以看到获取数据的指向均发生改变。2.call 、bind 、 apply 传参情况转载 2020-06-14 14:47:36 · 206 阅读 · 0 评论 -
js内this的指向
面向对象语言中 this 表示当前对象的一个引用。this 就是一个指针,指向我们调用函数的对象。但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。 在函数中,this 表示全局对象。 函数使用中,this 指向函数的所属者。 在函数中,在严格模式下,this 是未定义的(undefined)。 在事件中,this 表示接收事件的元素。 apply 和 call 允许切转载 2020-06-14 12:52:33 · 256 阅读 · 0 评论 -
JS的hasOwnPrototype()方法和 in 操作符
使用hasOwnPrototype()方法可以检测一个属性是否存在于实例中,还是存在于原型中。这个方法(不要忘了它是从Object继承来的)只在给定属性存在于对象实例中时,才返回true。看例子:function Person(){}Person.prototype.name = "Tom";Person.prototype.age = 23;Person.prototype.job = 'Software Engineer';Person.prototype.sayName = func原创 2020-06-13 17:38:20 · 2802 阅读 · 0 评论 -
了解 JS事件循环机制 (宏任务/微任务)
JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,用户引擎必须使用 event loops。Event Loop 包含两类:一类是基于 Browsing Context ,一种是基于 Worker ,二者是独立运行的。 下面本文用一个例子,着重讲解下基于 Browsing Context 的事件循环机制。任务队列所有的任务可以分为同步任务和异原创 2020-06-13 15:45:16 · 275 阅读 · 0 评论 -
js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于频繁的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载。/* 不做处理input触发keyup事件 *//* 输入快的话会出现输出结果多次重复 */window.onload = function () { let obj = document.getElementById('input') obj.addEventListener('keyup',()=>{ l转载 2020-06-13 12:05:31 · 1381 阅读 · 0 评论 -
JS深拷贝与浅拷贝的区别及实现
区分浅拷贝:拷贝后,修改拷贝后的对象,会影响拷贝前的对象深拷贝:拷贝后,修改拷贝后的对象,不影响之前的对象浅拷贝是拷贝一层,深层次的对象级别的就拷贝引用;深拷贝是拷贝多层,每一级别的数据都会拷贝出来;基本数据类型,名字和值都会储存在栈内存中。引用数据类型,名字存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受.原创 2020-06-13 00:01:00 · 3016 阅读 · 0 评论 -
判断是否为数组的四种Js方法
1.instanceofinstanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。var arr = [1,2,3];arr instanceof Array // truevar obj = {};obj instanceof Array // false需要注意的是:如果表达式obj instanceof Foo 返回true,则并不意味着该表达式会永远返回true,因为Foo.prototype属性的值有可能会改变,...原创 2020-06-12 11:49:02 · 1412 阅读 · 0 评论 -
JavaScript数组去重(12种方法,史上最全)[转]
一、利用ES6 Set去重(ES6中最常用)function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true", true转载 2020-06-12 10:17:19 · 167 阅读 · 0 评论 -
纯 js实现动画时钟
效果图:是图片实现的,根据时间动态切换图片素材是这样:直接看代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ width: 122原创 2020-06-11 17:49:06 · 624 阅读 · 0 评论 -
ES6,Array.find()和findIndex()函数的用法
ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找回调函数。[1, 2, 3, 4].find((value, index, arr) => { })查找函数有三个参数。value:每一次迭代查找的数组元素。index:每一次迭代查找的数组元素索引。arr:被查找的数组转载 2020-06-11 15:14:13 · 637 阅读 · 0 评论 -
Doctype作用及严格模式与混杂模式的区分
1.Doctype作用,标准模式与兼容(怪异quirks)模式的区别<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。2.HTML5 为什么只需要写 <!DOCTYPE HTML&原创 2020-06-03 14:13:38 · 466 阅读 · 0 评论 -
一次完整的HTTP请求过程 简述
在我们在搜索输入框输入www.baidu.com,然后回车,就开始了HTTP请求的过程 。过程预览 1.对www.baidu.com这个网址进行DNS域名解析,得到对应的IP地址 2.根据这个IP,找到对应的服务器,发起TCP的三次握手 3.建立TCP连接后发起HTTP请求 4.服务器响应HTTP请求,浏览器得到html代码 5.浏览器解析html代码,并请求html代码中的资源(如js、css图片等)(先得到html代码,才能去找这些资源) 6.浏览器对页面...原创 2020-06-02 10:26:07 · 2240 阅读 · 0 评论 -
前端性能内容及优化方案
1.用户体验和性能优化的理解html部分:要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。 尽量不要使用h5摒弃的iframe标签,因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发,这恰恰影响了初始化UI 诸如img、link、script等元素的src或href属性的值不为空,因为就算我们写为src=""浏览器仍会发送http请求 为页面中的图片设置宽高,这样做的好处是在页面加载完前就完成了布局,如若未指定宽高,在图片加载后还要调整其大小,影响时间。 在转载 2020-06-01 18:13:21 · 291 阅读 · 0 评论 -
浏览器兼容性及处理方案 小结
浏览器兼容性问题,往往是个别浏览器对一些标准定义不一致导致的。常用的浏览器及对应内核如下:浏览器内核IETridentFirefoxGeckochrome先为webkit,后为blink(与opear共同开发)SafariwebkitOpearblinkCSS兼容性问题浏览器兼容性导致的问题:1.不同浏览器对解析标签默认的内边距和外边距不同解决方式:*{ margin: 0; padding: 0;}2.IE6双边距问题;在 IE6中设原创 2020-06-01 16:34:17 · 407 阅读 · 0 评论 -
AJAX产生的原因、请求的五个步骤及优缺点
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。这一技术能够向服务器请求额外的数据据而无须卸载页面,会带来更好的用户体验。 AJAX的核心技术是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,即可以使用XHR对...原创 2020-04-18 11:24:25 · 657 阅读 · 0 评论 -
JavaScript操作 字符串 方法小结
本文主要是关于字符串方法的介绍。创建String类型是字符串的对象包装类型,可以使用String构造函数来创建。var stringObject = new String("Hello World");String对象的方法也可以在所有基本的字符串值访问到,其中继承valueOf()、toLocaleString()后如toString()方法,都返回length属性String对象的每个实例都有一个length属性,表示字符串中包含多个字符。var stringObject原创 2020-05-29 18:53:39 · 194 阅读 · 0 评论 -
JavaScript 数组方法小结
Array,ECMAScript的引用类型,数组。ECMAScript数组都是有序列表,而且每一项都可以保存任何类型的数据。数组的大小根据内容自动扩展。创建数组创建数组的两种方式:第一种::var colors = new Array();例如:var colors = new Array(3); //创建一个包含3项的数组var colors = new Array("red","green","yellow"); //创建包含3个字符串的数组//或者var原创 2020-05-29 13:08:39 · 225 阅读 · 0 评论 -
对 JavaScript原型及原型链 的理解
构造函数对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的。构造函数本身是一个函数,只不过该函数是出于创建新对象的目的而定义的。例如:var person = new Object();这里就是使用构造函数Object()来创建对象。简单来说就是:ECMAScritp中的构造函数,可以用来创建特定类型的对象。像Object、Array是原生构造函数,在运行时会自动出现在执行环境中。也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。下面是自定原创 2020-05-28 16:31:09 · 223 阅读 · 0 评论 -
闭包、闭包作用及缺点
闭包:是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见形式:就是在一个函数内部创建另一个函数。先来看一个例子:function count() { var arr = []; for (var i=1; i<=3; i++) { arr.push(function () { return i * i; }); } return arr;}var results = count(..原创 2020-05-28 10:43:42 · 512 阅读 · 1 评论 -
一篇文章看懂JS执行上下文[转]【自用】
一、引子我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如:function f1() { console.log('res');};f1(); //echofunction f1() { console.log('echo');};f1(); //echo按照代码书写顺序,应该先输出 res,再输出 echo才对,很遗憾,两次输出均为 echo;如果我们将上述代码中的函数声明改为...转载 2020-05-27 15:58:05 · 224 阅读 · 0 评论 -
JS对象详解(对象创建及属性类型)
对象ESMAScript把对象定义为:无序属性的集合,其属性可以包含基本值,对象或者函数。简单来说,是一组名值对,其中值可以是数据或函数。每个对象都是基于引用类型创建的。创建对象1.创建自定义对象的最简单的方式是创建Object的实例,然后再为它们添加属性和方法:var person = new Object();person.name = "Nicholas";person.age = 10;person.job = "Software Engineer";person.s原创 2020-05-26 17:11:31 · 2143 阅读 · 1 评论 -
JavaScript基础数据类型概述、类型转换及Object类型
基础数据类型ECMAScript中有五种简单的数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number、String。还有一中复杂数据类型 Object,Object本质上是由一组无序的名值对组成。ES6 中新增了一种 Symbol。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。typeof操作符ECMAScript是松散类型的,所以需要一个手段来检测给定变量的操作类型 typeof 。对一个值使用typeof操..原创 2020-05-26 08:52:33 · 421 阅读 · 0 评论 -
JavaScript事件绑定的三种方式及事件监听的兼容处理
在JavaScript中,有三种常用的绑定事件的方法:在DOM元素中直接绑定; 在JavaScript代码中绑定; 绑定事件监听函数。1.在DOM元素上直接绑定这种绑定事件的当时称为 HTML事件处理程序。某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值是可以执行JavaScript的代码。<input type="button" value="Click this" onclick="alert('Clicked')"/>原创 2020-05-25 20:39:35 · 722 阅读 · 0 评论 -
DOM事件、事件流、事件对象、事件委托
本文主主要围绕以下四个部分展开: DOM事件级别 事件流(冒泡、捕获、DOM事件流) 事件对象(event) 事件委托一、DOM事件级别DOM级别:可分为四级:DOM0级,DOM1级,DOM2级和 DOM3级。查看详细的DOM级别可以戳这里哟~ 可以看到在DOM1标准内并未添加事件相关的东西。所以DOM事件级别分别为:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理先了解一下HTML事件处理程序某个元素支持的每种事件,都可以使用一个与相应原创 2020-05-25 16:58:52 · 857 阅读 · 0 评论 -
DOM操作方法(查找、更新、插入、删除)
DOM的产生、分类、节点、树等参考文档DOM 文档对象模型、domReady、window.onload与$(document).ready()操作DOM的节点由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容; 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;.转载 2020-05-25 00:18:48 · 1376 阅读 · 0 评论 -
JS实现简单的滑动门
这个是为了体验DOM操作的过程实现的:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ height: 275px; margin: 0原创 2020-05-24 20:35:48 · 413 阅读 · 0 评论 -
Javascript 异步编程的6种方法(目前写了6种)
Javascript语言的执行环境是"单线程"(single thread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。为了解决这个问题,Javascr原创 2020-05-17 23:17:30 · 394 阅读 · 0 评论