![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
Jason_Huo-
这个作者很懒,什么都没留下…
展开
-
闭包、柯里化
闭包什么是闭包?闭包就是函数套函数,执行外部函数时返回内部函数,并且内部函数有权调用外部函数作用域中局部变量。使用闭包会产生私有变量的存在,解决变量污染。当引用的js文件中变量名相同时,这种称之为变量污染函数中的局部变量当函数执行完成后,局部变量就会被销毁,垃圾回收机制,将不需要使用的数据进行清除,如果不清除就会造成内存泄露柯里化接收多个参数的函数变换成接收单一参数的函数,嵌套返回直到所有参数都被使用并返回最终结果换句话说就是将函数的调用方式从fn(1,2,3)转变成fn原创 2022-04-05 13:06:04 · 644 阅读 · 0 评论 -
Js - 严格模式、解构赋值、对象基础
严格模式 use strict解构赋值的各种方法对象的各种方法原创 2022-03-30 23:48:38 · 314 阅读 · 0 评论 -
JavaScript - this指向以及强行改变this指向
this 指向-官方:指当前代码执行的上下文环境(context)-私人:就是一个使用在作用域内(全局 / 函数内)的关键字全局作用域 this->在全局作用域内,this就是window(特指前端JS)函数作用域 this定义:不管函数在哪定义,不管函数怎么定义,只看函数的调用方式(箭头函数除外)1、普通调用-函数名()-函数内的 this 指向 window2、对象调用-对象名.函数名()-函数内的 this 指向 点( . )前面的全部内容3、事件处理函数-事件源.原创 2022-03-07 22:13:18 · 527 阅读 · 0 评论 -
JavaScript - 事件对象内的信息-鼠标键盘事件
事件对象内的信息鼠标事件坐标信息1、client事件对象.clientX事件对象.clientY鼠标光标相对于浏览器可视窗口左上角的坐标位置2、page事件对象.pageX事件对象.pageY鼠标光标相对于文档流左上角的坐标位置3、offset时间对象.offsetX时间对象.offsetY鼠标光标相对于 触发事件的元素 左上角的坐标位置鼠标光标相对于 事件目标 左上角的坐标位置键盘事件按下的是哪一个按键按下的是否是组合按键1、keyCode语法:事件对象.k原创 2022-03-05 19:47:58 · 143 阅读 · 0 评论 -
JavaScript - 事件绑定、解绑、对象
事件绑定在 JS 内有两种事件绑定方式1、DOM 0级 事件绑定-使用 on 语法进行绑定语法:事件源.on事件类型 = 事件处理函数特点:同一个事件源的同一个事件类型只能绑定一个事件处理函数2、DOM 2级 事件绑定(事件侦听器 / 事件监听器)标准浏览器语法:事件源.addEventListener(‘事件类型’,事件处理函数)特点:同一个事件源的同一个事件类型可以绑定多个事件处理函数,顺序绑定顺序执行IE 低版本语法:事件源.addEventListener(‘on事件类原创 2022-03-05 15:13:02 · 388 阅读 · 0 评论 -
JavaScript - 事件
认识事件指的是和浏览器内的某一个节点约定一个事情,当用户发生指定行为的时候,会执行指定的某一段代码事件三要素:1、事件源:绑定在谁身上的事件2、事件类型:绑定的什么事件3、事件处理函数:当行为发生的时候,执行的函数-定义:在事件处理函数内,this 关键字就是 事件源注意:所有的事件类型,都是只要有行为发生,事件处理函数的绑定就会触发函数注意:键盘事件所有元素都可以绑定,但是不是所有元素都能触发(一般绑定给window,document,表单元素)注意:表单事件,不一定非得有 form 标原创 2022-03-05 14:15:12 · 156 阅读 · 0 评论 -
JavaScript - 节点
节点操作对于页面上标签的操作获取节点第一类: 获取元素节点=> 获取非常规元素节点-> html: document.documentElement-> head: document.head-> body: document.body=> 获取常规元素节点-> document.getElementById()-> document.getElementsByClassName()-> document.getElementsByTag原创 2022-03-05 11:05:35 · 149 阅读 · 0 评论 -
JavaScript - 获取元素、可视窗口尺寸和元素偏移量
获取元素尺寸(占地面积)语法第一套:-元素.offsetWidth获取的是元素 内容 + padding + border 区域的宽度-元素.offsetHeight获取的是元素 内容 + padding + border 区域的高度注意:不管盒子模型内容是什么,区域不变语法第二套:-元素.clientWidth获取的是元素 内容 + padding 区域的宽度-元素.clientHeight获取的是元素 内容 + padding 区域的高度注意:不管盒子模型是什么,区域不原创 2022-03-05 09:37:59 · 407 阅读 · 0 评论 -
JavaScript - 操作元素属性、样式、类名
DOM - Document Object Model一整套操作文档流的属性和方法操作页面的标签(元素)操作标签的增删改查操作标签的属性(id, class, type, …)操作标签的样式…认识一些内容-document:文档流,页面,根节点,但不是元素(标签)-html:承载所有标签的最大的元素,根元素节点-head:专门承载当前页面的说明标签,这里的内容一般不显示在页面上-body:专门承载当前页面的显示标签,真实显示在网页的内容获取元素用一个变量保存页面中的某个原创 2022-03-04 21:25:40 · 928 阅读 · 0 评论 -
JavaScript - BOM和常用操作
BOM - Browser Object Model 浏览器对象模型提供了一整套操作浏览器相关内容的属性和方法特点操作的都是和浏览器这个软件本身相关的内容(滚动条,地址栏,标签页,弹窗,…)所有的BOM相关操作,在各个浏览器表现形式不一样BOM操作一般都是window.xxx,书写的时候可以省略window不写浏览器可视窗口大小语法:window.innerWidthwindow.innerHeight注意:获取的是包含滚动条在内的尺寸( Mac 除外)浏览器的弹出层提示框原创 2022-03-03 22:56:19 · 82 阅读 · 0 评论 -
JavaScript - 选择排序
选择排序逻辑:1. 遍历数组, 找到数组中最小的数字, 和最前面一个数字对调2. 从第二轮开始, 跳过第一个, 剩下的再继续重复步骤1 第 x 轮 外层循环控制变量 假设 里层循环开始 对调 1 0 0 1 [0] 和 [minIndex] 2 1 1 2原创 2022-03-03 17:10:44 · 194 阅读 · 0 评论 -
JavaScript - 计数排序
计数排序逻辑:1. 准备一个新的数组=> 遍历原始数组, 把原始数字当做新数组的索引向新数组内填充数据=> 新数组的数据按照计数排列2. 遍历新数组=> 把索引在当做数据放进原始数组内=> 前提: 把原始数组清空 // 计数排序 var origin = [ 9, 3, 100, 6, 4, 100, 1, 9, 8, 7, 2, 2, 5, 100, 3, 32, 55 ] var newarr = [] // 1. 把数据当索引原创 2022-03-03 17:06:54 · 161 阅读 · 0 评论 -
JavaScript - 时间对象和常用方法
时间对象 - Date一个 js 内的数据类型,是一个复杂数据类型在前端 js 内,获取到的是当前前端的时间(包含时区)创建时间对象-内置构造函数方式创建-创建当前时间的时间对象语法:var time = new Date()-创建指定时间节点的时间对象需要传递参数1、传递一个数字这个数字表示毫秒数相当于从 格林威治时间(1970年1月1日0点0分0秒)向后退进2、传递两个及以上数字-> 第一个数字表示 年-> 第二个数字表示 月 (0 表示 1 月, 11 表示原创 2022-03-03 08:52:17 · 287 阅读 · 0 评论 -
JavaScript - 数学方法
数学方法所有的数学方法都是Math.xxx()1、random()语法:Math.random()返回值:[0, 1)的随机浮点数,有可能为 0 但是绝对不可能为12、round()语法:Math.round(数字)返回值:四舍五入取整后的结果3、ceil()语法:Math.ceil(数字)返回值:向上取整后的结果4、floor()语法:Math.floor(数字)返回值:向下取整后的结果5、abs()语法:Math.abs(数字)返回值:该数字的绝对值6、sqr原创 2022-03-03 08:36:47 · 611 阅读 · 0 评论 -
JavaScript -字符串常用方法
字符串常用方法-都是操作字符串的方法-通用语法:字符串.XXX()-注意:所有字符串方法都不会改变原始字符串,而是以返回值给出结果1、 charAt()语法:字符串.charAt(索引)返回值:该索引位置的字符注意:当没有索引位置的时候,返回值是一个 空字符串(’’)2、charcodeAt()语法:字符串.charCodeAt(索引)返回值:该索引位置的字符的编码(unicode)注意:返回值是一个 Number 类型,如果没有该索引位置,返回NaN3、toUpperCase(原创 2022-03-03 08:04:18 · 515 阅读 · 1 评论 -
JavaScript - 快速排序
快速排序(递归二分法) // 代码实现 function quickSort(arr) { // arr 就是要排序的数组 // 1. 先写停 if (arr.length <= 1) return arr // 2. 按照递进书写 // 2-1. 从 arr 的中间拿出一个数字来, 截取(splice) var centerIndex = parseInt(arr.length / 2) //原创 2022-03-02 22:34:07 · 91 阅读 · 0 评论 -
JavaScript - 插入排序的两种方式
插入排序1新建一个新数组循环遍历原始数据,把原始数组内的每一个逐个插入到新数组内在插入的时候,按照一定的顺序插入 // 原始数组 var arr = [ 9, 2, 5, 3, 7, 6, 4, 1, 8 ] // 准备一个新数组 var newarr = [] // 循环遍历原始数组 for (var i = 0; i < arr.length; i++) { // arr[i] 就是原始数组中的每一个数据, 也就是要插入新数组的原创 2022-03-02 22:17:18 · 2288 阅读 · 0 评论 -
JavaScript - map 和 filter
数组常用方法 - map语法:数组.map{ function (item, index, arr) {}}作用:对原始数组进行映射返回值:就是一个和原始数组一样长度的新数组,并且内部的数据是被映射操作过的内容 var arr = [ 10, 20, 30, 40 ] var res = arr.map(function (item) { return item * 10 }) console.log(arr) console.log(res)数组常用方法 - f原创 2022-03-02 21:32:35 · 123 阅读 · 0 评论 -
JavaScript - forEach
数组常用方法-forEach()-专门用来遍历数组的方法语法数组.forEach(function (item, index, arr){// item 表示数组的每一项// index 表示数组每一项的索引// arr 表示原始数组})返回值-没有,undefined var arr = [ 100, 200, 300, 400, 500, 600 ] var arr2 = [ 10, 20, 30, 40 ] // a 会根据数组内有多少数据, 执行多少回原创 2022-03-02 21:15:49 · 112 阅读 · 0 评论 -
JavaScript - 数组去重的六种方法
数组去重:1. 双层循环:for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) i-- } }}2. 先排序,再删除:arr.sort()for (var i = 0; i < arr.length - 1; i++) { i原创 2022-03-01 20:00:56 · 113 阅读 · 0 评论 -
JavaScript - 数组常用方法02
数组常用方法flat():语法:1、 数组.flat(数字)如果不传递参数默认拆开一层传递的数字是几,就拆开多少层不管多少维度都能拆开,Infinity作用:拆分数组(把多维度转换成一维)find() :语法:1、 数组.find( function (item, index, arr) {})返回值:数组中满足条件的第一个以return的形式书写条件findIndex() :语法:1、 数组.find Index( function (item, index, arr原创 2022-02-28 20:11:38 · 232 阅读 · 0 评论 -
JavaScript - 数组常用方法01
数组常用方法什么是数组常用方法Js提供给我们专门用来操作数组的方法由于数组本身的特性决定了,好加不好去,不好插入语法特点:数组.方法名(参数)不同的方法,就是方法名和参数不一样1. push():语法:1、 数组.push(数据)2、 数组.push(数据,数据2,…)作用:按照顺序向数组的后面追加插入的数据返回值:追加数据以后,数组最新的长度2. pop():语法:1、 数组.pop()作用:删除数组的最后一个数据返回值:被删除的数据3. unshift():原创 2022-02-28 17:47:49 · 161 阅读 · 0 评论 -
JavaScript - 数组和数组的基本操作
认识数组数据类型 - Array- 是一个 js 内的数据类型,是一个复杂数据类型。也是一个‘盒子’。用来存储数据的盒子- 数组内存储的数据是按照‘序号’排列的,有序的数据集合- 序号:叫做 索引 或者 下标,从0开始,依次+1创建数组数据类型1. 字面量方式创建- 创建空数组: var arr = []- 创建一个带有数据的数组:var arr = [数据1, 数据2,...]2. 内置构造函数方式创建- 创建空数组:var arr = new Array()-原创 2022-02-27 19:36:52 · 329 阅读 · 0 评论 -
JavaScript - 深浅拷贝
深浅拷贝- 复制数据的方式- 一般指的就是复制对象或者数组1. 赋值- 赋值以后,两个变量操作一个对象空间2.浅拷贝- 把的对象内的每一个数据复制一份- 新对象进行修改时被复制的对象不受影响- 只能拷贝一层数据,多维度数据不好使扩展:- 一个运算符,展开运算符(...) - 直接在一个对象内书写 ...对象名3. 深拷贝- 把对象内的每一个数据复制一份,不管多少层维度都进行百分之百赋值- 两个对象完全没有任何关系- 利...原创 2022-02-26 10:13:39 · 120 阅读 · 0 评论 -
JavaScript - 认识对象数据类型及基本操作
认识对象数据类型 - object- 是 js 中的一个数据类型,是一个复杂数据类型- 是一个 ‘ 盒子’,承载的是 数据- 是一个无序的数据集合,也是一个键(key)值(value)对的集合原创 2022-02-26 09:23:06 · 197 阅读 · 0 评论 -
JavaScript - 递归函数
递归函数(慎用)- 在一个函数内,自己调用自己- 逐层递进的过程,逐层回归的过程递归函数书写- 先写折返点- 按照规则书写递进过程,不要忘记写returneg: 求一个数的阶乘function fn(n) { // 折返点 if (n === 1) return 1 res = n * fn(n - 1) // 递进过程 return res } fn(4) console.log(res)递归书写辗转相除最大公约数原创 2022-02-25 21:45:10 · 67 阅读 · 0 评论 -
JavaScript - 函数内的预解析
1. 函数定义阶段1. 在 堆内存 中开辟一段储存空间2. 把函数体内的代码当做 字符串 放在开辟出来的存储空间内3. 把函数名放在 栈内存 中,把堆内存中的空间地址赋值给 栈内存的变量2. 函数调用阶段1. 按照 栈内存 中变量存储的地址找到函数的存储空间- 如果这个空间不是一个函数存储空间,那么直接报错 xxx is not a function2. 在 调用栈 中开辟一段新的 函数执行空间- 把函数存储空间内的形参、代码全部复制过来...原创 2022-02-25 21:38:44 · 149 阅读 · 0 评论 -
JavaScript - 预解析
预解析:- 在所有代码开始执行之前,对代码进行通读并解释,解释完毕以后再开始执行代码- 函数调用问题- 在函数定义的时候,被装进“盒子”内的代码是不执行的- 在函数调用的时候,代码才会执行- 与解析有两部分- 全局预解析:打开页面的时候,回怼全局代码进行预解析,但是函数体内的代码不管 - 局部预解析:当函数调用的时候,会在函数的私有作用域内进行预解析,解析完毕执行函数 体内的代码预解析解释哪些内容:- var...原创 2022-02-25 21:11:23 · 148 阅读 · 0 评论 -
JavaScript - 认识作用域及变量的三种形态
1. 作用域- 变量(变量/函数名)的生效使用范围2. 作用域的分类- 全局作用域(window):一个 html 页面打开就是一个全局作用域- 私有作用域:⚠️只有函数生成私有作用域⚠️ - 只要书写了一个函数,就会生成一个私有作用域 - 一旦书写,就会一直生效- 书写在哪一个作用域内的函数,就是哪一个作用域的子级作用域3. 变量的三种机制1. 变量定义机制- 定义在哪一个作用域下的变量,就是哪一个作用域的私有变量- 只能在原创 2022-02-25 20:44:17 · 154 阅读 · 0 评论 -
JavaScript基础 - 函数的 return
1.函数的 return- 作用1. 给函数添加一个返回值2. 打断函数:书写在return后面行的代码不会继续执行- 函数的返回值- 在函数以内return关键字确定该函数的结果- return 数据- 函数的问题- fn 和 fn()分别代表什么意思?- fn 就是一个变量名,存储的是该函数的‘地址’,书写这句代码的时候不会执行函数内的代码 - fn() 表示把 fn 这个函数内的代码从上到下的执行...原创 2022-02-24 20:28:57 · 310 阅读 · 0 评论 -
JavaScript基础 - arguments 遍历
1.arguments是一个在函数内使用的变量- 是函数自带的变量-是一个数据集合- 承载的就是该函数被调用时传递的所有 实参- 函数实参的集合2. arguments的基本操作1. length 属性- 语法:arguments.length- 表示该数据集合内有多少个数据,也就是传递了多少个实参- 会得到一个数值类型 (Number)2. 索引属性- arguments 内的数据是按照顺序依次排列的- arguments 内的每一个数据...原创 2022-02-24 20:16:44 · 1170 阅读 · 0 评论 -
JavaScript基础 - 函数的参数
在函数内,参数有两种1. 形参- 书写在函数定义阶段的 ( ) 内,这是一个只能在函数内部使用的变量 (a, b)- 可以书写多个,书写多个的时候中间使用 逗号 分隔function fn(a, b) {}- 参数的值由函数调用时传递的实参决定2. 实参- 书写在函数调用阶段的 ( ) 内,就是按照顺序依次给形参进行赋值的数据- 可以书写多个,书写多个的时候中间使用 逗号 分隔fn(100, 200)注意⚠️:当调用时没有传递实参,没有数据给形参a和b赋值原创 2022-02-24 19:47:55 · 89 阅读 · 0 评论 -
JavaScript基础 - 认识函数
1. 认识函数- 函数是一个 js 的数据类型, 叫做 Function- 是一个复杂数据类型(地址 / 引用)- 可以理解为一个盒子,包含一段代码- 涉及到两个过程- 函数定义阶段:把代码装进盒子的过程- 函数调用阶段:把盒子内的代码执行的过程2. 函数定义阶段可理解为把代码装进盒子的过程,在这个过程中被装进去的代码是不会执行的1. 声明式函数function 函数名( ) { 代码 }- function 定义函数的关键字...原创 2022-02-24 19:30:06 · 58 阅读 · 0 评论 -
JavaSrcipt基础 - 循环控制语句
循环控制语句1. break:是一个关键字- 当在循环内遇到这个break的时候,会直接结束本次循环2.continue:是一个关键字- 当在循环内遇到这个continue的时候,会直接结束现在的循环去到下一次循环3. 循环控制标记语法- 可以在循环开始确立标记- 在循环内 break 和 continue 关键字在书写的时候后面加上标记- 直接回到标记位置 -标...原创 2022-02-24 18:59:51 · 119 阅读 · 0 评论 -
JavaScript基础 - while、do while和for
循环 while- 重复的执行某一段代码- 代码内的循环就是数数- 通过数字的变化决定循环的次数循环三要素- 开始:从几开始数数- 结束(条件):数到多少结束- 步长:数数的间隔while 语句while( 条件 ) { 重复执行的代码 }当条件满足的时候,执行{}内的代码- 执行代码完毕后,再次进行条件判断- 如果条件满足再次执行代码- 直到条件不满足为止结束循环循环内的注意事项:一定要改变初始值⚠️ (++/-- ...)循环的作用:原创 2022-02-24 17:54:07 · 117 阅读 · 0 评论 -
JavaScript基础 - switch
分支语句 - switch根据要判断的数据决定执行哪一段代码把数据做出多种匹配情况,决定执行哪一种情况switch (数据) { case 情况一: 满足情况一的时候执行的代码 break case 情况二: 满足情况二的时候执行的代码 break default: 所有条件都不满足的时候执行的代码}1. ( ) 内的内容不会再转换成布尔,都会拿到一个最终结果,进入到switch中判断原创 2022-02-24 17:39:07 · 300 阅读 · 0 评论 -
JavaScript基础 - if
if 分支语句- 根据条件决定是否执行某一段代码,或者决定执行哪一段代码1. if 语句if ( 条件 ) { 代码 }条件为true的时候,{}内的代码执行否则不执行var age = 16if (age >= 18) { console.log('去网吧')}2. if else 语句if (条件) { 代码 } else { 代码 }条件为true,执行if后面的{}内的代码,否则执行else后面{}内的代码var age = 16if原创 2022-02-24 17:29:11 · 150 阅读 · 0 评论