丑小鸭变黑天鹅的博客

数组去重以及数组对象去重方法总结一、数组对象去重1、reduce方法2、利用原生js+空对象+空数组3、利用原生js+标志位+空数组4、利用双指针思想+splice方法二、数组去重1、利用新数组+标志位2、排序+新数组+相邻比较3、新对象+新数组4、新数组+indexOf5、新数组+includes6、新数组+filter+includes7、新数组+foreach+includes8、 双指针思想+splice9、新数组+lastIndexOf10、ES6的set 方法一、数组对象去重1、reduce

javascript对象的引用赋值以及浅拷贝与深拷贝一、对象的引用赋值1、js中的数据类型2、案例一3、案例二3、案例三4、案例四5、总结：(精髓所在)二、浅拷贝与深拷贝1、区别与概念2、如果是基本数据类型，名字和值都会储存在栈内存中3、如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值4、实现浅拷贝的方法5、 实现深拷贝的方法一、对象的引用赋值1、js中的数据类型基本类型数字（number）字符串（string）布尔值（boolean）空值

发送请求的时候如何将Request Payload转换为Form Data格式一、问题描述二、问题解决一、问题描述最近做项目遇到了一个问题，前端利用封装好的axios发一个请求给后端，请求可以发送成功，但拿不到正确的数据，在swagger上测试接口拿到的数据和在chorme控制台测试拿到的数据不一样，通过仔细比较，发现控制台payload下一个是Form Data，另一个是Request Payload，所以我想问题就在这里。如下图，正确的方式错误的方式再看一下有问题的代码，只列举主要地方看

关闭浏览器窗口的时候，如何清空localStorage的数据一、对于单页面应用，例如vue等二、对于多页面应用1、第一种方案（对于vue）2、第二种方案（对于原生js）一、对于单页面应用，例如vue等将window.onbeforeunload监听的方法放在App.vue<template> <div id="main" class="app-main"> <router-view></router-view> </div>

