JavaScript高级程序设计
Published on Tue Nov 02 2021 08:00:00 GMT+0000
为系统学习 JavaScript ，重写有关 JavaScript 的笔记，使用教材《JavaScript高级程序设计》第四版。
新笔记：直接使用代码描述笔记
注意：因此本博文不再更新
https://github.com/MakinoharaShoko/Learning-Code/tree/main/JS
基础概念
1、DOM & BOM
DOM通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用DOM API， 可以轻松地删除、添加、替换、修改节点。
总体来说，BOM 主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的 扩展都归在BOM的范畴内。比如，下面就是这样一些扩展：
弹出新浏览器窗口的能力；
移动、缩放和关闭浏览器窗口的能力；
navigator 对象，提供关于浏览器的详尽信息；
location 对象，提供浏览器加载页面的详尽信息；
screen 对象，提供关于用户屏幕分辨率的详尽信息；
performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；
对 cookie的支持；
其他自定义对象，如 XMLHttpRequest 和 IE的 ActiveXObject。
2、加载方式
1、行内
1
2
3
4
5
| <script>
function sayHi() {
console.log("Hi!");
}
</script>
|
2、外部文件
1
| <script src="example.js"></script>
|
3、加载位置
推荐加载在 body 内容的最后，这样就会在渲染界面后加载JavaScript
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
|
推迟到解析到结束标签 </html> 执行（只对外部脚本文件才有效）：
1
| <script defer src="example1.js"></script>
|
语言基础
变量声明提升
var 提升，let不提升
1
2
3
4
5
| console.log(name);
var name = 'Matt';
console.log(age);
let age = 26;
|
let：声明范围是块作用域，所以不会造成循环定义的迭代变量渗透到外部。
const声明：限制不能修改其值或引用的对象，但是可以修改该对象的内部属性。
尽可能使用let、const，避免使用var，const优先
变量类型
1
2
3
4
5
6
7
| Undefined
Null
Boolean
Number
String
Symbol
(Object)
|
undefined 是一个特殊值，在if判断为假
null：可以看做是空对象指针
数值
特殊：NaN:not a number
转换函数：
1
2
3
| Number()
parseInt()
parseFloat()
|
字符串
字符串的特点：不可变，如果要修改只能销毁原有的字符串。
转换函数：
1
2
3
4
| toString()
String()
String(null) === 'null'
String(undefined) === 'undefined'
|
模板字面量
模板字面量可用于字符串插值：
1
2
3
| let value1 = 233;
let value2 = 'sec'
let str1 = `now is ${value1} ${value2}.`
|
模板字面量可以跨行定义字符串
1
2
| let str2 = `the
Kamome's humble abode`
|
原始字符串：
Symbol
TODO:写关于symbol的笔记
Object
Object 的属性和方法
1
2
3
4
5
6
7
| constructor:创建
hasOwnProperty(propertyName):判断当前对象是否存在给定属性
isPrototypeOf:
propertyIsEnumerable(propertyName):判断给定的属性是否可用
toLocaleString():返回对象的字符串表示（反映本地化执行环境）
toString:返回对象的字符串表示
valueOf():返回对应的字符串
|
算符
一元算符
1
2
3
4
|
let str1 = '123';
str1 = +str1;
console.log(typeof str1);
|
异步编程
Promise
Promise的基本使用
1
2
3
4
5
6
7
| let myFirstPromise = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("成功!");
}, 250);
});
|
函数返回Promise
1
2
3
4
5
6
7
8
9
10
| function getUserInfo() {
return new Promise((resolve, reject) => {
dbo.collection('users').find({ eid: userEID }).toArray((err, result) => {
if (err) throw err;
returnMessage['userInfo'] = result;
resolve();
})
})
}
|
Promise.all的使用
1
2
| //执行查询
Promise.all([getUserInfo(), getMessage(), getFriendReq(), getFriendList()]).then(() => { closeAndSend() })
|
函数
函数的几种描述：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function func1(){
return 1;
}
let func2 = function(){
return 1;
}
let func3 = () => {
return 1;
}
(()=>1)();
|
箭头函数(Lambda)
1
2
3
4
5
6
7
8
9
10
| (param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
(singleParam) => { statements }
singleParam => { statements }
() => { statements }
|