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 }
|