js如何获取异步方法里面的数据一、问题描述二、解决办法1、回调函数获取异步方法里面的数据2、Promise来处理异步3、async await 方法4、async await 结合promise一、问题描述首先看一下，常规用法能不能获取到异步方法里的数据function getData () { //ajax setTimeout(function () { var name = '张三'; return name }, 1000);}console.log(g

js中循环方法总结一、for二、 for in（快速枚举法）三、 forEach（ECMA5中提供的方法）四、for of（ECMA6中提供的一种遍历方法）五、总结一、for字符串和数组都可以遍历let arr = [10, 20, 30, 40, 50];let str = 'ascfdd'for(let i = 0; i < str.length; i++){ console.log(str[i])}for(let i = 0; i < arr.length; i++

js的字符串方法总结一、字符串长度二、查找字符串中的字符串三、检索字符串中的字符串四、提取部分字符串五、替换字符串内容六、转换为大写和小写七、concat() 连接两个或多个字符串：八、trim() 方法删除字符串两端的空白符：九、提取字符串字符十、属性访问（Property Access）十一、把字符串转换为数组一、字符串长度length 属性返回字符串的长度：let s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'console.log(s.length) //26二、查找

js的map和set详解一、map二、set一、mapMap是一组键值对的结构，具有极快的查找速度。举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：var names = ['Michael', 'Bob', 'Tracy'];var scores = [95, 75, 85];给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。如果用Map实现，只需要一个“名字”-“成绩”的对

nodemon : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 a bout_Execution_Policies。错误描述：在使用基于node.js的express和ajax做练习时，为了避免总是重启js终端，于是引入了nodemon，安装比较简单，直接在终端输入一条指令即可“npm install

js的this指向总结一、说明一、全局环境下二、函数上下文调用1、普通函数调用1.1、 情况说明：2、作为方法来调用2.1、情况12.2、情况22.3、 情况33、作为构造函数来调用3.1、情况13.2、情况24、call,apply,bind5、Eval函数6、DOM 事件处理函数中的 this & 内联事件中的 this1、DOM事件处理函数2、内联事件3、setTimeout & setInterval7、箭头函数三、总结一、说明首先必须要说的是，其实this就是一个指针，它指示的

localStorage 如何存储对象问题描述:解决办法：问题描述:使用 localStorage 存储了个数组，却一直显示为 [object，object]解决办法：存储对象获取对象参考自https://blog.youkuaiyun.com/Rainbow1995/article/details/90599852...

Uncaught SyntaxError: Unexpected end of input最近做项目遇到这样一个问题Uncaught SyntaxError: Unexpected end of inputUnexpected end of input 可以翻译为 “意外的终止输入”它通常表示浏览器在读取我们的javascript代码时，碰到了不可预知的错误，导致浏览器无法进行下面的解析遇到这样的问题，首先应该检查下面这些情况，我就是因为少写了一个括号导致出错一般“ ”（双引号）， ‘ ’（单引

jquery中给动态生成的标签添加点击事件一、问题描述二、解决问题三、另外一些方案一、问题描述在做项目的过程中，有一个需求，点击按钮，动态添加一行，然后点击删除按钮删除这一行，我首先想到的是就直接绑定点击事件，进行操作既可以了。但是，问题来了，点击删除按钮不起作用，后来发现是因为动态添加的，所以用传统的绑定方式就不起作用了。二、解决问题案例截图// 点击加号添加一行条件 let contentHtml = '' let currentHeight = 0 //当前div的高度 let

js拼接html遇到的一点小问题一、问题描述二、解决办法一、问题描述最近做项目利用ajax进行一个局部刷新，需要拼接一个html，我利用json模仿调取后台数据。很简单的思路，循环遍历json，然后依次拼接，但是遇到一点问题，最后呈现的内容只显示了json中最后一组数据，先看一下有问题的代码和最终显示的结果 getHttp({ url: "/data/main/createProductNew.json" }).then((res) => { data = res; console

初学SVG图像一、什么是SVG？二、svg的优势三、SVG入门例子四、HTML 页面中的 SVG五、SVG形状1、矩形<rect>2、圆形<circle>3、椭圆<ellipse>4、线条<line>5、多边形<polygon>6、折线<polyline>7、路径<path>8、<text>标签9、<use>标签用于复制一个形状。10、<animate>标签11、<animateTr

前端机器学习TensorFlow.js里的预训练模型怎么使用？一、问题描述二、TensorFlow.js官网三、本地使用1、到官网下载需要的模型2、下载好之后解压3、在本地运行你需要的模型1、点开github中对应的项目的demo，浏览使用步骤2、打开你下载的TensorFlow.js所在的目录，然后双击进入文件夹里面3、点击posenet进去4、在此文件夹空白处按住shift的同时右击鼠标5、按照官方教程依次输入命令一、问题描述最近做项目有一个这样的需求，大概意思就是实现一个调用摄像头进行拍照，生成卡

1.HTML Snippets超级实用且初级的 H5代码片段以及提示2.HTML CSS Support让 html 标签上写class 智能提示当前项目所支持的样式3.Debugger for Chrome让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true​github.

前端开发遇到的一些问题一、怎样才能让select里的内容居中显示？二、点击一个select里面的一个option，向另一个select添加一组option用js怎么实现？三、点击select里不同的option时如何显示不同的内容（文本、表格、echarts图表等）？一、怎样才能让select里的内容居中显示？最近在做一个可视化项目，有一个下拉菜单，很基本的一个居中显示居然把我难住了。最开始的想法使用text-align:center这个方法行不通。然后又试了padding，这个效果不是很好，并不能让

3个小时的成果-点击按钮获取到form表单的数据后跳转至其他页面问题描述遇到的坑解决办法问题描述做项目的时候，有一个页面有这样的需求。这个页面大概就是下图这样需求一、动态获取产品名称需求二、动态获取被选中的复选框的内容需求三、点击保存按钮时，获取form表单中的数据，成功之后，跳转到其他页面需求四、只输入产品名称不勾选产品功能时，会提示请勾选功能，同理，只勾选功能，不输入产品名称，会提示输入产品名称，当两者都不输入内容时，会都提示。需求五、点击重置按钮，勾选的复选框全部变为未选中状态。需

Uncaught TypeError: Cannot read property 'appendChild' of undefined做项目的时候，遇到了这个问题，代码没问题，然后报错，出现这个问题一般是你js引入文件放的位置不对，因为你将其放在了head中。如图解决这个问题其实很简单，出现了这个的原因可能是因为把初始化的js放在了head中引用，导致DOM元素还没有加载完就进行初始化，因此报错。如果是这个原因的话只需要将js从head中放置到body中就可以了。...

执行上下文一、JS代码准备工作？二、执行上下文三、函数的执行上下文栈四、变量对象1）全局对象2）活动对象五、执行过程1）进入执行上下文2）代码执行六、作用域链1)当执行一段全局代码时，就会生成一个执行上下文,里面会包含全局变量对象2)函数书写3)函数调用4)结合例子七、总结所有知识转自：掘金 - SwordQiuhttps://juejin.cn/post/6924568666608992264和微信公众号“前端大全”一、JS代码准备工作？JS的代码会按照顺序执行，例如var foo = fun

jQuery学习笔记一、初识jQuery1、是什么？2、为什么使用？3、如何使用二、jQuery的使用1、jQuery函数 ：$ / jQuery2、jQuery函数的使用1、核心函数2、核心对象3、使用jQuery核心函数1、选择器2、基本选择器3、层次选择器4、过滤选择器5、常见效果-表格隔行变色6、表单选择器4、工具方法5、常见效果-多Tab点击切换6、一、初识jQuery1、是什么？一个JS函数库: write less, do more封装简化DOM操作(CRUD) / Ajax2、为什

层叠顺序与堆栈上下文知多少z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下：<div class="container"> <div class="inline-block">#divA display:inline-block</div> <div class="float"> #d

前端开发遇到Uncaught SyntaxError: Invalid regular expression flags最近做一个项目遇到了这个问题Uncaught SyntaxError: Invalid regular expression flags未捕获的语法错误：正则表达式标志无效出现这个问题大概是因为你引号用错了，也可能是别的没有写对，是小问题，回头仔细检查一下就可以了。我出现这个问题就是因为一个url的地址没有加引号造成的，如果引号嵌套使用出现错误也可能报这个错，一定要注意js引号嵌

