
JavaScript高级程序设计
文章平均质量分 61
Talon不会写代码
I'm just a lonely loner on a lonely road alone.
展开
-
《JavaScript高级程序设计》研读(二)——JS基本概念
第三章 JS基本概念书中第三章主要通过第三版 ECMAScript 介绍了 JavaScript 的基本概念,也是 JavaScript 的最主要部分。这一章的很多内容虽然已经掌握,但仍有很多需要注意的地方。1. 语法ECMAScript 语法大量借鉴 C 及其他类 C 语言。1.1 ECMAScript 中的一切(变量、函数名和操作符)全部区分大小写1.2 标识符命名规则:以字母,...原创 2018-09-18 00:33:39 · 195 阅读 · 0 评论 -
JavaScript中的Object类型
Object 类型使我们使用最多的一种引用类型。创建实例创建 Object 实例的方式有两种:1. new 操作符 + 构造函数例如:var person = new Object();person.name = "Talon";person.age = 20;2. 对象字面量表示法对象字面量表示法是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。例如:v...原创 2018-11-29 20:11:05 · 309 阅读 · 0 评论 -
JavaScript数组的位置方法(indexOf和lastIndexOf)
数组类型有两个位置方法:indexOf和lastIndexOf。这两个方法都接收两个参数,要查找的项和(可选的)表示查找起点位置的索引。 indexOf 方法从数组开头(位置0)开始向后查找,lastIndexOf 方法则是从数组末尾向前查找。这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回 -1。在比较第一个参数与数组中的每一项时,使用全等操作符(===)。例如:var ...原创 2018-12-04 15:43:44 · 1262 阅读 · 0 评论 -
JavaScript中的Array类型
Array 类型Array 类型是除 Object 外 ECMAScript 中最常用的类型。ECMAScript 中的数组与其他语言中的数组有很大的区别:ECMAScript 中数组的每一项可以保存任何类型的数据。也就是说,数组中可以第一位用来保存字符串,而第二位用来保存数值。ECMAScript 中数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。创建数组...原创 2018-11-29 22:01:21 · 185 阅读 · 0 评论 -
JavaScript栈和队列方法(Array类型)
Array 是 ECMAScript 中的数组类型,它提供了一种让数组的行为类似于其他数据结构的方法。栈方法栈是一种 LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最后添加的项最先被移除。栈中项的插入(推入,push)和移除(弹出,pop)只发生在栈顶。ECMAScript 为数组专门提供了 push( ) 和 pop( ) 方法,来实现类似栈的行为。push(...原创 2018-11-30 14:03:29 · 327 阅读 · 0 评论 -
如何理解JavaScript中的参数按值传递
开始之前先说一下 ES 中的两种数据类型的值:基本类型值和引用类型值。基本数据类型:Undefined、Null、Boolean、Number、String。引用数据类型的值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是操作对象的引用而不是实际的对象。 这一部分对下面理解参数传递非常重要。传...原创 2018-11-27 19:13:10 · 355 阅读 · 0 评论 -
JavaScript检测数据类型(typeof和instanceof)
typeoftypeof 操作符是比较常用的,用来确定一个变量的数据类型。typeof的规则:undefined: 值未定义boolean: 布尔值string: 字符串number: 数值object: 对象或 nullfunction: 函数instanceoftypeof 操作符用来检测基本数据类型非常方便,但是用来检测引用类型时就比较鸡肋了。有时候我们并不是想知道...原创 2018-11-28 20:00:19 · 429 阅读 · 0 评论 -
JavaScript中的RegExp类型
RegExpECMAScript 通过 RegExp 类型来支持正则表达式。创建 RegExp创建正则表达式语法:var expression = / pattern / flags ;其中的模式(pattern)部分可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、向前查找及反向引用。每个正则表达式都可以带有一或多个标志(flags),用以标明正则表达式的行为。关于...原创 2018-12-07 18:34:09 · 227 阅读 · 0 评论 -
JavaScript数组的迭代方法(every、filter、forEach、map和some)
ES5 中为数组定义了 5 个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数接收三个参数:数组项的值、该项在数组中的位置(索引)和数组对象本身。这 5 个方法都不会修改原数组中包含的值。every ( ) 和 some ( )every ( ) 和 some ( ) 是一对功能比较相近的函数,他们用...原创 2018-12-05 16:27:36 · 325 阅读 · 0 评论 -
JavaScript中的方法(Function类型)
Function函数是 ES 中非常重要的一部分,函数实际上也是对象。每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会跟某个函数绑定。定义函数函数定义有三种方式:一 函数声明语法function sum(num1, num2) { return num1 + num2;}二 ...原创 2018-12-12 19:05:24 · 452 阅读 · 0 评论 -
JavaScript数组的归并方法(reduce和reduceRight)
ES5 为数组增加了两个归并数组的方法:reduce( ) 和 reduceRight( ) 。这两个方法都会迭代数组的所有项,然后构建一个最终返回值。 其中 reduce 从第一项开始向后遍历,reduceRight( ) 则从最后一项开始向前遍历。这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给这两个方法的函数接收四个参数:前一个值,当前值,项的索引...原创 2018-12-05 22:50:52 · 629 阅读 · 0 评论 -
JavaScript中数组(Array)的排序方法(reverse和sort)
数组中已经存在有两个可以直接使用的排序方法:reverse()和 sort()这两个方法的返回值都是经过重排序之后的数组reverse ( )reverse( ) 方法的作用很简单,就是反转数组的顺序。var colors = new Array("red", "blue", "green");var count = colors.unshift("black&原创 2018-12-03 21:42:41 · 767 阅读 · 0 评论 -
JavaScript数组的操作方法(concat、slice和splice)
ECMAScript 为操作数组中的项提供了很多方法,其中最常用的有:concat( ) 、slice( ) 和 splice( ) 。concat ( )concat ( ) 方法可以基于当前数组中的项创建一个新的数组。具体来说,这个方法会先创建一个当前数组的副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给它传参的情况下,它仅复制当前的数组并返回副本。如果给它...原创 2018-12-03 22:52:58 · 359 阅读 · 0 评论 -
JavaScript中函数的属性和方法(length、prototype、apply()、call()和bind())
函数内部属性在函数内部有两个特殊的对象:arguments 和 this 。arguments 的主要用途是用来保存函数参数,但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。this 与 Java 中的 this 大致类似,引用的是函数执行的环境对象。函数属性和方法1. lengthlength 属性表示函数希望接受的命名参...原创 2019-01-17 20:05:21 · 313 阅读 · 1 评论 -
JavaScript基本包装类型(Boolean、Number)
基本包装类型为了便于操作基本类型值,ECMAScript 还提供了 3 个特殊的引用类型:Boolean、Number 和 String。实际上,每当读取一个基本类型值时,后台会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。我们知道,基本类型值不是对象,因而从逻辑上讲,他们不应该有方法(实际上有)。其实,为了让我们实现这种直观的操作,后台自动完成了一系列的处理:...原创 2019-01-17 21:45:14 · 262 阅读 · 0 评论 -
JavaScript基本包装类型(String类型)
String 类型String 类型是字符串的对象包装类型。var stringObject = new String("hello world")String 对象的方法也可以在所有基本的字符串值中访问到。其中,继承的 valueOf ( ) 、toLocalString ( ) 和 toString ( ) 方法,都返回对象所表示的基本字符串值。String 类型的每个实例都有一个 ...原创 2019-01-17 23:58:40 · 386 阅读 · 0 评论 -
JavaScript单体内置对象——Global对象
单体内置对象单体内置对象的定义:由 ECMAScript 实现提供的、不依赖于宿主环境的对象,这些对象在 ESMAScript 程序执行之前就已经存在了。像我们常见的 Object 、Array 和 String 都是内置对象,另外还有 Global 和 Math 。Global 对象1. URI 编码方法Global 对象的 encodeURI ( ) 和 encodeURIComp...原创 2019-01-23 23:47:36 · 287 阅读 · 0 评论 -
JavaScript性能优化方案(事件委托详解)
事件处理程序过多导致性能下降在 JavaScript 中,添加到页面上的事件处理程序数量会直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先,每个函数都是对象,都会占用内存;内存中对象越多,性能就越差。其次,必须事先指定所有事件处理程序所造成的 DOM 访问次数,也会延迟整个页面的交互就绪时间。在事件处理程序角度来提升性能主要有两张方式:事件委托、及时移除事件处理程序。事件委...原创 2018-11-26 17:14:53 · 568 阅读 · 1 评论 -
JavaScript中的垃圾收集机制(标记清除和引用计数)
垃圾收集机制JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。这样我们在编写 JavaScript 代码时就不需在关心内存使用问题了,所需内存分配和已用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实非常简单:找出那些不再使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性的执行这...原创 2018-11-28 23:03:12 · 2425 阅读 · 1 评论 -
JavaScript变动事件详解(删除节点与插入节点事件)
变动事件DOM2 级的变动(mutation)事件能在 DOM 中的某一部分发生变化时触发。常见变动事件主要有:DOMSubtreeModified: 在 DOM 结构发生任何变化时触发。这个事件在其他事件触发后都会触发。DOMNodeInserted: 在一个节点作为子节点被插入到另一个节点时触发。DOMNodeRemoved: 在节点从其父节点中被移除时触发。DOMNodeIns...原创 2018-11-24 22:57:40 · 2113 阅读 · 0 评论 -
《JavaScript高级程序设计》——JS基本概念之语句与函数
未填原创 2018-09-18 00:37:01 · 183 阅读 · 0 评论 -
《JavaScript高级程序设计》——JS基本概念之数据类型
ECMAScript 中有五种简单数据类型(基本数据类型):Undefined、Null、Boolean、Number 和 String。还有一种复杂数据模型:Object。数据类型1 typeof 操作符typeof 用来检测给定变量的数据类型。对一个值使用 typeof 操作符可能返回下列某个字符串:“undefined”——如果这个值未定义;“boolean”——如果这个值是布尔...原创 2018-09-24 00:49:12 · 299 阅读 · 0 评论 -
《JavaScript高级程序设计》研读(一)——JS简介与在HTML中使用JavaScript
前言:本来打算学习一下主流的前端框架,但是在学习的过程中,深深地感受到了自己基础的薄弱,对很多js的基础知识一知半解,尤其是一些比较冷门或者涉及到底层知识的问题。因此决定先把根基打牢,准备研读一下《JavaScript高级程序设计》,俗话说磨刀不误砍柴工嘛。 大一时候刚接触前端,心血来潮买了这本书,结果看了没几页就扔到一边去了。一方面是页数实在太多,更主要的是因为当时对于JS完全零基础,阅...原创 2018-09-15 01:19:39 · 210 阅读 · 0 评论 -
JavaScript事件对象
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。DOM 中的事件对象兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用的是何种方式(DOM0 级或 DOM2 级),都会传入 event 对象(当事件处理程序执行完毕,event 对象会...原创 2018-11-13 16:37:20 · 422 阅读 · 0 评论 -
JavaScript事件流
前言JavaScript 与 HTML 之间的交互是通过事件来实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流当我们在页面上单击按钮时,也单击了按钮的容器元素,甚至也单击了整个页面。事件流描述的就是从页面中接收事件的顺序。下面介绍一些主要的事件流:事件冒泡IE的事件流叫做事件冒泡,即时间开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较...原创 2018-11-12 17:09:29 · 160 阅读 · 0 评论 -
JavaScript事件处理程序(HTML、DOM0、DOM2、IE、跨浏览器)
前言事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以 on 开头,因此 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有很多种。HTML 事件处理程序某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的 HTML ...原创 2018-11-12 17:57:29 · 229 阅读 · 0 评论 -
JavaScript事件类型——鼠标与滚轮事件及鼠标事件对象
鼠标事件是 Web 开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了 9 个鼠标事件。鼠标事件:click: 用户单击主鼠标按钮(一般为左键)或者按下回车键时触发。这一点对确保易访问性很重要,意味着 onclick 事件处理程序即可以通过键盘也可以通过鼠标执行。dblclick: 在用户双击主鼠标按钮时触发。mousedown: 用户按下任意鼠标按钮时触发。...原创 2018-11-20 15:09:00 · 480 阅读 · 0 评论 -
JavaScript鼠标事件对象中的坐标位置(客户区、页面、屏幕)详解及区别
坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。客户区坐标位置鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中,分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。所有的浏览器都支持这两个属性。用法:var div = document.getElementById('myDiv');EventUtil.ad...原创 2018-11-20 16:20:36 · 1039 阅读 · 1 评论 -
JavaScript鼠标事件对象中的修改键(Shift、Ctrl、Alt、Meta)
虽然鼠标事件主要是使用鼠标来触发的,但在按下鼠标时键盘上的某些键的状态也可以影响所要采取的操作。修改键这些修改键就是:Shift、Ctrl、Alt、Meta(Window 键或 Cmd 键)。DOM 为此规定了 4 个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey 和 metaKey这些属性都是布尔值,如果相应的键被按下,则值为 true,否则为 false。...原创 2018-11-20 16:55:07 · 1125 阅读 · 0 评论 -
JavaScript鼠标事件对象的相关元素属性(relatedTarget)
在发生鼠标事件 mouseover 和 mouseout 事件时,还会涉及到一些其他鼠标事件不涉及的元素。对于 mouseover 而言,事件的主要目标是获得光标的元素,而相关元素就是那个失去光标的元素;类似的对于 mouseout 而言则恰恰相反。相关元素DOM 通过 event 对象的 relatedTarget 属性提供相关元素的信息。这个属性只对于 mouseover 和 mous...原创 2018-11-22 15:22:42 · 903 阅读 · 0 评论 -
JavaScript事件类型——UI事件
UI (User Interface)事件,当用户与页面上的元素交互时触发。多数事件都与 window 对象或表单控件相关。现有 UI 事件主要包括:load:当页面完全加载后在 window 上面触发,当所有框架都加载完毕时在框架集上面触发,当图像加载完毕后在 <img> 元素上面触发,或者当嵌入的内容加载完毕时在 <object> 元素上面触发。unload:...原创 2018-11-19 16:54:26 · 377 阅读 · 0 评论 -
JavaScript事件类型
JavaScript 事件类型是在实际开发中非常重要的一部分,有很多常用的事件已经非常熟悉了,所以就只记录一下重要和之前未了解过的事件。Web 浏览器中可能发生的事件有很多类型,“DOM3 级事件”规定了以下几类:UI事件焦点事件鼠标事件滚轮事件文本事件键盘事件合成事件变动事件...原创 2018-11-19 16:55:40 · 256 阅读 · 0 评论 -
JavaScript键盘与文本事件(keydown、keypress和keyup触发顺序及其区别)
键盘事件键盘事件主要有三个,也是平常开发过程中,尤其是在文本框输入时,非常常用的。keydown: 当用户按下键盘上的任意键时触发,如果按住不放会重复触发。keypress: 当用户按下键盘上的字符键时触发,如果按住不放会重复触发。(ESC 键也会触发)keyup: 当用户释放键盘上的键时触发。虽然所有的元素都支持上面的三个事件,但是只有在用户通过文本输入时才最常用。触发顺序:当...原创 2018-11-22 21:11:33 · 2389 阅读 · 1 评论 -
JavaScript中textInput事件详解(事件对象及与keypress事件的区别)
textInput 事件textInput 事件是 DOM3 级事件中新加的事件,当用户在可编辑区域中输入字符时,就会触发这个事件。textInput 和 keypress 区别textInput 事件与 keypress 事件类似,但还是有一些区别:任何可以获得焦点的元素都可以触发 keypress 事件,但只有可编辑区域才能触发 textInput 事件。textInput 事件...原创 2018-11-24 16:21:04 · 3847 阅读 · 0 评论 -
JavaScript焦点事件(blur、focus与focusin、focusout的区别,焦点事件触发顺序)
焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus( ) 方法及 document.activeElement 属性配合,可以知晓用户在页面上的行踪。焦点事件:blur:元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持focusin:在元素获得焦点时触发,与 HTML ...原创 2018-11-20 13:35:11 · 18561 阅读 · 0 评论 -
JavaScript单体内置对象——Math对象
Math 对象Math 对象是 ES 为保存数学公式和信息提供的一个公共位置。与我们在 JS 中直接编写的计算功能相比,Math 对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。1. Math 对象的属性Math 对象中的属性大都是数学计算中可能会用到的一些特殊值。属性说明Math.E自然对数的底数,即常量 e 的值M...原创 2019-01-27 13:52:39 · 355 阅读 · 0 评论