js
浩哥学习编程之路
这个作者很懒,什么都没留下…
展开
-
filter、map、reduce结合使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-07-25 23:56:32 · 297 阅读 · 0 评论 -
正则表达式
一.正则表达式概述1.什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。2.正则表达式的特点灵活性、逻辑性和功能性非常的强。原创 2021-06-27 14:59:21 · 224 阅读 · 0 评论 -
set数据结构
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值Set本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();Set函数可以接受一个数组作为参数,用来初始化。const set = new Set([1, 2, 3, 4, 4])实例方法add(value):添加某个值,返回 Set 结构本身delete(value):删除某个值,返回一个布尔值,表示删除是否成功has(value):返回一个布尔值,表示该值是否为原创 2021-06-26 13:03:53 · 206 阅读 · 0 评论 -
剩余参数语法以及数组扩展
剩余参数又叫做点点点运算符它允许我们将一个不定数量的参数表示为一个数组。语法演示 function fn(first, ...args) { console.log(first); //1 console.log(args); //[2, 3] 返回的是一个数组 } fn(1, 2, 3)应用场景 // ...values 运算符可以用来取代arguments 比arguments灵活 functi原创 2021-06-25 17:28:44 · 204 阅读 · 0 评论 -
高阶函数理解
高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。代码演示 function fn(callback) { callback && callback() } fn(function() { alert('hi') }) function fn() { return function() { }原创 2021-06-25 11:07:58 · 93 阅读 · 0 评论 -
闭包的理解概念
1.什么是闭包?闭包是一个存在内部函数的引用关系 该引用指向的是外部函数的局部变量对象(前提是内部函数使用了外部函数的局部变量)2.如何产生闭包函数嵌套内部函数引用外部函数得局部变量内部函数被使用,注意:函数变量提升的时候如果内部函数没有被使用,在预解析的过程中不会定义内部函数闭包最大的特点:就是它可以记住诞生的环境,比如fn2记住了它诞生的环境是fn1,所以在fn2中可以得到fn1中的内部变量 本质上:闭包就是函数内部和函数外部链接的一座桥梁 function fn1() {原创 2021-06-25 10:31:49 · 152 阅读 · 0 评论 -
箭头函数的使用
ECMAScript6新增了使用胖箭头(=>)语法定义函数表达式的能里。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的任何可以使用函数表达式的地方,都可以使用箭头函数。语法如下let fun = 形参 => 函数体 调用fun(实参)代码演示以及注意点 let fun = (a, b) => a * b; console.log(fun(2, 2)) //4 let fun1 = (a, b) =>原创 2021-06-19 20:03:43 · 273 阅读 · 0 评论 -
变量的解构赋值
解构赋值理解 就是从数组或者对象中提取数据,并赋值给变量(多个)1.对象得解构赋值 let obj = { uname: 'hh', age: 16, } let {age,uname} = obj //解构赋值真正实现的是;按需索取(根据属性获取对象里面的属性值) console.log(age, uname);2.数组得解构赋值 let arr = [1, 2原创 2021-06-19 17:48:27 · 113 阅读 · 0 评论 -
模板字符串和简化的对象写法
模板字符串 :简化了字符串的拼接 大大得提高了我们拼接的效率模板字符串必须用 `` 包含变化的部分使用${xxx}定义代码演示 var obj = { uname: 'hh', age: 18, } // 传统拼接法 let str = '我的名字叫' + obj.uname + '今年' + obj.age; console.log(str);原创 2021-06-19 17:42:42 · 116 阅读 · 0 评论 -
call、apply、bind区别理解
call、apply和bind都是用来改变this得指向call 和apply 得区别在于传入的参数形式不一样,call是直接传入参数即可,而apply是以数组的形式传入参数代码演示 var obj = { uname: 'h', } function fun(age) { console.log(this, age); } //call传入参数不需要数组形式传入 fun原创 2021-06-19 14:02:12 · 90 阅读 · 0 评论 -
ES5新增得方法
一.数组方法1.forEach()array.forEach(function(currentValue, index, arr)) Value:数组当前项的值 index:数组当前项的索引 arr:数组对象本身代码演示 // forEach方法 遍历数组 var arr = [1, 2, 3]; arr.forEach(function(value, index, arr) { console.log('每个数组元素' + val原创 2021-06-18 09:33:32 · 67 阅读 · 0 评论 -
js执行上下文理解
1.什么是执行上下文执行上下文就是当前JavaScript代码在被解析和执行时存在的环境(地方),只要有javascript代码运行,那么它就一定是运行在执行上下文中2.执行上下文的分类(1)全局执行上下文,这是默认的,最基础执行上下文不在函数内部的代码都位于全局执行上下文中全局执行上下文,只有一个,浏览器中的全局对象就是window对象,this指向这个全局对象(2)函数执行上下文函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文原创 2021-06-14 21:14:08 · 485 阅读 · 2 评论 -
ES5之前得继承
一.ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。1.call() 调用这个函数, 并且修改函数运行时的 this 指向fun.call(thisArg, arg1, arg2, ...)thisArg :当前调用函数 this 的指向对象arg1,arg2:传递的其他参数代码演示 // call 方法 function fn(x, y) { console.log('我想喝翻译 2021-06-12 18:05:00 · 69 阅读 · 0 评论 -
ES6中的类和对象理解
一.ES6 中的类和对象1.对象的理解现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等对象是由属性和方法组成的:属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)2 .类 class 的理解在 ES翻译 2021-06-12 13:27:39 · 289 阅读 · 0 评论 -
封装动画以及原理分析过程
动画得原理以及封装分析第一步 核心原理:通过定时器 setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left第二步 函数需要传递2个参数,动画对象(就是你给谁设置动画)和移动到的目标距离。第三步 动画函数给不同元素记录不同定时器 在我们日常开发中如果多个元素都使用这个动画函数,每次都要var 声明定时器 这会导致我们得代码效力变原创 2021-06-05 16:17:50 · 212 阅读 · 0 评论 -
JS中getBoundingClientRect()方法理解
getBoundingClientRect方法获取元素位置getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和c原创 2021-06-03 15:32:02 · 320 阅读 · 0 评论 -
拖拽碰撞(九宫格)
拖拽碰撞是在拖拽原理上发展得,当拖拽一个元素得时候,拖动得那个元素碰撞到了另一个盒子得任意一边,这个盒子就会发生变色。那么此时我们就应该思考我们拖动得元素距离多少才能碰撞到另一个盒子,这里我们把b作为中心盒子,a作为我们得拖动盒子,其实他们得碰撞原理很简单我们先拿左边来说,我们只要取得a得左边位置大于b得左边位置这样它俩就实现碰撞了,那要怎么算勒?a得盒子左边偏移量加上a盒子自己得宽度,如果大于b盒子左边偏移量得距离那就说明a碰撞到了b左边,上边同理,a得盒子上边偏移量加上自身得高度如果大于b盒子上边偏移量原创 2021-06-03 15:06:08 · 162 阅读 · 0 评论 -
拖拽得原理
拖拽得原理或步骤分析先点击元素拿到元素的初始位置和鼠标的初始位置移动的时候拿到鼠标最后的位置,可以求出鼠标的距离差(鼠标得距离差=最后移动得鼠标位置-初始得鼠标位置) 元素最终的位置 = 元素的初始位置 + 鼠标的距离差 在把最终得元素位置赋值给元素 注意: 两个方向都要去照顾;最后鼠标移动事件和鼠标弹起事件都要解绑上图代码演示在这里插入代码片鼠标拖拽存在的bug分析1.虽然我们得div能跟着鼠标拖动了,但是里面还是有bug得,你会发现当你鼠标按下瞬间移动离开div得时候,d原创 2021-06-03 12:25:24 · 186 阅读 · 0 评论 -
系统滚动条的控制
html和body这两个元素overflow的scroll属性,控制着系统的滚动条 系统的滚动条有两个,一个是body身上的 一个是document身上的。我们平时看到的那个滚动条 是document身上的。,如果我们想要控制系统滚动条哪个显示哪个关闭分以下情况: 1、单独的给body或者html 设置overflow:scroll 滚动条打开的全部都是document的 2、如果两个元素同时设置overflow属性,body设置的是.原创 2021-06-01 11:57:30 · 255 阅读 · 0 评论 -
初始包含块
我们在使用定位得时候如果没有给父元素添加相对定位,以前我们认为它是以body或html为原点,其实它定位并不是以body和html为原点而是以第一屏视口为原点来定位得代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-06-01 11:47:25 · 151 阅读 · 0 评论 -
let、const、var 的区别
使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值...原创 2021-05-14 17:22:24 · 57 阅读 · 0 评论 -
ES6 const语法理解
const:作用:声明常量,常量就是值(内存地址)不能变化的量。1.使用const关键字声明的常量具有块级作用域 const c = 10; //声明了一个const的常量 console.log(c); //10 if (true) { const a = 10; console.log(a); //10 } console.log(a); //报错 if (true) { const原创 2021-05-14 17:18:47 · 214 阅读 · 0 评论 -
ES6中 let变量的理解
let ES6中新增的用于声明变量的关键字。let 关键字就是用来声明变量用的 使用let关键字声明的变量具有块级作用域 只在所处于的块级有效; <script> //let 关键字就是用来声明变量用的 使用let关键字声明的变量具有块级作用域; let a = 10; //这里使用let关键字声明了a的一个变量 console.log(a); //10 //let声明的变量只在块级{}中有效 if (tr原创 2021-05-14 15:02:57 · 168 阅读 · 0 评论 -
js严格模式理解
一.什么是严格模式在js中出了提高正常模式外,还提供了严格模式,是ES5新增的严格模式在IE10以上的版本才会支持,旧版本浏览器中会被忽略。二.为什么要使用严格模式消除js语法的一些不合理,不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度为未来新版本的JavaScript做好铺垫三.开启严格模式严格模式可以应用到整个脚本或者某个函数中。因此在使用时,我们可以将严格模式分为脚本开启严格模式和为函数开启严格模式两种情况。1.原创 2021-05-14 14:00:08 · 68 阅读 · 0 评论 -
包装对象理解
var b = '123' console.log(b.split('')); // ["1", "2", "3"]大家都知道只有对象才有方法的,然而这里b里面存的是字符串基本数据类型,可是它为什么能用到split方法勒,其实在js当中调用数字、字符串、布尔值的方法的时候,会首先吧这个值包装成对象(临时的对象),然后进行调用包装对象的方法,调用完成之后,临时的包装对象会立即清除...原创 2021-05-13 15:59:02 · 57 阅读 · 0 评论 -
JSON内置对象概念
JSON内置对象:JSON是一种数据格式主要是用来前后端交互用的,前端要传东西给后端,后端要传东西给前端,由于前后端语言不同就需要JSON来转换JSON又称为JSON字符串JSON内置对象,里面封装了堆json格式数据的操作方法,是前后端目前数据交互的主要格式在前端json串的格式就是对象或者对象的数组,只不过要吧这些数据转化成字符串形式 <script> //JOSN内置对象相当的重要 因为后端给前端传的值就是JOSN字符串,但是字符串处理比较困难,那我们就需要吧字原创 2021-05-12 11:04:40 · 265 阅读 · 0 评论 -
typeof和instanceof的区别以及应用场景
1.typeof主要是用来检测一些简单的数据类型的2.instanceof主要是用来检测一些复杂数据类型的更加的准确3.还有一种检测数据类型的Object.prototype.toString.call(传入你判断的变量)这种方法检测数据比较全部 但是缺点就是IE兼容性较低 <script> //typeof :主要是用来检测一些简单的数据类型比如(布尔、string、number、undefined、unll 等等...) //instanceof:主要是原创 2021-05-10 00:20:45 · 186 阅读 · 0 评论 -
原型对象和原型链的理解
大家都应该知道构造函数很好用。但是构造函数也存在浪费内存的问题。function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我会唱歌'); }}var ldh = new Star('刘德华', 18);var zxy = new Star('张学友', 19);在图中我们可以看出来只要我们实例化出一个对象里面的sing方法都是一样得不管我们实例化多原创 2021-05-09 17:30:42 · 243 阅读 · 0 评论 -
程序执行过程原理图分析
我将根据下面的代码画出程序执行过程原理图来进行分析先看代码<script> var a = 10; //函数也是全局变量 function f1() { var b = 11 } f1() </script>原创 2021-05-09 11:08:41 · 458 阅读 · 0 评论 -
构造函数new实例化对象过程及内存展现
这篇文章主要是讲通过构造函数new实例对象在内存执行的过程展开分析话不多说 我将根据下面代码来分析new实例对象在内存执行的过程 function People(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.hobby = function(sing) { co原创 2021-05-09 11:01:52 · 753 阅读 · 0 评论 -
字符串也可通过数组的方式拿到
1.字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始). var str = 'hello'; str[0]='h' str[1]='e' str[2]='l' 2.如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined。'abc'[3]//undefined'abc'[-1]//undefined'abc'['x']//undefined3.字符串与数组的相似性仅此而已。不能实现改变原创 2021-04-26 09:29:45 · 404 阅读 · 0 评论 -
offset、client、scroll
文章目录1.元素偏移量offset系列1.元素偏移量offset系列1.offset系列相关属性可以动态的得到元素该元素的位置(偏移)/大小。注意点获得元素距离带有定位父元素的位置,如果父元素没有定位则以body为准获得元素自身的大小(宽度)返回的数值都是不带单位的offset常用属性代码演示如下<style> .father { position: relative; width: 200px;原创 2021-03-22 14:31:15 · 428 阅读 · 0 评论 -
mouseenter 和mouseover的区别
mouseover鼠标经过触发 <style> .father { width: 200px; height: 200px; background-color: pink; } .son { width: 100px; height: 100px; background-color:原创 2021-03-22 14:30:40 · 178 阅读 · 0 评论 -
立即执行函数的写法
1.立即执行函数主要的作用:创建一个独立的作用域,避免了命名冲突问题第一种写法(function() {})()第二种写法(function() {}())代码演示如下 <script> // 1.立即执行函数,不需要调用自己就可以立即执行了 主要的作用:创建了一个独立的作用域,避免了立名冲突 // 2.注意如果俩种立即函数都使用中间需要使用分号隔开 // 3.分别有俩种写法 他们都可以传递参数过来 // (1)原创 2021-03-07 16:01:39 · 419 阅读 · 1 评论 -
BOM浏览器对象
文章目录一.BOM 概述二.window 对象的常见事件一.BOM 概述1 什么是 BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。2.BOM的构成BOM 比 DOM 更原创 2021-03-06 13:10:28 · 164 阅读 · 0 评论 -
JS中this指向
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)方法调用中谁调用this指向谁构造函数中this指向构造函数的实例代码演示:<body> <button>按钮</button> <script> // 1. 全局作用域或者普通原创 2020-12-19 15:32:03 · 100 阅读 · 1 评论 -
DOM高级事件
文章目录一.注册事件(绑定事件)二.删除事件(解绑事件)三.DOM事件流一.注册事件(绑定事件)1.注册事件概述给元素添加事件称为注册事件或绑定事件注册事件有俩种方式:传统方式和方法监听注册方式他俩的区别传统注册方式利用的on开头事件onclick特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准 推荐方式addEventListener() 它是一个方法IE9之前的IF不支持方法,可以使用a原创 2020-12-13 19:18:52 · 279 阅读 · 0 评论 -
APl DOM文档对象模型
文章目录一.DOM简介一.DOM简介1.什么是DOM文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构样式。2.DOM 树文档:一个页面就是一个文档,DOM 中使用 document 表示元素:页面中的所有标签都是元素,DOM 中使用 element 表示...原创 2020-12-07 21:13:44 · 241 阅读 · 0 评论 -
Tab切换栏
① Tab栏切换有2个大的模块② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式③ 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。④ 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。⑤ 核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。⑥ 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的 内容显示,其余隐藏(排他思想)下面模块总结就是: 先给每原创 2020-12-01 16:48:13 · 232 阅读 · 0 评论 -
JS排他思想算法
一.排他思想在Tab栏效果切换比较常见,还有就是点击按钮的时候,步骤如下1.先清空所有的样式,2.在给当前元素设置样式,3.主要顺序是不能颠倒的,因为它是从上往下执行的 先干掉所有人 ,然后只留下自己设置样式直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device原创 2020-11-30 19:08:21 · 307 阅读 · 0 评论