-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path全栈文本总结.html
2928 lines (2050 loc) · 109 KB
/
全栈文本总结.html
1
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>前端知识体系-全栈系列</h1>
<h2>前端知识体系</h2>
<img src="./全栈体系图表介绍/1-前端知识体系.png" alt="">
<h2>前端工程化体系</h2>
<img src="./全栈体系图表介绍/6-前端工程化体系.png" alt="">
<p>node</p>
<img src="./全栈体系图表介绍/7-node.png" alt="">
<h2>主流技术栈</h2>
<h6>Angular</h6>
<img src="./全栈体系图表介绍/主流技术伐-Angular2.png" alt="">
<h3>JavaScript</h3>
<img src="./全栈体系图表介绍/主流技术伐-JavaScript.png" alt="">
<h3>React</h3>
<img src="./全栈体系图表介绍/主流技术伐-React.png" alt="">
<h3>TypeScript</h3>
<img src="./全栈体系图表介绍/主流技术伐-TypeScript.png" alt="">
<h3>Vue</h3>
<img src="./全栈体系图表介绍/主流技术伐-vue.png" alt="">
<h2>跨平台技术</h2>
<img src="./全栈体系图表介绍/4-跨平台技术.png" alt="">
<h3>Cordova</h3>
<img src="./全栈体系图表介绍/跨平台技术-cordova.png" alt="">
<h3>Flutter</h3>
<img src="./全栈体系图表介绍/跨平台技术-Flutter.png" alt="">
<h3>Hybrid</h3>
<img src="./全栈体系图表介绍/跨平台技术-Hybrid.png" alt="">
<h3>ionic</h3>
<img src="./全栈体系图表介绍/跨平台技术-ionic.png" alt="">
<h3>ReactNative</h3>
<img src="./全栈体系图表介绍/跨平台技术-ReactNative.png" alt="">
<h2>跨端技术发展的三个阶段</h2>
<img src="./全栈体系图表介绍/5-跨平台技术发展.png" alt="">
<h3>weex</h3>
<h3>小程序</h3>
<h3>快应用</h3>
<h2>性能优化和监控</h2>
<img src="./全栈体系图表介绍/3-性能优化和监控.png" alt="">
<h1>前端知识体系（大纲）</h1>
<img src="./全栈体系图表介绍/2-前端知识体系全.png" alt="">
<h2>前端工程化体系</h2>
<img src="./全栈体系图表介绍/6-前端工程化体系.png" alt="">
<p> 基础设施
规范化
前端标准（基础）
W3C
SPA
DOM
BOM
XHTML
XML
JSON
JSONP
HTTP
HTML5
CSS3
编码规范
eslint
- tslint
- stylelint
- 命名规范
- Pascal 大小写
- 组成标识符的每个单词的首字母大写，其余字母小写的书写约定。对于缩写的双字母单词，要求全部大写
- Camel 大小写
- 标识符的首字母小写，每个后面连接的单词的首字母大写，其余字母小写的书写约定。对于缩写的双字母单词，要求它们出现在标识符首部时全部小写，否则全部大写
- 匈牙利命名法
- 变量名 = 属性 ＋ 类型 ＋ 对象描述
- 常量的命名
- 常量的名字应该都使用大写字母，并且指出该常量完整含义
- 目录规范
- commit提交规范
- commitiizen
- cz-customizable
- commitlint
- 文档规范
- 接口规范
- 流程规范
基础构建优化
压缩
校验
资源合并
打包构建工具
Browserify
webpack
gulp
rollup
grunt
…
包管理工具
Bower
npm
yarn
模块化
JS模块规范
模块规范
AMD
RequireJS
CMD
seaJS
CommonJS
node模块系统
ES6+ Module
模块加载机制原理
CSS模块化
css预处理器
Less
Sass
node-sass
dart-sass
Stylus
css Module
css in JS
模块设计
组件化
组件化标准
Web Component
组件设计
UI和功能拆分（独立性/自由组合）
组件设计
目录结构（就近维护）
资源管理
按需加载
延迟加载
缓存复用
CDN部署
文件指纹
请求合并
异步同步加载
工具链
脚手架
脚手架工具原理
命令行工作流
项目模板设计
搭建本地开发环境
搭建本地mock环境
自动化构建
webpack配置使用
常用插件
webpack构建性能优化
代码转换：ES与Babel
CSS预编译与postcss
模块合并：webpack模块化构建
webpack增量更新构建
资源定位
自动刷新
引入单元测试
部署发布
Jenkins
部署流程
静态资源部署策略
监控
行为监控
异常监控
采集
用户信息
行为信息
异常信息
环境信息
性能监控
运行时监控
文件级
模块级
函数级
算法级
网络请求速率
系统性能
工作流
本地工作流
本地环境
代码分离
测试沙箱
云平台工作流
角色划分
本地开发环境
gitlab
云平台
自动化构建与部署
gitflow与版本管理
webhook与自动构建
持续集成与持续交付
自动构建与测试
生产环境的迭代版本、版本回流
Docker容器技术
IDE云平台开发
IDE工具
调试工具
Chrome
Element 标签页
用于查看和编辑当前页面中的 HTML 和 CSS 元素
Network 标签页
用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等
Source 标签页
用于查看和调试当前页面所加载的脚本的源文件
TimeLine 标签页
用于查看脚本的执行时间、页面元素渲染时间等信息
Profiles 标签页
用于查看 CPU 执行时间与内存占用等信息
Resource 标签页
用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等
Audits 标签页
分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案，用于优化前端页面，加速网页加载速度等
Console 标签页
用于显示脚本中所输出的调试信息，或运行测试脚本等
firefox插件Firebug
Chrome浏览器出现之前常用的调试工具
IE的开发者工具
IETest
IE浏览器版本切换工具
在开发Web项目的时候，经常会碰到需要在不同的IE版本中检查完成的网页是否能正常展现，这时就需要IETest帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们看一下辛苦做好的CSS样式或网站版面是否可以在各个主要浏览器正常显示
Emmet
HTML/CSS开发中的神器
https://www.emmet.io/
JSON 格式化和校验工具
Postman
用于调试请求和响应
移动端抓包调试
fiddler
Charles
node
基础知识
web服务
express
中间件、生态完善
koa
脱胎于express，提升异步编程体验
hapi
遵循配置大于编码原则，沃尔玛前端团队出品
sails
模仿ruby on rails框架
tsw
qq空间出品，集成了很多腾讯内部组件
Meteor
快速搭建框架、10倍的减轻工作量
Feathers
创建一个面向服务的架构，是一个很好地适合创建Node.js微服务
Keystone
Keystone是得到一个管理客户端并运行的最好的解决方案之一，以便管理来自MongoDB数据库的内容。管理界面自动从模型生成，具有所有CRUD操作和精细的过滤器。
Loopback
内置许多函数，包括使用令牌和到任何类型的数据库连接器的认证
egg
为企业级框架和应用而生，是阿里开源的企业级 Node.js 框架
Daruk
Daruk 是一款基于 Koa2，使用 Typescript 开发的轻量级 web 框架
uma
58同城node框架
模板引擎
handlebars
ejs
jade
前端打包
webpak
fis
任务管理
gulp
单元测试
karma
mocha
jasmine
包管理
npm
cnpm
yarn
守护进程
pm2
forever
三大特点
单线程
Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的
非阻塞I/O
由于Node.js中采用了非阻塞型I/O机制，因此在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。
当某个I/O执行完毕时，将以事件的形式通知执行I/O操作的线程，线程执行这个事件的回调函数。为了处理异步I/O，线程必须有事件循环，不断的检查有没有未处理的事件，依次予以处理。
阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程。而非阻塞模式下，一个线程永远在执行计算操作，这个线程的CPU核心利用率永远是100%。所以，这是一种特别有哲理的解决方案：与其人多，但是好多人闲着；还不如一个人玩命，往死里干活儿。
事件驱动event-driven
在Node中，在一个时刻，只能执行一个事件回调函数，但是在执行一个事件回调函数的中途，可以转而处理其他事件（比如，又有新用户连接了），然后返回继续执行原事件的回调函数，这种处理机制，称为“事件环”机制。
Node.js底层是C++（V8也是C++写的）。底层代码中，近半数都用于事件队列、回调函数队列的构建
技术架构
底层架构
v8 engine
虚拟机的功能，执行js代码
提供C++函数接口，为nodejs提供v8初始化，创建context，scope等
libuv
它是基于事件驱动的异步IO模型库，我们的js代码发出请求，最终由libuv完成，而我们所设置的回调函数则是在libuv触发
builtin modules
它是由C++代码写成各类模块，包含了crypto，zlib, file stream etc 基础功能
v8提供了函数接口，libuv提供异步IO模型库，以及一些nodejs函数，为builtin modules提供服务
native modules
它是由js写成，提供我们应用程序调用的库，同时这些模块又依赖builtin modules来获取相应的服务支持
node函数调用机制
通信协议
网络协议
http/https
推荐request.js
tcp
net模块
udp
dgram模块
数据序列化协议
json
文本协议，常用于http通信
protocol buffer
二进制协议，常用于socket通信
js原生不支持，可以使用protobuf.js来解析
接口协议
restful apis
语义化，几乎所有web框架都支持
Graphql
解决restful接口过于原子化的缺陷，facebook出品
需要在前端和后台接口之前搭建一层graphql server做数据处理
RPC
后台服务间通信
网络序/本地序
Buffer模块api原生支持两种序列的转换
存储
数据库
MySql
MongoDB
Oracle
MSSQL
微软的SQLServer数据库服务器
PostreSQL
功能强大的开源对象关系数据库系统
MariaSQL
缓存
redis
memcache
nosql
mongodb
orm
sequelize（mysql）
bookshelf（mysql）
zookeeper
消息队列
RabbitMQ
实现了高级消息队列协议（AMQP）的开源消息代理软件
Kafka
消息队列 Kafka 版是阿里云基于 Apache Kafka 构建的高吞吐量、高可扩展性的分布式消息队列服务
zmq
是一个消息处理队列库，可在多个线程、内核和主机盒之间弹性伸缩
server render
websocket
是一种在单个TCP连接上进行全双工通信的协议
设计模式
单例模式
保证一个类只有一个实例
适配器模式
适配器模式可以使原本由于接口不兼容而不能一起工作的那些类可以一起工作
装饰模式
可以通过继承的方式，为一个基类对象扩展功能
观察者模式
就是为某一对象添加一监听事件
主流技术栈
React
简介
React 是一个 MVC 框架
React 主要是用来构建 UI
React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源
特点
声明式
使用 React 编写UI界面和写HTML几乎一样
高效
React通过对DOM的模拟，最大限度地减少与DOM的交互
灵活
React可以与已知的库或框架很好地配合
生命周期
constructor
构造函数
componentWillMount
在渲染前调用,在客户端也在服务端（高版本已废弃）
componentDidMount
在第一次渲染后调用，只在客户端
componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
shouldComponentUpdate
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用
componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用
componentWillUnmount
在组件从 DOM 中移除的时候立刻被调用
React思想
组件编写顺序
1.组件划分原则
解耦
复用
适度
2.编写静态组件
3.分析State
哪些是State
对组件进行两个灵魂质问
对State集合进行检查和去重
State保存的位置
单一状态
状态上移
添加交互行为
mock方式
server
public
Redux思想
使用redux是在解决什么问题
问题原因：数据状态包括API数据，本地数据和UI状态等随着项目扩大变的管理复杂
解决问题的目的：防止管理状态失控
解决问题的手段：使用redux将视图层和状态管理层从逻辑上解耦
State
集中管理，全局唯一
不可变性
定义原则与React State定义原则相同
Action
普通Acion
ActionCreators
ActionTypes
异步Action
异步action的创建
请求开始action
请求成功action
请求失败action
拓展reducer
请求数据相关的state数据结构的变化
请求数据相关的reducer内容扩充
集成redux-thunk
问题原因：净化react组件的代码，想将数据请求放在action当中做
解决问题的目的：实现异步Action
解决问题的手段：使用redux-thunk实现异步Action，抽离react中的数据请求代码
Reducer
combineReducers
Store
redux-devtools
浏览器插件
项目依赖库
React-Redux思想
使用react-redux是在解决什么问题
问题原因：reactUI层和redux状态层的相关代码冗杂在react组件中
解决问题的目的：既能链接reactUI层和redux状态层，又不让两者代码糅合
解决问题的手段：使用react-redux将视图层和状态管理层从代码上解耦
功能
Provider组件
connect高阶HOC组件
map api
容器性组件和展示性组件
关注点
对redux感知
读数据
写数据
如何创建
流程图总结
https://www.taopoppy.cn/react_redux_jiagou_react_redux.png
React-Router
服务端路由和客户端路由的区别
服务端路由：访问http://a就返回a.html，访问http://b就返回b.html，是服务器根据不同的路由返回不同的页面
客户端路由：无论访问什么路径，返回的页面信息都是相同的，是通过js通过判断路径的不同来渲染不同的组件而已，所以叫做客户端路由
BrowserRouter和HashRouter区别
之前说react-router-dom是将react-route和web-api做绑定，这些web-api具体指的就是HTML5 history
API，利用这些pushState、replaceState等方法实现在客户端实现路由的操作
哈希路由是使用url的hash部分作为路由信息，是通过使用页面不同的哈希和不同的组件之间做映射来完成的，哈希的出现主要为了兼容老版本浏览器，因为老版本的浏览器不支持history的API，所以通过哈希的变化来实现路由的变化。但是这样的情况在现在已经很少了，而且哈希的本身含义就是页面的定位，其逻辑也不符合路由的需求
路由渲染组件的三种方式
component
render
children
全新思维
一切皆组件
动态路由离散式声明法
架构设计基础
React+Redux项目结构组织方式
type（按照类型）
定义
类型指的是该文件在项目当中充当的角色类型
特点
优点
目录结构清晰却明确，功能文件比较紧凑
缺点
新添功能需要在不同的文件中做修改
不利于多人合作下的代码表写和提交合并
function（按照功能模块）
定义
功能指的是按照功能或者页面将相关的文件写在同一个文件夹
特点
优点
有利于新功能的开发和拓展
缺点
容易造成store当中存在大量重复性的数据
同一状态在不同的模块中会有不一致的风险
Ducks（鸭子类型）
定义
将应用的状态作为模块的划分依据
特点
目录结构清晰紧凑，添加新功能只需添加新模块文件即可
组件需要任何状态只需要引入对应的state模块文件即可
三种设计Redux-State的依据
API为依据
定义
以后端API返回数据结构作为State的数据结构
缺点
大量数组类型的结构会造成重复数据的存在
UI为依据
定义
不同的UI显示都对应一份State
缺点
State数量过多，容易出现错误的State和重复的State
数据库基本原则为依据
整个应用的状态按照领域分成若干子State，子State之间不能保存重复的数据
State以键值对的结构存储数据，以记录的key/Id作为记录的索引，记录中的其他字段都依赖于索引
State中不能保存可以通过已有数据计算而来的数据，即State中的字段不互相依赖
架构设计进阶
selector函数
使用selector是在解决什么问题
问题原因：redux和容器性组件存在部分耦合，redux中的state结构变化会影响后者
解决问题的目的：实现react容器性组件和redux状态层的终极解耦
解决问题的手段：selectors是作为不同层级之间的接口不仅彻底解耦了层级，还使得不同层级通过接口进行安全交互和通讯得以实现
selector带来的好处
selector限制了层级的内部变化影响范围最多到接口
selector防止不同层级互相知道内部结构的风险
selector可以负责计算和过滤的工作
redux中间件（Middleware）
middleware的写法
middleware的本质
redux增强器（Enhancer）
Enhancer的写法
Enhancer和Middleware的关系
实际上middleware是store
enhancer的一种，中间件虽然比较低阶，但是它约束了我们的行为，而增强器enhancer虽然更加灵活，但是破坏redux底层结构的风险更大，所以如果你对redux整体的结构和逻辑都不是太熟悉，尽量就别用
架构设计高级
reducer如何返回新的state对象
Object.assign
ES6扩展语法
Immutable
Immutable的常规使用
Immutable的优化
Immutable的选择考虑
对项目的整体侵入性很强，我们需要改的地方很多，如果你的项目不是很大，且store当中的数据层级不是很多，结构不复杂，不推荐使用的，我们一定要根据需求去搭建架构，去决定是否使用某些工具
Reselect
使用Reselect是解决什么问题
store当中的state发生了变化，每个容器型组件的mapStateToProps都要重新执行，产生的结果就是上述的这些selectors函数也要重复执行，也就导致了重复计算，使用Reselect创建的selectors函数，只要使用到的state没有发生变化，这个selectors函数就不会去重新计算，比如getVisibleTodos函数使用到了state.filter和state.todos，修改state.text并不会影响state.filter和state.todos，所以getVisibleTodos函数也就不会重复执行
Reselect的常规使用
Reselect的选择考虑
React Hooks
特性
hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性
Hooks API
useState
用来承担与类组件中的 state 一样的作用，组件内部的状态管理
useEffect
可以用来模拟生命周期，即可以完成某些副作用
useLayoutEffect
它与 useEffect 的用法完全一样，作用也基本相同，唯一的不同在于执行时机，它会在所有的 DOM 变更之后同步调用 effect，可以使用它来
useReducer
useState 的替代方案，它接收一个 (state, action) => newState 的 reducer 处理函数，并返回当前的 state 和 配套的 dispatch 方法。使用方法与 redux 非常相似
useCallback
它有的作用：性能优化，父组件更新，传递给子组件的函数指针不会每次都改变，只有当依赖项发生改变的时候才会改变指针。避免了子组件的无谓渲染
它的本质是对函数依赖进行分析，依赖变更时才重新执行。
useMemo
useMemo 用于缓存一些耗时的计算结果（返回值），只有当依赖项改变时才重新进行计算
useContext
专门为函数组件提供的 context hook API，可以更加方便地获取 context 的值
useContext(MyContext) 接收一个 context 对象，当前获取到的值由上层组件中距离最近的 <MyContext.Provider> 的 value 决定
useRef
useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数。返回的 ref 对象在组件的整个生命周期内保持不变
未完待续…
Angular
博主未曾使用特附上一个其他大神总结的链接
https://img.58cdn.com.cn/escstatic/docs/imgUpload/gongchenghui/angular.png
JavaScript
JS变量
变量声明
声明
显示声明
var 变量名
隐式声明
自动添加到闭包
陋习
没有类型
重复声明
隐式声明
不声明直接赋值
提倡
先声明后使用
先赋值后运算
作用域
全局变量
包含
在函数体外定义的变量
在函数体内定义的无var的变量
调用
任何位置
局部变量
包含
在函数体内部var声明的变量
函数的参数变量
调用
当前函数体内部
优先级
局部变量高于同名全局变量
参数变量高于同名全局变量
局部变量高于同名参数变量
特性
忽略块级作用域
全局变量是全局对象的属性
局部变量是调用对象的属性
作用域链
内层函数可访问外层函数局部变量
外层函数不能访问内层函数局部变量
生命周期
全局变量
除非被显示删除，否则一直存在
局部变量
自声明起至函数执行完毕或被显示删除
回收机制
标记清除
引用计数
JS数据类型
undefined
使用var声明但未初始化
区分空对象指针与尚未定义的变量
对未初始化的变量及未声明的变量使用typeof都返回undefined
null
逻辑上null表示一个空对象的指针
使用typeof检测时会返回object
boolean
true为真false为假
true不一定=1 false不一定=0
使用Boolean()进行转换
转换为true
任何非空字符串
任何非空对象
任何非零数字
转换为false
空字符串
0和NaN
null及undefined
string
特性
0个或多个16位Unicode字符组成
单引号与双引号不能交叉使用
使用.length属性访问字符串长度
转义序列表示一个字符串
无法精确返回双字节字符串长度
字符串一旦被创建，其值将不能改变，若要改变必须销毁原有字符串
转义序列
\n 换行
\t 制表符
\b 空格
\r 回车
\f 分页符
\ 斜杠\
’ 单引号
" 双引号
\xnn 十六进制数，n代表0~F
\unnnn 以十六进制表示一个Unicode字符
类型转换
toString()
使用类型
number
string
object
boolean
参数
number类型的数值基数
String()
undefined
null
evel()
计算字符串表达式的值并以数值的形式返回
number
进制
十进制
八进制
十六进制
浮点数
小数点后至少一位数字
科学计数法
小数点后带有6个0的浮点数
以e为底*10的±N次幂
最高精度
17位小数
缺陷
存在舍入误差
无法测试特定浮点数值
数值范围
最小值
Number.MIN_VALUE
5e-324
最大值
Number.MAX_VALUE
1.7976931348623157e+308
超出范围