fish_skyyyy的博客

说白了，其实就是作用域和异步回调在捣鬼，只要解决了作用域，保证每次循环中的值都是独立的，并且设置合理的时间，按秒输出就好啦~作用域可以通过let 关键字或立即执行函数来解决，然后让每个 setTimeout 回调函数的延迟时间随着 i 的增加而增加，就完事儿啦~

你真的了解Javascript吗？

根据数组中对象的某个属性值进行排序一个对象数组，单个对象里某个属性是数字，需要按这个属性的数字大小升序排序。背景： 项目表单根据编号id进行排序代码：var arr = [ { id: 1, message: "我是1" }, { id: 3, message: "我是3" }, { id: 2, message: "我是2" }, { id: 6, message: "我是6" }, { id: 4, message: "我是4" }, { id:

首先来看一段代码[] == ![] //true'' == ![] //true1 == ![] //false0 == ![] //true![] == false //true是不是有些云里雾里的？接下来看一张图片：在这段算法里，和 [] == ![] 匹配的是条件 7，所以调用 [] == ToNumber(false) 进行比较。在 9.3 节中，ToNumber(false) 等于 0，于是比较变为 [] == 0 。在此处因为 [] 是对象，比较过程走分支 9

Browser对象一、Window对象二、History对象三、Location 对象面试突然问到了这些对象的方法，一时半会想不起来几个，总结一下：一、Window对象Window对象方法：方法描述alert()显示带有一段消息和一个确认按钮的警告框。atob()解码一个 base-64 编码的字符串。btoa()创建一个 base-64 编码的字符串。blur()把键盘焦点从顶层窗口移开。clearInterval()取消由 setInterv

JS输出字符串中出现最多次数的字符一道很简单的题。。由于面试看错了题目，导致面试不通过。。痛定思痛，把这道题专门写出来题目：输出字符串中出现最多次数的字符输入：'aabbccccdd'输出：'cccc'代码：function getLog(str) { var obj = {} //创建一个对象用于存储每个字符以及它出现的次数 var newstr = '' for (var i = 0; i < str.length; i++) { v

关于事件循环机制浏览器的事件循环机制浏览器的事件循环机制

这是一道关于前端的很经典的面试题：function Foo() { getName = function () { console.log(1) }; return this}Foo.getName = function () { console.log(2)}Foo.prototype.getName = function () { console.log(3)}var getName = function () { conso

this指向问题与apply、call、bind的区别一、this的指向二、apply、call、bind的区别主要应用场景一、this的指向要理解函数更改了this指向，就需要了解this的指向：内部函数的this指向objvar name="张三";var age=18;var obj={ name:'李四', objage:this.age, myfun1:function(){ console.log(this.name+''+this.age

原型与原型链一、原型1、构造函数2、原型对象3、实例对象关于原型和原型链，之前也有写过一篇文章，地址：https://blog.youkuaiyun.com/fish_skyyyy/article/details/113960342现根据自己所学到的新知识，再来深挖一下原型和原型链。一、原型关于原型，实际上就是prototype、proto、constructor的三角关系。想要了解原型，就要了解三个最基础的概念：构造函数、原型对象、实例对象。1、构造函数首先什么是构造函数？想要搞懂什么是构造函数，就要

JS中的重载和覆盖一、重载二、覆盖一、重载重载是函数名相同，参数不同。//第一次声明函数变量function sum(a, b) { return a+b}console.log(sum);console.log(sum(1,2));//第二次声明函数变量function sum(a, b, c) { return a+b+c}console.log(sum);console.log(sum(1,2,3));最终控制台输出结果为：二、覆盖重写又称覆盖，一

使用sort根据数组中对象的某个属性值进行排序var array = [ { id: 1, name: 'zhangsan', age: 21 }, { id: 4, name: 'liuliu', age: 19 }, { id: 3, name: 'wangwu', age:35 }, { id: 2, na

JS继承的几种方式一、原型链继承二、借用构造函数继承三、组合继承四、原型式继承五、寄生式继承六、寄生组合式继承继承之前需要提供一个父类，即继承的对象（继承谁），用来提供继承的属性：function Person(name){ this.name=name;}Person.prototype.age=20一、原型链继承function Per(){ this.name='Alice'}Per.prototype=new Person()var per=new Per()console

apply、call、bind的区别和主要应用场景apply、call、bind的区别主要应用场景apply、call、bind的区别JavaScript中每个function对象都有一个call()方法和一个apply()方法语法：apply()：function.apply(this,[arg1,arg2,…])最多两个参数：this、数组(一个对象也数组)call()：function.call(this,arg1,arg2…)多个参数：this、参数列表都是可以用来代替另一个对象调用

详解JQuery中的五大选择器目录详解JQuery中的五大选择器一、基本选择器二、层级选择器1、后代选择器2、子选择器三、属性选择器1、属性名称选择器2、属性选择器3、复合属性选择器四、过滤选择器1、首元素选择器2、尾元素选择器3、非元素选择器4、偶数选择器5、奇数选择器6、等于索引选择器7、大于索引选择器8、小于索引选择器9、标题选择器五、表单过滤选择器1、可用元素选择器2、不可用元素选择器3、选中选择器4、选中选择器（下拉框）选择器能够筛选具有相似特征的元素标签，允许对HTML元素组或单个元素进行操

实现网页购买页面的放大镜效果这个知识点其实很久之前就想写了…我们逛淘宝、京东等网购页面时经常会看到商品查看详情页面，会有商品的图片，鼠标滑过还自带放大镜效果<!--展示的小图--><img class="mid" src="./images/1.jpeg" alt="" width="384px" height="216px"><!--隐藏的大图--><div class="hid"><img src="./images/1.jpeg" al

javascript实现懒加载懒加载在各大网页中用处越来越多，在不用懒加载的情况下，一个网页需要加载数百张照片，导致服务器压力很大，不仅影响网页的加载速度，还会影响带宽。这个时候我们就需要懒加载来提高用户体验，并且减轻服务器压力，从而提高性能。它的实现机制是优先加载可视区域的内容，其他部分等进入了可视区域再加载。再具体点用代码实现的角度来说，就是：1、创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出

使用js写一个简易拖拽模块针对于拖拽问题，不得不先了解几个必要的事件：在拖动目标上触发事件事件解释ondragstart用户开始拖动元素时触发ondrag正在拖动元素时触发ondragend用户完成元素拖动时触发释放目标时触发的事件事件解释ondragenter当拖动对象进入其容器范围内触发ondragover当拖动的对象在另一对象容器范围内拖动时触发ondragleave当拖动的对象离开其容器范围内时触发ond

使用原生js实现一个简易的模态框首先上效果图：思路：首先创建一个button按钮，显示，其次创建一个div大框，隐藏，div中包含有一个子元素p，p元素中包含有一个子元素span。点击button按钮，触发div显示、button隐藏，点击span关闭事件，触发div隐藏、button显示。遇到的问题：因为我是使用DOM节点的知识用javascript实现的，所以在创建好第一个div大框的时候，我不知道怎么添加进body父级元素中解决方案：最开始使用body.appendChild(div)，总是报

模仿淘宝评论留言的简易留言板最终效果图如下：思路：想到留言板就想到了 标签，这个标签定义多行的文本输入控件，然后在评论框旁边设置button按钮，点击进行留言。留言的内容是一条一条的，首选列表，创建隐形的ul，在鼠标点击的时候再创建li，将显示有留言内容的li添加进ul中，这就完成了初始的留言板，随后进行优化，例如加上时间和删除功能等。遇到的问题：关于时间的两个问题和添加留言顺序及删除留言的问题（1）每次点击评论事件显示的都为同一时间，即运行代码时获得的时间（2）时间在时分秒上会出现个位数字，看

用原生js实现table切换效果图如下：点击触发button变色，并使div中显示相对应的名称首先先搭建模块，四个input，类型为button类型，再加四个div，搞定！<input type="button" value="table1"><input type="button" value="table2"><input type="button" value="table3"><input type="button" value="table

简易二级联动结构分析（奶奶级）这个小demo主要由三大块组成：html、css 和 js首先是html模块：form 标签用于为用户输入创建 HTML 表单，是块级元素。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。首先创建一个form表单，包含两个select，用于进行二级联动。第一个select中包含有一个onchange事件，那我们就先来了解一下什么是onchange 事件，onchange 事件怎么用：onchange 事件会在域的内容改变时发生。语法：

关于自己写的自动和点击轮播（简易版）轮播重中之重还是javascript，首先先说说架构：<div id="big"> <div id="inbig" style="left: 0;"> <img src="img/img01.jpg" alt=""> <img src="img/img02.jpg" alt=""> <img src="img/img03.jpg" alt=""> <img src="img/img04

使用html+css+js完成简单的计算器刚刚接触了js，就寻思做个计算器好了，简易计算器就这么诞生了，新手小白有很多地方不是特别会，去网上查查改改，总算是做出来了，话不多说，直接上代码：首先是html：<div class="big"> <div class="computer"> <input type="text" class="show" value="0" disabled="false"/> <ul> <li>&lt

关于Javascript中的深拷贝和浅拷贝区别浅拷贝实现方法深拷贝实现方法Javascript中的深拷贝和浅拷贝最根本的区别在于是否真正获取了实体对象的复制实体例如：B复制了A浅拷贝：修改A时，B也会跟着发生变化（指针还是指向A）深拷贝：修改A时，B不会发生变化（已经拿到A的实体，你改任你改）区别浅拷贝：只是增加一个指针指向已存在的内存地址，原地址发生改变，浅拷贝出的对象也会发生改变深拷贝：增加了一个指针并开辟了新的内存，指向新的内存地址浅拷贝容易出现释放内存时释放了同一个内存的错误，深拷贝

关于call和apply的那些事儿语法异同this的指向语法Javascript中每个function对象都有一个call()方法和一个apply()方法apply()方法语法：function.apply(thisObj[, argArray])例如：B.apply(this,[arg1,arg2…,argn])call()方法语法function.call(thisObj[, arg1[, arg2[, [,...argN]]]])例如：B.call(this,arg1,arg2…,ar

JavaScript中的原型，原型链在构造函数中：function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor;}如果我们想给这个函数增加属性，就会发现我们无法为已有的对象构造器添加新属性。Person.nationality = "English";如需向构

浅谈箭头函数（）=> 和function的区别我们写代码的时候会发现，箭头函数（）=> 和function都是定义了一个方法，那么这两者之间又有什么区别呢？1、写法不同function Fn1(){ console.log('hello');}let Fn2=()=>{ console.log('hello');}2、this的指向不一样使用function定义的函数，this的指向随着调用环境的变化而变化的，指向其直接调用者，一般来说最通常的是window对

1、实现在标题栏和状态栏上动态显示当前时间的效果。 title = document.title; function showTime() { d = new Date(); time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); //在标题栏中显示动态时间 document.title = title + " - " + time; //在状态栏中显示动态时间

JavaScript对象——Date对象Date 对象用于处理日期与时间创建 Date 对象：new Date()var a = new Date();1.getDate():从 Date 对象返回一个月中的某一天 (1 ~ 31)document.write(a.getDate());2.getDay():从 Date 对象返回一周中的某一天 (0 ~ 6)document.write(a.getDay());3.getFullYear():从 Date 对象以四位数字返回年份do

JavaScript对象——Boolean对象Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false)创建 Boolean 对象的语法：new Boolean(value); 构造函数当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。Boolean(value);转换函数如果作为一个函数（不带有运算符 new）调用时，Boolean()

JavaScript对象——Array对象Array对象用于在变量中存储多个值，下标从0开始,一直到length-1创建 Array 对象的语法：new Array();new Array(size);new Array(element0, element1, …, elementn);首先是Array的属性1.constructor返回创建数组对象的原型函数var test=new Array();//输出：This is an Array// var test=true; 输出：Thi

js中的倒序输出方法一：for()循环var arr1=["a",false,12,"true",28];var arr2=[];for(var i=arr1.length-1;i>=0;i--){ arr1.push(arr1[i]);}document.write("原数组为："+arr1+"<br>");document.write("颠倒后的数组为："+arr2+"<br>");这个方法倒序出来的数组我使用了空数组来接收方法二：reverse()