JavaScript教程 -好得很程序员自学网

什么是 JavaScript

什么是 JavaScriptJavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。(MDN)JavaScript 是一种编程语言，主要参与构建 Web 前端应用。1. JavasScript 的由来早期的浏览器是不具备与用户交互能力的，可以想象一下，在那个电话...

2022/10/22 12:00:00 阅读:129次

学习环境准备1. 浏览器选择TIPS：所有章节中的例子都基于 Chrome 浏览器环境。推荐读者也使用 Chrome 进行调试学习，保证所有案例效果统一。同时 Chrome 也是所有主流浏览器中支持 JavaScript 特性较多的、速度相对较快的浏览器。获取Chrome浏览器Chrome 浏览器2. 开发工具开发工具一般会分为两种，一种为 IDE (Integrated Development...

2022/10/22 12:00:28 阅读:127次

调试方案

调试方案程序调试是将编制的程序投入实际运行前，用手工或编译程序等方法进行测试，修正语法错误和逻辑错误的过程。调试就是验证程序的正确性或自我猜想的过程，掌握一定的调试技巧，可以观察程序执行中的情况、快速定位 BUG 等。前端开发者最常用、有效的调试方式就是使用浏览器内置的开发者工具。1. 开发者工具Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用...

2022/10/22 12:00:28 阅读:120次

JavaScript 变量

JavaScript 变量变量来源于数学，是计算机语言中能储存计算结果或能表示值抽象概念。变量就是存放一些内容的容器。对于初学者，理解变量是重要的一环。从分析变量这个名词，可以知道他是一个可以改变的量，这里的量就是代表某一种值。在 JavaScript 中，变量就是一个用来存放值的容器，并且可以对容器中的值做修改。每个变量都有唯一的变量名，使用变量名来区分变量。1. 声明变量在 JavaScrip...

2022/10/22 12:00:28 阅读:118次

JavaScript 数据类型

JavaScript 数据类型数据类型就是 JavaScript 中可操作的数据的类型。数据类型分为值类型与引用类型。在 ES6 之前，主要有以下数据类型：值类型字符串数字布尔nullundefined引用类型对象数组函数1. 为什么需要不同的数据类型在学习自然数学的时候，所有的加法减法等操作都是针对数字的，数字加上操作符让他们有了意义。在学习语文课的时候，不同的词语可以组合成句子，主谓宾语法与词...

2022/10/22 12:00:28 阅读:130次

JavaScript if 语句

JavaScript if 语句在程序中 if 语句属于条件语句的一种。如同 if 的本意，就是根据条件做不同的事情。1. 基本语法if 语句的最基本语法如下：// 方式1if (条件) { // 条件满足做的事情;}// 方式2if (条件) 条件满足时候做的事情;通常方式2的使用场景是在条件满足时只会写一行代码的情况，有些代码压缩工具可能会将多个语句配合逗号表达式压缩成方式2。这是 if 语...

2022/10/22 12:00:28 阅读:134次

for 语句

for 语句for 语句是循环语句中的一种。for 语句可以使程序在某一个条件下重复执行一段代码。1. 基本语法for 语句相对于 if 语句稍微复杂，通常为以下格式：for (初始语句; 条件; 条件为真值时执行的语句) { // 循环体}初始语句会在循环开始前进行执行。条件会在每次循环结束后执行，结果影响循环语句是否要继续执行。条件为真时执行的语句通常会用来影响下一次计算条件的结果。2. 为...

2022/10/22 12:00:28 阅读:130次

JavaScript 算数运算符

JavaScript 算数运算符算术运算符以数值（字面量或变量）作为其操作数，并返回一个单个数值。标准算术运算符是加法（+），减法（ - ），乘法（*）和除法（/）。—— MDN算数运算符是用来做算数运算的，如 + 这个符号，就是用来做加法操作。1. N元运算N 代表一个数，如一元运算，二元运算。N元运算表示由N个值产生一个新的值的规则。如 * 就是一个二元运算符，他由两个数相乘产生第三个数。J...

2022/10/22 12:00:28 阅读:125次

JavaScript 比较运算符

JavaScript 比较运算符比较运算符用于比较两个表达式的结果。如变量 num 加上变量 offset 是否大于0，大于就是一个比较运算符。比较运算符还分为相等运算符与关系运算符。相等运算符：== 相等!= 不相等=== 严格相等!== 严格不相等关系运算符：> 大于>= 大于等于< 小于<= 小于等于运算符返回的都是布尔值。运算符左右的值也被称为操作数。1. 相等运算...

2022/10/22 12:00:28 阅读:127次

JavaScript 逻辑运算符

JavaScript 逻辑运算符逻辑运算符通常用于布尔型（逻辑）值。这种情况下，它们返回一个布尔值。然而，&& 和 || 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，它们也就会返回一个非布尔型值。—— MDN逻辑运算符用于逻辑运算。如变量 num 要大于2同时也要小于 7，这里的同时就是一种逻辑运算。JavaScript 中的逻辑运算有三种：&&a...

2022/10/22 12:00:28 阅读:116次

JavaScript 函数

JavaScript 函数在 JavaScript中，函数是头等 (first-class) 对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是 Function 对象。(MDN)函数就是一段代码片段，调用函数就是执行函数中的代码。1. 函数的使用1.1 语法函数使用前通常与变量一样需要先进行声明，用 function 关键字定义函数。/...

2022/10/22 12:00:28 阅读:129次

JavaScript 表达式

JavaScript 表达式表示式亦称表达式、运算式或数学表达式，在数学领域中是一些符号依据上下文的规则，有限而定义良好的组合。数学符号可用于标定数字（常量）、变量、操作、函数、括号、标点符号和分组，帮助确定操作顺序以及有其它考量的逻辑语法。——Wikipedia表达式可以简单理解成一种式子，如 2 + 3 就是一种表达式，通常会叫做算术表达式。通常表达式用来产生值，任何需要用到值的地方都可以放置...

2022/10/22 12:00:28 阅读:118次

JavaScript 对象

JavaScript 对象对象指包含数据和用于处理数据的指令的数据结构. 对象有时也指现实世界中的一些事, 例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。—— MDNJavaScript 中的对象由属性和方法组成。属性可以是任意 JavaScript 中的数据类型，方法则是一个函数。1. 创建对象对象的格式如下：{ prop1: 'value1', prop2: 666, prop...

2022/10/22 12:00:29 阅读:119次

JavaScript 字符串

JavaScript 字符串字符串是一种数据类型，由字符组成，用于表示文本数据。1. 创建字符串使用字符串字面量就可以创建字符串。var str1 = ''var str2 = "";以上例子创建了两个空字符串。字符串可以用单引号包裹，也可以用双引号包裹，效果是一样的。大部分前端程序员都会选择单引号，这么做的原因是为了契合 HTML 的书写习惯，拼接 HTML 的时候，HTML 元素的属性可以直...

2022/10/22 12:00:29 阅读:127次

JavaScript 数字

JavaScript 数字基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(253 -1) 到 253 -1）。——MDN在 JavaScript 只有浮点数（可以理解成带有小数点的数）。数字就是我们日常使用的数字，在 JavaScript 中默认是十进制的。10;-1;1.1;10.0;+0;-0;99999999;+1;正数（大于零的数）通常不需要在前面带上 + 号， +1 和...

2022/10/22 12:00:29 阅读:122次

JavaScript 数组

JavaScript 数组数组是一种使用整数作为键 (integer-key-ed) 属性和长度 (length) 属性之间关联的常规对象。此外，数组对象还继承了 Array.prototype 的一些操作数组的便捷方法。——MDN数组可以存放多个值。数组的数不是指数字，而是指数据，数组可以存放任意数据类型的值。从理论上讲，在内存允许的情况下，数组的长度是无限的。1. 创建数组数组由中括号 []...

2022/10/22 12:00:29 阅读:123次

JavaScript switch 语句

JavaScript switch 语句switch 语句评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。—— MDNswitch 是另一种控制流程的方式，根据条件执行不同的代码块。能用 switch 实现的都可以用 if 实现。1. 基本语法 switch (表达式) { case 表达式结果为值1的时候: 做的事情; break;...

2022/10/22 12:00:29 阅读:120次

JavaScript while 语句

JavaScript while 语句while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。—— MDNwhile 语句也是一种循环语句，也称 while 循环。while 循环接收一个表达式，当这个表达式结果非 false 的时候，就会执行 while 循环的代码块。1. 基本语法while (表达式) { 表达式结果为真时候执行的代码;}w...

2022/10/22 12:00:29 阅读:124次

JavaScript 的 break 与 continue

JavaScript 的 break 与 continuebreak 与 continue 用来控制循环流程。1. breakbreak 用来中断循环，在 for 循环和 while 循环中都适用。如：从列表中寻找 id 为 n 的项（每一项的 id 是唯一的）var list = [{ id: 1 }, { id: 4 }, { id: 9 }, { id: 2 }];var n = 9;var...

2022/10/22 12:00:29 阅读:117次

JavaScript with

JavaScript withwith 语句就可以扩展一个语句的作用域链。——MDNwith 可以指定代码块的作用域，特别是在访问对象成员时，它使得代码非常简洁。1. 基本语法with (表达式) { 代码块;}表达式通常会直接给定一个对象。var person = { name: '小明', age: 666, major: ɾnglish',};with (person) { co...

2022/10/22 12:00:29 阅读:119次

document.cookie

document.cookieCookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。cookie 可以作为单独知识了解，这里其实介绍的是 document.cookie 。1. document.cookie通过 document.cookie 可以获取与设置 cookie 。2. 获取 cookiedocument.c...

2022/10/22 12:00:29 阅读:103次

JavaScript Function

JavaScript FunctionFunction 构造函数创建一个新的 Function 对象。直接调用此构造函数可用动态创建函数，但会遭遇来自 eval 的安全问题和相对较小的性能问题。—— MDNFunction 可以用来创建函数，JavaScript 中的所有函数，都是 Function对象。1. 使用 Function 创建函数Function 在被当作构造函数调用的时候，可以用来创...

2022/10/22 12:00:29 阅读:98次

JavaScript Math

JavaScript MathMath 是一个内置对象，它具有数学常数和函数的属性和方法。(MDN)Math 对象提供了一些列的数学方法和常量，如三角函数、随机数、π等。1. 数学方法数学方法其实就是常用的数学中的函数，如三角函数。其中用到较多的是使用 Math.random() 来产生随机数。以下列举部分常用的方法。1.1 Math.floorMath.floor() 返回小于或等于一个给定数...

2022/10/22 12:00:29 阅读:107次

JavaScript Date

JavaScript DateDate 用于创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象可以用于处理日期和时间。Date 对象使用的频率非常高，大量的业务需要对时间进行操作。1. 基本使用Date 需要实例化后使用。var date = new Date();时间最大的两个使用场景是格式化时间与获取时间戳。1.1 获取时间戳当实例化时没有传递参数给...

2022/10/22 12:00:29 阅读:97次

JavaScript RegExp

JavaScript RegExpRegExp 构造函数创建了一个正则表达式对象，用于将文本与一个模式匹配。RegExp 的实例用于生成一个正则表达式，利用正则表达式从字符串中匹配想要的内容。正则表达式不是 JavaScript 的一个子内容，也并非 JavaScript 独有，需要学习正则表达式可以查阅相对应的文献。1. 创建实例创建一个 RegExp 实例，只需要将其当作构造函数使用：var...

2022/10/22 12:00:29 阅读:102次

JavaScript JSON

JavaScript JSONJSON 对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。除了这两个方法, JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。JavaScript 内置的 JSON对象用于处理 JSON 。JSON...

2022/10/22 12:00:29 阅读:104次

什么是 DOM

什么是 DOM文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。(MDN)DOM (Document Object Model，文档对象模型) 是 W3C...

2022/10/22 12:00:29 阅读:118次

DOM 和 JavaScript 的关系

DOM 和 JavaScript 的关系DOM 与 JavaScript 是分离的。DOM 有自己的一套标准，JavaScript 也有自己的一套标准。JavaScript 是对标准的实现，为一种语言，而 DOM 标准定义了一系列的接口，由此可以看出，他们两者是可以毫不相干的。但是在 Web 开发中，页面内容的展示全部通过浏览器解析展现，JavaScript 想动态的修改页面，就必须由浏览器提供一...

2022/10/22 12:00:30 阅读:103次

获取和操作 DOM 节点

获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：element.getElementByIdelement.getElementByNameelement.getElementsByTagNameelement.getE...

2022/10/22 12:00:30 阅读:107次

DOM 与事件

DOM 与事件事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如：如果您在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。在这篇文章中我们将围绕事件讨论一些重要的概念，并且观察它们在浏览器上是怎么工作的。这篇文章并不做彻底的研究仅聚焦于您现阶段需要掌握的知识。—— MDN事件即某个情况、某个事情。当按钮被点击视频播放、...

2022/10/22 12:00:30 阅读:100次

DOM 事件绑定

DOM 事件绑定DOM 提供了许多事件供开发者进行绑定，以响应各种操作，丰富页面交互。想要触发事件，就得先给 DOM 节点绑定事件，提供事件处理器。1. 直接在 HTML 上提供事件这种方式是将事件内联在 HTML 代码中。350通过设置 HTML 的 onclick 属性，可以绑定点击事件，属性内可以写简单的 JavaScript 代码。但是可以看到这种方式是有局限性的，写大量的 JavaScr...

2022/10/22 12:00:29 阅读:95次

DOM 事件对象

DOM 事件对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。(W3C)事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。1. 获取事件对象在给 DOM 节点绑定事件时，需要传递一个事件处理器，其本质上是个函数，在事件触发时被调用。在事件处理器被调用时，默认就会传递一个...

2022/10/22 12:00:30 阅读:97次

DOM 事件流

DOM 事件流DOM 事件流描述了 DOM 时间响应的阶段、路径。DOM 事件流也会被称为 DOM 事件模型。1. 事件流阶段事件流有三个阶段：捕获阶段从window开始，寻找触发事件最深层的节点，过程中如果有节点绑定了对应事件，则触发事件目标阶段找到事件触及的最深节点冒泡阶段从最深节点按照捕获的路径进行返回，过程中如果有节点绑定了对应事件，则触发事件现代浏览器默认都会在冒泡阶段触发事件。通...

2022/10/22 12:00:30 阅读:105次

事件相关的优化

事件相关的优化大部分的事件触发依赖于用户与浏览器的交互，但用户的行为是不可控的，许多交互设计上的缺陷与无法考虑到的因素会导致事件的频繁触发。当事件处理器内部包含大量的操作，又不需要如此快速的响应事件时，就需要采用一些手段来限制事件处理器的执行。事件的优化主要有两个目的：减少不必要的 HTTP 请求减少本机性能的消耗1. 交互设计通过交互的设计来优化事件是最常用到的方式。如用户点击删除后将按钮禁止。...

2022/10/22 12:00:29 阅读:97次

自定义事件

自定义事件自定义事件主要会被用于框架、组件设计与实现中。自定义的事件有许多的创建方式，但实际的业务场景中几乎不会被用到，网络上的文献记载其具体的使用场景也相对较少。1. 使用 Event 构造函数使用 Event 构造函数就可以创建一个自定义事件。542使用 new Event 可以创建一个自定义事件，事件名就是构造函数的第一个参数 afterclick，表示点击事件完成后做的事情。创建一个自定...

2022/10/22 12:00:29 阅读:105次

表单校验

表单校验本篇主要介绍使用 JavaScript 进行表单验证。表单验证并不是 JavaScript 提供的某种特性，而是结合各种特性达到的一种目的，是需求的产物。所有线上产品的表单几乎都有验证，如注册时要求“用户名 6-16 位”，验证会由 JavaScript 来完成，通常为了安全性和准确性，服务端会再次做一遍验证。1. 验证目标表单用于收集信息，从 HTML 上讲，表单内容使用 form 标签...

2022/10/22 12:00:29 阅读:102次

什么是 BOM

什么是 BOMBOM 即浏览器对象模型（browser object model），其提供了一系列接口供开发者使用 JavaScript 与浏览器窗口进行交互。BOM 不像 ECMAScript 和 DOM 有一套自己的标准，BOM 是没有公共组织制定标准的。神奇的是所有现代浏览器在 BOM 的相关内容上几乎一致，所以 BOM 也足够通用，所有浏览器的实现几乎一致。1. BOM 的作用BOM 提供...

2022/10/22 12:00:30 阅读:99次

常用的 BOM 相关对象

常用的 BOM 相关对象通常与 BOM 相关的常用对象有：Location 当前页面地址相关信息，如当前页面地址Navigator 当前浏览器相关信息，如浏览器版本Screen 包含屏幕相关信息，如屏幕的长宽History 浏览器的历史相关信息，如返回上一页其他的还有一些辅助方法，如 alert、confirm。这些内容都可以通过 window 对象进行访问。这些对象在访问时开头是小写的！1. L...

2022/10/22 12:00:30 阅读:103次

BOM 常用属性和方法

BOM 常用属性和方法BOM 提供了一些很实用的特性，如定时器、弹出框、窗口尺寸等。1. 弹出框BOM 提供了三种弹出框：window.alert 警告框window.prompt 提示框window.confirm 确认框三种弹出框都会阻塞 JavaScript 的执行，用户与弹出框交互后才会继续执行代码。调用弹出框时可以省略 window。1.1 警告框警告框在 demo 和调试过程中比较常用...

2022/10/22 12:00:32 阅读:98次

AJAX

AJAXAsynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。(MDN)AJAX 是2005年提出的一种术语，并不代表某个特定的技术。其译名异步JavaScript和XML 描述出了核心，就是使用 JavaScri...

2022/10/22 12:00:30 阅读:105次

异常处理

异常处理异常处理可以使程序在流程上更加完善。在 JavaScript 中可以使用 throw 抛出异常，使用 try ... catch 捕获错误。1. throwthrow 语句用来抛出一个用户自定义的异常。(MDN)throw 用于抛出一个异常，这种异常通常是程序出现了不符合预期的错误。alert('出错前');throw '发生了一个错误！'alert('出错后');当出现 throw 时...

2022/10/22 12:00:30 阅读:110次

三元运算符

三元运算符条件（三元）运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为 truthy ，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号（:），如果条件为 falsy ，则冒号后面的表达式B将会执行。本运算符经常作为 if 语句的简捷形式来使用。（MDN）三元运算符，也称条件运算符、三目运算符。三元运算符可以代替简单的 if 语句。1....

2022/10/22 12:00:30 阅读:98次

逗号操作符

逗号操作符逗号操作符对它的每个操作数求值（从左到右），并返回最后一个操作数的值。(MDN)逗号操作符会依此从左到右执行逗号分隔的表达式，并把最后一个表达式的运算结果作为最终结果。var 表达式3的结果 = (表达式1, 表达式2, 表达式3);逗号操作符使用场景很有限，通常会用在 for 循环中，同时压缩代码也会用到大量的逗号表达式。1. 运用在 for 循环中var arr = [1, 2,...

2022/10/22 12:00:30 阅读:108次

void

voidvoid 运算符对给定的表达式进行求值，然后返回 undefined。(MDN)表达式前面如果带有 void 关键字，则表达式的结果就会被忽略，并将 undefined 作为结果。从业务上来看，void 关键字并不常用。1. 用于调用函数表达式当想让一个函数立即实行的时候，需要让 JavaScript 将一个函数识别为表达式，void 关键字就能起到这个作用。void function(...

2022/10/22 12:00:31 阅读:108次

typeof

typeoftypeof 操作符返回一个字符串，表示未经计算的操作数的类型。(MDN)typeof 可以用来检测一个值的类型。1. 表现在 ES6 之前，typeof 在浏览器的表现是这样的：类型结果Boolean“boolean”String“string”Number“Number”Function“function”undefined“undefined”null“object”数组“obj...

2022/10/22 12:00:31 阅读:104次

delete 操作符

delete 操作符delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。(MDN)delete 操作符可以删除对象的一个属性。JavaScript 中的关键字与其他语言略有不同，如 C++ 中的 delete 关键字会释放内存，JavaScript中不会，只有当一个值的引用归零时，才会被释放。1. 使用 deletedelete 操作符在与操作数运算结束后，会...

2022/10/22 12:00:31 阅读:109次

debugger

debuggerdebugger 语句调用任何可用的调试功能，例如设置断点。如果没有调试功能可用，则此语句不起作用。(MDN)debugger 通常用于调试，主要是为了设置一个断点。如果浏览器支持 debugger，那碰到 debugger 就会暂停程序的执行，提供调试功能，如单步调试、跳出当前函数、结束调试等。1. 使用 debuggerdebugger; // 设置断点在需要设置断点的地方写...

2022/10/22 12:00:31 阅读:108次

getter & setter

getter & setter利用 getter/setter 可以拦截操作对象的属性，在设置属性前或获取属性前做一些事情。1. getterget语法将对象属性绑定到查询该属性时将被调用的函数。(MDN)// 语法var 对象 = { get 属性名() { // 做一些事情 balabala return 值; }};getter 在获取一个属性时被调用，同时返回 ge...

2022/10/22 12:00:33 阅读:106次

new 运算符与构造函数

new 运算符与构造函数当一个函数被 new 运算符调用的时候，这个函数就会被称为构造函数。任何函数都能被 new 运算符调用，但是一般会从设计上将一个函数考虑为构造函数，提供给 new 运算符调用。function Human(name, gender) { this.name = name; this.gender = gender;}var human = new Human();1....

2022/10/22 12:00:33 阅读:107次

JavaScript 原型

JavaScript 原型JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。(MDN)每个对...

2022/10/22 12:00:33 阅读:102次

JavaScript instanceof

JavaScript instanceofinstanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。(MDN)instanceof 是另一种检测类型的手段，但通常用于检测对象之间的关系，如某个对象是不是由某个构造函数生成的。function Person(name) { this.name = name;}var person = new Pers...

2022/10/22 12:00:32 阅读:117次

JavaScript this

JavaScript this当前执行代码的环境对象，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。(MDN)this 指向的是当前的代码上下文环境，所以不同情况下的 this 指向也不同。1. 全局下的 this在全局环境下，this 指向全局对象。全局对象和宿主环境相关，在浏览器下，全局对象就是 window 对象，在 node.js 中，全局对象是 global 对象。win...

2022/10/22 12:00:33 阅读:116次

严格模式

严格模式JavaScript 的严格模式是使用受限制的 JavaScript 的一种方式，从而隐式地退出“草率模式”。严格模式不仅仅是一个子集：这种模式有意地与普通情形下的代码有所区别。(MDN)严格模式为 JavaScript 提供了一个更严格的运行环境。开启严格模式后，部分特性会发生改变，如 this 指向 window 的函数不再指向 window，而是变成了 undefined。funct...

2022/10/22 12:00:33 阅读:103次

作用域

作用域作用域即代码片段的有效范围，这里的代码片段可以是一个函数、一个变量等。在 JavaScript 中，通常被拿来讨论的是全局作用域和函数作用域。1. 全局作用域在全局环境下定义的变量、函数，都属于全局作用域的范围，也就是这些变量、函数在任何地方都能被访问。var number = 1;var fn = function() { console.log('我是一个全局下的函数'); c...

2022/10/22 12:00:33 阅读:101次

闭包

闭包函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。由于闭包的概念比较抽象，所以本篇幅会有较多的主观理解。在作用域相关的内容中可以知道，全局下的作用域想访问一个函数内部的作用域是办不到的，但是闭包的特性可以...

2022/10/22 12:00:33 阅读:97次

变量提升

变量提升变量提升是 JavaScript 在运行时的一种机制。在代码被执行前，JavaScript 会做一些准备工作，其中会准备一个执行上下文，也就是代码的执行时的环境，如绑定this、准备变量等。变量提升这一特性就是在准备执行上下文时进行的，这一特性也是和执行上下文相关的最常在面试中出现的内容。1. 表现console.log(number); // 输出：undefinedvar numbe...

2022/10/22 12:00:33 阅读:103次

对象包装器

对象包装器对象包装器也被称为包装器、包装对象.所有包装器都是内置对象，如 Number、String、Boolean 等。1. 装箱通常在对一个变量赋值的时候，都会直接给定一个字面量。var string = 𧦖 say no!'console.log(typeof string); // 输出："string"通过类型的检测，可以知道他是一个字符串。但又可以访问到一些属性，比如 len...

2022/10/22 12:00:32 阅读:104次

Lodash

Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 实现了大量实用的工具方法。(官方文档)<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script><script> console.log(window...

2022/10/22 12:00:33 阅读:111次

moment

momentJavaScript 日期处理类库moment.js 主要用于处理时间，许多程序的第三方框架在一些时间处理上都会采用 moment.js。1. 使用moment.js 在全局下以 moment 作为入口，提供了一系列时间相关的方法。<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min....

2022/10/22 12:00:33 阅读:98次

swiper

swiperSwiper 常用于移动端网站的内容触摸滑动Swiper 是纯 JavaScript 打造的滑动特效插件，面向手机、平板电脑等移动终端。swiper.js 在国内使用面非常广，可以用于实现轮播、图片预览、可滚动应用等，发挥想象可是实现诸多需求。本篇幅采用 swiper5，所有版本的 api 都很相似，主要区别可以参考官方的提供的说明。1. 使用1245swiper 需要引入两个资源，通...

2022/10/22 12:00:33 阅读:111次

ECMAScript 6

ECMAScript 62015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。(MDN)ES6 的发布让 JavaScript 的便携体验有了里程碑式的飞跃。各种概念性的特性都被纳入标准，如 Promise、模块化。Google Chrome 浏览器支持绝大部分的 ES...

2022/10/22 12:00:34 阅读:115次

Node.js

...

2022/10/23 8:08:00 阅读:98次

Babel

BabelBabel 是一个 JavaScript 编译器。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 由 Node.js 驱动，可以把 ES6+ 的代码编译成 ES5、ES3 的代码。配合插件和工具，Babel 还能处理一些非规范的语法，处理 JSX、T...

2022/10/22 12:00:33 阅读:100次

CSS 预处理器

CSS 预处理器CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序。CSS 预处理器有许多种，如 less、SCSS、styles、PostCSS，这四个是目前用的最多的。预处理器有一套自己的语法，最终能编译出 CSS。主流的几个预处理器语法类似，基础语法很容易掌握。以下篇幅围绕预处理器 less 展开，主要是为了了解什么是预处理器。SCSS 安装过程中经常会碰到 nod...

2022/10/22 12:00:33 阅读:101次

代码规范

代码规范每个团队、每个人都有自己的代码规范。规范的代码可以让整个项目的编码风格更统一。一个项目的代码规范涉及许多方面：是否该用分号结尾可否使用位运算符能不能写行 if 语句是否必须要用函数声明的形式创建函数…在没有工具检测的情况下，统一多人项目的编码风格是一件比较困难的事情，每次提交代码都需要详细的 review 每一行代码，因为这些规范点都非常细。好在目前的前端生态有许多工具帮我们解决这个问题。...

2022/10/22 12:00:33 阅读:105次

TypeScript

TypeScriptTypeScript 是 JavaScript 的超集。TypeScript 是 JavaScript 类型的超集，它可以编译成纯 JavaScript。TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。TypeScript 包含了 JavaScript 所有的特性，同时做出了扩展，实现了许多还处于提案的或非 ECMAScript 的内容。（...

2022/10/22 12:00:33 阅读:105次

WebComponents

WebComponentsWeb Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。Web Components 可以理解成自定义组件。使用 Web Components 可以达到如原生的 video 标签的效果，video 标签在被浏览器解析后有许多子节点，如播放控制器部分的控制按钮，这些在使用 video 的时...

2022/10/22 12:00:33 阅读:93次

Vue、React、Angular

Vue、React、AngularVue、React、Angular 常被一起称作三大框架、现代框架。三大框架是目前驱动前端项目底层的最常用的框架。随着前端行业从业人员的增加，更易上手的 Vue 和 React 占据了更大部分市场。本章节不会探讨这些框架的具体用法1. 前端框架改变了什么随着 AJAX 的普及以及浏览器性能的提升，前端的交互越来越复杂，前端工程师的工作职责也在变广。其中最容易让代码...

2022/10/22 12:00:34 阅读:95次

小程序

小程序小程序是近两年发展非常迅速的一个生态。小程序赖于应用主体，基于这个主体提供的开放能力创建应用，如微信小程序，利用微信提供的能力，向上构建应用，最后将开发好的小程序应用进行上传发布，即可在微信内打开。本篇幅不会介绍如何开发小程序，小程序有非常完善的一套体系，其可以作为相对独立的技能进行学习，主要目的是提示读者可以向小程序方向进阶。1. 职责小程序开发者的职责比较模糊，因为小程序的技术栈几乎是...

2022/10/22 12:00:34 阅读:93次

JavaScript 关键字

JavaScript 关键字关键字又被称为保留字。JavaScript 有许多关键字，这些关键字会被 JavaScript 所用到，是组成 JavaScript 的一部分，如 var、function 都是关键字。关键字不能被作为变量名、函数名使用。随着标准的变化，保留字的列表可能也会发生变化1. 已经明确的保留字已经明确的保留字，表示目前已经完全被纳入 ECMAScript 标准，必须遵循语法使...

2022/10/22 12:00:34 阅读:113次

分号导致的问题

分号导致的问题在 JavaScript 中分号是可选的，解释器会自动对分号进行补全。如果选择不写分号，需要注意一些使用上的问题。不写分号，相当于将插入分号的权利递交给解释器，对于某些情况，可能会出现非预期的效果：函数返回值换行var fn = function() { return '我怎么没被返回呢??'}console.log(fn()) // 输出：undefined由于 retur...

2022/10/22 12:00:34 阅读:99次

对象属性访问问题

对象属性访问问题对象的属性在访问的时候，务必要关心属性是否真的存在。特别是服务端返回的数据，如果碰到数据出错，就可能造成页面无反应、白屏等问题：const getList = async () => { // 假装拿了服务端的数据，并返回了 return { code: 1, data: { list: null, page: 1, count:...

2022/10/22 12:00:34 阅读:105次

this 使用问题

this 使用问题大部分开发者都会合理、巧妙的运用 this 关键字。初学者容易在 this 指向上犯错，如下面这个 Vue 组件：<div id="app"></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><script&...

2022/10/22 12:00:34 阅读:106次

浮点数精度问题

浮点数精度问题有关浮点数的精度是一个老生常谈的问题了。面试题中这个知识点出现的频率非常高：0.1 + 0.2 === 0.3 // false其中可以参阅数字章节。这个问题很少会有面试官进一步的进行考察，如 “怎样让计算结果正确”，最常见的解决方案有两个：计算过程中将数字转成整数计算使用第三方库第一个方案很好理解，将 0.1 与 0.2 扩大 10 倍，相加后再相除就得到了正确的结果：((0....

2022/10/22 12:00:34 阅读:95次

独一无二的 NaN

独一无二的 NaNNaN 是独一无二的，这也是他的神奇之处，NaN 甚至都不等于 NaN：NaN === NaN // false所以自己不等于自己的变量，肯定是 NaN，通过这一特性，就能很简单的实现 isNaN 方法，用来判断一个值是不是 NaN：var isNaN = function(val) { return val !== val;};所以在判断一个值是不是 NaN 的时候，不要直接...

2022/10/22 12:00:34 阅读:99次

避免全局污染

避免全局污染自己的项目，其实不太能在全局污染上踩坑。大部分因为全局污染造成的问题，都出现在老项目下，这些老项目被太多人维护，同时又缺少模块化方案，如果开发人员的水平和意识都不是非常高，就会定义很多全局下的属性和方法。这时候如果自己去维护老项目没注意，覆盖了一个全局项目，就可能出现一个惊天大 Bug。所以在全局环境下，非必要情况，不要直接声明变量和声明函数，他们会造成全局污染。避免这个问题最常用的方...

2022/10/22 12:00:34 阅读:96次

控制台观察对象问题

控制台观察对象问题var user = { parents: { father: { age: 66, }, },};console.log(user);user.parents.father.age = 44;这段代码逻辑非常简单，就是定义了一个对象，然后输出，但是观察控制台，会发现数据并不是刚定义好时候的数据，而是修改后的数据。根据现象推测 chrome 在展开对象时...

2022/10/22 12:00:34 阅读:102次

根据环境选择语言特性

根据环境选择语言特性JavaScript 是 ECMAScript（以下简称 ES）的实现。ES 的版本非常多，各个浏览器的兼容情况也各不相同，所以一定要了解什么特性是不能在业务中直接使用的。许多公司在开新项目的同时，依然要继续维护老项目，老项目的整套体系又和现在的前端整个开发流程不同，可能缺少编译、polyfill 等来解决兼容性问题的方案。在老项目中，应避免去使用 ES6+ 的特性，用户的环...

2022/10/22 12:00:34 阅读:114次

JavaScript入门教程最新更新教程及学习资料