![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 52
zeddme
这个作者很懒,什么都没留下…
展开
-
js 字符串转数值 的常用方法和对比
话不多说,直接正文。正文常用方法为这三种~~按位取反再取反,作用是把字符串变为整数数值。Number(str) 会保留小数点parseInt(str) 化为整数数值console.log(Number("121"));console.log(parseInt("121"));console.log(~~"121");console.log(Number("-121"));console.log(parseInt("-121"));console.log(~~"-121");这三原创 2021-08-09 10:30:30 · 854 阅读 · 0 评论 -
JavaScript两个数组的数据处理
来自思否的一个问答。原文链接正文问题提问者大概需求为将下面的两个数组,经过处理后变为预期的数组原数组const arr1 = [{ uid: 2 }, { uid: 3 }, { uid: 4 }];const arr2 = [ { text: '随便1', children: [{ uid: 1 }, { uid: 2 }], }, { text: '随便2', children: [{ uid: 3 }, { uid: 4 }], }, { text: '随便原创 2021-07-30 14:18:08 · 301 阅读 · 0 评论 -
JavaScript前端面试题整理
前言本博客所有题目都来自B站UP主峰华前端工程师笔者觉得有些题目不错,记录一下。正文运行结果是?const a = (b)=>{ return b instanceof Function ? b() : b}console.log(a) console.log(a(()=>'hello'))console.log(a('world'))......答案:a函数本身,“hello”,“world”运行结果是?const myFunc = str=原创 2021-05-29 15:57:58 · 228 阅读 · 1 评论 -
typeScript 基础
part1函数参数只能对照形参个数,不能多也不能少数组定义方式:let arr: number[] = [1, 23, 4, parseInt('1')]let arr2: Array<number> = [1, 2, 3]枚举类型 enumenum Gender { Male, Female}let man: number = Gender.Malelet woman: string = Gender[1]console.log(man)co原创 2021-03-19 18:13:51 · 130 阅读 · 0 评论 -
数组排序算法
数组排序算法排序的稳定性:相等的两个值在排序后,不会更改相对的前后位置排序算法分为比较排序和非比较排序,本文介绍的是前者1. 冒泡排序相邻的两个元素比较,前面的元素如果大于后面的元素,则换位置。最大的元素最先排序到数组后面稳定排序function bubbleSort(arr) { const len = arr.length let flag = false if (len < 2) { return arr } for (let i原创 2021-03-15 15:43:00 · 101 阅读 · 0 评论 -
Promise 模拟实现
前言最近很想研究一下Promise的原理,通过查阅资料写出了这篇博客,文章有借鉴参考文档。正文本文主要实现的是两个点,基本的Promise和then的链式调用。代码的所有解释都在注释中定义状态//定义状态const FULFILLED = 'fulfilled'const REJECTED = 'rejected'const PENDING = 'pending'构造函数function MyPromise(handle) { //this.value 是resolve或re原创 2021-03-04 17:01:31 · 562 阅读 · 1 评论 -
js 知识点备忘
长期更新…前言有太多知识点,其篇幅不值得写一篇博客,那么就把它们汇总吧,干脆做一个备忘。如果你阅读了这篇博客,请先了解有些知识点可能是不准确的,甚至是不正确的,因为我随时都会修改,我会尽力保证准确性知识点复杂琐碎,各种类型都有正文setTimeout(callback, delay, ...args)第三个参数不限定个数,且会把这些参数传给第一个参数callback函数当做他的参数稀疏数组,索引长度大于元素个数map()不会遍历空的项,很多数组的操作都会跳过这些间隙原创 2021-03-03 16:04:32 · 94 阅读 · 1 评论 -
call,apply,bind 实现
正文call实现this指向绑定传参返回值,看了很多的实现例子,都没有写这个。如果缺少返回值,那么对很多函数的模拟实现call就不会成功,尤其是函数具有返回值的时候,比如Object.prototype.toString.call()thisArg为null或者undefined时,会指向全局对象Function.prototype.myCall = function (thisArg) { const globalObj = typeof window === 'undefi原创 2021-03-03 14:12:36 · 100 阅读 · 0 评论 -
手动实现一些函数的封装
正文reverse不改变原数组版,如果想要改变,那么不要deepClone即可Array.prototype.myReverse = function () { const length = this.length const arr = deepClone(this) for (let i = 0; i < Math.floor(length / 2); i++) { let temp = arr[i] arr[i] = arr原创 2021-03-01 22:14:56 · 169 阅读 · 2 评论 -
深拷贝的实现
正文注意: 拷贝之后,两个对象中的函数是一个函数,也就是说两个函数名都指向一个函数对象第一种写法function deepClone(sourceObj, resultObj) {resultObj = resultObj ? resultObj : {}for (let key in sourceObj) { //这是属性得是自己有的,不是继承过来的 if (sourceObj.hasOwnProperty(key)) { //得是个引用类型的数据,才去递归啊,也不原创 2021-02-28 18:34:09 · 207 阅读 · 1 评论 -
一道经典的 js 面试题
原题目在浏览器环境下,判断程序输出的结果是? var foo = 'window的foo' let obj = { foo: 'obj的foo', func() { let self = this console.log(this.foo) console.log(self.foo) ;(function () { consol原创 2021-02-27 15:50:59 · 148 阅读 · 1 评论 -
数组和伪数组的区别
正文常见的伪数组有:函数参数arguments,DOM对象列表(例如document.querySelectorAll('div')),jQuery中的$('div')等Array.prototype伪数组没有Array.prototype,它只是一个对象数组有Array.prototype,他是对象的同时,也是数组索引(index)和长度(length)伪数组的索引,就是那些键值对的key,没有真正的顺序可言;长度是手动设置的数组的索引和长度是内置属性let arr = [原创 2021-02-27 13:50:42 · 1726 阅读 · 1 评论 -
then 方法
then()方法function func(){ return Promise.resolve('func的返回值')}function callback(arg = '没有传参'){ return `callback函数的返回值 & ${arg}`}func() .then(function (){ return callback(1) //返回的是字符串 }) .then(val => { console.log(val) //callback函数的返回.原创 2021-02-26 21:53:22 · 7280 阅读 · 0 评论 -
Set 集合
SetSet对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。 let mySet = new Set() let obj = { a : 1, b : 2 } mySet.add(obj) mySet.add({ a : 1, b : 2 }) //虽然与 obj 字面量相同,但是内存地址不同 mySet.add(1.原创 2021-02-26 13:12:44 · 107 阅读 · 2 评论 -
const 关键字
可能有的误解对于 ES6 中增加的const关键字,很多人的(包括我自己)都有一些误解。这个误解是:使用const关键字定义的变量是无法被修改的,即必须在定义的时候就赋值。这话不能说是全错,只是对简单类型和引用类型数据的表现不同。const实际上,const保证的不是变量的值不变,而是变量指向的那个内存地址不变。简单类型变量对于简单类型变量来说,即String,Number,Boolean,undefined,null,它们的值就保存在指向的内存变量中。如果值改变了,就意味着改变了变量的指向。所以原创 2021-02-26 11:51:12 · 114 阅读 · 0 评论 -
async && await 对比 Promise
async && await 对比 Promise 的优点处理异常Promise 不能catch到Promise内部的异常 //Promise写法async function returnPromise() { return 'ok'}try { returnPromise() .then(res => { console.log(res) throw new Error('可能出错的位置原创 2021-02-25 11:34:18 · 91 阅读 · 0 评论 -
详谈js for循环和数组遍历方法
前言早就想写一篇博客来谈谈js中的循环和一些循环的方法,这次有时间来说说。正文一. for类循环1. for — 传统的方式 for (let index = 0; index < arr.length; index++) { console.log(arr[index]) }范围: 可遍历数组,不可遍历对象迭代中的增减: 在遍历的过程中,如果对数组进行shift,unshift,pop,push,增加的元素会被遍历,删除的元素不会被遍历,但已迭原创 2021-02-17 21:00:57 · 1484 阅读 · 0 评论 -
油猴脚本之弹幕屏蔽
前言笔者是平常比较喜欢看虎牙直播,但是网页版虎牙并没有弹幕屏蔽功能,在油猴上也没有找到相关的脚本,自己就做了一个。说明笔者的设计初衷是在弹幕还没有进入DOM渲染流之前,也就是在刚请求完弹幕之后,对弹幕的内容进行正则。可惜虎牙的弹幕请求方式以比笔者目前的水平还没法弄懂。所以,笔者是在弹幕DOM渲染完成之后才用DOM操作获取弹幕内容然后正则。这里的弹幕屏蔽只有视频中的弹幕可以屏蔽,侧边的弹幕列表中是没有屏蔽的。如果像屏蔽侧边弹幕,可以自行改造,原理相同。这里的setTimeout的3000ms延迟原创 2021-02-17 15:50:27 · 1816 阅读 · 1 评论 -
Promise详解
Promise 有三个状态:pending准备/挂起阶段resolve成功,调用resolve()reject失败,调用reject()resolve和resolve状态是唯一的且不可逆。基本写法: new Promise((resolve,reject)=>{// resolve()// reject() }).then(data=>{//resolve状态执行这里},err=>{//reject状态执行这里}).then返回值..原创 2021-02-09 11:58:49 · 159 阅读 · 0 评论 -
一个简单的网站(适合课设)
前言这是我帮同学写的一个很简单的网站,没有后端,主要的技术有jQuery(包括Ajax),模仿的是h2j的天猫仿站项目。可以用于web课设,或者其他前后端交互的界面。下面看下预览图。由于时间紧,没做响应式布局。分享出来给同学们应应急~主页登录注册商品详情页源码取的话,记得点个赞!!!链接:https://pan.baidu.com/s/1G0DT13MRdcFk_ZtBp5nqFQ提取码:z1ed复制这段内容后打开百度网盘手机App,操作更方便哦...原创 2020-12-20 16:56:18 · 2239 阅读 · 0 评论 -
原生js实现本地图片预览
<!doctype html><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/cs原创 2020-12-20 16:36:17 · 271 阅读 · 0 评论 -
let关键字
基本语法和var关键字用法基本一致。 let a = 10; let fn = function () { console.log('hello') } fn(); console.log(a);与var的区别var关键字会将变量挂载到window对象上,无块级作用域,有变量提升。let关键字不会将变量挂载到window对象上,有独立的块级作用域,无变量提升。let具有暂时性死区的特性。举例说明: for (var i =原创 2020-11-23 20:46:26 · 1186 阅读 · 0 评论 -
箭头函数
ES6中的箭头函数,是JS中增强函数性能的一部分措施。基本语法普通的函数定义方式: var add = function (x, y) { return x + y; } var sum = add(1, 2); console.log(sum);//3箭头函数: var add = (x, y) => x + y; var sum = add(1, 2); console.log(sum);//3以箭头函数原创 2020-11-23 20:10:03 · 110 阅读 · 0 评论 -
回调地狱和Promise
Promise是ES6中新增的语法,主要是解决原来回调地狱,也就是回调函数多层嵌套问题。现在我有两个json文件,分别用ajax来请求,但是要求先请求data.json的数据,然后再请求data1.json的数据。 $.ajax({ url: './data1.json', dataType: 'json', success: function (data) { console.log(data); }原创 2020-11-23 18:02:06 · 94 阅读 · 0 评论 -
JS bind方法
bind方法主要是为了改变函数内部this的指向,它与call,apply方法的主要区别是不会调用原函数,且会返回一个新的函数。看看栗子: var obj = { name: 'zed' } function fn() { console.log(this) } fn()这是一个没有添加bind方法的代码段,输出结果为:Window对象添加bind方法之后: var obj = { name: 'z原创 2020-11-10 11:35:16 · 946 阅读 · 0 评论 -
JS中for循环绑定事件
在网页中有五个按钮,需求为:点击按钮,将按钮的索引值输出。初学JS时遇到的问题,今天学习bind方法时又想起来了,分享一下。先看一下代码 var btns = document.querySelectorAll('button') for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log(i) } }此段代码,先是获取到所有的按原创 2020-11-10 11:21:36 · 5535 阅读 · 2 评论 -
详解JS中的回调函数
JS中的回调函数对于入门者来说是不容易理解的,我在学习过程中也吃了它的苦头。学习JS一段时间过后,我也比较熟悉回调函数,现在把自己的心得分享出来。那么,到底什么是回调函数呢?为什么JS中要有这个概念呢?先举一个生活中的栗子:大家送女朋友回家,到了小区门口,对女朋友说到家了给我打个电话然后我在打车回去。等了五分钟,女朋友到家了,给你打电话,之后你也打车回家。这个栗子中,你打车回家 就是 回调函数 。女朋友回家的过程,其实就一个异步函数,这个异步函数执行完毕之后,打电话(调用回调函数),然后执行回调函数原创 2020-11-09 16:04:05 · 437 阅读 · 0 评论 -
jQuery案例-网页播放器02布局
布局实现1. 头部<header> <div class="logo"> <img src="img/player_logo.png" alt=""> </div> <ul> <li><a href="#">登录</a></li> <li><a href="#">设置</a></li.原创 2020-11-05 16:20:14 · 131 阅读 · 0 评论 -
jQuery实现滚动图
滚动图,本例为4张图片循环滚动,鼠标悬停会将图片停止滚动,将其他图片来一个灰色遮罩,主要用到排他思想。为什么4张图片,我的图片列表为什么会有6张图片呢?其实第5,6张图片和第1,2张图片是完全一样的。如果不放这两张图片,无限滚动滚到第四张结束之后再跳回第一张图片时,会有一个空隙,闪一下。大家一做便知。源码中的知识点笔者在前几篇博客中都有讲到。欢迎提问,留言私信都可,觉得不错点个赞吧~!效果图源码<!DOCTYPE html><html lang="en"><hea原创 2020-10-20 19:45:13 · 943 阅读 · 0 评论 -
jQuery实现图标特效(精灵图)
常见的特效,用到了CSS的精灵图,jQuery代码稍微复杂点,笔者会讲解重点。PS:为啥笔者的图标缺三个?因为随手百度的精灵图只有五个图标,也懒得换,大家找个多一点的就行了。效果图 <style> * { padding: 0; margin: 0; } ul { width: 400px; height: 300px;原创 2020-10-20 19:19:35 · 789 阅读 · 0 评论 -
jQuery实现TAB栏,焦点图
Tab栏样式是比较常见的样式,掌握还是挺好的,很简单。效果图Tab栏:焦点图:本例比较重要的是排他思想,干掉其他人的,留下自己的。请在案例中自行体会吧,你会知道为啥要排他的。PS:这里笔者只放了Tab栏的源码,因为焦点图的源码与它相差不大,会一个就行。如果有想要焦点图的童靴,可以留言或者私信~源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2020-10-20 19:02:27 · 150 阅读 · 0 评论 -
jQuery实现电影排行榜
利用jQuery实现的一个简单的电影排行榜,先看一下效果图:样式布局没什么可说的,重要的是jQuery通过添加或移除类来操作DOM元素,大家可以做做,有助于理解jQuery的DOM操作。如果有什么疑问,欢迎大家提问,留言或者私信都可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>toplist</title> &l原创 2020-10-20 18:50:20 · 1309 阅读 · 0 评论 -
点击网页鼠标处飞出文字特效jQuery
这个特效笔者还真找不出什么特别贴切的标题来描述,直接看看效果图吧。哦对了,这个特效的灵感是笔者自己浏览一些网页的时候,鼠标点击,就会弹出或是文字或是图片,觉得新鲜就做了一个小的demo,还需完善,仅供参考。效果图简单的讲解span { position: absolute; user-select: none; font-size: 20px;}由于笔者采用span标签来包裹弹出的字,所有给它个绝对定位,不让用户选中(如果不这样,鼠标移到字上就会变形,难看),设置个字体大小。原创 2020-10-20 18:37:24 · 1638 阅读 · 1 评论 -
js实现下拉菜单
需求点击一个菜单选项,出现子菜单。效果图<!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"原创 2020-10-06 18:07:59 · 2413 阅读 · 0 评论 -
js实现输入框的验证
需求输入6-16位的账号,当不符合的时候会提示,格式正确的时候会提示。输入框有默认值,获得焦点时会清空,且输入的字体颜色较默认值会变深。输入框失去焦点时,输入框中文字颜色会变浅。如果没有输入,失焦时便会显示默认值。效果图初始状态:格式错误:格式正确:源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t原创 2020-10-06 18:01:20 · 2102 阅读 · 0 评论