用jquery写的回到顶部的操作问题描述先看第一种方法（定时器）解决办法第二种方法（animate）问题描述页面中有一个div，当点击时，页面的滚动条自动回到顶部，也就是回到页面顶部。采用的思路就是通过定时器或者animate的方式。先看第一种方法（定时器）采用这种方法出现了bug，研究了一会发现问题所在，先看错误代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title

初学jQuery遇到这样对的问题先看错误代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button id="btn">测试</button> <br /> <input type="

substring和substrde的区别以及利用他们完成隐藏手机号中间4位一、substring和substr的区别二、隐藏手机号中间4位一、substring和substr的区别两者都是截取字符串相同点：如果只是写一个参数，两者的作用都一样：都是截取字符串从当前下标以后直到字符串最后的字符串片段。var str = 'abcdefg';console.log(str.substr(2)); // "cdefg"console.log(str.substring(2)) ;// "c

js操作css样式自己总结了一下，大概也就这么几种1、setAttribute使用这种方式需要提前写好一个样式，当点击或者其他事件发生时，利用这个属性，将class换为另一个样式，就可以发生改变了2、setProperty使用这个属性，用来改变原来已有样式中的某一属性。3、removeProperty使用这个属性，用来移除原来样式的一个属性。通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。通过一个实例去

初次接触防抖与节流，看看原理、实现与区别一、函数防抖（debounce）1、原理2、使用场景3、实现1、简单实现2、立即执行实现二、函数节流（throttle）1、原理2、使用场景3、实现1、使用时间戳2、使用定时器实现3、时间戳+定时器三、总结在看这篇文章之前，如果你还不知道apply、call、arguments之间的区别以及作用，那么建议你先去看一看这些内容。直接坐飞机过去了解一下apply、call、arguments之间的区别以及作用一、函数防抖（debounce）1、原理当持续触发事件

聊一聊js中apply、call、arguments的区别与作用JavaScript提供了apply和call两种调用方式来确定函数中的this的指向，在现实编码中，我确实很少接触到这两个方法。但很无奈，很多面试题都要考这两种方法，我又没怎么用到，所以我们先来闲聊下他们到底有什么用和到底怎么用。我们先来聊一下apply的用法吧，它是用来改变函数的指向的，说白了，就是指向了别的函数的作用域。var A={ name:"我是小A", fun:function(){ con

jQuery实现遮罩层功能我们做项目的时候，有一种效果会经常使用到，就是遮罩层，当我们点击某个按钮时，希望动态弹出一个输入块，并且想要他的背景是透明的，而要输入的块不透明，效果如下那么这个效果怎么实现呢，阿飞给你一一道来。思路：我们需要一个最外层div去做透明背景，然后需要一个div去做输入块。总的来说就是这两层div。起初我们都设置其为display:none，然后通过js代码实现，当点击的时候让其显示大概思路就是这样，接下来直接上代码html代码<div class="mask"

前端修改密码功能用jQuery怎么写？记录一下思路：1、想要实现修改密码，你肯定要先输入原始密码，所以第一步你应该获取输入的原始密码，然后去进行验证，看是否正确，如果不正确，给出提示。2、当原始密码输入正确的时候，你就可以输入新密码了，那么新密码肯定有一定的输入规则，比如输入6-18位，比如必须包含字母或者数字或者特殊符号，这就需要根据你的具体需求去定。如果用户输入的密码，不符合你指定的规则，给出提示。3、当新密码符合要求时，你就得再次输入一次确认密码，同理，你需要去判断输入的密码，与你刚才输入的是

用jQuery获取表单内容总结闲来无事，总结一下jQuery获取表单元素的基本语法直接上代码<tbody> <tr> <td class="td_left">登录邮箱 </td> <td class="td_right"><input type="email" class="loginEmail" disabled="disabled"></td> </tr> <tr> &lt

用实例去剖析url传参方式常见的url传参1、传确定的值2、传的是变量3、传定值（多个）4、传变量（多个）常见的url传参1、传确定的值url="https://www.baidu.com?data=123"通过一个例子去看一下怎么用思路：从页面 a 通过 url ？ 后面的参数给页面b 传一个 index，页面b通过这个参数来控制该选项卡的切换a页面<!DOCTYPE html><html> <head> <meta charset="u

通过使用http请求本地json模拟实现分页展示功能（ajax+jquery+json）问题描述思路描述主要代码分析问题描述最近做项目遇到一个功能需求，做一个分页显示效果，如下图所示思路描述要解决这个问题，首先要有一个清晰的思路当我们从后台数据库请求到成千上万条的消息时，一个页面肯定展示不下，那我们就应该想到分页。那么如何分页呢？我们肯定要规定每页展示多少条数据，比如10条、15条…当我们规定了展示的条数后，我们应该考虑到一共分为多少页？那么怎么求页数呢？举个例子，假如你请求到100条数据