JavaScript
文章平均质量分 91
JavaScript学习笔记
CUG-GZ
这个作者很懒,什么都没留下…
展开
-
40+ JavaScript操作符,你都知道吗?
JavaScript中的操作符用于表达式的操作。JavaScript提供了很多操作符供我们选择,有些操作符是我们在开发中是经常使用的,有些可能很少使用。但是,这些操作符我们都需要有所了解,因为即使自己不用,当你看到旧项目中的一些罕见的操作符时,还是要理解这个操作符的意义。下面就来看看JavaScript为我们提供了哪些操作符。一、一元操作符 操作符可以根据他们期待的操作符个数来分类,多数的JavaScript操作符都是二元操作符,二元操作符可以将两个表达式合成一个更复杂的表达式。JavaScript也原创 2022-01-18 09:58:44 · 967 阅读 · 1 评论 -
JavaScript 中双引号、单引号和反引号的区别
关注微信公众号:前端充电宝,获取最新原创文章:在 JavaScript 中,单引号(’’)和双引号("") 经常用于创建字符串。通常情况下,使用双引号或单引号没有区别,它们最后都代表一个字符串。当我们需要使用反斜杠字符()来转义字符时,他们之间的唯一区别就体现出来了。如果使用单引号来创建字符串,那么就不能在该字符串中使用单引号,只能使用反斜杠 ()对其进行转义。比如:const hi = 'hello' world';console.log(hi)只能使用反斜杠来转义:const hi原创 2022-01-15 13:44:27 · 4327 阅读 · 1 评论 -
如何实现一个深浅拷贝?
一、浅拷贝的原理与实现浅拷贝是指,一个新的对象对原始对象的属性值进行精确地拷贝,如果拷贝的是基本数据类型,拷贝的就是基本数据类型的值;如果拷贝的是引用数据类型,拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变,另一个对象也会发生变化。1. Object.assign()object.assign 是 ES6 中 object 的一个方法,该方法可以用于 JS 对象的合并。我们可以使用它来实现浅拷贝。该方法的参数 target 指的是目标对象,sources指的是源对象。使用形式如下:原创 2021-09-05 00:07:23 · 815 阅读 · 1 评论 -
深入理解JavaScript数据类型
目录1. Undefined2. null3. Boolean4. String5. Number6. Symbol7. Object8. StringToNumber9. 装箱转换10. 封箱转换JavaScript 语言规定了七种语言类型。语言类型广泛用于变量、函数参数、表达式、函数返回值等场合。根据最新的语言标准,这 7 种语言类型是:Undefined;Null;Boolean;String;Number;Symbol;Object。1. UndefinedUndefined原创 2021-03-12 10:02:26 · 267 阅读 · 0 评论 -
深入理解this
目录1. 执行上下文(1)执行上下文概念(2)创建执行上下文2. this 指向(1)默认绑定(全局环境)(2)隐式绑定(上下文对象)(3)显示绑定(apply、call、bind)(4)new绑定(构造函数)(5)箭头函数中的this(6)数组方法中的this3. this 优先级1. 执行上下文说到this,就不得不提执行上下文,下面就先来看看执行上下文的概念。(1)执行上下文概念执行上下文是评估和执行 JavaScript 代码的环境的抽象概念,当 JavaSciprt 代码在运行时,其运行在原创 2021-02-22 10:24:30 · 410 阅读 · 0 评论 -
深入理解JavaScript闭包
目录1. 作用域(1)全局作用域(2)函数作用域(3)块级作用域2. 闭包(1)闭包的概念(2)闭包产生的原因(3)闭包的应用场景3. 解决循环输出问题(1)利用 IIFE(2)使用 ES6 中的 let(3)定时器传入第三个参数1. 作用域闭包和作用域这两个概念密切相关,所以在说闭包之前,先来看一下作用域的概念。每一种编程语言,它最基本的能力都是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在那里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变原创 2021-02-12 23:52:48 · 309 阅读 · 0 评论 -
深入理解JavaScript数组
目录一、数组构造器1. 基础构造器2. ES6 构造器(1)Array.of(2)Array.from二、数组判断三、数组方法1. 改变自身的方法2. 不改变自身的方法3. 数组遍历的方法四、类数组对象1. 类数组基本介绍(1)arguments(2)HTMLCollection(3)NodeList2. 类数组应用场景(1)遍历参数操作(2)定义连接字符串函数(3)传递参数3. 类数组转为数组(1)借用数组方法(2)借用ES6方法五、数组扁平化1. 递归实现2. reduce 函数迭代3. 扩展运算符实现原创 2021-02-08 15:40:29 · 254 阅读 · 0 评论 -
箭头函数与普通函数的区别
箭头函数与普通函数的区别(1)箭头函数比普通函数更加简洁如果没有参数,就直接写一个空括号即可如果只有一个参数,可以省去参数的括号如果有多个参数,用逗号分割如果函数体的返回值只有一句,可以省略大括号如果函数体不需要返回值,且只有一句话,可以给这个语句前面加一个void关键字。最常见的就是调用一个函数:let fn = () => void doesNotReturn();(2)箭头函数没有自己的this箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域原创 2020-09-03 15:25:34 · 866 阅读 · 0 评论 -
【JavaScript】常用的字符串方法汇总(含ES6字符串方法)
一、 ES5 字符串方法1. length2. charAt()3. charCodeAt()、fromCharCode()4. indexOf()、lastIndexOf()5. concat()6. split()7. substr()、substring()、slice()8. toLowerCase()、 toUpperCase()9. replace()、match()、search()10. trim()11. valueOf()、toString()二、ES6 字符串方原创 2020-09-01 18:10:58 · 575 阅读 · 1 评论 -
【JavaScript】常用的数组方法汇总(含ES6数组方法)
1. shift()2. pop()3. splice()4. slice()5. concat()6. every()7. join()8. push()9. unshift()10. reverse()11. sort()12. toString()13. forEach()14. map()15. reduce()1. from()2. of()3. copyWithin()4. find()5. findIndex()6. fill()原创 2020-08-25 20:56:29 · 344 阅读 · 0 评论 -
【JavaScript】JS为什么要进行变量提升?
前言:用过的JavaScript的应该都知道,它有变量提升的机制,不过可能很少去考虑为什么会有变量提升的机制,现在就来看一下为什么要进行变量提升。1. 什么是变量提升?变量提升实际上很容易理解,就是说在任何位置所声明的变量或函数,都会自动“提”到最前面,就好像它们是在函数的开头声明的一样。2. 为什么进行变量提升?首先我们要知道,JS在拿到一个变量或者一个函数的时候,会有两步操作,即解析和执行。在解析阶段,JS会检查语法,并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境,先把代码原创 2020-08-25 17:46:44 · 4215 阅读 · 2 评论 -
【JavaScript】理解面向对象
目录1. 理解对象1.1 属性类型1.2 定义多属性1.3 读取属性特性2. 创建对象2.1 工厂模式2.2 构造函数模式2.3 原型模式面向对象的语言有一个标志,那就是他们都有类的概念,而通过来可以创建多个具有相同属性或方法的对象。在ES6之前,ECMAscript是没有类的概念的,因此他的对象也与基于类的语言的类有所不同。ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值、对象或者函数”,严格来说对象就是一组没有特定顺序的值。对象的每个属性和方法都有一个名字,而每个名字都映射到一个原创 2020-08-23 20:36:33 · 210 阅读 · 0 评论 -
面试题:手写 call、apply 及 bind 函数
1. 手写call()函数实现call()的大致思路如下:(1)首先,context是可选的参数,表示执行的上下文,如果不传的话,默认上下文为window(2)接下来,为context创建一个fn属性,并将值设置为需要调用的函数(3)由于call可以传入多个参数作为调用函数的参数,所以需要将参数都剥离出来(4)然后调用函数,并将函数对象的上的函数删除代码实现:Function.prototype.myCall = function (context) { //判断调用对象 if (ty原创 2020-08-15 16:07:27 · 604 阅读 · 0 评论 -
JavaScript数组去重
目录1. Set (集合)2. indexOf3. 排序,比较相邻元素4. splice5. filter + indexOf6. map数组的去重方法有很多,今天就来汇总一下数组去重的方法。1. Set (集合)Set是ES6中提出的新的数据结果,他表示一个集合,详见:【数据结构】ES6中的Set(集合)利用集合中元素不能重复的特性来实现数组的去重:let arr = [1,2,3,2,1]let res = [...new Set(arr)]console.log(res) // [1,原创 2020-08-14 21:47:52 · 163 阅读 · 0 评论 -
数组扁平化 && 对象扁平化
1. 数组扁平化1.1 toString + split1.2 reduce1.3 join + split1.4 递归 + 循环1.5 扩展运算符1.6 flat()2. 对象扁平化原创 2020-08-10 17:31:24 · 4272 阅读 · 0 评论 -
【JavaScript】数组reduce()方法的妙用
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。(1)累加、累乘(2)计算数组中每个元素出现的次数(3)数组去重(4)将二维数组转化为一维数组(5)将多维数组转化为一维数组(7)求数组最大值(6)累加对象数组中的值原创 2020-08-10 16:26:37 · 1051 阅读 · 0 评论 -
【JavaScript】浅谈Async / Await
Async / Await是ES7提出的一种**异步操作解决方案**。从字面上很好理解, async是异步的意思,await是等待的意思,两者的用法也是根据他们的含义来的,async用于申明一个function是异步的,而await 用于等待一个异步方法执行完成。原创 2020-08-06 19:02:37 · 283 阅读 · 0 评论 -
【JavaScript】事件机制
目录1. 事件模型2. 事件循环2.1 单线程2.2 任务队列2.3 宏任务、微任务3. 事件委托(事件代理)3.1 事件委托的原理3.2 事件委托的优点3.3 事件委托的缺点3.2 事件委托的使用场景请简要说明事件委托原理和使用场景手写原生js实现事件代理,注意浏览器兼容1. 事件模型事件流总共有三个阶段(IE8及以下版本没有阶段):捕获阶段:图中1-5目标阶段:图中5-6冒泡阶段:图中6-10(1)捕获事件流:就是事件由页面元素接收,逐级向下,传播到最具体的位置(2)冒泡事件流:原创 2020-07-09 00:49:46 · 283 阅读 · 0 评论 -
【JavaScript】this、call、apply、bind
call()和apply()都是函数对象的方法,需要通过函数对象来调用,这两个方法都可以将一个对象指定为第一个参数,此时这个对象将成为函数执行时的this。call()方法可以将实参在对象之后依次传递,apply()方法需要将实参封装在一个数组中进行传递fun.call(obj, 1, 2);fun.apply(obj, [1, 2]);arguments 是一个类数组对象,在调用函...原创 2020-04-29 15:08:40 · 216 阅读 · 0 评论 -
【JavaScript】细数JavaScript中那些遍历和循环
目录1. for2. while3. do / while4. for…in5. for...of6. for await...of7. forEach()8. map()9. filter()10. every()11. some()12. find()13. findIndex()14. reduce()15. reduceRight()16. Object.keys()17. Object.getOwnPropertyNames()总结众所周知,JavaScript有很多循环遍历的方法,有时候又原创 2020-07-29 03:17:50 · 6573 阅读 · 0 评论 -
【JavaScript】ECMASript 6—10新增常用知识汇总
目录1. ECMASript 61.1 let 关键字1.2 const关键字1.3 变量的解构赋值1.4 模板字符串1.5 简化对象的写法1.6 箭头函数1.7 rest参数1.8 spread 扩展运算符1.9 Symbol1.10 迭代器1.11 生成器1.12 Promise1.13 Set1.14 Map1.15 class类1. ECMASript 61.1 let 关键字let关键字用来声明变量,使用let声明的变量有以下特点:不允许重复声明块级作用域不允许变量提升不影响作用域原创 2020-07-12 20:57:15 · 797 阅读 · 0 评论 -
面试题:var、let 和const的区别
问题:var、let 和const的区别?(1)块级作用域块作用域由 { }包括,let和const具有块级作用域,var不存在块级作用域。块级作用域解决了ES5中的两个问题:内层变量可能覆盖外层变量用来计数的循环变量泄露为全局变量(2)变量提升var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否在会报错。(3)给全局添加属性浏览器的全局对对象是window,Node的全局对象是global。var声明的变量为全局变量,同时会将该变量添加为全局对象的属性原创 2020-07-06 17:21:35 · 3415 阅读 · 0 评论 -
【ES6】声明、解构赋值、字符串的扩展、字符串新增方法
本文是对阮一峰老师 《ECMAScript 6 入门》 的一篇读书笔记。本文主要包括以下四个部分:1. 声明2. 解构赋值3. 字符串的扩展4. 字符串新增方法原创 2020-06-05 21:26:46 · 271 阅读 · 0 评论 -
【JavaScript】浏览器视口相关属性(图解)
element.clientWidth && element.clientHeightelement.clientLeft && element.clientTopelement.offsetParentelement.offsetHeight && element.offsetWidthelement.offsetLeft && element.offsetTopelement.scrollHeight && element.scrollWidthgetBoundingClientRect()原创 2020-06-05 01:46:53 · 969 阅读 · 2 评论 -
【JavaScript】BOM(浏览器对象模型)知识梳理
目录1. window 对象1.1 全局变量1.2 窗口位置1.3 窗口大小1.4 导航和打开窗口1.5 间歇调用和超时调用1.6 系统对话框2. location 对象2.1 location对象属性2.2 location对象方法2.3 获取字符串参数3. navigator 对象4. screen 对象5. history 对象前言:JavaScript 由三部分构成:ECMAScript,DOM和BOM。ECMAScript :描述了JavaScript的语法和基本对象DOM(doc原创 2020-06-04 16:55:08 · 338 阅读 · 0 评论 -
【JavaScript】从AJAX到Fetch、axios
目录1. ajax1.1 ajax简介1. ajax1.1 ajax简介AJAX 是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。AJAX 包括以下几个步骤:创建 XMLHttpRequest 实例发出 HTTP 请求接收服...原创 2020-05-15 21:26:30 · 293 阅读 · 0 评论 -
【JavaScript】异步编程:Promise基础
Promise简介Promise对象的思想是每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。Promise的出现大大改善了异步变成的困境,避免出现回调地狱,嵌套层级得到改善。基本用法Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。Promise构造函数接受一个...原创 2020-04-29 20:43:34 · 337 阅读 · 1 评论 -
【JavaScript】线程机制
这里写目录标题一、线程与进程1. 进程2. 线程3. 进程与线程的关系二、浏览器内核三、JavaScript的单线程一、线程与进程1. 进程(1)概念:进程是指程序的一次执行,它占有一片独立的内存空间,在Windows操作系统下,我们可以通过任务管理器查看进程。(2)分类:同一时间内,当计算机有两个或两个以上进程处于并行状态,则就是对进程;只有一个进程时,则就是单进程。2. 线程(1)...原创 2020-04-25 14:26:54 · 257 阅读 · 0 评论 -
【JavaScript】对象的继承模式
目录1. 原型链继承2. 构造函数继承3. 组合继承(原型链+构造函数)4. 原型式继承(使用较少)5. 寄生式继承6. 寄生组合式继承7. ES6中的继承——extends对象的继承有很多种方式,下面来一一列举:1. 原型链继承(1)构造函数、原型和实例的关系:每个构造函数都有一个原型对象原型对象都包含一个指向一个指向构造函数的指针实例都包含一个指向原型对象的内部指针(2)实现...原创 2020-04-24 20:48:59 · 125 阅读 · 0 评论 -
【JavaScript】函数原型与原型链
目录一、原型(prototype)二、显式原型与隐式原型三、原型链四、其他一、原型(prototype)当我们创建函数时,解析器会向函数中添加一个prototype属性,它默认指向一个Object空对象,即原型对象。原型对象中有一个constructor属性,它指向函数对象原型对象就相当于一个公共的区域,所有同一类的实例都可以访问这个原型对象,我们可以将对象中共有的属性和方法设置到原型对...原创 2020-04-23 21:12:08 · 184 阅读 · 0 评论 -
【JavaScript】对象创建、对象访问
目录一、对象创建二、访问对象数据的方法一、对象创建工厂模式创建对象function createPerson(name,age,gender){ var obj=new Object(); obj.name=name; obj.age=age; obj.gender=gender; obj.sayName=function(){ alert...原创 2020-04-23 17:04:25 · 197 阅读 · 0 评论 -
【JavaScript】 JSON
JSON是一种轻量级的数据交换格式,它就是一个特殊的字符串,这个字符串可以被任意语言所识别,并且可以转化为任意语言的对象,JSON主要用于数据的交换。一、结构JSON有两种格式:对象和数组,JSON中的值只能是:字符串、数值、布尔值、null、对象(普通对象,不能是函数)、数组。JSON对象对象格式中名称都要用""引起来,每组数据之间使用,隔开。例如:var obj = {"nam...原创 2020-04-21 18:51:18 · 110 阅读 · 0 评论 -
【JavaScript】内存管理和垃圾回收
垃圾回收?垃圾回收:JavaScript代码运行时,需要分配内存空间来储存变量和值。当变量不在参与运行时,就需要系统收回被占用的内存空间,这就是垃圾回收。回收机制:JavaScript拥有一套自己垃圾回收机制,JavaScript的解释器可以对变量进行检测,如果不再被使用,就会被内存释放掉。...原创 2020-04-20 20:28:28 · 226 阅读 · 0 评论 -
【JavaScript】包装类
this解析器在每次调用函数时都会向函数内部传递一个隐形的参数this,this指向的一个对象,这个对象就是函数执行的上下文对象,根据函数调用形式不同,this会指向不同的对象:(1)以函数形式调用时,this永远指向window(2)以方法形式调用时,this指向调用方法的那个对象创建对象工厂模式创建对象function createPerson(name,age,gende...原创 2020-04-19 22:58:22 · 134 阅读 · 0 评论 -
【JavaScript】变量提升、执行上下文、作用域、作用域链
目录变量提升、执行上下文1.概念2.执行上下文类型3.执行上下文栈4.创建执行上下文(理解)作用域、作用域链1.全局作用域和函数作用域2.块级作用域3.作用域链变量提升、执行上下文1.概念在JavaScript中,变量提升就是说在程序中可以在变量声明之前就进行使用。JavaScript引擎在执行代码之前进行一次预编译,简单来说就是在内存中开辟一些空间,存放一些变量和函数,变量提升的概念就是H...原创 2020-04-17 16:11:40 · 225 阅读 · 0 评论 -
【JavaScript】字符串方法、数字方法、数组方法
字符串方法length 返回字符串的长度indexOf() 返回字符串中指定文本首次出现的索引。若未找到,返回-1接受第二个参数作为检索的起始位置lastIndexOf() 返回指定文本在字符串最后一次出现的索引。若未找到,返回-1接受第二个参数作为检索的起始位置search() 搜索指定值的字符串,返回匹配到的位置。可以使用正则表达式进行匹配只有一个参数...原创 2020-04-16 23:49:07 · 171 阅读 · 0 评论 -
【JavaScript】typeof、instanceof、数据类型转换
typeof使用及应用对于基本数据类型,除了null都可以显示正确的类型typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof b // b 没有声明,但是还会显示 undef...原创 2020-04-16 14:20:26 · 867 阅读 · 0 评论 -
【JavaScript】 正则表达式
文章目录什么是正则表达式创建正则表达式匹配模式基本字符数量字符位置字符特殊字符正则方法RegExp实例属性RegExp实例方法常见示例什么是正则表达式正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。正则表达式可用于执行所有类型的文本搜索和文本替换操作。创建正则表达式创建正则表达式有两种方式:直接创建,正则表达式直接放在/ /之前 var re = /...原创 2020-04-08 22:17:01 · 231 阅读 · 0 评论 -
【JavaScript】利用Promise封装Ajax中get和post方法
PromiseES6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。Promise 特点:1、Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。2、可以进行then 的链式执行3、区分数据请求和...原创 2020-04-05 19:06:01 · 1273 阅读 · 0 评论