《JavaScript高级程序设计》笔记
# 《JavaScript 高级程序设计》笔记
# 第 1 章 JavaScript 简介
JavaScript 诞生于1995年
一个完整的 JavaScript 由这三部分组成:
- ECMAScript (核心)
- DOM (文档对象模型)
- BOM (浏览器对象模型)
ECMAScript 的 宿主环境 包含 :
- 浏览器
- Node
- flash
ECMAScript 大致规定了下列组成部分:
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 对象
# 第 2 章 在 HTML 中使用 JavaScript
<script>
标签有下列常见属性:- async 表示立即下载脚本,不妨碍页面的其他操作(异步下载)
- 无法保证每个 js 的顺序
- 用于互不依赖的 js
- 主要目的是不让页面等 js
- defer 延迟到文档完全解析和显示之后在执行
- 在
</html>
标签之后执行
- 在
- src 外部文件链接
- type 表示编写代码使用的脚本语言的内容类型
text/javascript
- async 表示立即下载脚本,不妨碍页面的其他操作(异步下载)
# 第 3 章 基本概念
语法,借鉴了 C 语言
- 区分大小写
- 标识符,指的是变量、函数、属性的名字
- 第一个字符必须是 字母、下划线、或美元符号
- 其他字符可以是字母、下划线、美元符号或数字
严格模式
'use strict'
1数据类型
- 基本数据类型
- Undefined、Null、Boolean、Number、String
typeof
操作符,一般用于基本类型的检测,返回相应类型的字符串- “undefined”,"boolean","string","number","object","function"
- 复杂数据类型
- Object
- 基本数据类型
Null
类型- 表示空对象指针
- 只要意在保存对象的变量还没有真正保证对象,则保存
null
undefined
派生自null
,因此用==
比较返回true
浮点数,指的是数值中包含一个小数点,并且小数点后面至少有一位数字
NaN
- 任何涉及 NaN 的操作都返回
NaN
NaN
与任何值都不相等,包括NaN
本身
- 任何涉及 NaN 的操作都返回
数值转换
- 有 3 个函数可以把非数值转换为数值
- Number() 可以用于任何数据类型
- parseInt() 专门用于字符串转数值,用于解析整数
- parseFloat() 专门用于字符串转数值,用于解析浮点数
- 有 3 个函数可以把非数值转换为数值
字符串
- 数值、布尔值、对象、字符串值本身 都有 toString()方法,用于转为字符串
- undefined 和 null 没有 toString()方法,但可以使用 String()方法
Object 类型
对象其实就是一组数据与功能的集合
使用 Object()构造函数创建对象
var obj = new Object() // 同 obj = {}
1每个对象实例都有下列属性和方法
constructor
指向用于创建当前对象的构造函数 。(对于上面例子而言,就是Object()
)hasOwnProperty(propertyName)
用于检查给定属性是否在当前对象实例中isPrototypeOf(Object)
用于检查传入的对象是否是当前对象的原型propertyIsEnumerable(propertyName)
用于检查给定的属性是否能够使用for-in
来枚举toLocaleString()
返回对象的字符串表示,该字符串与执行环境的地区对应toString()
返回对象的字符串表示valueOf()
返回对象的字符串、数值、布尔值表示。通常与toString()
返回值相同
所有对象都有以上属性和方法
操作符
- 一元操作符
- ++
- 前置与后置的区别是与其他数运算时,前置会先执行递增(减)再与其他数运算,后置会先与其他数运算再对自身执行递增(减)
- 布尔操作符
- 与 (&&)
- 短路操作,即如果第一个操作数能决定结果,就不会对第二个操作数求值
- 或 (||)
- 短路操作,即如果第一个操作数能决定结果,就不会对第二个操作数求值
- 非 (!)
- 先使用 Boolean()转成布尔值再取反
- 与 (&&)
- 一元操作符
语句(也称流控制语句)
if-else
do-while
后测试循环语句,在对表达式求值之前,循环体内的代码至少会被执行一次
var i = 0 do { i += 2 } while (i < 10) // 只要i小于10就会一直循环
1
2
3
4
while
前测试语句
var i = 0 while (i < 10) { i += 2 } // 只要i小于10就会一直循环
1
2
3
4
for
使用 while 循环做不到的,使用 for 循环同样做不到。就是说,for 循环只是把与循环有关的代码集合在一个位置
for (初始化; 条件; 循环后执行) { // ... }
1
2
3break 立即退出循环
continue 退出当前单次循环
for- in 用来枚举对象的属性
函数
- 任何函数都可以在任何时候返回任何值
- 未指定返回值的函数会返回一个 undefined
- 通过 arguments 访问参数,它是一个类数组
# 第 4 章 变量、作用域和内存问题
变量包含两种类型的值:
- 基本类型值,指的是简单的数据段
- 引用类型值,指的是那些可能由多个值构成的对象
复制变量值
- 复制基本类型的变量值只是复制了该值的副本
- 复制引用类型的变量值时,同样也会将存储在变量对象的值复制一份放到新变量的空间中,不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。两个变量指向同一个对象。
传递参数
- 所有函数的参数都是按值传递的
检测类型
typeof
检测基础类型instanceof
检测引用类型- 变量 instanceof 构造函数(例:obj instanceof Object)
- 所有引用类型的值都是 Object 的实例
执行环境
- 在浏览器中,全局执行环境是
window
对象 - 每个函数都有自己的执行环境
- 在浏览器中,全局执行环境是
作用域链
- 当代码在一个环境中执行时,会创建变量对象的一个作用域链
- 作用域链的前端,始终是当前执行的代码所在环境的变量对象。
- 作用域链中的下一个变量对象来自包含(外部)环境,而再下一个变量对象则来自下一个包含对象。这样一直延续到全局执行环境。
- 全局执行环境的变量对象始终都是作用域链中的最后一个对象。
垃圾收集
- JavaScript 具有自动垃圾收集机制
- 对于不再使用的变量打上标记,被打上标记的变量将在执行回收时被清除,释放内存空间。
- JavaScript 具有自动垃圾收集机制
# 第 5 章 引用类型
引用类型的值是引用类型的一个实例
引用类型就是一种数据结构,描述了一类对象所具有的属性和方法
创建 Object 实例的方式有两种:
var obj = new Object()
1var obj = {} // 与 new Object() 相同,但实际不会调用Object构造函数
1
访问对象的属性有两种:
- 点表示法 和 方括号表示法
# Array 类型
length 属性不是只读的
检测数组
value instanceof Array
1Array.isArray(value)
1
转换方法
- toLocaleString() 与 toString()相同
- toString() 返回数组中每个值的字符串形式用逗号分隔拼接而成的字符串
- valueOf() 返回数组本身
# join() 转换方法 (不改原数组)
接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串。
var arr = ['red', 'blue', 'green']
var arrStr = arr.join('|') // "red|blue|green"
arr.join() // "red,blue,green"
arr.join('') // "redbluegreen"
2
3
4
5
# 栈方法,后进先出 push() 、pop() (改变原数组)
- push() 向数组末尾添加成员,返回总长
- pop() 移除数组末尾一个成员,返回该成员
# 队列方法,先进先出 push()、shift() 、unshift() (改变原数组)
shift() 移除数组首个成员,返回该成员
unshift() 在数组前面添加成员,返回总长
push()和 shift() 形成队列方法
unshift 和 pop() 形成反方向队列方法
# 重排序方法 reverse() 反转 sort() 排序 (改变原数组)
- reverse() 反转数组项的顺序
- sort() 接收一个函数作为参数,函数接收两个参数。
- 自定义排序:函数内,如果第一个参数应该位于第二个之前,则手动返回一个负数,如果两个参数相等,手动返回 0,如果第一个参数应该位于第二个参数之后,则手动返回一个正数。
// 升序
arr.sort(function(a,b){
if(a < b) {
return -1
} else if (a > b) {
return 1
} else {
retunr 0
}
})
2
3
4
5
6
7
8
9
10
简写:
arr.sort((a, b) => {
return a - b // 升序, b-a 降序
})
2
3
# 操作方法 concat() 拼接,slice() 切片,splice() 移接
concat() 拼接数组 (不改原数组)
var arr1 = ['a', 'b'] var arr2 = arr1.concat('c', 'd') // ['a','b','c','d']
1
2slice() 切片(不改原数组)
- slice(起始位置 [, 结束位置]) 返回起始位置到结束位置的成员,不包含结束位置。
var arr1 = [1, 2, 3, 4, 5] var arr2 = arr1.slice(1, 3) // [2,3] var arr3 = arr1.slice(2) // [3,4,5]
1
2
3splice() 移接 (改变原数组)
- splice(起始位置, 要删除的个数,要插入的项)
- 要插入的项 可以有 0 个或多个
- splice() 始终返回一个数组,该数组成员中包含原始数组中被删除的项,如果没有则返回空数组。
- 数组最强大的方法,可用于删除、插入、替换操作
arr = [1, 2, 3, 4] arr.splice(1, 1) // [2] arr // [1,3,4] arr = [1, 2, 3, 4] arr.splice(2, 0, 'a') // [] arr // [1,2,'a',3,4] arr = [1, 2, 3, 4] arr.splice(3, 1, 'a') // [4] arr // [1,2,3,'a']
1
2
3
4
5
6
7
8
9
10
11- splice(起始位置, 要删除的个数,要插入的项)
# 位置方法 indexOf()、lastIndexOf()
- 查找项的位置,没有则返回-1
- indexOf() 从前面开始找,lastIndexOf() 从后面开始找
# 迭代方法 every()、some() 、filter()、map() 、forEach() (都不会改变原数组)
5 个迭代方法,每个方法都接收两个参数:
- 在每项上运行的函数
- 运行函数的作用域对象
函数接收三个参数:
- 数组项的值
- 该项的索引
- 数组本身
every() 如果函数对每项都返回 true,则返回 true
例:判断数组每一项是否都大于 2
var numbers = [1, 2, 3, 2, 1] var result = numbers.every((item, index, array) => { return item > 2 }) result // false
1
2
3
4
5
some() 如果函数对任一项返回 true,则返回 true
例:判断数组是否包含大于 2 的值
var numbers = [1, 2, 3, 2, 1] var result = numbers.some((item, index, array) => { return item > 2 }) result // true
1
2
3
4
5
filter() 返回函数会返回 true 的项组成的数组
例:过滤掉数组中小于等于 2 的数
var numbers = [1, 2, 3, 4, 5] var result = numbers.filter((item, index, array) => { return item > 2 }) result // [3,4,5]
1
2
3
4
5
map() 返回每次函数调用的结果组成的数组
例:给数组每一项乘以 2
var numbers = [1, 2, 3, 4, 5] var result = numbers.map((item, index, array) => { return item * 2 }) result // [2,4,6,8,10]
1
2
3
4
5
forEach() 循环数组每一项,没有返回值
例:循环每一项
var numbers = [1, 2, 3, 4, 5] numbers.forEach((item, index, array) => { // 做一些操作 })
1
2
3
4
# 归并方法 reduce() reduceRight()
reduce() 归并为
reduceRight() 从右边归并
这两个方法都会迭代数组所有项,然后构建一个最终结果并返回
方法接收两个参数: 每一项上调用的函数,归并基础的初始值
函数接收 4 个参数:前一个的值、当前值、当前值的索引、数组对象
例:求数组每一项之和
var numbers = [1, 2, 3, 4, 5] var result = number.reduce((prev, cur, index, arr) => { return prev + cur }) result // 15
1
2
3
4
5reduce()方法,第一次执行函数时,prev 是数组的第一项,cur 是数组的第二项
# 第 6 章 面向对象的程序设计
# 6.1 理解对象
- 对象的定义:无序属性的集合,其属性可以包含基本值、对象或者函数。
- 一组键值对,其中值可以是数据或函数
# 6.1.1 对象的属性
包含两种:数据属性 和 访问器属性
# 1.数据属性
- configurable 可配置性(限制 delete 删除属性和
Object.defineProperty()
方法是否起效。),默认 true - enumerable 可列举性,默认 true
- writable 可写性,默认 true
- value 值,默认 undefined
使用Object.defineProperty()
方法修改这些默认属性。接收三个值:属性所在的对象、属性名、描述符对象。
var person = {}
Object.defineProperty(person, 'name', {
writable: false,
value: 'xu'
})
console.log(person.name) // xu
person.name = 'gao' // 修改无效
console.log(person.name) // xu
2
3
4
5
6
7
8
9
使用此方法定义属性如未指定configurable
、enumerable
、writable
将默认false
。
# 2.访问器属性
包含两个函数:getter 函数和 setter 函数(这两个函数都是非必需)。读取时调用 getter,访问时调用 setter。
使用Object.defineProperty()
方法定义访问器属性。
var book = {
_year: 2021,
edition: 1
}
Object.defineProperty(book, 'year', {
get: function () {
return this._year
},
set: function (newValue) {
if (newValue > 2021) {
this._year = newValue
this.edition += newValue - 2021
}
}
})
book.year = 2021
console.log(book.edition) // 2
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
当 getter 函数和 setter 函数只指定其中一个时,另外一个将不能用。
# 6.1.2 定义多个属性
Object.defineProperties()
方法定义多个属性。接收两个参数: 要添加或修改属性的对象 、第二个参数是一个对象,其属性与第一个参数中的属性一一对应。
var book = {}
Object.defineProperties(book, {
_year: {
// 数据属性
writable: true,
value: 2004
},
edition: {
// 数据属性
writable: true,
value: 1
},
year: {
// 访问器属性
get: function () {
return this._year
},
set: function (newValue) {
if (newValue > 2004) {
this._year = newValue
this.edition += newValue - 2004
}
}
}
})
// 定义了三个属性,每个属性有不同的描述符
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 6.1.3 读取属性的特性(描述符对象)
Object.getOwnPropertyDescriptor()
方法获取描述符,接收两个参数: 属性所在的对象、属性名
var book = {}
Object.defineProperties(book, {
_year: {
// 数据属性
writable: true,
value: 2004
},
edition: {
// 数据属性
writable: true,
value: 1
},
year: {
// 访问器属性
get: function () {
return this._year
},
set: function (newValue) {
if (newValue > 2004) {
this._year = newValue
this.edition += newValue - 2004
}
}
}
})
var descriptor = Object.getOwnPropertyDescriptor(book, '_year')
console.log(descriptor) // {value: 2021, writable: true, enumerable: false, configurable: false}
var descriptor = Object.getOwnPropertyDescriptor(book, 'year')
console.log(descriptor) // {enumerable: false, configurable: false, get: ƒ, set: ƒ}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 6.2 创建对象
使用 Object 构造函数或对象字面量方式创建对象。缺点:使用同一个接口创建很多对象时,会产生大量重复代码。解决方案:使用工厂模式的一种变体。