JavaScript基础
文章平均质量分 83
JavaScript学习记录
努力的小朱同学
未来很长,梦想很远。
展开
-
JavaScript学习笔记(五)--- 内置对象(Math、Date、Array、String)
JavaScript学习笔记(五)— 内置对象一、内置对象1、概念 JavaScript 中的对象共分为3种:自定义对象、浏览器对象和内置对象。之前我们自己创建的对象都属于自定义对象,而内置对象又称为 API ,是指JavaScript 语言自己封装的一些对象,用来提供一些常用的基本功能,来帮助我们提高开发速度,例如: 数学-Math、 日期-Date 、数组-Array、字符串-String 等等。 JavaScript 的内置对象很多,我们不可能都记住,所以我们要学会查阅资料,我们可以原创 2021-04-10 11:33:54 · 990 阅读 · 2 评论 -
JavaScript 之 位运算
JavaScript的位运算符是将进行运算的数字(八进制、十进制、十六进制等)转换为32位的二进制串,超过 32 位的数字会丢弃其最高有效位,只保留后32位二进制串。然后再对每一位进行运算。但运算后得出的结果,会再次转换成标准的十进制的数字,然后返回。如果进行位运算的数字是负数,则我们需要使用该负数的32位二进制补码来进行位运算。位运算符通常在处理大整数、位掩码、图形、加密等情况下使用,在日常编程工作中并不常用,对于一般的数字运算,使用常规的算术运算符即可。原创 2024-01-15 17:03:51 · 1377 阅读 · 0 评论 -
JavaScript 之 toString()方法详解
在 JavaScript 中,toString() 方法是很多数据类型内置的方法,它被用于将特定的数据类型转换为字符串。但是在不同的数据类型中的作用并非完全相同,下面就来详细讲解一下 toString() 方法在各种数据类型中的使用和作用。原创 2024-01-05 16:29:13 · 8107 阅读 · 2 评论 -
JavaScript 之 立即执行函数
1、定义 声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){},就是使用function关键字声明一个函数,但是未命名的函数。关于匿名函数有一点要注意的是:匿名函数不能单独使用,否则会报错,至少需要用 () 包裹起来。2、作用 ① 不需要为函数命名,避免污染全局变量。 ② 创建一个独立作用域,这个作用域里面的变量,外部访问不到,避免变量污染。 ③ 闭包和原创 2021-11-16 15:07:33 · 4012 阅读 · 5 评论 -
JavaScript 之 ES6的 Set 和 Map
一、概念1、Set ES6新增的一种有序列表数据结构,类似于数组,以类数组的形式存储数据,但其内部成员都是唯一的,不会出现重复的值。可以用来给数组去重。 向Set中添加的数据时,不会进行数据类型转化,5 和 ‘5’ 是两个不同的值,可以同时存在于Set中,Set判断两个值是否重复是通过 Object.is() ,其规则类似于 === 规则,简单数据类型的数据类型和值都必须相等,复杂数据类型的引用地址必须相等。2、Map ES6新增的一种有序键值对数据结构,与Set很相似,以键值对的形式原创 2021-12-10 18:17:08 · 717 阅读 · 0 评论 -
JavaScript 之 数据类型判断
1、JS的数据类型 简单数据类型: String、Number、Boolean、null、undefined、Symbol 复杂数据类型: Object2、typeof typeof 是一个操作符,而不是函数,可以判断变量的数据类型,一般用来判断基本数据类型的数据。它判断数据类型的原理是:JavaScript 的数据,在底层中都是以二进制的形式存储的,而二进制的最后三位表示的就是数据的类型,typeof 通过这一特点来判断数据的类型。typeof 判断数据类型返回的值有:number、s原创 2021-12-07 20:23:53 · 561 阅读 · 0 评论 -
JavaScript 之 深拷贝对象
1、深拷贝和浅拷贝的区别: 简单来说深拷贝是拷贝储存在内存堆中的对象,而浅拷贝是从内存栈中拷贝。 数据分为两种数据类型,一种是基本数据类型,单独可以存在内存中就可以,而另一种是复杂数据类型,也叫引用数据类型,例如数组和对象,是放在内存堆中存储的。 基本数据类型是放在内存栈中的,不涉及深拷贝和浅拷贝,也可以说基本数据类型的拷贝都是深拷贝。而引类型数据存储比较复杂,是存放在到内存堆当中,将地址存在内存栈当中,这就构成了一个存储关系。浅拷贝简单来说就是把这份地址复制了一份,但内存堆当中的数据并没原创 2021-11-28 22:19:43 · 409 阅读 · 0 评论 -
JavaScript 之 节流和防抖
1、节流和防抖的作用 节流和防抖都是作用于函数的,是为了限制函数的执行频率。在实际开发中,有一部分事件函数可能会被频繁触发,例如窗口的 resize、scroll 等事件,以及js动画事件,如果短时间内大量触发这些事件函数,很有可能会导致响应速度跟不上触发速度,造成浏览器延迟、卡顿甚至假死。为了避免这些现象就需要使用 节流或防抖。2、节流 节流是指限制函数在一定时间范围内,无论触发多少次函数,函数都只执行一次。简单来说,就像是一个阀门,当函数开始执行之后,就把这个阀门关上,那么后面触发的函数就原创 2021-11-21 22:01:49 · 926 阅读 · 1 评论 -
JavaScript 之 宏任务和微任务
啊 ,又是个笔/面试常考题,最近投简历面试、笔试被问了无数次了。1、概念 由于 JavaScript 是一门单线程语言, 所有的任务都只能在一个线程上执行。JS 中的任务分为同步任务和异步任务,同步任务会在主线程上依次执行,而异步任务会被放入一个任务队列中等待,等待主线程中的同步任务执行完毕之后,再根据事件循环机制去执行异步任务。(EventLoop事件循环机制,我在之前的博客中有讲述,在这就不细述了) 但异步任务,又可以细分为宏任务和微任务两种,微任务的执行优先级大于宏任务的执行优先级。每次原创 2021-11-27 16:34:58 · 1360 阅读 · 1 评论 -
JavaScript 之 Symbol 数据类型
symbol类型具有以下特点:① 唯一性:每个symbol值都是唯一的;② 不可变性:symbol值是不可被修改的;③ 属性标识符:symbol类型的值可以作为对象属性的标识符key;④Symbol可以与其他数据类型进行运算,但不能被强制转换为其他数据类型。利用前两个特性,可以避免属性名的冲突和保证属性不会被意外覆盖。原创 2023-09-07 19:32:19 · 1421 阅读 · 0 评论 -
JS 之 事件Event对象详解(属性、方法、自定义事件)
事件event对象是指在浏览器中触发事件时,浏览器会自动创建一个event对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后,会自动将该对象作为参数传递给绑定的事件处理函数,我们可以在事件处理函数中通过访问event对象的属性和方法,来获取事件的相关信息,并做出后续的逻辑处理。原创 2023-06-10 17:28:29 · 9717 阅读 · 3 评论 -
script标签的defer和async属性详解
对于普通脚本,如果设置该属性,那么该脚本将会并行加载,不阻碍HTML文档的解析,当加载完成后,如果此时文档还没解析完成,则会终止解析,先执行该脚本,执行结束后再继续解析;,浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先会去加载脚本,然后再执行。事件的执行,去执行已经加载好的脚本信息,如果此时脚本还未加载完成,则会等待脚本加载完成后,再执行该脚本。,则该脚本不会阻碍文档的解析,只会在文档解析的同时去加载脚本信息,当文档解析完成后,暂时阻止。原创 2023-03-24 15:54:18 · 3886 阅读 · 0 评论 -
Web APIs 之 Selection对象和Range对象
Selection对象存储了用户在网页上选择的文本范围或者光标符号的位置等信息,代表网页中的文本选区,可能横跨多个元素,包含文本、图片等等。文本选区是由用户点击鼠标左键并拖拽鼠标选中页面内容产生的,也就是指页面上变成蓝底的那一部分内容。Range对象表示一个包含节点与文本的文档片段,通常与Selection对象结合使用,Selection对象选中的文本选区所对应的文档片段,就是一个Range对象。原创 2023-02-12 23:21:19 · 884 阅读 · 0 评论 -
JavaScript进阶学习笔记(六)--- 正则表达式
一、正则表达式1、正则表达式概述 正则表达式( Regular Expression )是一种用于匹配字符串中字符组成的模式,用来检测某个字符串的组成是否符合某种要求或规则,通常用来验证表单:例如验证用户名只能由英文字母、数字、下划线组成。而且,正则表达式还可以用来替换页面中的一些敏感词,或者从字符串中获取我们想要的特定部分字符串。 在 JavaScript 中,正则表达式也是一种对象。目前在 JS 中我们主要是用正则表达式来进行表单验证。2、正则表达式的特点 ① 灵活性、逻辑性和功能原创 2021-06-06 13:06:40 · 335 阅读 · 2 评论 -
JavaScript进阶学习笔记(七)--- ES6相关
一、ES6的概念 ES 的全称是 ECMAScript ,6 是指 版本 ,是由 ECMA 国际标准化组织制定的一项脚本语言的标准化规范。ES6 的出现修改了 JavaScript 一些不足之处,使其更加完善。二、ES6新增语法1、let ES6 中新增了 let 关键字用来声明变量。用 let 关键字声明的变量和用 var 声明的变量具有很大的不同,有了很多独特的特性。① let 声明的变量具有块级作用域 let声明的变量,只在所处的块级作用域有效,一对大括号之间就是一个块级作用原创 2021-06-08 16:39:15 · 462 阅读 · 1 评论 -
JavaScript学习笔记(一)--- 变量
JavaScript学习笔记(一)— 变量一、初识JavaScript?1、JavaScript是什么? JavaScript由布兰登.艾奇设计,是一种运行在客户端的脚本语言,无需编译,运行过程中由浏览器的js解释器(js引擎)逐行来进行解释并执行,现在可以用于实现网页业务逻辑和页面控制,例如:表单内容动态校验、密码强度检测、网页特效、游戏开发等等,也可以基于Node.js技术进行服务器端编程。2、浏览器引擎 浏览器引擎分为两部分:渲染引擎 和 JS 引擎。 渲染引擎是用来解析HTM原创 2021-03-11 12:26:41 · 284 阅读 · 1 评论 -
JavaScript进阶学习笔记(四)--- 函数和闭包
JavaScript进阶学习笔记(四)— 函数一、函数的定义1、function 关键字function fn(){}2、函数表达式(匿名函数)var fn = function(){}3、new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必须是字符串格式这原创 2021-06-02 10:59:48 · 157 阅读 · 2 评论 -
JavaScript学习笔记(二)--- 运算符和流程控制
一、运算符(操作符)1、运算符的分类 运算符(operator)也被称为操作符,是用于算术运算、比较和赋值等功能的符号。 JavaScript中常用的运算符有:①算术运算符 ②递增(减)运算符 ③比较运算符 ④ 逻辑运算符 ⑤赋值运算符2、算术运算符 算术运算符就是变量或值进行算术运算时使用的符号。算术运算符共有五种,分别为:+ (加) , - (减) , ***** (乘) , / (除) ,% (取余) 。其中稍微难一点的是 取余运算,取余运算又称取模运算,是指返回除法的原创 2021-03-14 12:16:12 · 156 阅读 · 0 评论 -
Web APIs 学习笔记(四)--- 事件进阶
一、绑定事件 给元素添加事件又称为注册事件或者绑定事件。1、传统方式 通过 元素.事件 = function(){} 的形式来绑定事件,绑定的事件都是以 on 开头的事件,比如onclick、onmouseover 等,但是有一个很重要的缺陷:元素的注册事件具有唯一性,也就是说同一个元素的同一个事件只能有一个处理函数,后面绑定的处理函数会覆盖掉前面注册的处理函数。2、监听注册方式 通过 元素.addEventListener() 来绑定事件,是 W3C 组织推荐使用的方式,绑定的事件不原创 2021-05-10 15:26:14 · 128 阅读 · 1 评论 -
Web APIs 学习笔记(八)--- JavaScript简单动画(网页特效)
一、JavaScript动画核心原理: 通过定时器 setInterval() 不断地移动元素的位置,由于间隔时间很短,看起来像是连续动画一样的效果。具体实现: 1. 获得元素当前在页面中的位置。 2. 修改元素的当前位置,使其加上要移动的距离。 3. 利用定时器setInterval() ,设置一个短的间隔时间,不断重复 1 、2步。 4. 设置限定条件,当到达指定位置时,结束定时器。 5. 注意,这个移动的元素一定要有定位属性,否则无法通过 element.style.left等方法原创 2021-05-16 18:00:16 · 184 阅读 · 0 评论 -
JavaScript进阶学习笔记(五)--- 严格模式
一、严格模式1、严格模式的概念 JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 新增的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改: 1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。 2.消除代码运行的一些不安全之处,保证代码原创 2021-06-02 11:33:20 · 91 阅读 · 1 评论 -
Web APIs 学习笔记(九)--- 本地存储:sessionStorage 和 localStorage
一、本地存储的特性 1. 数据储存在用户本地的浏览器中。 2. 存储、读取方便,甚至可以永久存储。 3. 容量适中,sessionStorage 约 5MB大小、localStorage约20MB大小。 4. 只能存储字符串,可以通过 JSON.stringify() 将其他类型数据转换成JSON字符串,然后再进行存储。二、sessionStorage1、特性 1. 生命周期为关闭浏览器窗口,也就是说: 通过sessionStorage 存储的数据,在浏览器关闭以后就被清除了,不可再使用了。原创 2021-05-16 20:23:55 · 111 阅读 · 0 评论 -
JavaScript进阶学习笔记(三)--- ES5新增方法
JavaScript进阶学习笔记(三)— ES5新增方法1、forEach() forEach(function(value,index,array){ }) 方法是用来遍历数组元素的,相当于 for循环。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。forEach() 不支持的 continue 与 break 语句。该方法不会改变原数组。// 案例代码va原创 2021-06-01 22:11:19 · 236 阅读 · 1 评论 -
Web APIs 学习笔记(二)--- 操作元素自定义属性和操作节点
Web APIs 学习笔记(二)— 操作元素自定义属性和操作节点一、排他思想 我们首先来学习一种在网页设计中常用的设计思想——排他思想。当网页中有一组相同的元素,我们想要让其中的一个元素实现某种样式,此时就需要用到排他思想算法,其核心算法在于循环嵌套。概括来说排他思想一共分为两步(顺序不可颠倒): ① 清除组中所有元素的这种样式(干掉所有人) ② 给特定元素设置这种样式 (留下特定的人)//案例代码 实现被点击的按钮背景颜色发生改变<body> <button原创 2021-04-28 21:14:10 · 269 阅读 · 0 评论 -
JavaScript进阶学习笔记(二)--- 构造函数和原型
一、构造函数和原型1、实例成员和静态成员 实例成员:是指在构造函数内部通过this添加的成员,实例成员只能通过实例化的对象进行访问。 function Star(uname, age) { this.uname = uname; // 这三条属性就是实例成员 this.age = age; this.sing = function() { console.log('我会唱歌'); }}var ldh = new Star('刘德华', 18);原创 2021-06-01 20:04:56 · 213 阅读 · 1 评论 -
JavaScript进阶学习笔记(一)--- 类和对象
一、面向对象和面向过程1、面向对象 面向对象就是把整个程序的事务分解成一个个对象,然后由对象之间进行分工和合作来实现功能。2、面向过程 面向过程就是把整个程序的事务分解成一个个步骤,然后通过函数把这些步骤一步一步的实现,最后再依次调用这些函数来实现功能。3、两者优缺点 面向对象的优点是:易维护、可复用,利用封装、继承、多态等特性,可以设计出低耦合的程序,使程序更加灵活。缺点是:性能比面向过程要低。 面向过程的优点是:性能高、执行过程严密有序,适用于跟硬件联系紧密的东西,比如单片原创 2021-05-30 21:55:07 · 167 阅读 · 3 评论 -
Web APIs 学习笔记(一)--- 获取元素、事件基础和操作元素
API(Application Programming Interface,应用程序编程接口)是指一些已经被预先定义好的函数,用来实现某种特定的功能,开发人员无需理解实现细节,只需调用就可直接使用。例如C语言中的 fopen() 函数,就是定义好用来实现打开文件功能的函数。 Web API 是指由浏览器提供的一套用来操作浏览器页面元素和实现浏览器功能的API,即操作网页的一系列工具。例如:操作html标签原创 2021-04-25 16:06:44 · 311 阅读 · 0 评论 -
Web APIs 学习笔记(六)--- JavaScript同步和异步执行机制
一、单线程 JavaScript 的执行是单线程,也就是说同一时间只能做一件事,所以js的所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任原创 2021-05-16 11:12:02 · 261 阅读 · 1 评论 -
JavaScript学习笔记(三)--- 循环、数组和函数
JavaScript学习笔记(三)— 循环、数组和函数一、循环1、for循环语法结构:/*for(初始化变量; 条件表达式; 操作表达式 ){ //循环体}*/for(var i = 1; i <= 10; i++){ console.log('js天下第一!');} for 后面的括号中包含初始化变量、条件表达式、操作表达式三者,其中初始化变量通常使用 var 声明一个变量,当做计数器变量,帮我们记录循环次数,但这个初始化操作在整个for 循环中只会在第一原创 2021-03-21 21:14:17 · 215 阅读 · 0 评论 -
JavaScript学习笔记(四)--- 作用域、预解析和对象
JavaScript学习笔记(四)— 作用域、预解析和对象一、作用域1、概述 通常一段程序代码中的命名变量或函数是有一定的有效作用范围,超出了这个范围,这些命名就是无效的,限定这些命名的代码范围就是这个命名的作用域,作用域的出现增强了程序的逻辑可靠性,减少了命名冲突。在 ES6 之前的JavaScript中作用域分为两种:全局作用域和局部作用域。(至于ES6中新增的知识 我们暂且不做讨论 留作日后)2、全局作用域和局部作用域 全局作用域:命名的作用范围是整个JavaScript代码执行的环原创 2021-04-01 21:34:42 · 153 阅读 · 0 评论 -
Web APIs 学习笔记(三)--- DOM阶段总结
一、创建元素1、document.write() 此方法是直接将内容写入到页面中,但是在文档流执行完毕之后,再执行他 则会导致页面重绘,如将 此方法写到 onclick事件中,当触发时就会导致页面重绘,几乎不用,了解即可。2、element.innerHTML() 此方法是将内容写入到某个 DOM 节点,不会导致页面重绘,而且在创建多个元素时,innerHTML 有拼接字符串和数组拼接两种方法,当采用数组拼接时,效率更高,是我们常用的方法。3、document.createElement(原创 2021-05-05 22:18:41 · 175 阅读 · 1 评论 -
Web APIs 学习笔记(七)--- offset、client和scroll系列属性
一、元素偏移量 offset 系列属性1、offset 概述 offset系列属性可以动态的获得页面中某元素的偏移量,也就是元素位置,以及元素的宽度高度等属性。但是要注意,获得的元素的偏移量是元素相对于带有定位的父元素的位置,如果没有带定位的父元素,则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型,不带单位。2、offset系列属性 总结: **offsetWidth=width+padding+border原创 2021-05-16 16:39:21 · 918 阅读 · 0 评论 -
Web APIs 学习笔记(五)--- BOM
一、BOM的概念 BOM(Browser Object Model)是浏览器对象模型的简称,它提供了与浏览器窗口进行交互的一系列对象,每个对象中都包含了很多方法和属性,其核心对象就是浏览器窗口 window。二、BOM和DOM的区别三、BOM的构成 BOM所涵盖的范围比DOM更大,DOM只是BOM的一部分。BOM的顶级对象window中包含:document、location、navigation、screen、history等。四、window window 是浏览器的顶级对象原创 2021-05-16 10:20:06 · 172 阅读 · 1 评论