浩哥学习编程之路-CSDN博客

原创 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 271

一.正则表达式概述1.什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。2.正则表达式的特点灵活性、逻辑性和功能性非常的强。

2021-06-27 14:59:21 157

原创 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 191

原创剩余参数语法以及数组扩展

剩余参数又叫做点点点运算符它允许我们将一个不定数量的参数表示为一个数组。语法演示 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 192

原创高阶函数理解

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。代码演示 function fn(callback) { callback && callback() } fn(function() { alert('hi') }) function fn() { return function() { }

2021-06-25 11:07:58 82

原创闭包的理解概念

1.什么是闭包？闭包是一个存在内部函数的引用关系该引用指向的是外部函数的局部变量对象(前提是内部函数使用了外部函数的局部变量)2.如何产生闭包函数嵌套内部函数引用外部函数得局部变量内部函数被使用,注意：函数变量提升的时候如果内部函数没有被使用，在预解析的过程中不会定义内部函数闭包最大的特点：就是它可以记住诞生的环境，比如fn2记住了它诞生的环境是fn1,所以在fn2中可以得到fn1中的内部变量本质上：闭包就是函数内部和函数外部链接的一座桥梁 function fn1() {

2021-06-25 10:31:49 136

原创箭头函数的使用

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 246

原创变量的解构赋值

解构赋值理解就是从数组或者对象中提取数据,并赋值给变量(多个)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 102

原创模板字符串和简化的对象写法

模板字符串 :简化了字符串的拼接大大得提高了我们拼接的效率模板字符串必须用 `` 包含变化的部分使用${xxx}定义代码演示 var obj = { uname: 'hh', age: 18, } // 传统拼接法 let str = '我的名字叫' + obj.uname + '今年' + obj.age; console.log(str);

2021-06-19 17:42:42 106

原创 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 81

原创 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 46

原创 js执行上下文理解

1.什么是执行上下文执行上下文就是当前JavaScript代码在被解析和执行时存在的环境(地方)，只要有javascript代码运行，那么它就一定是运行在执行上下文中2.执行上下文的分类(1)全局执行上下文，这是默认的，最基础执行上下文不在函数内部的代码都位于全局执行上下文中全局执行上下文，只有一个，浏览器中的全局对象就是window对象，this指向这个全局对象(2)函数执行上下文函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文

2021-06-14 21:14:08 454 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 58

翻译 ES6中的类和对象理解

一.ES6 中的类和对象1.对象的理解现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等对象是由属性和方法组成的：属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）2 .类 class 的理解在 ES

2021-06-12 13:27:39 276

原创轮播图案例

轮播图是网页中最常见得，轮播图也称为了焦点图实现步骤分析1.鼠标经过轮播图得时候，让左右俩边得箭头显示出来，鼠标离开则让箭头消失2.动态生成我们得小圆圈核心思路是，ul里面有多少张图片我们就动态生成几个小圆圈给第一个小圆圈添加上current3.小圆圈排他思想点击当前小圆圈得时候，就添加current，其余得小圆圈移除这个current 我们在生成小圆圈得同时，就可以直接绑定这个点击事件了。4.点击小圆圈，图片跟着滚动，此时我们就需要动画函数了，我们在移动图片的时候移动的是ul而不是li ul

2021-06-07 18:10:07 568

原创封装动画以及原理分析过程

动画得原理以及封装分析第一步核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.left第二步函数需要传递2个参数，动画对象(就是你给谁设置动画)和移动到的目标距离。第三步动画函数给不同元素记录不同定时器在我们日常开发中如果多个元素都使用这个动画函数，每次都要var 声明定时器这会导致我们得代码效力变

2021-06-05 16:17:50 201

原创固定栏案例

案例分析1.首先我们需要使用到scroll滚动事件它是window下得2.滚动到某个位置我们就得判断页面被卷去得值根据判断出得这个值把固定栏改为固定定位其实这个值可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了3.页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffse 注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageY

2021-06-05 11:47:26 61

原创 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 294

原创拖拽碰撞(九宫格)

拖拽碰撞是在拖拽原理上发展得，当拖拽一个元素得时候，拖动得那个元素碰撞到了另一个盒子得任意一边，这个盒子就会发生变色。那么此时我们就应该思考我们拖动得元素距离多少才能碰撞到另一个盒子，这里我们把b作为中心盒子，a作为我们得拖动盒子，其实他们得碰撞原理很简单我们先拿左边来说，我们只要取得a得左边位置大于b得左边位置这样它俩就实现碰撞了，那要怎么算勒？a得盒子左边偏移量加上a盒子自己得宽度，如果大于b盒子左边偏移量得距离那就说明a碰撞到了b左边，上边同理，a得盒子上边偏移量加上自身得高度如果大于b盒子上边偏移量

2021-06-03 15:06:08 149

原创拖拽得原理

拖拽得原理或步骤分析先点击元素拿到元素的初始位置和鼠标的初始位置移动的时候拿到鼠标最后的位置，可以求出鼠标的距离差(鼠标得距离差=最后移动得鼠标位置-初始得鼠标位置) 元素最终的位置 = 元素的初始位置 + 鼠标的距离差在把最终得元素位置赋值给元素注意：两个方向都要去照顾；最后鼠标移动事件和鼠标弹起事件都要解绑上图代码演示在这里插入代码片鼠标拖拽存在的bug分析1.虽然我们得div能跟着鼠标拖动了，但是里面还是有bug得，你会发现当你鼠标按下瞬间移动离开div得时候，d

2021-06-03 12:25:24 156

原创系统滚动条的控制

html和body这两个元素overflow的scroll属性，控制着系统的滚动条系统的滚动条有两个，一个是body身上的一个是document身上的。我们平时看到的那个滚动条是document身上的。，如果我们想要控制系统滚动条哪个显示哪个关闭分以下情况： 1、单独的给body或者html 设置overflow:scroll 滚动条打开的全部都是document的 2、如果两个元素同时设置overflow属性，body设置的是.

2021-06-01 11:57:30 223

原创初始包含块

我们在使用定位得时候如果没有给父元素添加相对定位，以前我们认为它是以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 137

原创兼容性设置对象内容和读取对象内容

<!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-05-27 17:22:16 160

原创兼容性绑定事件和解绑事件

<!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-05-27 17:20:16 63

原创排他思想做法

排他思想分为俩步骤1.先给所有的元素绑定事件，而在吧所有的元素样式设置为同一种样式要使用到双for循环2.在给当前自己设置样式，总结就是先干掉所有人除了自己<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-05-22 16:55:46 892

原创开关灯按钮

<!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-05-22 16:52:18 50

原创鼠标获取焦点失去焦点以及产生随机颜色(变色龙)

<!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-05-22 16:50:12 297

原创打印字符串中出现字母最多的次数和索引位置；

<!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-05-22 16:40:52 141

原创 let、const、var 的区别

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值...

2021-05-14 17:22:24 49

原创 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 196

原创 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 155

原创 js严格模式理解

一.什么是严格模式在js中出了提高正常模式外，还提供了严格模式，是ES5新增的严格模式在IE10以上的版本才会支持，旧版本浏览器中会被忽略。二.为什么要使用严格模式消除js语法的一些不合理，不严谨之处，减少一些怪异行为；消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度为未来新版本的JavaScript做好铺垫三.开启严格模式严格模式可以应用到整个脚本或者某个函数中。因此在使用时，我们可以将严格模式分为脚本开启严格模式和为函数开启严格模式两种情况。1.

2021-05-14 14:00:08 60

原创包装对象理解

var b = '123' console.log(b.split('')); // ["1", "2", "3"]大家都知道只有对象才有方法的，然而这里b里面存的是字符串基本数据类型，可是它为什么能用到split方法勒，其实在js当中调用数字、字符串、布尔值的方法的时候，会首先吧这个值包装成对象(临时的对象)，然后进行调用包装对象的方法，调用完成之后，临时的包装对象会立即清除...

2021-05-13 15:59:02 48

原创封装一个当前时间

2021-05-12 18:14:42 94

原创封装一个随机验证码

2021-05-12 18:14:03 95

原创 JSON内置对象概念

JSON内置对象：JSON是一种数据格式主要是用来前后端交互用的，前端要传东西给后端，后端要传东西给前端，由于前后端语言不同就需要JSON来转换JSON又称为JSON字符串JSON内置对象，里面封装了堆json格式数据的操作方法，是前后端目前数据交互的主要格式在前端json串的格式就是对象或者对象的数组，只不过要吧这些数据转化成字符串形式 <script> //JOSN内置对象相当的重要因为后端给前端传的值就是JOSN字符串，但是字符串处理比较困难，那我们就需要吧字

2021-05-12 11:04:40 252

原创 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 165

原创原型对象和原型链的理解

大家都应该知道构造函数很好用。但是构造函数也存在浪费内存的问题。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 225

原创程序执行过程原理图分析

我将根据下面的代码画出程序执行过程原理图来进行分析先看代码<script> var a = 10; //函数也是全局变量 function f1() { var b = 11 } f1() </script>

2021-05-09 11:08:41 437

原创构造函数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 732

空空如也

空空如也