-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
4721 lines (3454 loc) · 754 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>AJAX</title>
<url>/2021/10/07/44/</url>
<content><![CDATA[<h2 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h2><ul>
<li><p><strong>如果能直接拿到将结果</strong></p>
<p>那就是同步</p>
<p>比如你在医院挂号，你拿到号才会离开窗口</p>
<p>同步任务可能消耗 10 毫秒，也可能需要 3 秒</p>
<p>总之不拿到结果你是不会离开的，这就是同步</p>
</li>
<li><p><strong>如果不能直接拿到结果</strong></p>
<p>那就异步</p>
<p>比如你在餐厅门口等位，你拿到号后可以去干别的事比如逛街</p>
<p>你可以每 10 分钟取餐厅问一下排到自己了没（轮询）</p>
<p>也可以扫码用微信接受通知（回调）</p>
</li>
</ul>
<h2 id="异步举例"><a href="#异步举例" class="headerlink" title="异步举例"></a>异步举例</h2><ul>
<li><p><strong>以 AJAX 为例</strong></p>
<p><code>request.send()</code> 之后，并不能直接得到 response</p>
<p>用 <code>console.log(request.response)</code> 试试</p>
<p>必须等到 readyState 变为 4 后，浏览器才会<strong>回头调用</strong> <code>request.onreadystatechange</code> 函数</p>
<p>我们才能得到 <code>request.response</code></p>
<p>这就跟餐厅给你发微信提醒的过程类似</p>
</li>
<li><p><strong>回调 callback</strong></p>
<p>你写给自己用的函数，不是回调</p>
<p>你写给别人用的函数，就是回调</p>
<p><code>request.onreadystatechange</code> 就是写个浏览器调用的</p>
<p>意思是你（浏览器）回头调用一下这个函数</p>
</li>
<li><p>简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">getJSON.<span class="property">onclick</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> request = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line"> request.<span class="title function_">open</span>(<span class="string">'GET'</span>, <span class="string">'/5.json'</span>);</span><br><span class="line"> request.<span class="property">onreadystatechange</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (request.<span class="property">readyState</span> === <span class="number">4</span> && request.<span class="property">status</span> === <span class="number">200</span>) {</span><br><span class="line"> <span class="keyword">const</span> object = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(request.<span class="property">response</span>);</span><br><span class="line"> myName.<span class="property">textContent</span> = object.<span class="property">name</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(request.<span class="property">response</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> request.<span class="title function_">send</span>();</span><br><span class="line"> <span class="comment">// console.log(request.resopne)</span></span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(request.<span class="property">response</span>);</span><br><span class="line"> <span class="comment">// 或者将 放在 request.onreadystatechange 函数中</span></span><br><span class="line"> }, <span class="number">2000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// request.send()执行完，再执行 request.onreadystatechange 函数</span></span><br><span class="line"><span class="comment">// 执行顺序为 response.open() => respone.send() => request.onreadystatechange</span></span><br></pre></td></tr></table></figure>
<p><a href="https://blog.csdn.net/kis_wuyan/article/details/116231729">onreadystatechange 执行两次</a></p>
<h2 id="回调"><a href="#回调" class="headerlink" title="回调"></a>回调</h2><p>写了却不调用，给别人调用的函数，就是回调。需自行意会</p>
<p>函数例子：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>) {}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f2</span>(<span class="params">fn</span>) {</span><br><span class="line"> <span class="title function_">fn</span>()</span><br><span class="line">}</span><br><span class="line"><span class="title function_">f2</span>(f1)</span><br></pre></td></tr></table></figure>
<p>分析：</p>
<ol>
<li>我调用 f1 没有？</li>
<li>我把 f1 传给 f2 （别人）了没有？</li>
<li>f2 调用 f1 了没有？</li>
</ol>
<p>答：1. 调用了。2.穿了。3.f2 调用了 f1。</p>
<p>那么，f1 是不是我写给 f2 调用的函数？ 是。</p>
<p>所以，f1 是回调。</p>
<hr>
<p>例子2：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params">x</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(x)</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f2</span>(<span class="params">fn</span>){</span><br><span class="line"> <span class="title function_">fn</span>(<span class="string">'hello'</span>)</span><br><span class="line">}</span><br><span class="line"><span class="title function_">f2</span>(f1)</span><br><span class="line"><span class="comment">// hello</span></span><br></pre></td></tr></table></figure>
<p>fn(‘hello’) 中的 fn 就是 f1 。</p>
<p>fn(’hello‘) 中的 ’hello’ 会被赋值给参数 x 。</p>
<p>所以 x 就是 ‘hello’。</p>
<h2 id="异步和回调的关系"><a href="#异步和回调的关系" class="headerlink" title="异步和回调的关系"></a>异步和回调的关系</h2><ul>
<li><p><strong>关联</strong></p>
<p>异步任务需要再得到结果时通知 JS 来拿结果</p>
<p>怎么通知？</p>
<p>可以让 JS 留一个函数地址给浏览器（电话号码）</p>
<p>异步任务完成时浏览器调用该函数即可（拨打电话）</p>
<p>同时把任务作为参数传给该函数（通知）</p>
<p>这个函数是我写给浏览器调用的，所以是回调函数</p>
</li>
<li><p><strong>区别</strong></p>
<p>异步任务需要用到回调函数来通知结果</p>
<p>但回调函数不一定只用在异步任务里</p>
<p>回调可以用到同步任务里</p>
<p><code>array.forEach(n=>console.log(n))</code> 就是同步回调</p>
</li>
</ul>
<h2 id="判断同步异步"><a href="#判断同步异步" class="headerlink" title="判断同步异步"></a>判断同步异步</h2><p>如果一个函数的返回值处于</p>
<ul>
<li>setTimeout</li>
<li>AJAX（即 XMLHttpRequest）</li>
<li>AddEventListener</li>
</ul>
<p>这三个东西内部中，那么这个函数就是异步函数</p>
<p>还有其他 API 是异步的，遇到再说。</p>
<p>举例说明：</p>
<p>摇骰子, 随机打印出1-6 中的一个数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> 摇骰子() {</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> { <span class="comment">// 箭头函数</span></span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">6</span>) + <span class="number">1</span>;</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> <span class="comment">// return undefined</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>分析：</p>
<p><code> 摇骰子（）</code> 里没有写 return，那就是 return undefined</p>
<p>箭头函数里有 return，返回真正结果</p>
<p>所以这是一个异步函数/异步任务。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> n = 摇骰子();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n)</span><br></pre></td></tr></table></figure>
<p>如何拿到异步结果？</p>
<p>用回调，写个函数，然后把函数地址给他</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params">x</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(x);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 然后要求 摇骰子函数 得到结果后 把结果作为参数 传给f1</span></span><br><span class="line"><span class="keyword">function</span> 摇骰子(fn){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">fn</span>(<span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">6</span>) + <span class="number">1</span>)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">摇骰子(f1); <span class="comment">// 结果</span></span><br></pre></td></tr></table></figure>
<p>简化为箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params">x</span>) { </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(x);</span><br><span class="line">}</span><br><span class="line">摇骰子(f1);</span><br><span class="line"><span class="comment">// 改为</span></span><br><span class="line">摇骰子(<span class="function"><span class="params">x</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(x);</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 再简化为</span></span><br><span class="line">摇骰子(<span class="variable language_">console</span>.<span class="property">log</span>);</span><br><span class="line"><span class="comment">// 如果参数个数不一致就不能这样简化，有个相关面试题</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 面试题</span></span><br><span class="line"><span class="keyword">const</span> array = [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].<span class="title function_">map</span>(<span class="built_in">parseInt</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(array);</span><br><span class="line"><span class="comment">// 结果为 [1, NaN, NaN]</span></span><br><span class="line"><span class="comment">// parseInt('1', 0, arr) => 1</span></span><br><span class="line"><span class="comment">// parseInt('2', 1, arr) => NaN</span></span><br><span class="line"><span class="comment">// parseInt('3', 2, arr) => NaN</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> array = [<span class="string">'1'</span>, <span class="string">'2'</span> , <span class="string">'3'</span>].<span class="title function_">map</span>(<span class="function">(<span class="params">item, i , arr</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">parseInt</span>(item)</span><br><span class="line">});</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(array)</span><br><span class="line"><span class="comment">// 正确结果 [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简写 永远使用箭头函数</span></span><br><span class="line"><span class="keyword">const</span> array = [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>) =></span> <span class="built_in">parseInt</span>(item));</span><br></pre></td></tr></table></figure>
<h2 id="异步总结"><a href="#异步总结" class="headerlink" title="异步总结"></a>异步总结</h2><ul>
<li>异步任务不能拿到结果</li>
<li>于是我们传一个回调给异步任务</li>
<li>异步任务完成时调用回调</li>
<li>调用的时候把结果作为参数</li>
</ul>
<h2 id="异步任务两个结果，成功或失败"><a href="#异步任务两个结果，成功或失败" class="headerlink" title="异步任务两个结果，成功或失败"></a>异步任务两个结果，成功或失败</h2><h3 id="两个方法解决"><a href="#两个方法解决" class="headerlink" title="两个方法解决"></a>两个方法解决</h3><p><strong>方法一：回调接受两个参数</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">fs.<span class="title function_">readFile</span>(<span class="string">'./1.txt'</span>, <span class="function">(<span class="params">error, data</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span>(error){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'失败'</span>); <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(data.<span class="title function_">toString</span>()) <span class="comment">// 成功</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p><strong>方法二：两个回调</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title function_">ajax</span>(<span class="string">'get'</span>, <span class="string">'/1.json'</span>, <span class="function"><span class="params">data</span> =></span> {<span class="comment">/*成功回调*/</span>}, <span class="function"><span class="params">error</span> =></span> {<span class="comment">/*失败回调*/</span>})</span><br><span class="line"><span class="title function_">ajax</span>(<span class="string">'get'</span>, <span class="string">'/1.json'</span>,{</span><br><span class="line"> <span class="attr">success</span>: <span class="function">() =></span> {},</span><br><span class="line"> <span class="attr">fail</span>: <span class="function">() =></span> {}</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 接受一个对象，对象有两个 key 表示成功和失败</span></span><br></pre></td></tr></table></figure>
<h3 id="这些方法的不足"><a href="#这些方法的不足" class="headerlink" title="这些方法的不足"></a>这些方法的不足</h3><p>不管方法一还是方法二，都有问题</p>
<ol>
<li>不规范，名称五花八门，有人用 success + error，有人用 success + fail，done + fail</li>
<li>容易出现==回调地狱== ，代码变得看不懂</li>
<li>很难进行错无处理</li>
</ol>
<p><strong>回调地狱举例</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title function_">getUser</span>( <span class="function"><span class="params">user</span> =></span> {</span><br><span class="line"> <span class="title function_">getGroups</span>(user, <span class="function">(<span class="params">groups</span>) =></span> {</span><br><span class="line"> groups.<span class="title function_">forEach</span>( <span class="function">(<span class="params">g</span>) =></span> {</span><br><span class="line"> g.<span class="title function_">filter</span>(<span class="function"><span class="params">x</span> =></span> x.<span class="property">ownerId</span> === user.<span class="property">id</span>)</span><br><span class="line"> .<span class="title function_">forEach</span>(<span class="function"><span class="params">x</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(x))</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 仅示例，这只是四层，二十层呢，代码会很难读</span></span><br></pre></td></tr></table></figure>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-25_22-12-10.png" alt="Snipaste_2021-09-25_22-12-10" width="800px"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline"> 吐槽回调地狱 来源网络</center>
<h3 id="如何解决回调问题，用-Promise"><a href="#如何解决回调问题，用-Promise" class="headerlink" title="如何解决回调问题，用 Promise"></a>如何解决回调问题，用 Promise</h3><p>有什么办法能解决这三个问题：</p>
<ul>
<li>会犯回调的名字或顺序</li>
<li>拒绝回调地狱，让代码可读性更强</li>
<li>很方便地捕获错误</li>
</ul>
<blockquote>
<p>1976年，Daniel P.Friedman 和 David Wis 俩人提出 Promise 思想</p>
<p>后人基于此发明了 Future、Delay、Deferred等</p>
<p>前端结合 Promise 和 JS，制定了 <a href="https://www.ituring.com.cn/article/66566">Promise/A+规范</a></p>
<p>该规范详细描述了 Promise 的原理和使用方法。</p>
</blockquote>
<h2 id="以-AJAX-的封装为例，来解释-Promise"><a href="#以-AJAX-的封装为例，来解释-Promise" class="headerlink" title="以 AJAX 的封装为例，来解释 Promise"></a>以 AJAX 的封装为例，来解释 Promise</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise MDN</a></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 示例</span></span><br><span class="line">ajax = <span class="function">(<span class="params">method, url, options</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> {success, fail} = option; <span class="comment">// 析构赋值</span></span><br><span class="line"> <span class="comment">// const succes = option.success;</span></span><br><span class="line"> <span class="comment">// const fail = option.fail;</span></span><br><span class="line"> <span class="keyword">const</span> request = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line"> request.<span class="title function_">open</span>(method, url);</span><br><span class="line"> request.<span class="property">onreadystatechange</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (request.<span class="property">readyState</span> === <span class="number">4</span>) {</span><br><span class="line"> <span class="comment">// 成功就调用 success，失败 fail</span></span><br><span class="line"> <span class="keyword">if</span> (request.<span class="property">status</span> < <span class="number">400</span>) {</span><br><span class="line"> success.<span class="title function_">call</span>(<span class="literal">null</span>, request.<span class="property">response</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span> (request.<span class="property">status</span> >= <span class="number">400</span>) {</span><br><span class="line"> fail.<span class="title function_">call</span>(<span class="literal">null</span>, request, request.<span class="property">status</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> request.<span class="title function_">rend</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title function_">ajax</span>(<span class="string">'get'</span>, <span class="string">'/xxx'</span>, {</span><br><span class="line"> <span class="title function_">success</span>(<span class="params">response</span>){}, <span class="comment">// function 缩写</span></span><br><span class="line"> <span class="comment">// success: function(response){}</span></span><br><span class="line"> <span class="attr">fail</span>: <span class="function">(<span class="params">request, status</span>) =></span> {}</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>Promise 写法：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 先改一下调用姿势</span></span><br><span class="line"><span class="title function_">ajax</span>(<span class="string">'get'</span>, <span class="string">'/xxx'</span>, {</span><br><span class="line"> <span class="title function_">success</span>(<span class="params">response</span>){},</span><br><span class="line"> <span class="attr">fail</span>: <span class="function">(<span class="params">request, status</span>) =></span> {}</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 上面用到了两个回调，还使用了 success 和 fail</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 改成 Promise 写法</span></span><br><span class="line"><span class="title function_">ajax</span>(<span class="string">'get'</span>, <span class="string">'/xxx'</span>)</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">(<span class="params">response</span>)=></span>{}, <span class="function">(<span class="params">request, status</span>)=></span>{} )</span><br><span class="line"><span class="comment">// 虽然也是回调</span></span><br><span class="line"><span class="comment">// 但是不需要经济 success 和 fail 了</span></span><br><span class="line"><span class="comment">// then 的第一个参数就是 success</span></span><br><span class="line"><span class="comment">// then 的第二个参数就是 fail</span></span><br></pre></td></tr></table></figure>
<p>请问 ajax() 返回了个啥 ？</p>
<p>返回了一个含有 .then() 方法的对象呗。</p>
<p>那么再请问如何得到这个含有 .then() 的对象呢 ？</p>
<p>那就要改造 ajax 的源码了。</p>
<p><code>return new Promise((resolve, reject) => {})</code></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 修改 ajax</span></span><br><span class="line">ajax = <span class="function">(<span class="params">method, url, option</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> {success, fail} = option;</span><br><span class="line"> <span class="keyword">const</span> request = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line"> request.<span class="title function_">open</span>(methon, url);</span><br><span class="line"> request.<span class="property">onreadystatechange</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span>(request.<span class="property">readyState</span> === <span class="number">4</span>) {</span><br><span class="line"> <span class="keyword">if</span>(request.<span class="property">status</span> < <span class="number">400</span>) {</span><br><span class="line"> <span class="comment">// 成功</span></span><br><span class="line"> resolve.<span class="title function_">call</span>(<span class="literal">null</span>, request.<span class="property">response</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(request.<span class="property">status</span> >= <span class="number">400</span>) {</span><br><span class="line"> <span class="comment">// s</span></span><br><span class="line"> reject.<span class="title function_">call</span>(<span class="literal">null</span>, request);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> request.<span class="title function_">send</span>();</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>小结</strong></p>
<p>第一步：</p>
<ul>
<li><code>retrun new Promise((resolve, reject) => {...})</code></li>
<li>任务成功则调用 <code>resolve(result)</code></li>
<li>任务失败则调用 <code>reject(error)</code></li>
<li>resolve 和 reject 会再去调用成功和失败函数</li>
</ul>
<p>第二步：</p>
<ul>
<li>使用 <code>.then(success, fail)</code>传入成功函数和失败函数</li>
</ul>
<hr>
<p>我们自己封装的 ajax 的缺点:</p>
<p>post 无法上传数据。request.send(这里可以上传数据)</p>
<p>不能设置请求头。request.setRequestHeader(key, value)</p>
<p>使用：</p>
<p> <a href="https://www.jquery123.com/jQuery.ajax/">Jquery.ajax</a></p>
<p><a href="http://www.axios-js.com/zh-cn/docs/">axios</a>(推荐)</p>
]]></content>
<tags>
<tag>-js -AJAX</tag>
</tags>
</entry>
<entry>
<title>HTML常用标签</title>
<url>/2021/07/06/52/</url>
<content><![CDATA[<h2 id="1-a"><a href="#1-a" class="headerlink" title="1. a"></a>1. a</h2><ol>
<li>href: <ul>
<li>网址: //google.com</li>
<li>路径: a/b/c.index</li>
<li>伪协议代码: javascript:;. mailto: 邮箱. tel: 手机号</li>
<li>id: href = #xxx</li>
</ul>
</li>
<li>target: 新窗口打开<ul>
<li>_blank: 新标签页打开</li>
<li>_top: 最顶层页面打开</li>
<li>_parent: 上一级页面打开</li>
<li>_self: 自身页面打开，默认为这个属性</li>
</ul>
</li>
<li>download: 下载</li>
<li>rel=noopener: 解决安全问题</li>
</ol>
<h2 id="2-iframe"><a href="#2-iframe" class="headerlink" title="2. iframe"></a>2. iframe</h2><p>内联框架元素, 它能够将另一个HTML页面嵌入到当前页面中。基本不用了</p>
<h2 id="3-table"><a href="#3-table" class="headerlink" title="3. table"></a>3. table</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">table {</span><br><span class="line"> table-layout: auto/fixed;</span><br><span class="line"> border-collapse: collapse;</span><br><span class="line"> border-spacing: 0;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">th</span>></span>english<span class="tag"></<span class="name">th</span>></span><span class="tag"><<span class="name">th</span>></span>翻译<span class="tag"></<span class="name">th</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>hyper<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>超级<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tfoot</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>reference<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span>引用<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tfoot</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="4-img"><a href="#4-img" class="headerlink" title="4.img"></a>4.img</h2><p>发出get请求，展示图片。永远不能让图片变形！！！</p>
<ol>
<li>alt: 图片未加载，显示alt值</li>
<li>src: 图片源<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">id</span>=<span class="string">"xx"</span> <span class="attr">src</span>=<span class="string">"youxiu.jpg"</span> <span class="attr">alt</span>=<span class="string">"pupian"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 两个事件</span></span></span><br><span class="line"><span class="language-javascript"> xx.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"图片加载成功"</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> xx.<span class="property">error</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"图片记载失败"</span>);</span></span><br><span class="line"><span class="language-javascript"> xx.<span class="property">src</span>= <span class="string">"404.jpg"</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="5-form"><a href="#5-form" class="headerlink" title="5. form"></a>5. form</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment"><!-- 属性</span></span><br><span class="line"><span class="comment">autocomplete 自动填充 input需要加上name=“username”</span></span><br><span class="line"><span class="comment">targe=_blank 新打开标签页提交表单</span></span><br><span class="line"><span class="comment">--></span></span><br><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/a"</span> <span class="attr">method</span>=<span class="string">"POST"</span> <span class="attr">autocomplete</span>=<span class="string">"on"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span></span><br><span class="line"> <span class="comment"><!-- input必须有name --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">type</span>=<span class="string">"text"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">type</span>=<span class="string">"radio"</span>></span>男 <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">type</span>=<span class="string">"radio"</span>></span>女</span><br><span class="line"> <span class="tag"><<span class="name">button</span>></span>提交<span class="tag"></<span class="name">button</span>></span> <span class="comment"><!-- 没写type的话默认type="submit" --></span></span><br><span class="line"> <span class="comment"><!-- input type="color/password/radio/checkbox/file/hidden" --></span></span><br><span class="line"> <span class="tag"><<span class="name">textarea</span> <span class="attr">style</span>=<span class="string">"resize: none;"</span>></span>文本区<span class="tag"></<span class="name">textarea</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">""</span>></span>请选择<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Mon"</span>></span>周一<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Tue"</span>></span>周二<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Wed"</span>></span>周二<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="comment"><!-- input事件 onchange/onfocus/onblur --></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure></li>
</ol>
]]></content>
<tags>
<tag>html</tag>
</tags>
</entry>
<entry>
<title>JS函数的执行时机</title>
<url>/2021/09/07/35/</url>
<content><![CDATA[<h2 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h2><p>代码为什么会打印 6 个 6</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>; i < <span class="number">6</span>; i++) {</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<h3 id="分析"><a href="#分析" class="headerlink" title="分析"></a>分析</h3><p>在上面代码中，for 循环是同步代码，setTimeout 是异步代码，JS 按照从上到下的执行顺序执行同步代码，而异步代码被插入到任务队列中。</p>
<p>当执行完同步代码（for 循环），JS 会去执行异步代码（setTimeout）。</p>
<p>在每次 for 循环中，都将异步代码（setTimeout）放入任务队列中，所以任务队列中有 6 个 setTimeout 即有 6 个 <code>console.log(i)</code>。</p>
<p>在每次 for 循环中将 setTimeout 里的代码 <code>console.log(i)</code> 放入任务队列时，i 的值是不一样的，当 JS 引擎开始执行任务队列中代码时，会在当前作用域中找变量 i ，但当前 for 循环的作用域中没有对变量 i 的进行定义，这个时候会在创造该函数的作用域中寻找 i，找到的是 let i，这时的 i 时全局变量，并且值已经确定为 6。所以打印出 6 个 6。</p>
<p>执行流程：</p>
<p><code>for(i=0) ==> for(i=1) ==> for(i=2) ==> for(i=3) ==> for(i=4) ==> for(i=5) ==> for(i=6) ==> console.log(6)x6</code></p>
<h3 id="解决方法一-let"><a href="#解决方法一-let" class="headerlink" title="解决方法一 let"></a>解决方法一 let</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">6</span>; i++ ){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">()=></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>let 的作用域是块作用域，能作用到 for 循环的子块中。</p>
<p>let 的作用于是块作用域，所以 setTimeout 被放到 任务队列的同时，<strong>let 定义的 i 值 也会跟随 setTimeout 进入队列</strong>。所以每次循环后队列里的 setTimeout 里的 i 值是不一样的。而 var 定义的 i 是无法进入的。（浅显易懂）</p>
<p>for 循环头部的 let 不仅将 i 绑定到 for 循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值被重新赋值。setTimeout 里面的函数属于一个新的域，通过 var 定义的变量或全局变量是无法传入到这个函数执行，通过使用 let 来声明块变量能作用于这个块，所以箭头函数就能使用 i 这个变量，所以每次的 i 值不一样。</p>
<h3 id="解决方法二-使用立即执行函数，即闭包"><a href="#解决方法二-使用立即执行函数，即闭包" class="headerlink" title="解决方法二 使用立即执行函数，即闭包"></a>解决方法二 使用立即执行函数，即闭包</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>( i = <span class="number">0</span>; i < <span class="number">6</span>; i++){</span><br><span class="line"> (<span class="keyword">function</span> (<span class="params">j</span>){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(j);</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> })(i);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>因为 setTimeout 是异步执行，所以让它立即执行就可以了。</p>
<p>通过闭包，将 i 的变量驻留在内存中，当输出 j 时，引用的是外部函数的变量值 i，i 的值是根据循环来的，执行 setTimeout 时已经确定了里面的的输出了。</p>
<h3 id="解决方法三-setTimeout-第三个参数"><a href="#解决方法三-setTimeout-第三个参数" class="headerlink" title="解决方法三 setTimeout 第三个参数"></a>解决方法三 setTimeout 第三个参数</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i < <span class="number">6</span>; i++){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">(<span class="params">i</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line"> }, <span class="number">0</span>, i);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 将每次的 i 值传入作用域。</span></span><br></pre></td></tr></table></figure>
<h3 id="解决方法四-try-catch"><a href="#解决方法四-try-catch" class="headerlink" title="解决方法四 try catch"></a>解决方法四 try catch</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>; i < <span class="number">6</span>; i++){</span><br><span class="line"> <span class="keyword">try</span>{</span><br><span class="line"> <span class="keyword">throw</span> i</span><br><span class="line"> }<span class="keyword">catch</span>(i){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 将 i 作为异常抛出，传递给 setTimeout</span></span><br></pre></td></tr></table></figure>
<h2 id="JS执行机制"><a href="#JS执行机制" class="headerlink" title="JS执行机制"></a>JS执行机制</h2><p>首先，JS是单线程环境，代码从上到下依次执行。这种执行方这也被称作是“同步执行”。（同一时间 JS 只能执行一段代码，如果这段代码要执行很长时间，那么之后的代码只能尽情地等待它执行完才能执行）。</p>
<p>但 JS 中引进了异步机制。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。</p>
<p><strong>同步任务</strong>指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；</p>
<p><strong>异步任务</strong>指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有主线程上的任务执行完了，才通知”任务队列”，任务队列中的任务才会进入主线程执行。</p>
<h2 id="执行栈"><a href="#执行栈" class="headerlink" title="执行栈"></a>执行栈</h2><p>当执行某个函数、用户点击一次鼠标，Ajax完成，一个图片加载完成等事件发生时，只要指定过回调函数，这些事件发生时就会进入任务队列中，等待主线程读取,遵循先进先出原则。</p>
<p>执行任务队列中的某个任务，这个被执行的任务就称为执行栈。</p>
<h2 id="主线程"><a href="#主线程" class="headerlink" title="主线程"></a>主线程</h2><p>要明确的一点是，主线程跟执行栈是不同概念，主线程规定现在执行执行栈中的哪个事件。</p>
<p>主线程循环：即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。</p>
<p>当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列(Task Queue)。</p>
<p><strong>当主线程将执行栈中所有的代码执行完之后，主线程将会去查看任务队列是否有任务</strong>。如果有，那么主线程会依次执行那些任务队列中的回调函数。</p>
<h2 id="JS-异步执行的运行机制"><a href="#JS-异步执行的运行机制" class="headerlink" title="JS 异步执行的运行机制"></a>JS 异步执行的运行机制</h2><ol>
<li>所有任务都在主线程上执行，形成一个执行栈。</li>
<li>主线程之外，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。</li>
<li>一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列。那些对应的异步任务，进入执行栈开始执行。</li>
<li>主线程不断重复上面的第三步。</li>
</ol>
]]></content>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>HTML入门笔记1</title>
<url>/2021/07/03/39/</url>
<content><![CDATA[<h1 id="html入门"><a href="#html入门" class="headerlink" title="html入门"></a>html入门</h1><p>HTML全名”超文本标记语言”（HyperText Markup Language）<br>英国物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。</p>
<p>首先写这一套，Emmet语法<code>!</code></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span> 文档类型</span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span> 语言 中文为zh-cn</span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span> 设置字符编码</span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span>始终使用最新内核来渲染页面</span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span> 禁用缩放，兼容手机</span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>标题<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="章节标签"><a href="#章节标签" class="headerlink" title="章节标签"></a>章节标签</h2><h3 id="h1-h6"><a href="#h1-h6" class="headerlink" title="h1~h6"></a>h1~h6</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h1</span>></span>一级标题<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h2</span>></span>二级标题<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line">...</span><br><span class="line"><span class="tag"><<span class="name">h6</span>></span>六级标题<span class="tag"></<span class="name">h6</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="section"><a href="#section" class="headerlink" title="section"></a>section</h3><h3 id="article"><a href="#article" class="headerlink" title="article"></a>article</h3><p>section表示一个有主题的独立部分，通常用在文档里面表示一个章节，比如article可以包含多个section。section总是多个一起使用，一个页面不能只有一个section。<br>每个article，通常包括标题（h1 - h6元素）作为article元素的子元素。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">article</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>文章标题<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span>></span>第一章<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>...<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">section</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span>></span>第二章<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>...<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">section</span>></span></span><br><span class="line"><span class="tag"></<span class="name">article</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="p"><a href="#p" class="headerlink" title="p"></a>p</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>表示一个文本段落<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="header"><a href="#header" class="headerlink" title="header"></a>header</h3><h3 id="main"><a href="#main" class="headerlink" title="main"></a>main</h3><h3 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">header</span>></span>页眉<span class="tag"></<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">article</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>文章标题<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>文章内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">article</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">footer</span>></span>页尾<span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="aside"><a href="#aside" class="headerlink" title="aside"></a>aside</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">网页通常用来放置侧边栏</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span>></span>主体内容<span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">aside</span>></span>侧边栏<span class="tag"></<span class="name">aside</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line">文章用来放置标注或评论</span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>第一段<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">aside</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>本段是文章的重点。<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">aside</span>></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="全局属性"><a href="#全局属性" class="headerlink" title="全局属性"></a>全局属性</h2><p>全局属性是所有元素都可以使用的属性。</p>
<h3 id="id"><a href="#id" class="headerlink" title="id"></a>id</h3><p>表示元素的唯一,必须是全局唯一。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p1"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p2"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p3"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="class"><a href="#class" class="headerlink" title="class"></a>class</h3><p>元素类名,类名可以相同，也可以多个.<br><br>css和js通过类选择器或DOM方法(document.getElementsByClassName)来选择和访问特定的元素</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"para"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"para"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p1 p2 p3"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="contenteditable"><a href="#contenteditable" class="headerlink" title="contenteditable"></a>contenteditable</h3><p>允许用户编辑内容</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">contenteditable</span>=<span class="string">"true"</span>></span></span><br><span class="line">鼠标点击，本句内容可修改。</span><br><span class="line"><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="hidden"><a href="#hidden" class="headerlink" title="hidden"></a>hidden</h3><p>布尔属性，表示当前的元素不在跟页面相关<code><p hidden>本句不会显示在页面上。</p> </code></p>
<h3 id="style"><a href="#style" class="headerlink" title="style"></a>style</h3><p>指定当前元素css样式，如<code><p style="color: red;">hello</p></code></p>
<h3 id="title"><a href="#title" class="headerlink" title="title"></a>title</h3><p>为元素添加说明，鼠标悬停显示属性值</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">title</span>=<span class="string">"版权说明"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>本站内容使用创意共享许可证，可以自由使用。<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="内容标签"><a href="#内容标签" class="headerlink" title="内容标签"></a>内容标签</h2><h3 id="ol-li-ordered-list-list-item"><a href="#ol-li-ordered-list-list-item" class="headerlink" title="ol+li(ordered list + list item)"></a>ol+li(ordered list + list item)</h3><p>有序列表</p>
<h3 id="ul-li-unordered-list-list-item"><a href="#ul-li-unordered-list-list-item" class="headerlink" title="ul+li(unordered list + list item)"></a>ul+li(unordered list + list item)</h3><p>无须列表</p>
<h3 id="dl-dt-dd-description-list-term-data"><a href="#dl-dt-dd-description-list-term-data" class="headerlink" title="dl+dt+dd(description list + term + data)"></a>dl+dt+dd(description list + term + data)</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>山东<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>济南<span class="tag"><<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>青岛<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"></<span class="name">dl</span>></span></span><br></pre></td></tr></table></figure>
<p>自定义列表</p>
<h3 id="pre-preview"><a href="#pre-preview" class="headerlink" title="pre(preview)"></a>pre(preview)</h3><p>预定义格式文本，保留原来格式</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">pre</span>></span></span><br><span class="line"> 床前明月光，疑是地上霜</span><br><span class="line"> 举头望明月，低头思故乡</span><br><span class="line"><span class="tag"></<span class="name">pre</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="br-break"><a href="#br-break" class="headerlink" title="br(break)"></a>br(break)</h3><p>换行<code><br></code></p>
<h3 id="a-anchor"><a href="#a-anchor" class="headerlink" title="a(anchor)"></a>a(anchor)</h3><p>超链接到其他网页或同一页面的某一位置<br><br><code><a href="www.baidu.com" target=_blank>点击跳转到百度页面</a></code></p>
<h3 id="code"><a href="#code" class="headerlink" title="code"></a>code</h3><p>显示代码</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">var x = 1</span><br><span class="line">console.log(1)</span><br></pre></td></tr></table></figure>
<h3 id="em"><a href="#em" class="headerlink" title="em"></a>em</h3><p>强调，表示语气</p>
<h3 id="strong"><a href="#strong" class="headerlink" title="strong"></a>strong</h3><p>强调，内容重要，一般为粗体</p>
<h3 id="q-quote"><a href="#q-quote" class="headerlink" title="q(quote)"></a>q(quote)</h3><p>行内引用</p>
<h3 id="blockquote"><a href="#blockquote" class="headerlink" title="blockquote"></a>blockquote</h3><p>块级引用</p>
]]></content>
<tags>
<tag>html</tag>
</tags>
</entry>
<entry>
<title>JS函数</title>
<url>/2021/09/12/56/</url>
<content><![CDATA[<h2 id="定义函数"><a href="#定义函数" class="headerlink" title="定义函数"></a>定义函数</h2><p>定义一个函数</p>
<ul>
<li><p>具名函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名(形式参数<span class="number">1</span>, 形式参数<span class="number">2</span>){</span><br><span class="line"> <span class="keyword">return</span> 返回值</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li>
<li><p>匿名函数, 具名函数去掉函数名就是匿名函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="keyword">function</span>(<span class="params">x, y</span>){</span><br><span class="line"> <span class="keyword">return</span> x + y</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 也叫函数表达式</span></span><br></pre></td></tr></table></figure></li>
<li><p>箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">f1</span> = x => x * x</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f2</span> = (<span class="params">x, y</span>) => x + y <span class="comment">// 圆括号不能省</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f3</span> = (<span class="params">x, y</span>) => { <span class="keyword">return</span> x - y} <span class="comment">// 花括号不能省</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f4</span> = (<span class="params">x, y</span>) => ({<span class="attr">name</span>: x, <span class="attr">age</span>: y})</span><br><span class="line"><span class="comment">// 直接返回对象 需要加个圆括号</span></span><br></pre></td></tr></table></figure></li>
<li><p>构造函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> f = <span class="keyword">new</span> <span class="title class_">Function</span>(<span class="string">'x'</span>, <span class="string">'y'</span>, <span class="string">'return x + y'</span>)</span><br><span class="line"><span class="comment">// 基本没人用, 但是能让你知道函数是谁构造的</span></span><br><span class="line"><span class="comment">// 所有函数都是 Function 构造的</span></span><br><span class="line"><span class="comment">// 包括 Object、Array、Function</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="函数的要素"><a href="#函数的要素" class="headerlink" title="函数的要素"></a>函数的要素</h2><p>每个函数都拥有这些</p>
<ul>
<li>调用时机</li>
<li>作用域</li>
<li>闭包</li>
<li>形式参数</li>
<li>返回值</li>
<li>调用栈</li>
<li>函数提升</li>
<li>arguments（除了箭头函数）</li>
<li>this（除了箭头函数）</li>
</ul>
<h3 id="调用时机"><a href="#调用时机" class="headerlink" title="调用时机"></a>调用时机</h3><p>时机不同, 结果不同</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>){</span><br><span class="line"> <span class="built_in">setTimeout</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fn</span>()</span><br><span class="line">a = <span class="number">2</span></span><br><span class="line"><span class="comment">// 打印结果为 2</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>; i < <span class="number">6</span>; i++){</span><br><span class="line"> <span class="title function_">setTimeoug</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 打印结果为 6个6</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">6</span>; i++){</span><br><span class="line"> <span class="title function_">setTimeoug</span>( <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 打印结果为 0, 1, 2, 3, 4, 5</span></span><br><span class="line"><span class="comment">// 因为 JS 在 for 和 let 一起用的时候会加东西</span></span><br><span class="line"><span class="comment">// 每次循环会多创建一个 i</span></span><br></pre></td></tr></table></figure>
<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p>每个函数都会创建一个作用域</p>
<p><a href="https://blog.fundebug.com/2019/03/15/understand-javascript-scope/">深入理解 JS 作用域和作用域链</a></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>){ <span class="keyword">let</span> a = <span class="number">1</span>; }</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">// a 不存在</span></span><br><span class="line"><span class="comment">// 问: 是不是因为 fn 没执行导致</span></span><br><span class="line"><span class="comment">// 答: 就算 fn 执行了,也访问不到作用域里面的 a</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例2function f1(){ let a = 1; function f2(){ let a = 2; console.log(a); } console.log(a); a = 3; f2(); console.log(a)}f1()// 打印结果为 /* 1 2 3*/</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例3function f1(){ let a = 1; function f2(){ let a = 2; function f3(){ console.log(a) } a = 22; f3(); } console.log(a); a = 100; f2();}f1();/* 打印机结果为122*/</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p><strong>如果多个作用域有同名变量 a</strong></p>
<p>那么查找 a 的声明式, 就向上取最近的作用域, 简称[就近原则]</p>
<p>查找 a 的过程与函数执行无关</p>
<p>但 a 的值与函数执行有关</p>
</blockquote>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p><a href="https://zhuanlan.zhihu.com/p/22486908">JS中的闭包是什么</a></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>){ <span class="keyword">let</span> a = <span class="number">1</span>; <span class="keyword">function</span> <span class="title function_">f2</span>(<span class="params"></span>){ <span class="comment">// let a = 2; function f3(){ console.log(a) }// /* 如果一个函数用到外部的变量 那么这个函数加这个变量 就叫做 闭包 左边的 a 和 f3 组成了 闭包 */ a = 22; f3(); } console.log(a); a = 100; f2();}f1();</span></span><br></pre></td></tr></table></figure>
<h3 id="形式参数"><a href="#形式参数" class="headerlink" title="形式参数"></a>形式参数</h3><p>形式参数意思式非实际参数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span> (x, y){ <span class="keyword">return</span> x + y;}<span class="comment">// 其中 x 和 y 就是形参,因为并不是时机的参数add(1, 2);// 调用 add 时,1 和 2 是实际参数,会被复制给 x y// 上面代码近似等于下面代码function add(){ var x = arguments[0] var y = arguments[1] return x + y}</span></span><br></pre></td></tr></table></figure>
<h3 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h3><p>每个函数都有返回值</p>
<p>函数执行完了后才会返回</p>
<p>只有函数有返回值</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">hi</span>(<span class="params"></span>) { <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'hi'</span>); }<span class="title function_">hi</span>();<span class="comment">// 没写 return, 所以返回值是 undefinedfunction hi() { return console.log('hi'); }hi()// 返回值为 console.log('hi') 的值,即 undefined</span></span><br></pre></td></tr></table></figure>
<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>什么是调用栈</p>
<blockquote>
<p>JS 引擎在调用一个函数前</p>
<p>需要把函数所在的环境 push 到一个数组里</p>
<p>这个数组叫做调用栈</p>
<p>等函数执行完了, 就会把环境弹 (pop) 出来</p>
<p>然后 return 到之前的环境, 继续执行后续代码</p>
</blockquote>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-04-35.png" alt="Snipaste_2021-09-02_17-04-35"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">调用栈 图示</center>
<p>爆栈, 如果调用栈中压入的帧过多, 程序就会奔溃</p>
<p>递归函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 阶乘function f(n) { return n !== 1 ? n * f(n - 1) : 1}// 理解递归f(4)= 4 * f(3)= 4 * (3 * f(2))= 4 * (3 * (2 * f(1)))= 4 * (3 * (1))= 4 * (6)= 24// 先递进, 后回归</span></span><br></pre></td></tr></table></figure>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-36-31.png" alt="Snipaste_2021-09-02_17-36-31" width='800px'></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">递归函数调用栈 图示</center>
<p>调用栈最长有多少</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 测试调用栈长度function computeMaxCallStackSize() { try { return 1 + computeMaxCallStackSize(); } catch(e) { // 报错说明 stack overflow 了 return 1 }}/*chrom 11409firefox 24740node 12536*/</span></span><br></pre></td></tr></table></figure>
<h3 id="函数提升"><a href="#函数提升" class="headerlink" title="函数提升"></a>函数提升</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>){}<span class="comment">// 不管把具名函数声明在哪里, 它都会跑到第一行</span></span><br></pre></td></tr></table></figure>
<p><a href="https://www.cnblogs.com/liuhe688/p/5891273.html">JS 变量提升和函数提升</a></p>
<p><a href="https://segmentfault.com/a/1190000038344251">前端面试必考-JS 变量提升和函数提升详解</a></p>
<h3 id="arguments-和-this"><a href="#arguments-和-this" class="headerlink" title="arguments 和 this"></a>arguments 和 this</h3><p>每个函数都有 arguments 和 this ，除了箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>){ <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>); <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)}<span class="title function_">fn</span>()<span class="comment">// arguments 是包含所有参数的 伪数组// 如果不给任何条件 this 默认指向 window</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>){ <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)}<span class="title function_">fn</span>()fn.<span class="title function_">call</span>(<span class="number">1</span>) <span class="comment">// 打印出的 数字 1 被自动转化成对象 1function fn(){ 'use strict' console.log(this)}fn.call(1) // 打印出 数字 1function fn(){ console.log(this); console.log(arguments)}// 传入的第一个参数是 this, 其余的是 argumentsfn.call(1, 2, 4)/*打印结果Number (1)Arguments{0: 2, 1: 4 ...}*/</span></span><br></pre></td></tr></table></figure>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_21-14-03.png" alt="Snipaste_2021-09-02_21-14-03" width="600px"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">arguments 和 this</center>
<blockquote>
<p>this 是隐藏参数</p>
<p>arguments 是普通参数</p>
<p>this 是参数(个人结论)</p>
</blockquote>
<h4 id="假如没有-this"><a href="#假如没有-this" class="headerlink" title="假如没有 this"></a>假如没有 this</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> person = { <span class="attr">name</span>: <span class="string">'frank'</span>, <span class="title function_">sayHi</span>(<span class="params"></span>){ <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'hello, i am '</span> + person.<span class="property">name</span>); }}person.<span class="title function_">sayHi</span>()<span class="comment">/* 分析可以用直接保存了对象地址的 变量 获取 'name'这种办法简称为 引用*/</span></span><br></pre></td></tr></table></figure>
<h4 id="问题一"><a href="#问题一" class="headerlink" title="问题一"></a>问题一</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> sayHi = <span class="keyword">function</span>(<span class="params"></span>){ <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'hello, i am '</span> + <span class="comment">/* person*/</span>.<span class="property">name</span>)}<span class="keyword">let</span> person = { <span class="attr">name</span>: <span class="string">'frank'</span>, <span class="string">'sayHi'</span>: sayHi.}<span class="comment">/*分析person 如果改名，sayHi 函数就挂了sayHi 函数甚至有可能在另一个文件里所以我们不希望 sayHi 函数里出现 person 引用*/</span></span><br></pre></td></tr></table></figure>
<h4 id="问题二"><a href="#问题二" class="headerlink" title="问题二"></a>问题二</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Perosn</span> { <span class="title function_">constructot</span>(<span class="params">name</span>){ <span class="variable language_">this</span>.<span class="property">name</span> = name <span class="comment">// 这里的 this 是 new 强制指定的 } sayHi(){ console.log(/*????*/) }}/*分析这里只有类，还没创建对象，故不可能获取对象的引用那么如何拿到对象的 name ？*//*需要一种办法拿到对象这样才能获取对象的 name 属性*/</span></span><br></pre></td></tr></table></figure>
<h4 id="一种土方法，用参数"><a href="#一种土方法，用参数" class="headerlink" title="一种土方法，用参数"></a>一种土方法，用参数</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 对象let person = { name: 'frank', sayHi(p) { console.log('hello, i am ' + p.name) }}person.sayHi(person)// 类class Person { constructor(name){ this.name = name } sayHi(p) { console.log('hello, i am ' + p.name) }}let person = new Person('frank')person.sayHi(person)</span></span><br></pre></td></tr></table></figure>
<h4 id="JS-在每个函数里加了-this"><a href="#JS-在每个函数里加了-this" class="headerlink" title="JS 在每个函数里加了 this"></a>JS 在每个函数里加了 this</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 用 this 获取那个对象let person = { name: 'frank', sayHi(/*this*/){ console.log('hello, i am ' + this.name) }}person.sayHi()/*person.sahHi()相当于 person.sayHi(person)然后 person 被传给 this 了 (person 是个地址)这样每个函数都能用 this 获取一个未知对象的引用了*/// person.sayHi() 会隐式地把 person 作为 this 传给 sayHi// 方便 sayHi 获取 person 对应的对象</span></span><br></pre></td></tr></table></figure>
<h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><blockquote>
<p>我们想让函数获取对象的引用</p>
<p>但是并不想通过变量名做到</p>
<p>Python 通过额外的 self 参数做到 </p>
<p>JS 通过额外的 this 做到:</p>
<p>person.sayHi() 会把person 自动传给 sayHi, sayHi 可以通过 this 引用 person</p>
</blockquote>
<p>其他</p>
<ul>
<li>注意 person.sayHi 和 person.sayHi() 的区别</li>
<li>注意 person.sayHi() 的短句 (person.sayHi)()</li>
</ul>
<h4 id="call-指定-this"><a href="#call-指定-this" class="headerlink" title="call 指定 this"></a>call 指定 this</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 哪个对let person = { name: 'frank', sayHi(/*this*/){ console.log('hello, i am ' + this.name) }}person.sayHi()Person.sayHi(person)// 省略形式的反而是对的// 两种调用方式person.sayHi()// 会自动把 person 传到函数里, 作为 thisperson.sayHi.call(person)person.sayHi.call({name: 'evan'})// 需要手 动把 person 传到函数里,作为 this// 推荐使用</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例1function add(x, y) { return x + y}add.call(undefined, 1, 2) // 3/*为什么要多写一个 undefined因为第一个参数要作为 this但是代码里没有用 this所以只能用 undefined 占位其实用 null 也可以*/</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例2Array.prototype.forEach2 = function(fn){ for(let i = 0; i < this.length; i++){ fn(this[i], i, this) }}let arr1 = [2, 4, 5]// 两种调用方式arr1.forEach2.call(arr1, (item) = > console.log(item))arr1.forEach2((item) = > console.log(item))/* this 是什么由于大家使用 forEach2 的时候总是会用 arr.forEach2所以 arr1 就被自动传给 foreEach2 了*//* this 一定是数组吗不一定, 比如Array.prototype.forEach2.call({0: 'a', 1: 'b',length: 2})*/</span></span><br></pre></td></tr></table></figure>
<p><strong>this 的两种使用方法</strong></p>
<ul>
<li><p>隐式传递</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title function_">fn</span>(<span class="number">1</span>, <span class="number">2</span>) <span class="comment">// 等价于 fn.call(undefined, 1, 2)obj.child.fn(1) // 等价于 obj.child.fn.call(obj.child, 1)</span></span><br></pre></td></tr></table></figure></li>
<li><p>显示传递</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="number">1</span>, <span class="number">2</span>)fn.<span class="title function_">apply</span>(<span class="literal">undefined</span>, [<span class="number">1</span>, <span class="number">2</span>]) <span class="comment">// 数组</span></span><br></pre></td></tr></table></figure></li>
</ul>
<p>**绑定 this **</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用 .bind 可以让 this 不被改变function f1(p1, p2){ console.log(this, p1, p2)}let f2 = f1.bind({name: 'frank'})// 那么 f2 就是 f1 绑定 this 之后的新函数f2() // 等价于 f1.call({name: 'frank'})</span></span><br></pre></td></tr></table></figure>
<p><a href="https://segmentfault.com/a/1190000004580525">快速理解 JS 中 this 的用法与陷阱</a></p>
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><p><strong>没有 arguments 和 this</strong></p>
<p>里面的 this 就是外面的 this</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// windowlet fn = () => console.log(this)fn() // window// 就算加了 call 也没用fn.call({name: 'frank'}) // window</span></span><br></pre></td></tr></table></figure>
<h2 id="立即执行函数"><a href="#立即执行函数" class="headerlink" title="立即执行函数"></a>立即执行函数</h2><center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-03_23-05-46.png" alt="Snipaste_2021-09-03_23-05-46" width="800px"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">立即执行函数</center>
<p>推荐 <a href="https://segmentfault.com/a/1190000003902899">JS 中的立即执行函数</a></p>
]]></content>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>JS基本语法</title>
<url>/2021/08/24/11/</url>
<content><![CDATA[<h4 id="表达式与语句"><a href="#表达式与语句" class="headerlink" title="表达式与语句"></a>表达式与语句</h4><p>表达式（expression），指一个为了得到返回值的计算式。</p>
<blockquote>
<p>1 + 2 表达式的<strong>值</strong>为3</p>
<p>add(1 + 2) 表达式的值为函数的返回值</p>
<p>console.log 表达式的值为函数本身</p>
<p>console.log(3) 表达式的值为<strong>undefined</strong></p>
</blockquote>
<p>语句（statement），是为了完成某种任务而进行的操作，例如赋值语句<code>var a = 1 + 3;</code></p>
<blockquote>
<p>var a = 1 是一个语句</p>
<p>var a = 1 + 3 </p>
<p>var b = ‘abc’</p>
</blockquote>
<p>二者区别</p>
<blockquote>
<p>表达式一般都有值，语句可能有也可能没有</p>
<p>语句一般不会改变环境（声明、赋值）</p>
<p>以上并不绝对</p>
<p>语句主要为了进行某种操作，一般情况下不需要返回值；表达式则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。</p>
<p>表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。</p>
</blockquote>
<hr>
<h4 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h4><p>指的是用来识别各种值的合法名称，最常见的标识符就是变量名，以及函数名。</p>
<p>JavaScript 语言的标识符对大小写敏感，所以<code>a</code>和<code>A</code>是两个不同的标识符。</p>
<p>命名规则：</p>
<ul>
<li>第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（<code>$</code>）和下划线（<code>_</code>）。</li>
<li>第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字<code>0-9</code>。</li>
</ul>
<blockquote>
<p>JavaScript 有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。</p>
</blockquote>
<hr>
<h4 id="if-else"><a href="#if-else" class="headerlink" title="if else"></a>if else</h4><p><code>if</code>结构先判断一个表达式的布尔值（true or false），然后根据布尔值的真伪，执行不同的语句。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (表达式) {</span><br><span class="line"> <span class="comment">// 语句</span></span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span> (表达式){</span><br><span class="line"> <span class="comment">// 语句</span></span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span> (表达式){</span><br><span class="line"> <span class="comment">// 语句</span></span><br><span class="line">}<span class="keyword">else</span> {</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h4><p>多个 <code>if ...else</code> 连在一起使用的时候，可以转为是使用 <code>switch</code> 结构。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">switch</span> (fruit) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"banana"</span>:</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"apple"</span>:</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="attr">default</span>:<span class="string">"nothing"</span></span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// switch 语句部分和 case 语句部分，都可以使用表达式。</span></span><br></pre></td></tr></table></figure>
<hr>
<h4 id="三元运算符"><a href="#三元运算符" class="headerlink" title="三元运算符"></a>三元运算符</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(条件) ？ 表达式<span class="number">1</span> : 表达式<span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> even = (n % <span class="number">2</span> === <span class="number">0</span>) ? <span class="literal">true</span> : <span class="literal">false</span>;</span><br><span class="line"><span class="comment">// 如果n可以被2整除，则even等于true，否则等于false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">'数字'</span> + n + <span class="string">'是'</span> + (n % <span class="number">2</span> === <span class="number">0</span> ? <span class="string">'偶数'</span> : <span class="string">'奇数'</span>);</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h4><p>逻辑与运算（&&）是 AND 布尔操作。只有两个操作数都为 true 时，才返回 true，否则返回 false。具体描述如表所示。</p>
<table>
<thead>
<tr>
<th>第一个操作数</th>
<th>第二个操作数</th>
<th>运算结果</th>
</tr>
</thead>
<tbody><tr>
<td>true</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>true</td>
<td>false</td>
<td>false</td>
</tr>
<tr>
<td>false</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>false</td>
<td>false</td>
<td>false</td>
</tr>
</tbody></table>
<p> 逻辑与是一种短路逻辑，如果左侧表达式为 false，则直接短路返回结果，不再运算右侧表达式。运算逻辑如下：</p>
<ul>
<li>第 1 步：计算第一个操作数（左侧表达式）的值。</li>
<li>第 2 步：检测第一个操作数的值。如果左侧表达式的值可转换为 false（如 null、undefined、NaN、0、””、false），那么就会结束运算，<strong>直接返回第一个操作数的值</strong>。</li>
<li>第 3 步：如果第一个操作数可以转换为 true，则计算第二个操作数（右侧表达式）的值。</li>
<li>第 4 步：返回第二个操作数的值。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> ({} && <span class="literal">true</span>)); <span class="comment">//返回第二个操作数的值 true的类型：布尔型</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> (<span class="literal">true</span> && {})); <span class="comment">//返回第二个操作数的值 {}的类型：对象</span></span><br><span class="line"><span class="variable language_">console</span> && <span class="variable language_">console</span>.<span class="property">log</span> && <span class="variable language_">console</span>.<span class="title function_">log</span>(hi) <span class="comment">// 返回 hi</span></span><br><span class="line">fn && <span class="title function_">fn</span>() <span class="comment">// 常见写法 如果fn存在调用fn()</span></span><br></pre></td></tr></table></figure>
<hr>
**辑或运**算`||`是布尔 OR 操作。如果两个操作数都为 true，或者其中一个为 true，就返回 true，否则就返回 false。
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">a = a || <span class="number">100</span></span><br><span class="line"><span class="comment">// 等价于</span></span><br><span class="line"><span class="keyword">if</span> (a) {</span><br><span class="line"> a = a</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> a = <span class="number">100</span> <span class="comment">// 保底值</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="while"><a href="#while" class="headerlink" title="while"></a>while</h4><p><code>While</code> 语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">while</span> (条件) {</span><br><span class="line"> 语句;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例 死循环</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">0.1</span>;</span><br><span class="line"><span class="keyword">while</span> (a !== <span class="number">1</span>) {</span><br><span class="line"> cconsole.<span class="title function_">log</span>(a);</span><br><span class="line"> a = a + <span class="number">0.1</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 因为浮点数不精确</span></span><br></pre></td></tr></table></figure>
<hr>
<h4 id="for"><a href="#for" class="headerlink" title="for"></a>for</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> (初始化表达式; 条件; 递增表达式) {</span><br><span class="line"> 语句</span><br><span class="line">}</span><br><span class="line">先执行 初始化表达式</span><br><span class="line">然后判断 条件</span><br><span class="line">如果为 真，执行循环体，然后执行 递增表达式</span><br><span class="line">如果为 假，直接退出循环。</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i<<span class="number">5</span>; i++) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">()=></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i + <span class="string">'随机数：'</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>());</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line">}<span class="comment">// 输出5个5</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><a href="https://www.cnblogs.com/wl0804/p/11987833.html">参考</a></p>
<hr>
<h4 id="for-in"><a href="#for-in" class="headerlink" title="for in"></a>for in</h4><p>for/in 语句是 for 语句的一种特殊形式。<a href="http://c.biancheng.net/view/5527.html">参考</a></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> ( [<span class="keyword">var</span>] variable <span class="keyword">in</span> <object | array){</span><br><span class="line"> statement</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* variable 表示一个变量，可以在其前面附加 var 语句，用来直接声明变量名。in 后面是一个对象或数组类型的表达式。在遍历对象或数组过程中，把或取的每一个值赋值给 variable。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">然后执行 statement 语句，其中可以访问 variable 来读取每个对象属性或数组元素的值。执行完毕，返回继续枚举下一个元素，以此类推知道所有元素都被枚举为止。</span></span><br><span class="line"><span class="comment">对于数组来说，值是数组元素的下标；对于对象来说，值是对象的属性名或方法名。*/</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用 for/in 语句遍历数组，并枚举每个元素及其值。</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="literal">true</span>,<span class="string">"0"</span>,[<span class="literal">false</span>],{}]; </span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> n <span class="keyword">in</span> a) { </span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">"a["</span>+n+<span class="string">"] = "</span> + a[n] + <span class="string">"<br>"</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="break-和-continue"><a href="#break-和-continue" class="headerlink" title="break 和 continue"></a>break 和 continue</h4><p>break 语句能够结束当前 for、for/in、while、do/while 或者 switch语句的执行。</p>
<p>continue 语句用在循环结构内，用于跳过本次循环，继续执行下一次循环。</p>
<hr>
<h4 id="label"><a href="#label" class="headerlink" title="label"></a>label</h4><p>标签</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="attr">foo</span>: {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line"> <span class="keyword">break</span> foo;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'本行不会输出'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// m 一个标签，内容为1</span></span><br><span class="line">{<span class="attr">foo</span>:<span class="number">1</span>}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>参考自<a href="https://wangdoc.com/javascript/basic/grammar.html#%E8%AF%AD%E5%8F%A5">网道 JavaScript教程</a></p>
]]></content>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>JS对象分类</title>
<url>/2021/09/17/37/</url>
<content><![CDATA[<h2 id="一个小程序，输出各种形状的面积和周长"><a href="#一个小程序，输出各种形状的面积和周长" class="headerlink" title="一个小程序，输出各种形状的面积和周长"></a>一个小程序，输出各种形状的面积和周长</h2><h3 id="一"><a href="#一" class="headerlink" title="一"></a>一</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 正方形 边长、面积、周长</span></span><br><span class="line"><span class="keyword">let</span> square = {</span><br><span class="line"> <span class="attr">width</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">wdith</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="二，生成12个正方形"><a href="#二，生成12个正方形" class="headerlink" title="二，生成12个正方形"></a>二，生成12个正方形</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = {</span><br><span class="line"> <span class="attr">width</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="三，width-是-5-和-6相间"><a href="#三，width-是-5-和-6相间" class="headerlink" title="三，width 是 5 和 6相间"></a>三，width 是 5 和 6相间</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">let</span> widthList = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = {</span><br><span class="line"> <span class="attr">width</span>: widthList[i],</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">widht</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="三，垃圾代码，浪费太多内存，画内存图"><a href="#三，垃圾代码，浪费太多内存，画内存图" class="headerlink" title="三，垃圾代码，浪费太多内存，画内存图"></a>三，垃圾代码，浪费太多内存，画内存图</h3><center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/squareMemory.png" alt="squareMemory" "></center>
<h3 id="四，借助原型，将12个对象的共有属性放到原型里"><a href="#四，借助原型，将12个对象的共有属性放到原型里" class="headerlink" title="四，借助原型，将12个对象的共有属性放到原型里"></a>四，借助原型，将12个对象的共有属性放到原型里</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">let</span> widthList = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"><span class="keyword">let</span> squarePrototype = {</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = <span class="title class_">Object</span>.<span class="title function_">create</span>(squarePrototype);</span><br><span class="line"> squareList[i].<span class="property">width</span> = widthList[i];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 还是垃圾代码，创建 square 的代码太分散了</span></span><br></pre></td></tr></table></figure>
<h3 id="五，把代码抽离到一个函数里，然后调用函数"><a href="#五，把代码抽离到一个函数里，然后调用函数" class="headerlink" title="五，把代码抽离到一个函数里，然后调用函数"></a>五，把代码抽离到一个函数里，然后调用函数</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">let</span> widthList = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createSquare</span>(<span class="params">width</span>){ <span class="comment">// 此函数为叫做构造函数</span></span><br><span class="line"> <span class="keyword">let</span> obj = <span class="title class_">Object</span>.<span class="title function_">create</span>(squarePrototype);</span><br><span class="line"> <span class="comment">// 以 squarePrototype 为原型创建空对象</span></span><br><span class="line"> obj.<span class="property">width</span> = width;</span><br><span class="line"> <span class="keyword">return</span> obj;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> squarePrototype = {</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = <span class="title function_">createSquare</span>(widthList[i]);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="六，函数和原型的结合"><a href="#六，函数和原型的结合" class="headerlink" title="六，函数和原型的结合"></a>六，函数和原型的结合</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 这段代码 几乎完美</span></span><br><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">let</span> widthList = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createSquare</span>(<span class="params">width</span>){</span><br><span class="line"> <span class="keyword">let</span> obj = <span class="title class_">Object</span>.<span class="title function_">create</span>(createSquare.<span class="property">squarePrototype</span>);</span><br><span class="line"> obj.<span class="property">width</span> = width;</span><br><span class="line"> <span class="keyword">return</span> obj</span><br><span class="line">}</span><br><span class="line">createSquare.<span class="property">squarePrototype</span> = { <span class="comment">//把原型放到函数上</span></span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>; </span><br><span class="line"> },</span><br><span class="line"> <span class="attr">constructor</span>: createSquare <span class="comment">// 互相引用方便通过原型找到构造函数</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = <span class="title function_">createSquare</span>(widthList[i]);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(squareList[i].<span class="property">constructor</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="七，函数和原型（重写）"><a href="#七，函数和原型（重写）" class="headerlink" title="七，函数和原型（重写）"></a>七，函数和原型（重写）</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> squareList = []</span><br><span class="line"><span class="keyword">let</span> widthList = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Square</span>(<span class="params">width</span>){ <span class="comment">// 构造函数</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Square</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getArea</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Square</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getLength</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i><span class="number">12</span>; i++){</span><br><span class="line"> squareList[i] = <span class="keyword">new</span> <span class="title class_">Square</span>(widthList[i]);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(squareList[i].<span class="property">constructor</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 完美</span></span><br></pre></td></tr></table></figure>
<p>代码六七对比</p>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-08-31_12-16-01.png" alt="Snipaste_2021-08-31_12-16-01"></center>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
<li><strong>new X()</strong><ul>
<li>自动创建空对象</li>
<li>自动为空对象关联原型，原型地址指定为 X.prototype</li>
<li>自动将空对象作为 this 关键字运行构造函数</li>
<li>自动 return this</li>
</ul>
</li>
<li><strong>构造函数 X</strong><ul>
<li>X 函数本身负责给对象本身添加属性</li>
<li>X.prototype 对想负责保存对象那个的公用属性</li>
</ul>
</li>
</ul>
<p>题外话 代码规范：</p>
<ul>
<li><p>大小写</p>
<ul>
<li> 所有构造函数（专门用于创建对象的函数）首字母大写</li>
<li> 所有被构造出来的对象，首字母小写</li>
</ul>
</li>
<li><p>词性</p>
<ul>
<li>new 后面的函数，使用名词形式</li>
<li>如 new Person()、new Object()</li>
<li>其他函数，一般使用动词开头</li>
<li>如 createSquare(5)、createElement(‘div’)</li>
<li>…</li>
</ul>
</li>
</ul>
<p>原型公式：**<font color='yellow'>对象._<em>proto</em>_ === 其构造函数.protorype</font>**</p>
<h3 id="Square-最终版（存疑）"><a href="#Square-最终版（存疑）" class="headerlink" title="Square 最终版（存疑）"></a>Square 最终版（存疑）</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Square</span>(<span class="params">width</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title class_">Square</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getArea</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Square</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getLenth</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> square = <span class="keyword">new</span> <span class="title class_">Square</span>(<span class="number">5</span>);</span><br><span class="line">square.<span class="property">width</span>;</span><br><span class="line">square.<span class="title function_">getArea</span>();</span><br><span class="line">square.<span class="title function_">getLength</span>();</span><br></pre></td></tr></table></figure>
<h3 id="练习"><a href="#练习" class="headerlink" title="练习"></a>练习</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 圆形</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Circle</span>(<span class="params">radius</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">radius</span> = radius;</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Circle</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getArea</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">radius</span> * <span class="number">2</span> * <span class="title class_">Math</span>.<span class="property">PI</span>;</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Circle</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getLength</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="variable language_">this</span>.<span class="property">radius</span>, <span class="number">2</span>) * <span class="title class_">Math</span>.<span class="property">PI</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> c1 = <span class="keyword">new</span> <span class="title class_">Circle</span>(<span class="number">10</span>);</span><br><span class="line">c1.<span class="title function_">getArea</span>();</span><br><span class="line">c1.<span class="title function_">getLength</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 长方形</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Rect</span>(<span class="params">width, height</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">height</span> = height</span><br><span class="line">}</span><br><span class="line"><span class="title class_">Rect</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getArea</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">height</span></span><br><span class="line">}</span><br><span class="line"><span class="title class_">Rect</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getLength</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> (<span class="variable language_">this</span>.<span class="property">width</span> + <span class="variable language_">this</span>.<span class="property">height</span>) * <span class="number">2</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> r1 = <span class="keyword">new</span> <span class="title class_">Rect</span>(<span class="number">2</span>, <span class="number">3</span>)</span><br><span class="line">r1.<span class="title function_">getArea</span>()</span><br><span class="line">r1.<span class="title function_">getLength</span>()</span><br></pre></td></tr></table></figure>
<h2 id="对象分类"><a href="#对象分类" class="headerlink" title="对象分类"></a>对象分类</h2><h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><ul>
<li>理由一<ul>
<li>有很多对象拥有一样的属性和行为</li>
<li>需要把他们分为同一类</li>
<li>如 square 和 square1</li>
<li>这样创建类似对象的时候就很方便</li>
</ul>
</li>
<li>理由二<ul>
<li>但是还有很多对象拥有其他的属性和行为</li>
<li>所以就需要不同的分类</li>
<li>比如 Square / Circle / Rect 就是不同的分类</li>
<li>Array / Function 也是不同的分类</li>
<li>而 Object 创建出来的对象，是最没有特点的对象</li>
</ul>
</li>
</ul>
<p><strong>类型和类</strong></p>
<p>类型</p>
<blockquote>
<p>类型 JS 数据的分类，有七种</p>
<p>四基两空一对象，String，number，bool，symbol，null，undefined，Object</p>
</blockquote>
<p>类</p>
<blockquote>
<p>类是针对对象的分类, 有无数种</p>
<p>常见的有 Array、Function、Date、RegExp 等</p>
</blockquote>
<h3 id="数组对象"><a href="#数组对象" class="headerlink" title="数组对象"></a>数组对象</h3><p>定义一个数组</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>) <span class="comment">//元素为 1，2，3</span></span><br><span class="line"><span class="keyword">let</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">3</span>) <span class="comment">//长度为3</span></span><br></pre></td></tr></table></figure>
<p>数组对象自身的属性</p>
<ul>
<li><p>‘0’ / ‘1’ / ‘2’ / ‘length’</p>
</li>
<li><p>注意，属性名没有数字，只有字符串</p>
</li>
</ul>
<p>数组对象的共用属性</p>
<p>‘push’ / ‘pop’ / ‘shift’ / ‘unshift’ / ‘join’ 等</p>
<h3 id="函数对象"><a href="#函数对象" class="headerlink" title="函数对象"></a>函数对象</h3><p>定义一个函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">x, y</span>){<span class="keyword">return</span> x + y;}</span><br><span class="line"><span class="keyword">let</span> fn2 = <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">x, y</span>) {<span class="keyword">return</span> x + y}</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">fn</span> = (<span class="params">x, y</span>) => x+y</span><br><span class="line"><span class="keyword">let</span> fn = <span class="keyword">new</span> <span class="title class_">Function</span>(<span class="string">'x'</span>, <span class="string">'y'</span>,<span class="string">'return x+y'</span>)</span><br></pre></td></tr></table></figure>
<p>函数对象自身属性</p>
<p>‘name’ / ‘length’</p>
<p>函数对象共用属性</p>
<p>‘call’ / ‘apply’ / ‘bind’ 等</p>
<h3 id="JS-终极一问"><a href="#JS-终极一问" class="headerlink" title="JS 终极一问"></a>JS 终极一问</h3><p>window 是谁构造的</p>
<blockquote>
<p>Window</p>
<p>可以通过 constructor 属性看出构造者</p>
<p>验证：window.constructor</p>
<p>window._<em>proto</em>_ === Windows.prototype</p>
</blockquote>
<p>window.Object 是谁构造的</p>
<blockquote>
<p>window.Funcion</p>
<p>因为所有函数都是 window.Function 构造的</p>
<p>验证：window.Object.constructor === window.Function</p>
</blockquote>
<p>window.Function 是谁构造的</p>
<blockquote>
<p>window.Function</p>
<p>因为所有函数都是 window.Function 构造的</p>
<p>自己构造的自己？不是这样的，这是『上帝』的安排</p>
<p>浏览器构造了 Function，然后指定它的构造者是自己</p>
<p>验证：window.Function.constructor === window.Function</p>
</blockquote>
<h2 id="class"><a href="#class" class="headerlink" title="class"></a>class</h2><p>类是用于创建对象的模板。他们用代码封装数据以处理该数据。 ES6新语法</p>
<p>学习<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes">class</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#ECMAScript_6%E6%96%B0%E6%A0%87%E8%AE%B0">对象初始化</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a></p>
<p><code>constructor</code> 是一种用于创建和初始化 class 创建的对象的特殊方法. </p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Square</span>{</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">width</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>class 引入更多概念</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Square</span>{</span><br><span class="line"> <span class="keyword">static</span> x = <span class="number">1</span>; <span class="comment">// 静态</span></span><br><span class="line"> width = <span class="number">0</span>;</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">width</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">get</span> <span class="title function_">area2</span>(){ <span class="comment">// 只读属性</span></span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">width</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>class 重写</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 重写 Circle</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Circle</span>{</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">radius</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">radius</span> = radius;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="variable language_">this</span>.<span class="property">radius</span>,<span class="number">2</span>) * <span class="title class_">Math</span>.<span class="property">PI</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">radius</span> * <span class="number">2</span> * <span class="title class_">Math</span>.<span class="property">PI</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> c2 = <span class="keyword">new</span> <span class="title class_">Circle</span>(<span class="number">5</span>);</span><br><span class="line">c2.<span class="property">radius</span>;</span><br><span class="line">c2.<span class="title function_">getArea</span>();</span><br><span class="line">c2.<span class="title function_">getLength</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 重写 Rect</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Rect</span>{</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">width, height</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">height</span> = height;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getArea</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">width</span> * <span class="variable language_">this</span>.<span class="property">height</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">getLength</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> (<span class="variable language_">this</span>.<span class="property">width</span> + <span class="variable language_">this</span>.<span class="property">height</span>) * <span class="number">2</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> r2 = <span class="keyword">new</span> <span class="title class_">Rect</span>(<span class="number">3</span>, <span class="number">4</span>);</span><br><span class="line">r2.<span class="property">width</span>;</span><br><span class="line">r2.<span class="property">height</span>;</span><br><span class="line">r2.<span class="title function_">getArea</span>();</span><br><span class="line">r2.<span class="title function_">getLength</span>();</span><br></pre></td></tr></table></figure>
<p><strong>class 中两种函数写法的区别</strong></p>
<p>这两种写法的意思完全不一样：</p>
<p>语法1：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>{</span><br><span class="line"> <span class="title function_">sayHi</span>(<span class="params">name</span>){}</span><br><span class="line"> <span class="comment">// 等价于</span></span><br><span class="line"> <span class="attr">sayHi</span>: <span class="keyword">function</span>(<span class="params">name</span>){} </span><br><span class="line"> <span class="comment">// 注意，一般我们不在这个语法里使用箭头函数</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//等价于</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>){}</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sayHi</span> = <span class="keyword">function</span>(<span class="params">name</span>){}</span><br></pre></td></tr></table></figure>
<p>语法2：注意冒号变成了等于号</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>{</span><br><span class="line"> sayHi = <span class="function">(<span class="params">name</span>)=></span>{} <span class="comment">// 注意，一般我们不在这个语法里使用普通函数，多用箭头函数</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// 等价于</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">sayHi</span> = <span class="function">(<span class="params">name</span>)=></span>{}</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>推荐阅读</p>
<ol>
<li><a href="https://zhuanlan.zhihu.com/p/35279244">方应杭：你可以不会 class，但是一定要学会 prototype</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/23987456">方应杭：JS 的 new 到底是干什么的？</a></li>
<li><a href="https://www.zhihu.com/question/56770432/answer/315342130">方应杭：JS 中 <strong>proto</strong> 和 prototype 存在的意义是什么？</a></li>
<li><a href="http://frankfang.github.io/es-6-tutorials/">饥人谷整理的 ES6 所有新特性</a></li>
</ol>
]]></content>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>JS对象基本用法</title>
<url>/2021/08/25/50/</url>
<content><![CDATA[<h4 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h4><p>对象就是一组”键值对“（key-value）的集合，是一种<strong>无序</strong>的复合数据集合。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> <span class="string">'name'</span>: <span class="string">'frank'</span>,</span><br><span class="line"> <span class="string">'age'</span>: <span class="number">18</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>({</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'frank'</span>, </span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">})</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>({<span class="attr">name</span>: frank, <span class="attr">age</span>: <span class="number">18</span>})</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>键名都是字符串</strong>，不是标识符，可以包含任意字符（必须加上引号）</li>
<li>引号可以省略，省略后键名必须符合标识符的规则</li>
<li>所有键名都会被自动转成字符串</li>
</ul>
<p>特殊键名</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> <span class="number">1</span>: <span class="string">'a'</span>,</span><br><span class="line"> <span class="number">3.2</span>: <span class="string">'b'</span>,</span><br><span class="line"> <span class="number">1e2</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="number">1e-2</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="number">.234</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="number">0xFF</span>: <span class="literal">true</span></span><br><span class="line">};</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obj) <span class="comment">// 列出 obj 所有的 key</span></span><br><span class="line">=> [<span class="string">"1"</span>, <span class="string">"100"</span>, <span class="string">"255"</span>, <span class="string">"3.2"</span>, <span class="string">"0.01"</span>, <span class="string">"0.234"</span>]</span><br></pre></td></tr></table></figure>
<p>用变量做键名 用 <code>[ ]</code></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> p1 = <span class="string">'name'</span>;</span><br><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> <span class="attr">p1</span>: <span class="string">'frank'</span> <span class="comment">// 键名为 'p1'</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> [p1]: <span class="string">'frank'</span> <span class="comment">// 键名为 name</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">// 不加 [] 的键名会自动变成字符串</span></span><br><span class="line"><span class="comment">// 加了 [] 则会当作变量求值</span></span><br><span class="line"><span class="comment">// 值如果不是字符串，则会自动变成字符串</span></span><br><span class="line"><span class="keyword">var</span> obj {</span><br><span class="line"> [<span class="number">1</span>+<span class="number">2</span>+<span class="number">3</span>]: <span class="string">'shi'</span></span><br><span class="line">}</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obj);</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="隐藏属性"><a href="#隐藏属性" class="headerlink" title="隐藏属性"></a>隐藏属性</h4><blockquote>
<ul>
<li>JS中每一个对象都一个隐藏属性 _<em>proto</em>_</li>
<li>这个隐藏属性存储着<strong>共有属性组成的对象</strong>的地址</li>
<li>这个共<strong>有属性组成的对象</strong>叫做原型</li>
<li>也就是说，隐藏属性存储着原型的的地址</li>
</ul>
</blockquote>
<p>示例</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 隐藏属性为 __proto__</span></span><br><span class="line"><span class="keyword">var</span> obj = {}</span><br><span class="line">obj.<span class="title function_">soString</span>() <span class="comment">// 不报错</span></span><br><span class="line">因为 obj 的隐藏属性 对应的对象 上有 <span class="title function_">toString</span>() </span><br></pre></td></tr></table></figure>
<hr>
<h4 id="删除属性"><a href="#删除属性" class="headerlink" title="删除属性"></a>删除属性</h4><p><strong>delete obj.xxx 或 delete obj[‘xxx’]</strong></p>
<blockquote>
<p>可删除 obj 的 xxx 属性</p>
<p>区分 【属性值为 undefined】和【不含属性名】</p>
</blockquote>
<p><strong>不含属性名</strong></p>
<blockquote>
<p>‘xxx’ in obj === false</p>
</blockquote>
<p><strong>含有属性名，但是值为 undefined</strong></p>
<blockquote>
<p>‘xxx’ in obj && obj.xxx === undefined </p>
</blockquote>
<p><strong>注意 obj.xxx === undefined</strong></p>
<blockquote>
<p>不能断定 ‘xxx‘ 是否为 obj 的属性</p>
</blockquote>
<hr>
<h4 id="读取属性"><a href="#读取属性" class="headerlink" title="读取属性"></a>读取属性</h4><p><strong>查看属性</strong></p>
<blockquote>
<p>obj[‘key’] </p>
<p>obj[key]</p>
<p>obj.key</p>
<p><strong>obj.name 等价于 obj[‘name’] 不等价于 obj[name]</strong> 这里的 name 是字符串，不是变量 </p>
</blockquote>
<p><strong>查看自身所有属性</strong></p>
<blockquote>
<p>Object.keys(obj);</p>
</blockquote>
<p><strong>查看自身 + 共有属性</strong></p>
<blockquote>
<p>console.dir(obj)</p>
<p>或者依次用 Object.keys 打印出 obj._<em>proto</em>_</p>
</blockquote>
<p><strong>判断一个属性是自身的还是共有</strong></p>
<blockquote>
<p>obj.hasOwnProperty(‘toString’)</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obj);</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">values</span>(obj);</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">entries</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">dir</span>(obj);</span><br></pre></td></tr></table></figure>
<p><strong>‘name’ in obj 和 obj.hasOwnPrototy(‘name’) 区别</strong></p>
<blockquote>
<p>前者判断 obj 是否含有 name 属性名，但不会区分自身属性和共有属性</p>
<p>后者判断 obj 的属性 name 是自身的属性还是共有属性，返回 false，不是自身属性；发返回 ture，是自身属性。</p>
</blockquote>
<hr>
#### 原型
<p><strong>每个对象都有原型</strong></p>
<blockquote>
<p>原型里存着对象的共有属性</p>
<p>比如 obj 的原型就是一个对象</p>
<p>obj.__proto__存着这个对象的地址</p>
<p>这个对象里有 toString / constructor / valueOf 等属性</p>
</blockquote>
<p><strong>对象的原型也是对象</strong></p>
<blockquote>
<p>所以对象的原型也有原型</p>
<p>obj = {} 的原型即为所有对象的原型</p>
<p>这个原型包含所有对象的共有属性，是<strong>对象的根</strong></p>
<p>这个原型也有原型，是 null。 console.log(_<em>proto</em><em>._<em>proto</em></em>)</p>
</blockquote>
<hr>
<h4 id="修改属性"><a href="#修改属性" class="headerlink" title="修改属性"></a>修改属性</h4><p><strong>直接赋值</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {<span class="attr">name</span>: <span class="string">'frank'</span>} <span class="comment">// name 是字符串</span></span><br><span class="line">obj.<span class="property">name</span> = <span class="string">'frank'</span> <span class="comment">// name 是字符串</span></span><br><span class="line">obj[<span class="string">'name'</span>] = <span class="string">'frank'</span></span><br><span class="line">❌obj[name] = <span class="string">'frank'</span> <span class="comment">// 错，因 name 不确定</span></span><br><span class="line">obj[<span class="string">'na'</span> + <span class="string">'me'</span>] = <span class="string">'frank'</span></span><br><span class="line"><span class="keyword">let</span> key = <span class="string">'name'</span>; obj[<span class="string">'key'</span>] = <span class="string">'frank'</span></span><br><span class="line"><span class="keyword">let</span> key = <span class="string">'name'</span>; ❌ obj.<span class="property">key</span> = <span class="string">'frank'</span> <span class="comment">// 错</span></span><br><span class="line">因为 obj.<span class="property">key</span> 等价于 obj[<span class="string">'key'</span>]</span><br></pre></td></tr></table></figure>
<p><strong>批量赋值</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">assign</span>(obj.{<span class="attr">age</span>: <span class="number">18</span>, <span class="attr">gender</span>: <span class="string">'man'</span>})</span><br></pre></td></tr></table></figure>
<h4 id="修改或增加共有属性"><a href="#修改或增加共有属性" class="headerlink" title="修改或增加共有属性"></a>修改或增加共有属性</h4><p><strong>无法通过自身修改或增加共有属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = {}，obj2 = {} <span class="comment">// 共有toString</span></span><br><span class="line">obj.<span class="property">toString</span> = <span class="string">'xxxx'</span> <span class="comment">// 只会改 obj1 自身的属性</span></span><br><span class="line">obj2.<span class="property">toString</span> 还是在原型上</span><br></pre></td></tr></table></figure>
<p><strong>偏要修改共有属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">obj1.<span class="property">__proto__</span>.<span class="property">toString</span> = <span class="string">'xxx'</span>; <span class="comment">// 不推荐使用__proto__Object.prototype.toString = 'xxx';一般不要修改原型</span></span><br></pre></td></tr></table></figure>
<h4 id="修改隐藏属性"><a href="#修改隐藏属性" class="headerlink" title="修改隐藏属性"></a>修改隐藏属性</h4><p><strong>不推荐使用_<em>proto</em></strong>_</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 代码示例</span></span><br><span class="line"><span class="keyword">let</span> person = {<span class="attr">name</span>: <span class="string">'frank'</span>};</span><br><span class="line"><span class="keyword">let</span> person1 = {<span class="attr">name</span>: <span class="string">'jack'</span>};</span><br><span class="line"><span class="keyword">let</span> common = {<span class="attr">kind</span>: <span class="string">'human'</span>};</span><br><span class="line">obj.<span class="property">__proto__</span> = common;</span><br><span class="line">obj2.<span class="property">__proto__</span> = common;</span><br></pre></td></tr></table></figure>
<p><strong>强烈推荐使用 Object.create</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> persion = <span class="title class_">Object</span>.<span class="title function_">cteate</span>(common); <span class="comment">// 以 common 为原型创建 persion 对象</span></span><br><span class="line">persion.<span class="property">name</span> = <span class="string">'frank'</span>; <span class="comment">// 然后添加属性，或批量添加</span></span><br><span class="line"><span class="keyword">let</span> persion2 = <span class="title class_">Object</span>.<span class="title function_">create</span>(common, { <span class="comment">// </span></span><br><span class="line"> <span class="attr">name</span>: {<span class="attr">value</span>: <span class="string">'jack'</span>}</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>JS数组</title>
<url>/2021/09/05/59/</url>
<content><![CDATA[<h2 id="数组对象"><a href="#数组对象" class="headerlink" title="数组对象"></a>数组对象</h2><p><code>Array</code> 对象是用于构造数组的全局<strong>对象</strong>。</p>
<h3 id="创建数组"><a href="#创建数组" class="headerlink" title="创建数组"></a>创建数组</h3><h4 id="新建"><a href="#新建" class="headerlink" title="新建"></a>新建</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> arr <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>)</span><br><span class="line"><span class="keyword">let</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">3</span>) <span class="comment">// 长度</span></span><br></pre></td></tr></table></figure>
<h4 id="转化"><a href="#转化" class="headerlink" title="转化"></a>转化</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = <span class="string">'1, 2, 3'</span></span><br><span class="line">arr1.<span class="title function_">split</span>(<span class="string">','</span>) <span class="comment">// 将字符串用逗号隔开，转化为数组</span></span><br><span class="line"><span class="keyword">let</span> arr2 = <span class="string">'123'</span></span><br><span class="line">arr2.<span class="title function_">split</span>(<span class="string">''</span>) <span class="comment">// 或用空字符串</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 示例</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="string">'123'</span>)</span><br><span class="line">[<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>]</span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">from</span>({<span class="number">0</span>:<span class="string">'a'</span>,<span class="number">1</span>:<span class="string">'b'</span>,<span class="number">2</span>:<span class="string">'c'</span>,<span class="number">3</span>:<span class="string">'d'</span>,<span class="attr">length</span>:<span class="number">4</span>})</span><br><span class="line">[ <span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>, <span class="string">"d"</span> ]</span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">from</span>({<span class="number">0</span>:<span class="string">'a'</span>,<span class="number">1</span>:<span class="string">'b'</span>,<span class="number">2</span>:<span class="string">'c'</span>,<span class="number">3</span>:<span class="string">'d'</span>,<span class="attr">length</span>:<span class="number">2</span>})</span><br><span class="line">[ <span class="string">"a"</span>, <span class="string">"b"</span>]</span><br></pre></td></tr></table></figure>
<h4 id="伪数组"><a href="#伪数组" class="headerlink" title="伪数组"></a>伪数组</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 伪数组的原型链中没有数组的原型</span></span><br><span class="line">array1 = {<span class="number">0</span>:<span class="string">'a'</span>,<span class="number">1</span>:<span class="string">'b'</span>,<span class="number">2</span>:<span class="string">'c'</span>,<span class="attr">length</span>:<span class="number">3</span>}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> divList = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'div'</span>)</span><br><span class="line"><span class="comment">// 获取的数组是 伪数组</span></span><br><span class="line"><span class="keyword">let</span> divArray = <span class="title class_">Array</span>.<span class="title function_">from</span>(divList)</span><br><span class="line"><span class="comment">// 转化为数组</span></span><br></pre></td></tr></table></figure>
<h4 id="续"><a href="#续" class="headerlink" title="续"></a>续</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 合并两个数组，得到新数组</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>]</span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">let</span> arr3 = arr1.<span class="title function_">concat</span>(arr2)</span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="comment">// 截取一个数组的一部分</span></span><br><span class="line">arr3.<span class="title function_">slice</span>(<span class="number">1</span>) <span class="comment">// 从第二个元素开始</span></span><br><span class="line"><span class="keyword">let</span> arr4 = arr3.<span class="title function_">slice</span>(<span class="number">2</span>)</span><br><span class="line">[<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"></span><br><span class="line">arr5 = arr3.<span class="title function_">alice</span>(<span class="number">0</span>)</span><br><span class="line"><span class="comment">// 相当于复制数组</span></span><br><span class="line"><span class="comment">// 注意 JS 只提供浅拷贝</span></span><br></pre></td></tr></table></figure>
<h3 id="删除数组"><a href="#删除数组" class="headerlink" title="删除数组"></a>删除数组</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">delete</span> arr[<span class="number">0</span>]</span><br><span class="line">arr <span class="comment">// [empty,'b','c']</span></span><br><span class="line"><span class="comment">// 长度没变</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 修改 length</span></span><br><span class="line">arr.<span class="property">length</span> = <span class="number">1</span></span><br><span class="line">arr <span class="comment">//['a']</span></span><br><span class="line"><span class="comment">// 不要随便修改 length</span></span><br></pre></td></tr></table></figure>
<h4 id="删除头部元素"><a href="#删除头部元素" class="headerlink" title="删除头部元素"></a>删除头部元素</h4><p><code>arr.shift()</code> arr 被修改，并返回被删元素</p>
<h4 id="删除尾部元素"><a href="#删除尾部元素" class="headerlink" title="删除尾部元素"></a>删除尾部元素</h4><p><code>arr.pop()</code> arr 被修改，并返回被删元素</p>
<h4 id="删除中间元素"><a href="#删除中间元素" class="headerlink" title="删除中间元素"></a>删除中间元素</h4><p><code>arr.splice(index, 1)</code> 删除 index 的一个元素</p>
<p><code>arr.splice(index, 1, ’x’)</code> 并在删除位置添加 <code>‘x’</code></p>
<p><code>arr.splice(index, 1, ’x’, ’y’)</code> 并在删除位置添加 <code>‘x’, 'y'</code></p>
<h3 id="查看所有元素"><a href="#查看所有元素" class="headerlink" title="查看所有元素"></a>查看所有元素</h3><h4 id="查看所有属性名"><a href="#查看所有属性名" class="headerlink" title="查看所有属性名"></a>查看所有属性名</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line">arr.<span class="property">x</span> = <span class="string">'x'</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(arr)</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">values</span>(arr)</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> arr) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'${keys}: ${arr[key]}'</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="查看数字（字符串）属性名和值"><a href="#查看数字（字符串）属性名和值" class="headerlink" title="查看数字（字符串）属性名和值"></a>查看数字（字符串）属性名和值</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i < arr.<span class="property">length</span>; i++){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`<span class="subst">${i}</span>: <span class="subst">${[i]}</span>`</span>)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item, index</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`<span class="subst">${index}</span>: <span class="subst">${item}</span>`</span>)</span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h4 id="forEach原理"><a href="#forEach原理" class="headerlink" title="forEach原理"></a><strong>forEach原理</strong></h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">forEach</span>(<span class="params">array,fn</span>){</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i < array.<span class="property">length</span>; i++){</span><br><span class="line"> <span class="title function_">fn</span>(array[i], i, array); </span><br><span class="line"> <span class="comment">// 获取数组每一项，把数值传到 fn</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title function_">forEach</span>([<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>], <span class="keyword">function</span>(<span class="params">x, y, z</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(x, y, z);</span><br><span class="line">})</span><br><span class="line"><span class="comment">// forEach 用 for 访问 array 的每一项</span></span><br><span class="line"><span class="comment">// 对每一项调用 fn(array[i], i, array)</span></span><br></pre></td></tr></table></figure>
<h3 id="查看单个属性"><a href="#查看单个属性" class="headerlink" title="查看单个属性"></a>查看单个属性</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">11</span>, <span class="number">22</span>, <span class="number">33</span>]arr[<span class="number">0</span>]</span><br></pre></td></tr></table></figure>
<h4 id="索引越界"><a href="#索引越界" class="headerlink" title="索引越界"></a>索引越界</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">arr[arr.<span class="property">legnth</span>] === undefinedarr[-<span class="number">1</span>] === <span class="literal">undefined</span><span class="comment">// 示例let arr = [1,2,3,4,5,6,7]for(let i = 0; i<= arr.length; i++){ console.log(arr[i].toString());}// 报错: Cannot read property 'toString' of undefined// 意思是你读取了 undefined 的 toString 属性// 不是 toString 的 undefined// x.toString() 其中 x 如果是 undefined 就报这个错</span></span><br></pre></td></tr></table></figure>
<h4 id="查找某个元素是否在数组里-indexOf"><a href="#查找某个元素是否在数组里-indexOf" class="headerlink" title="查找某个元素是否在数组里 indexOf"></a>查找某个元素是否在数组里 indexOf</h4><p><code>arr.indexOf(item)</code> 存在换回索引,否则返回 -1</p>
<h4 id="使用条件查找元素-find"><a href="#使用条件查找元素-find" class="headerlink" title="使用条件查找元素 find"></a>使用条件查找元素 find</h4><p><code>arr.find(item => item % 2 === 0)</code> 找第一个偶数</p>
<h4 id="使用条件查找元素的索引-findIndex"><a href="#使用条件查找元素的索引-findIndex" class="headerlink" title="使用条件查找元素的索引 findIndex"></a>使用条件查找元素的索引 findIndex</h4><p><code>arr.findIndex(item => item % 2 === 0)</code> 找第一个偶数的索引</p>
<h3 id="增加数组中的元素"><a href="#增加数组中的元素" class="headerlink" title="增加数组中的元素"></a>增加数组中的元素</h3><h4 id="在尾部添加元素-push"><a href="#在尾部添加元素-push" class="headerlink" title="在尾部添加元素 push"></a>在尾部添加元素 push</h4><p><code>arr.push(newItem)</code> 修改数组，返回新长度</p>
<p><code>arr.push(item1, item2)</code> 修改数组，返回新长度</p>
<h4 id="在头部添加元素-unshitf"><a href="#在头部添加元素-unshitf" class="headerlink" title="在头部添加元素 unshitf"></a>在头部添加元素 unshitf</h4><p><code>arr.unshift(newItem)</code> 修改数组，返回新长度</p>
<p><code>arr.unshift(item1, item2)</code> 修改数组，返回新长度</p>
<h4 id="在中间添加元素-splice"><a href="#在中间添加元素-splice" class="headerlink" title="在中间添加元素 splice"></a>在中间添加元素 splice</h4><p><code>arr.splice(index, 0, ‘x’)</code> 在 index 出插入 <code>’x’</code></p>
<p><code>arr.splice(index. 0, ‘x’, ‘y’)</code> 插入 <code>‘X’,’y’</code></p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.prototypr.splice() MDN</a></p>
<h3 id="修改数组中的元素"><a href="#修改数组中的元素" class="headerlink" title="修改数组中的元素"></a>修改数组中的元素</h3><h4 id="反转顺序-reverse"><a href="#反转顺序-reverse" class="headerlink" title="反转顺序 reverse"></a>反转顺序 reverse</h4><p><code>arr.reverse()</code> 修改原数组</p>
<h4 id="自定义顺序-sort"><a href="#自定义顺序-sort" class="headerlink" title="自定义顺序 sort"></a>自定义顺序 sort</h4><p><code>arr.sort((a, b)) => a-b)</code></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 示例let arr = [1,4,2,3,5]arr.sort() // [1,2,3,4,5]arr.sort(function(a, b){ console.log('a:'+ a) console.log('b:'+ b) if(a>b){ return 1 }else if(a===b){ return 0 }else{ return -1 }})// 等价于arr.sort((a, b) => a-b) </span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [ {<span class="attr">name</span>: <span class="string">'jack'</span>, <span class="attr">score</span>: <span class="number">99</span>}, {<span class="attr">name</span>: <span class="string">'erik'</span>, <span class="attr">score</span>: <span class="number">96</span>}, {<span class="attr">name</span>: <span class="string">'evan'</span>, <span class="attr">score</span>: <span class="number">100</span>}]arr1.<span class="title function_">sort</span>(<span class="keyword">function</span>(<span class="params">a, b</span>){ <span class="keyword">if</span>(a.<span class="property">score</span> > b.<span class="property">score</span>){<span class="keyword">return</span> <span class="number">1</span>} <span class="keyword">else</span> <span class="keyword">if</span>(a.<span class="property">score</span> === b.<span class="property">score</span>){<span class="keyword">return</span> <span class="number">0</span>} <span class="keyword">else</span>{<span class="keyword">return</span> -<span class="number">1</span>}})<span class="comment">// 等价于arr1.sort((a, b) => a-b)</span></span><br></pre></td></tr></table></figure>
<p>反转字符串</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> s = <span class="string">'abcdefg'</span>;s.<span class="title function_">plit</span>(<span class="string">''</span>).<span class="title function_">reverse</span>().<span class="title function_">join</span>(<span class="string">''</span>)</span><br></pre></td></tr></table></figure>
<h3 id="数组变换"><a href="#数组变换" class="headerlink" title="数组变换"></a>数组变换</h3><center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-01_19-41-33.png" alt="Snipaste_2021-09-01_19-41-33" width="800px"></center>