javascript
loushumei
这个作者很懒,什么都没留下…
展开
-
js数组方法整理
1. 数组有哪些常用方法,功能、返回值、是否会对原数组造成影响?方法功能返回值改变原数组(Y\N)pop()删除最后一位删除的数据Ypush()在最后一位新增一或多个数据长度Yshift()删除第一位删除的数据Yunshift()在第一位新增一或多个数据长度Yslice()截取指定位置的数组截取后的结果Nsplice()删除指定位置,并替换删除的数据Yconcat()合并数组合并之后的数据Njoin转载 2020-10-22 21:10:37 · 185 阅读 · 0 评论 -
手写数组flatern数组拍平,考虑多层级
知识先填坑:concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组, 而仅仅会返回被连接数组的一个副本返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。 如果要进行 concat() 操作的参数是数组, 那么添加的是数组中的元素, 而不是数组。如:const res= [].concat(1, 2, [3, 4], 5)console.log(res) //[1, 2, 3, 4, 5] 只有一层数组,完成数组拍平const原创 2020-08-25 16:01:39 · 469 阅读 · 0 评论 -
获取当前页面url参数的三种方法
知识先填坑:location.search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号(包含?)?之后的部分)假设访问路径为:file:///Users/xiao**/learn/js_basics/11.html?a=100&b=20&c=30;分别通过【正则匹配】、【拆分字符串成数组】、【新API URLSearchParams】三种方式获取参数方法如下:方法一、正则方法匹配需要的参数//search属性获取到带?的参数字符串console.l原创 2020-08-25 15:52:48 · 3624 阅读 · 0 评论 -
[10,20,30].map(parseInt)返回结果解析
话不多说,直接上结果:[10, NaN, NaN]剖析使用的方法和参数:map的参数和返回值map() 方法定义在JavaScript的Array中, 它返回一个新的数组, 数组中的元素为原始数组调用函数处理后的值。array.map(function (currentValue, index, arr), thisIndex).currentValue: 必须。 当前元素的的值。index: 可选。 当前元素的索引。arr: 可选。 当前元素属于的数组对象。thisIndex可选。原创 2020-08-24 19:36:18 · 816 阅读 · 2 评论 -
手写深度比较
思路:判断对象是否相等,进行深度比较,因为不知道对象层级多深,首先应该是一个递归操作;Step1: 判断两者是否为对象(包括数组、对象),如果不是对象,进行值类型比较;返回两者比较结果;Step2. 两者都是对象,判断【是否是同一个对象】,用===判断对象地址是否一致;一致代表是同一个对象,直接返回true;Step3.两个都是对象或者数组,但是不全等,【比较个数】,如果不相等结束进程,返回结果;Step4.如果两者都是对象,同时个数相等,依次递归调用方法比较两个对象的值,直到返回结果;如果全程没原创 2020-08-24 19:15:43 · 151 阅读 · 0 评论 -
描述event-loop(事件轮询)机制
event loop是什么?JS是单线程运行的.异步要基于回调来实现.event loop就是异步回调的实现原理event loop执行过程Browser console 浏览器打印窗口 Call Stack 调用栈. Web APIs 处理定时或异步的API. Event Loop 事件轮询. Callback Queue 回调函数队列. 实例:console.log('Hi');setTimeout(function cb1() { con原创 2020-06-23 20:31:06 · 537 阅读 · 0 评论 -
AJAX跨域问题讲解
为什么会发生产生跨域问题?####[ 产生跨域的原因 ]1.浏览器限制2.跨域(协议,域名,端口任何一个不同)3.XHR(XMLHttpRequest)请求也就是说当我们发送的是XMLHttpRequest请求不同的域名,浏览器就会限制访问,那么就会产生跨域问题。####[ 解决跨域问题的思路 ]1.改动客户端浏览器参数来解除限制 浏览器启动加入 --disable-web-security2.Jsonp解决是XHR请求的问题.3.跨域: 被调用方支持跨域,调用方的隐藏请求##跨原创 2020-05-27 15:37:14 · 157 阅读 · 0 评论 -
【XMLHttprequest】手写一个简易的ajax
##### GET 请求// 创建XMLHttpRequest对象const xhr=new XMLHttpRequest()// 创建一个 get 请求,true 采用异步xhr.open('GET','./test.json',true)xhr.onreadystatechange=function(){ if (xhr.readyState === 4) { if (xhr.status=== 200) { alert(xhr.response原创 2020-05-26 20:16:25 · 632 阅读 · 0 评论 -
手写通用的事件监听函数
前言在问题前,需要先理解事件冒泡、事件代理可参考文章【事件代理】 动态数据列表里,如何监听每条数据的点击?具体实现如下:DOM节点:<div id="div3"> <a href="#">a1</a><br> <a href="#">a2</a><br> <a href="#">a3</a><br> <a href="#">a4&l原创 2020-05-25 20:05:06 · 260 阅读 · 0 评论 -
【事件代理】 动态数据列表里,如何监听每条数据的点击?
前言在问题前,需要先清楚关于事件冒泡、事件代理的定义事件冒泡基于DOM树形结构事件顺着触发元素往上冒泡应用场景:事件代理事件代理原理: 事件冒泡机制实现方式:可用addEventListener(); //所有主流浏览器,除了IE8及更早IE版本。特点:代码简洁,把事件处理器添加到一个父级元素上,避免了把事件处理器添加到多个子级元素上。 大量减少内存占用, 减少事件注册。 适用新增元素实现动态绑定事件。具体实现如下:DOM节点:<div id="div3"&原创 2020-05-25 19:57:12 · 295 阅读 · 1 评论 -
DOM性能优化
背景:DOM操作占用CPU比较多,导致浏览器重新渲染,耗时,所以避免频繁的DOM操作1.对DOM查询做缓存for (let i = 0; i < document.getElementsByTagName('p').length; i++) { //每次循环,都会计算length,频繁进行DOM操作}//------------------------------------------//缓存 DOM 查询结果const pList=document.getElementsBy.原创 2020-05-25 16:19:01 · 440 阅读 · 0 评论 -
手写Promise加载一张图片
Promise产生的原因常见的回调地狱场景:// 回调地狱 callback hell// 获取第一份数据$.get(url1, (data1) => { console.log(data1) //获取第二份数据 $.get(url2, (data2) => { console.log(data2) //获取第三份数据 $.get(url3, (data3) => { console.原创 2020-05-19 13:36:37 · 387 阅读 · 0 评论 -
前端使用异步的场景有哪些
同步和异步的区别是什么javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。【同步】:按照一定的顺序去执行,执行完一个才能执行下一个,会阻塞代码执行【异步】:不会阻塞代码执行前端使用异步的场景有哪些1. 网络请求,如 ajax请求、图片加载//ajax请求console.log('start')$.get('./data.json',function(data){ console.log(data)})console.log('end')原创 2020-05-08 20:18:36 · 1482 阅读 · 0 评论 -
JS关于作用域、闭包的面试题
1.创建10个a标签,点击时弹对应的序号常见做法 ❌var afor (var i = 0; i < 10; i++) { a=document.createElement('a') a.innerHTML=i a.addEventListener('click',function(e){ e.preventDefault()//取消默认事件 ...原创 2020-05-06 23:33:49 · 232 阅读 · 0 评论 -
call和apply和bind的区别、手写bind函数
call、apply、bind的区别1.定义:call apply看作是对象的方法,通过调用方法的形式间接调用函数。都是为了改变某个函数运行时的上下文(context)(函数体内部 this 的指向)而存在的。bind方法主要的作用是将函数绑定至某个对象,当函数f()上调用bind()方法并传入对象o作为参数,这个方法将返回一个新的函数。2.参数:【call、apply bind 相同点...原创 2020-05-05 22:55:06 · 196 阅读 · 0 评论 -
this的 5 种应用场景
1、作为普通函数function fn1() { console.log(this)}fn1() //window 在全局执行,this指向全局2、使用call apply bindfn1.call({ x: 1}) //{x:1}const fn2 = fn1.bind({ x: 2})fn2() //{x: 2}3、作为对象方法被调用co...原创 2020-04-27 19:53:58 · 380 阅读 · 0 评论 -
浅析作用域、自由变量、闭包
作用域全局作用域: 变量未受到函数的约束,在全局可以使用,如windows对象,document对象函数作用域: 在函数中定义的变量只能在当前函数中有效块级作用域(ES6):在某个{}声明的,只在当前{}有效自由变量一个在当前作用域中没有定义,但是被使用了向上级作用域,一层一层一席寻找,直至找到为止如果到全局作用域都没找到则报错 xx is not definedlet a...原创 2020-04-27 11:08:59 · 166 阅读 · 0 评论 -
手写一个简易的Jquery考虑插件及扩展性
通过手写一个简易的DOM节点查询功能的Jquery实例,了解Jquery内部实现原理及理解Class与继承。页面DOM节点如下<p>第一段文字 1</p><p>第一段文字 2</p><p>第一段文字 3</p>定义jquery对象class jQuery{ // constructor 构造器 ...原创 2020-04-21 20:00:54 · 427 阅读 · 0 评论 -
如何用class实现继承、本质是什么?
[constructor] 属性返回对创建此对象的数组函数的引用。[extends] ES6关键字用来创建一个普通类或者内建对象的子类[super] ES6关键字用于访问和调用一个对象的父对象上的函数。// 父类class People{ constructor(name){ this.name=name } eat() { co...原创 2020-04-14 20:08:16 · 1527 阅读 · 0 评论 -
javascript中赋值、浅拷贝、深拷贝的区别及实例详解
赋值当把一个对象a赋值给另外一个对象b时,赋的值是对象a在栈中的地址,而不是堆中的数据。let a={ name:'xiaoming', age:21, grade:{ language:60, math:81, english:99, science:94 },}let b=ab.nam...原创 2020-04-11 20:52:52 · 258 阅读 · 0 评论 -
javascript中值类型和引用类型的区别
js的变量类型有哪些1、值类型(基本类型):字符串(string)数值(number)布尔值(boolean)undefined、null2、引用类型:对象(Object)数组(Array)函数(Function)值类型和引用类型的区别【值类型】1.占用空间固定,保存在栈中,在当前环境执行结束时销毁2.保存和赋值是值的本身3.可以使用typeof检测数据类型4.基本...原创 2020-04-11 19:20:48 · 150 阅读 · 0 评论 -
AJAX请求数据_demo
本篇列举三个demo: 1、用ajax请求json格式数据(javascript) 2、用ajax请求json格式数据(Jquery) 3、用jsonp请求json格式数据(Jquery)页面只有实现两个功能(用get请求-获取数据 & 用post请求-设置修改数据)三个demo页面布局如下:<h1>员工查询</h1><label>请输入员工编号:</label><input typ原创 2016-11-12 11:28:40 · 12268 阅读 · 1 评论 -
[JS]笔记19_AJAX跨域(demo)
注:服务器环境运行!test05.php文件:<?php $str='{"name":"薯片","sex":"女","age":19,"score":66}'; echo $str;?>1、同步请求xhr.open(‘get’,’test05.php?_=’+new Date().getTime(),false) //同步请求–>同步执行<!DOCTYPE html><html原创 2016-11-07 17:41:50 · 977 阅读 · 0 评论 -
[JS]笔记18_AJAX2_iframe元素&AJAX跨域&JSONP跨域
1、iframe元素iframe元素会创建包含另外一个文档的内联框架 常用属性: frameborder属性规定是否显示框架周围的边框 值:0/1 src属性规定要显示的文档的URL 可是:html、文本、ASP等 scrolling属性规定是否显示滚动条 值:yes no auto<iframe frameborder=“0” src=“abc.html” scrolling原创 2016-11-07 16:21:19 · 1399 阅读 · 0 评论 -
[JS]笔记17_AJAX1基本过程(多种适用情况)
注:所有ajax请求必须在服务器环境下运行1、请求服务器端的txt格式的数据2、请求服务器端的json对象格式的数据3、请求服务器端的json数组格式的数据4、请求服务器端的XML格式的数据5、请求服务器端的PHP格式的数据原创 2016-11-07 12:13:50 · 556 阅读 · 0 评论 -
[JS]笔记16_AJAX1基本请求过程
AJAX–>阿贾克斯了解WAMP的主要作用是什么 WAMP:Windows Apache MySql PHP的缩写 WAMP是一个集成环境,对前端而言: 集成了后台语言PHP环境和数据库MYSQL 能够将一台计算机变成web服务器 方便开发者在真正的服务器环境进行测试原创 2016-11-07 11:39:46 · 869 阅读 · 0 评论 -
多种方法实现Tab切换—面向过程&面向对象&Jquery方法
TAb切换思路一: 判断是否为当前点击对象,来增加类名和减少类名 要在面向过程的基础上改写成面向对象的方法,需要经过四个步骤: 1、创建构造函数 2、将变量变成对象的属性 3、将函数变成对象的方法 4、实例对象<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Tab1_三种方法实现</tit原创 2016-11-06 23:11:33 · 4011 阅读 · 1 评论 -
[JS]笔记15之客户端存储cookie
-->本地存储发展情况 -->什么是cookie -->cookie优缺点 -->cookie的设置、读取、删除 -->cookie应用本地存储发展情况 一、什么是cookie1、什么是cookiecookie是存储于访问者计算机中的变量cookie是浏览器提供的一种机制,可以由JavaScript对其进行操作(设置、读取、删除)2、cookie的特性cook原创 2016-09-23 10:10:00 · 291 阅读 · 0 评论 -
[JS]笔记14之事件委托
-->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一、什么是事件委托通俗的讲,onclick,onmouseover,onmouseout等这些就是事件委托,就是这个事件本来应该加在某些元素上的,而你却加到其他元素上来完成这个事件。事件委托1 我是h3标签 我原创 2016-09-23 10:09:56 · 332 阅读 · 0 评论 -
[JS]笔记13之Date对象
-->获取与设置时间的方法-->使用Date对象制作相应的效果 1、设置时间创建一个时间对象new Date(time);设置时间 time 从1970年1月1日至几种格式:new Date("May 25 , 2024");new Date("2015/12/25,12:20:12");new Date(2016,1,1); 2016年2月1日零点 1 2 /*原创 2016-09-23 10:09:52 · 271 阅读 · 0 评论 -
[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播一、事件冒泡和捕获1、概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡Net原创 2016-09-23 10:09:42 · 431 阅读 · 0 评论 -
JS学习笔记10之Math对象
-->Math对象 常用属性和方法-->使用Math对象制作相应的效果 Math对象用于执行数学任务一、Math对象的属性:二、Math对象的方法:三、常用属性和方法:Math.PI ----------------返回圆周率3.14 ...Math.ceil(x) ------------对数值x进行向上取整Math.floor(x) -----------对数值原创 2016-09-23 10:09:31 · 312 阅读 · 0 评论 -
JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一、鼠标事件onclick ---------------鼠标点击事件oncontextmenu------鼠标右键点击onmouseover --------鼠标移上onmouseout ---------鼠标移出onmousedown -------鼠标按下onmousemove -原创 2016-09-23 10:09:27 · 277 阅读 · 0 评论 -
JS学习笔记8之 BOM-浏览器对象模型
*什么是BOM-->BOM (Browser Object Model) 浏览器对象模型-->BOM提供了独立于内容而与浏览器窗口进行交互的对象-->BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window-->BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分*BOM主要内容-->w原创 2016-09-23 10:09:21 · 289 阅读 · 0 评论 -
JavaScript学习笔记7 之DOM文档对象模型
一、什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOMDOM是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM树中的所有节点均可通过JS进行访问。所有HTML元素(节点)均可被修改、创建或删除。二、节点类型1、节点类型原创 2016-09-23 10:09:15 · 267 阅读 · 0 评论 -
JavaScript学习笔记6 之易错题整理
本篇内容是关于容易出错题的整理,这些题也有利于对javascript的语法逻辑的理解,分析的内容仅供参考: 1 2 /*1*/ 3 var x=0 , y=0 , c=1; 4 function add(n) {n=n+1;} 5 x=add(c); 6 alert(x);//4 7 function add(原创 2016-09-23 10:09:10 · 305 阅读 · 0 评论 -
JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一、计时器setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复)setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复)清除计时器:clearInterval( );clearTimeout( );当计时器调用执行完毕时,它将返回一个timer ID,如果将该ID传递给c原创 2016-09-23 10:09:04 · 254 阅读 · 0 评论 -
JavaScript学习笔记4之 ByClass&json
一、通过class获取标签var out=document.getElementsByClassName(‘out’);IE 6 7 8 不支持 getElementsName是否有办法既能通过class获取标签又没有兼容问题 ?首先获取全部的标签,用for循环遍历到所有类名相同的标签,遍历的顺序放到数组里,最后获得一个有相同类名的数组。两种遍历方法:一种是全局遍历原创 2016-09-23 10:09:00 · 421 阅读 · 0 评论 -
JavaScript学习笔记3之 数组 & arguments(参数对象)& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
一、Array数组1、数组初始化(Array属于对象类型) 1 /*关于数组的初始化*/ 2 //1.创建 Array 对象--方法1: 3 var arr1=[]; 4 arr1[0]='aa';//给数组元素赋值 5 arr1[1]='bb'; 6 arr1[2]='cc'; 7 arr1[3]='dd'; 8原创 2016-09-23 10:08:56 · 556 阅读 · 0 评论 -
JavaScript学习笔记2之Tab切换
1、Tab切换简写版1页面布局如下: 1 2 3 标题一 4 标题二 5 标题三 6 7 8 内容一 9 内容二10 内容三11 12 关于点击事件样式如下:原创 2016-09-23 10:08:52 · 392 阅读 · 0 评论