![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
cake_eat
加油,xm
展开
-
箭头函数作为对象属性时候的this指向是window
let a = { b:{ c:function(){ console.log(this); }, e:()=>{ console.log(this); } }, d:function(){ console.log(this); } } a.原创 2021-03-16 17:10:32 · 1345 阅读 · 1 评论 -
洗牌算法的JS实现(如何打乱数组)
function shuffle(arr){ for(var i = 0;i<arr.length;i++){ var random = Math.floor(Math.random()*arr.length); var temp = arr[i]; arr[i] = arr[random]; arr[random] = temp } .原创 2021-02-24 16:56:52 · 367 阅读 · 0 评论 -
jQuery中的Ajax
(1)$ajax()方法作用:发送ajax请求$.ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/base', // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response);原创 2020-10-24 11:20:01 · 216 阅读 · 0 评论 -
什么是同源政策?使用JSONP解决同源限制问题
什么是同源?如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。例如:对于http://www.example.com/dir/page.htmlhttp://www.example.com/dir2/other.html:同源http://example.com/dir/other.html:不同源(域名不同)http://v2.www.example.com/dir/other.html:不同源(域名不同)http://www.example.原创 2020-10-23 17:16:56 · 181 阅读 · 0 评论 -
什么是FormData对象?FormData对象的作用
什么是FormData对象?XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。For原创 2020-10-23 10:33:33 · 3647 阅读 · 0 评论 -
js console.log(1<2<3)的运算结果;console.log(3>2>1)的运算结果
今天看到了一个很有意思的题目:console.log(1<2<3)和console.log(3>2>1)的运算结果分别是什么?这道题主要在考察布尔类型的数据参与比较运算的时候是如何转换的:在关系运算符中:如果一个操作数是布尔值,则先将其转换为数值,然后再执行比较。我们可以做一个测试:var result1 = 1<2 ;console.log(result1); //trueconsole.log(result1<3); //truevar resu原创 2020-10-22 20:52:25 · 1738 阅读 · 0 评论 -
什么是Ajax?Ajax实现步骤
什么是Ajax?Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。简单来说, Ajax 就是实现页面无刷新更新数据的一种方法。Ajax的应用场景:页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表Ajax的运行环境Ajax需要运行在网站环境中才能生效。比如在nodejs搭建的网站服务器中。Ajax运行原理Ajax相对于浏览原创 2020-10-20 21:12:02 · 774 阅读 · 0 评论 -
JS 事件循环
所有的同步任务在主线程上执行形成一个执行栈主线程遇到异步任务,将其交给异步进程处理异步进程处理完毕后(如定时器时间片到了),将异步任务推入任务队列主线程执行完毕后,查看任务队列,如果存在任务,则将其推进主线程处理重复执行2,3,4步称为时间循环。参考博客:https://blog.csdn.net/qq_39207948/article/details/81671304...原创 2020-10-15 15:09:25 · 86 阅读 · 0 评论 -
js 用回调函数获取一个函数中异步操作(如定时器)的结果
//如果需要获取一个函数中异步操作的结果,则必须通过回调函数来获取function fn(callback){ //var callback = function(data){console.log(data);} setTimeout(function (){ var data = 'hello'; callback(data); },1000);}fn(function (data){ console.log(data)}).原创 2020-10-14 15:22:30 · 1759 阅读 · 6 评论 -
正则表达式
1原创 2020-10-11 19:00:19 · 61 阅读 · 0 评论 -
怎么理解 [].slice.call()
在es5标准中,我们经常需要把arguments对象转换成真正的数组。所以我们经常可以看见以下转换方式:[].slice.call(arguments)怎么理解[].slice.call(arguments)[].slice.call(arguments)等价于:Array.prototype.slice.call(arguments) 和 [].__proto__.slice.call(arguments)Array.prototype.slice.call(arguments)原本调用sli原创 2020-10-11 16:27:17 · 547 阅读 · 2 评论 -
javascript中的基本数据类型和引用类型
基本数据类型Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。 var a = 10; var b = a; b = 20; console.log(a); // 10值上面,b获取的是a值得一份拷贝,虽然,两个变量的值相等,但是两个变量保存了两个不同的基本数据类型值。b只是保存了a复制的一个副本。所以,b的改变,对a没有影响。下图演示了这种基本数据类型赋值的过程:引用类型数据也就转载 2020-10-11 15:39:09 · 252 阅读 · 1 评论 -
原生js中的forEach和jQuery中的each方法的区别
ES5中的forEach()方法forEach是ES5中的一个数组遍历函数,是js原生支持的遍历方法。语法:数组.forEach(function(每一项内容,序号){})例如:// IE8 不支持var array1 = ['abc','d','ddd'];array1.forEach(function (item,index){ console.log(item);});jQuery中的each()方法jQuery中的each()方法可以:1、方便的遍历 jQuery 元原创 2020-10-10 20:28:20 · 357 阅读 · 2 评论 -
JSON常用方法
JSON对象和JSON字符串的转换JSON在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:JSON字符串:var jsonStr ='{"name":"Liza", "password":"123"}' ;JSON对象:var jsonObj = {"name":"Liza", "password":"123"};1.JSON字符串转化JSON对象var jsonObject= jQuery.parse原创 2020-10-05 18:54:17 · 4618 阅读 · 0 评论 -
什么是 json
一、什么是json?json的全称为:JavaScript Object Notation,是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。【以上来自于百度百科】简单来说:json就是一种在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互。类似于:国际通用语言-英语中国56个民族不同地区的通用语言-普通话。但真要说json到底是什么,以及json的作用,我们总是难以描述,下面我转载 2020-10-05 18:42:15 · 875 阅读 · 0 评论 -
js中的同步和异步
https://blog.csdn.net/qq_22855325/article/details/72958345原创 2020-09-30 21:31:46 · 72 阅读 · 0 评论 -
回调函数
什么是回调函数在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。回调函数的英文解释为:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.翻译过来原创 2020-09-30 21:26:53 · 90 阅读 · 0 评论 -
js中的伪数组
什么是伪数组?伪数组是一个 Object,而真实的数组是一个 Array伪数组具有length属性,其他属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)伪数组不具有数组的比如说push,shift,map等等方法常见的伪数组函数内部的argumentsDOM对象列表(document.getElementsByTags)jQuery对象($(“div”))...原创 2020-09-30 16:59:50 · 418 阅读 · 0 评论 -
js浅拷贝和深拷贝
什么是浅拷贝?浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用(地址)。浅拷贝的特点(1) 对于基本数据类型的成员对象,因为基础数据类型是值传递的,所以是直接将属性值赋值给新的对象。基础类型的拷贝,其中一个对象修改该值,不会影响另外一个。(2) 对于引用类型,比如数组或者类对象,因为引用类型是引用传递,所以浅拷贝只是把内存地址赋值给了成员变量,它们指向了同一内存空间。改变其中一个,会对另外一个也产生影响。例如:var obj = { id:1, name:'andy',原创 2020-09-29 16:55:03 · 118 阅读 · 0 评论 -
js 任务队列
同步与异步JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。为了解决原创 2020-09-29 09:46:20 · 1480 阅读 · 0 评论 -
js for循环点击事件输出i的值错误的原因
代码:var lis = document.querySelector('.nav').querySelectorAll('li');for(var i = 0;i<lis.length;i++){ console.log(i); lis[i].onclick = function (){ console.log(i); }}第一次:for循环嵌套自动函数, i从0-3 执行四次,每次执行,自执行函数也会跟着执行,也就会按照i值的不同,给不同的节点,绑原创 2020-09-29 08:58:40 · 1003 阅读 · 1 评论 -
高阶函数
什么是高阶函数高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。<script>function fn(callback){callback&&callback();}fn(function(){alert('hi')}</script><script>function fn(){return function() {}} fn();</script> 此时fn 就是一个高阶函数原创 2020-09-28 19:01:39 · 188 阅读 · 0 评论 -
严格模式
什么是严格模式JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改:消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。消除代码运行的一些不安全之处,保证代码运行的安全。提高编译器效率,增加运行速原创 2020-09-28 18:34:34 · 891 阅读 · 0 评论 -
改变函数内的this指向的方法call() apply() bind()
改变函数内的this指向 js提供了三种方法: call() 、apply()、 bind()1、call方法call方法可以调用函数,还可以改变函数内的this指向。例如:var o = { name: 'andy'}function fn(a,b){ console.log(this); console.log(a+b)}fn.call(o, 1, 2);call()方法的主要作用是实现继承。例如:function Father (uname, ag原创 2020-09-28 16:51:05 · 256 阅读 · 0 评论 -
函数的调用方式和函数内部的this指向
1. 普通函数function fn(){console.log(‘你好’);};调用方式:fn();fn.call();2. 对象的方法var o ={sayHi:function (){console.log(‘hi’);}};调用方式:o.sayHi();3. 构造函数function Star(){};调用方式:new Star();4. 绑定事件函数btn.onclick = function (){};调用方式:点击就可以调用5. 定时器函数set原创 2020-09-28 15:59:33 · 301 阅读 · 0 评论 -
Object.defineProperty方法
Object.defineProperty方法的作用Object.defineProperty() 定义对象中新属性或修改原有的属性。语法:Object.defineProperty(obj, prop,descriptor)obj:必需。目标对象prop:必需。需定义或修改的属性的名字descriptor:必需。目标属性所拥有的特性Object.defineProperty() 第三个参数 descriptor 说明:以对象形式 { } 书写value: 设置属性的原创 2020-09-28 11:43:56 · 73 阅读 · 0 评论 -
JavaScript中every、filter、forEach、map、some的区别
不同点:every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。forEach():对数组中的每一项运行给定函数。这个方法没有返回值。 相同点:以上方法都不会修改数组中的包含的值。注原创 2020-09-28 10:59:19 · 215 阅读 · 0 评论 -
JavaScript查询商品案例
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&.原创 2020-09-28 10:31:08 · 625 阅读 · 0 评论 -
JavaScript call方法的作用
call方法的作用call方法可以调用函数call方法可以改变这个函数的this指向例如://call方法function fn(x,y){ console.log(x+y); console.log(this) ;}var o = { name: 'andy'}//1、call方法可以调用函数// fn.call(); //此时函数里面this指向的是window//2、call方法可以改变这个函数的this指向,此时函数的this指向 o 这个对原创 2020-09-26 20:36:21 · 847 阅读 · 0 评论 -
原型对象的应用 扩展内置对象
利用 console.log(Array.prototype); 输出数组的原型对象,我们可以看到里面有很多内置的方法,但是没有求和的方法。我们可以利用原型对象来扩展内置对象Array.prototype.sum = function (){ var sum = 0; for(var i = 0 ;i<this.length;i++){ sum += this[i]; } return sum;}var arr=[1,2,3];cons原创 2020-09-26 20:12:59 · 122 阅读 · 0 评论 -
原型对象的this指向问题
构造函数中的this 指向我们实例对象。原型对象里面放的是方法, 这个方法里面的this 指向的是这个方法的调用者, 也就是这个实例对象。例如:var that;function Star(uname, age){ this.uname = uname; this.age = age;}Star.prototype.sing = function (){ console.log('我会唱歌'); that = this;};var ldh = new S原创 2020-09-26 19:58:55 · 710 阅读 · 0 评论 -
JavaScript对象成员查找规则
对象成员查找规则① 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。② 如果没有就查找它的原型(也就是 __proto__指向的prototype 原型对象)。③ 如果还没有就查找原型对象的原型(Object的原型对象)。④ 依此类推一直找到 Object 为止(null)。⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。例如:``javascriptfunction Star(uname, age){t原创 2020-09-26 19:17:53 · 411 阅读 · 0 评论 -
JavaScript原型链
在讲原型链之前,我们先回固一下构造函数、原型和实例的关系。构造函数、原型和实例的关系每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。举例:function Star(uname, age){ this.uname = uname; this.age = age;}Star.prototype.sing = function (){ console.log('我会唱歌')}var ldh = new Sta原创 2020-09-26 18:57:45 · 138 阅读 · 0 评论 -
原型对象prototype和对象实例的__proto__属性
原型对象我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象, 而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那 么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是 可以将这些信息直接添加到原型对象中。对象的__proto__属性Firefox、Safari 和 Chrome 在每个原创 2020-09-26 17:09:21 · 1079 阅读 · 0 评论 -
ES5创建对象的方式
ES5创建对象的方式1、对象字面量2、new Object()构造函数3、几种模式:工厂模式:https://blog.csdn.net/cake_eat/article/details/108690230原型模式:https://blog.csdn.net/cake_eat/article/details/108694307组合使用构造函数和原型模式:https://blog.csdn.net/cake_eat/article/details/108696131动态原型模式:https://原创 2020-09-26 10:57:37 · 580 阅读 · 0 评论 -
ES6面向对象案例-动态添加导航栏标签页
效果图点击加号+新增选项卡:双击tab栏更改文字:HTML代码CSS代码JS 代码原创 2020-09-24 19:42:25 · 559 阅读 · 0 评论 -
ES6类中this指向问题
ES6中this指向它的调用者。例如:点击button的时候sum()方法里面this指向btn。此时如果再调用构造函数里面的x,y,不能直接用this.x和this.y,而是采取在类之外定义一个变量_that,在构造函数里面让_that等于构造函数里面的this,最后在sum函数里面通过_that变量来调用构造函数中的x和y。var _that;class Father{ constructor(x,y) { this.x=x; this.y=y;原创 2020-09-24 19:21:31 · 590 阅读 · 0 评论 -
ES6中的类和对象
类class在ES6中增加了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象。类抽象了对象的公共部分,它泛指某一大类。对象特指某一个,通过类实例化一个具体的对象。创建类//语法:class Star{ //class body}//实例:var xx = new Star(); 类添加方法//创建类 class 创建明星类class Star{ //constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过 new原创 2020-09-24 19:07:04 · 319 阅读 · 0 评论 -
JavaScript事件处理影响内存和性能的解决方法:事件委托和移除事件处理程序
内存和性能在 JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先,每个 函数都是对象,都会占用内存;内存中的对象越多,性能就越差。其次,必须事先指定所有事件处理程 序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间。事件委托对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click 事件会一直冒泡到 document 层次。也就是说,我们可以原创 2020-09-24 08:35:44 · 356 阅读 · 0 评论 -
JavaScript事件类型
1 UI事件UI事件指的是那些不一定与用户操作有关的事件。(1)load事件:当页面完全加载后(包括所有图像、JavaScript 文件、 CSS文件等外部资源),就会触发 window 上面的 load 事件。有两种定义 onload 事件处理程序的方式。第一种方式是使用如下所示的 JavaScript代码:EventUtil.addHandler(window, “load”, function(event){ alert(“Loaded!”); });第二种指定 onload原创 2020-09-24 08:23:14 · 596 阅读 · 0 评论