-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript高级程序设计读书笔记（五）.html
1812 lines (1197 loc) · 66 KB
/
javascript高级程序设计读书笔记（五）.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta name="baidu-site-verification" content="j9xttrBK2Z" />
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<script>
(function(){
if(''){
if (prompt('请输入文章密码') !== ''){
alert('密码错误！');
history.back();
}
}
})();
</script>
<meta name="baidu-site-verification" content="j9xttrBK2Z" />
<script src="/lib/pace/pace.min.js?v=1.0.2"></script>
<link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="google-site-verification" content="true" />
<meta name="baidu-site-verification" content="true" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="fonts.useso.com/css?family=Courier New:300,300italic,400,400italic,700,700italic|Iosevka:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="javascript高级程序设计" />
<link rel="alternate" href="/atom.xml" title="icessun's Blog" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1" />
<meta name="description" content="引用类型 对象是某个特定的引用类型的实例。新对象是使用new操作符后跟一个构造函数来创建的。 1var preson=new Object();">
<meta name="keywords" content="javascript高级程序设计">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript高级程序设计读书笔记（五）">
<meta property="og:url" content="http://icessun.github.io/javascript高级程序设计读书笔记（五）.html">
<meta property="og:site_name" content="icessun's Blog">
<meta property="og:description" content="引用类型 对象是某个特定的引用类型的实例。新对象是使用new操作符后跟一个构造函数来创建的。 1var preson=new Object();">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1811036-7311264906caafc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2017-09-28T02:19:31.229Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="javascript高级程序设计读书笔记（五）">
<meta name="twitter:description" content="引用类型 对象是某个特定的引用类型的实例。新对象是使用new操作符后跟一个构造函数来创建的。 1var preson=new Object();">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/1811036-7311264906caafc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":true,"onmobile":false},
fancybox: true,
motion: true,
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://icessun.github.io/javascript高级程序设计读书笔记（五）.html"/>
<title>javascript高级程序设计读书笔记（五） | icessun's Blog</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106126361-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?56cd166fc070f54594c805acc1cd3883";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">icessun's Blog</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<h1 class="site-subtitle" itemprop="description">儿时梦想：长大成为一名科学家</h1>
</div>
<div class="site-nav-toggle">
<button onclick="showSubtitle()">
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav" id="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
<li class="menu-item menu-item-books">
<a href="/books" rel="section">
<i class="menu-item-icon fa fa-fw fa-map"></i> <br />
读书
</a>
</li>
<li class="menu-item menu-item-search">
<a href="javascript:;" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
搜索
</a>
</li>
</ul>
<div class="site-search">
<div class="popup search-popup local-search-popup">
<div class="local-search-header clearfix">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
<div class="local-search-input-wrapper">
<input autocomplete="off"
placeholder="搜索..." spellcheck="false"
type="text" id="local-search-input">
</div>
</div>
<div id="local-search-result"></div>
</div>
</div>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://icessun.github.io/javascript高级程序设计读书笔记（五）.html">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="icessun">
<meta itemprop="description" content="不忘初心，方得始终">
<meta itemprop="image" content="/uploads/avatar.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="icessun's Blog">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">javascript高级程序设计读书笔记（五）</h2>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-03T10:20:13+08:00">
2017-08-03
</time>
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-calendar-check-o"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="更新于" itemprop="dateModified" datetime="2017-09-28T10:19:31+08:00">
2017-09-28
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/读书笔记/" itemprop="url" rel="index">
<span itemprop="name">读书笔记</span>
</a>
</span>
</span>
<span class="post-meta-divider">|</span>
<span class="page-pv">热度
<span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>℃
</span>
<div class="post-wordcount">
<span class="post-meta-item-icon">
<i class="fa fa-file-word-o"></i>
</span>
<span class="post-meta-item-text">字数统计</span>
<span title="字数统计">
2,616 字
</span>
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
<span class="post-meta-item-text">阅读时长</span>
<span title="阅读时长">
10 分钟
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p> 引用类型</p>
</blockquote>
<p>对象是某个特定的引用类型的实例。新对象是使用<code>new</code>操作符后跟一个构造函数来创建的。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> preson=<span class="keyword">new</span> <span class="built_in">Object</span>();</div></pre></td></tr></table></figure>
<a id="more"></a>
<h3 id="Object类型"><a href="#Object类型" class="headerlink" title="Object类型"></a><code>Object</code>类型</h3><ul>
<li><p>创建对象的方法</p>
<ul>
<li><code>new</code>+构造函数 ：<code>var preson=new Object()</code></li>
<li><p>对象字面量 ：向函数传递大量<code>可选参数</code>的首选方式</p>
<figure class="highlight inform7"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">var <span class="keyword">person</span>={</div><div class="line"> name:'icessun', <=====>var <span class="keyword">person</span>={ };</div><div class="line"> age:18</div><div class="line"> }</div><div class="line"></div><div class="line">访问对象的属性：<span class="keyword">person</span>.属性；<span class="keyword">person</span><span class="comment">[属性]</span>，【】一般是通过变量来访问属性</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h3 id="Array类型"><a href="#Array类型" class="headerlink" title="Array类型"></a><code>Array</code>类型</h3><figure class="highlight haxe"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> colors=<span class="keyword">new</span> <span class="type">Array</span>(); 里面可以写入一个数值，表示数组的长度<span class="keyword">new</span> <span class="type">Array</span>(<span class="number">20</span>)；也可以直接在里面写入数组的值<span class="keyword">new</span> <span class="type">Array</span>(<span class="string">'red'</span>,<span class="string">'blue'</span>,<span class="string">'green'</span>)</div><div class="line"></div><div class="line">字面量方式：</div><div class="line"><span class="keyword">var</span> colors=[<span class="string">'red'</span>,<span class="string">'blue'</span>,<span class="string">'green'</span>] <span class="comment">//不会调用Array的构造函数</span></div></pre></td></tr></table></figure>
<ul>
<li><p>检测数组</p>
<ul>
<li><code>instanceof</code><ul>
<li>是在单一的全局执行环境中检测数组，对于从一个执行环境中传递到另一个执行环境中的数组是检测不出来的</li>
</ul>
</li>
<li><code>Array.isArray()</code><ul>
<li>这个方法确定某个值到底是不是数组，而不管是在哪个全局执行环境创建的</li>
</ul>
</li>
</ul>
</li>
<li><p>转换方法</p>
<blockquote>
<p>所有的对象都具有<code>toLocaleString(),toString(),valueOf()</code></p>
</blockquote>
<ul>
<li><code>toString()</code>：默认是用<code>逗号</code>隔开返回数组的每个值的字符串</li>
<li><code>join([分隔符])</code>：使用不同的分隔符来返回数组每个值的字符串</li>
</ul>
</li>
<li><p>数组中的栈方法</p>
<blockquote>
<p>后进先出(LIFO)的数据结构，栈中项的插入和删除只发生在—-栈的顶部。</p>
</blockquote>
<ul>
<li><code>push()</code><ul>
<li>传入要在数组末尾添加的数据，返回修改后数组的长度</li>
</ul>
</li>
<li><code>pop()</code><ul>
<li>删除数组末尾的最后一项（取得数组中的最后一项），返回被删除的项</li>
</ul>
</li>
</ul>
</li>
<li><p>数组中的队列方法</p>
<blockquote>
<p>先进先出(FIFO)的数据结构，在队列的末端添加项，在队列的 前端移除项。</p>
</blockquote>
<ul>
<li><code>shift()</code><ul>
<li>移除数组中的第一个项，并且返回移除的项，同时将长度减1</li>
<li>结合<code>push()</code>方法，可以实现队列操作</li>
</ul>
</li>
<li><code>unshift()</code><ul>
<li>在数组的前端添加多个项并且返回修改后数组的长度；结合<code>pop()</code>方法，可以实现队列操作</li>
</ul>
</li>
</ul>
</li>
<li><p>数组中的重排序方法</p>
<ul>
<li><code>reverse()</code><ul>
<li>只是把数组颠倒个顺序，并不会对齐排序，返回经过排序的数组</li>
</ul>
</li>
<li><p><code>sort()</code></p>
<ul>
<li><p>默认是按照升序排列数组；其默认会调用每一个数组项的<code>toString()</code>转为<code>字符串进行比较</code></p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var num1=[<span class="number">0</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="number">10</span>,<span class="number">15</span>]</div><div class="line">num1.sort() ; <span class="comment">// [0, 1, 10, 15, 5]</span></div></pre></td></tr></table></figure>
<p> 这个方法不是我们需要的排序方法，所以一般在里面传递一个比较函数</p>
<figure class="highlight actionscript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num=[<span class="number">2</span>,<span class="number">1</span>,<span class="number">4</span>,<span class="number">3</span>,<span class="number">6</span>];</div><div class="line">num.sort(<span class="function"><span class="keyword">function</span><span class="params">(a,b)</span></span>{</div><div class="line"> <span class="keyword">return</span> a-b; <span class="comment">// 从小到大</span></div><div class="line"> <span class="keyword">return</span> b-a; <span class="comment">// 从大到小</span></div><div class="line"> })</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
</li>
<li><p>操作数组的方法</p>
<ul>
<li><p><code>concat()</code>：连接多个数组的方法</p>
<ul>
<li>先会创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新创建的数组；</li>
<li>没有传递参数，就是<code>复制当前的数组</code>，返回当前数组的副本</li>
<li>传递参数，就是把参数插入在当前的数组的副本的末尾,连接多个数组，返回修改的数组</li>
</ul>
</li>
<li><p><code>slice()</code></p>
<ul>
<li>一个参数：返回从该参数指定的位置开始到当前数组的末尾的所有项，数组的形式返回。</li>
<li>两个参数：返回起始位置到结束位置之间的项，但是不包括结束位置的项。<code>包前不包后</code></li>
<li>不影响原数组，可以传入负数，加上数组长度来计算</li>
<li>不传参数的时候，就是<code>复制原数组</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><code>splice()</code></li>
</ul>
<blockquote>
<p>主要用途就是向数组中部插入项，返回一个数组，该数组包含从原始数组删除的项，没有就返回一个空数组</p>
</blockquote>
<ul>
<li><code>删除</code>：可以删除任意数量的项<ul>
<li><code>splice(删除的第一项，要删除的项数)</code></li>
</ul>
</li>
<li><p><code>插入</code>：在指定位置插入任意项</p>
<ul>
<li><code>splice(插入起始位置，0，要插入的项（可以多个）)</code></li>
</ul>
</li>
<li><p><code>替换</code>：在指定位置插入任意项</p>
<ul>
<li><code>splice(起始位置，删除的项，要插入的项)</code></li>
</ul>
</li>
</ul>
<ul>
<li><p>位置方法</p>
<ul>
<li><code>indexOf(要查找的项，[开始查找起点位置的索引])</code>：开头找，找到返回，没有找打返回-1，严格相等</li>
<li><code>lastIndexOf(要查找的项，[开始查找起点位置的索引])</code>：结尾找，但是返回的索引值还是从前面数</li>
</ul>
</li>
<li><p>迭代方法</p>
<blockquote>
<p>接收两个参数，要在数组的每一个项上面运行的函数和（可选的）运行该函数的作用域对象—影响<code>this</code>的值，函数参数都接收三个参数：数组项的值，该项在数组中的索引值，数组对象本身</p>
</blockquote>
<ul>
<li><code>every()</code>：如果该函数参数对每一项都返回true，则返回true</li>
<li><code>filter()</code>：会返回true的项组成的数组</li>
<li><code>forEach()</code>：没有返回值，本质和for循环迭代数组一样</li>
<li><code>map()</code>：返回每次函数调用返回的结果组成的函数</li>
<li><code>some()</code>：函数参数对某一项返回true，则返回true</li>
</ul>
</li>
</ul>
<figure class="highlight delphi"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> numbers=[<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 class="number">4</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">1</span>];</div><div class="line"><span class="keyword">var</span> everyR=numbers.every(<span class="function"><span class="keyword">function</span><span class="params">(item,<span class="keyword">index</span>,<span class="keyword">array</span>)</span><span class="comment">{</span></span></div><div class="line"> return (item>2);</div><div class="line"> })</div><div class="line"><span class="title">console</span>.<span class="title">log</span><span class="params">(everyR)</span>; <span class="comment">// false</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> someR=numbers.some(<span class="function"><span class="keyword">function</span><span class="params">(item,<span class="keyword">index</span>,<span class="keyword">array</span>)</span><span class="comment">{</span></span></div><div class="line"> return (item>2);</div><div class="line"> })</div><div class="line"> <span class="title">console</span>.<span class="title">log</span><span class="params">(someR)</span>; <span class="comment">// true</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> filterR=numbers.filter(<span class="function"><span class="keyword">function</span><span class="params">(item,<span class="keyword">index</span>,<span class="keyword">array</span>)</span><span class="comment">{</span></span></div><div class="line"> return (item>2);</div><div class="line"> })</div><div class="line"> <span class="title">console</span>.<span class="title">log</span><span class="params">(filterR)</span>; <span class="comment">// [3,4,5,4,3]</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> mapR=numbers.map(<span class="function"><span class="keyword">function</span><span class="params">(item,<span class="keyword">index</span>,<span class="keyword">array</span>)</span><span class="comment">{</span></span></div><div class="line"> return (item*2);</div><div class="line"> })</div><div class="line"> <span class="title">console</span>.<span class="title">log</span><span class="params">(mapR)</span>; <span class="comment">// [2,4,6,8,10,8,6,4,2]</span></div></pre></td></tr></table></figure>
<h3 id="Date类型"><a href="#Date类型" class="headerlink" title="Date类型"></a><code>Date</code>类型</h3><blockquote>
<p>1970年1月1日开始经过的毫秒数</p>
</blockquote>
<ul>
<li><p>创建一个日期对象 ：<code>var now=new Date()</code></p>
<ul>
<li>没有传入参数：自动获取当前时间和日期</li>
<li>传入参数：<code>var someDate=new Date('8/1/2017')</code>，后台调用<code>Date.parse()</code>转化，获取到2017年8月1号的毫秒数</li>
</ul>
</li>
<li><p>继承的方法</p>
<ul>
<li><code>toLocaleString()</code><ul>
<li>按照浏览器的设置时区返回日期和时间</li>
</ul>
</li>
<li><code>toString()</code><ul>
<li>返回带有时区信息的日期和时间</li>
<li>与上一个方法其实没有什么差别，显示时间来说</li>
</ul>
</li>
<li><code>valueOf()</code><ul>
<li>返回日期的毫秒数，可以用来比较日期值</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="日期格式化"><a href="#日期格式化" class="headerlink" title="日期格式化"></a>日期格式化</h4><ul>
<li><code>toDateString()</code>：以特定格式显示星期，月，日，年</li>
<li><code>toTimeString()</code>：以特定格式显示时，分，秒，时区</li>
<li><code>toLocalDateString()</code></li>
<li><code>toLocalTimeString()</code></li>
<li><code>toUTCString()</code></li>
</ul>
<h3 id="RegExg-类型"><a href="#RegExg-类型" class="headerlink" title="RegExg()类型"></a><code>RegExg()</code>类型</h3><blockquote>
<p>支持正则表达式 <code>var expression= /pattren/flags</code><br><code>pattren模式：</code><br><code>flags标志：</code>g全局，i不区分大小写，m多行模式，到达一行文本末尾还会继续查找下一行中是否存在</p>
</blockquote>
<ul>
<li>元字符<blockquote>
<p>转义，匹配的字符串里面包含元字符的话<br> <code>{ [ \ ^ $ | ] ? * + .} ( )</code></p>
</blockquote>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1811036-7311264906caafc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="字面量转字符串"></p>
<ul>
<li><p>创建正则表达式的方法</p>
<ul>
<li>字面量<ul>
<li><code>var pattern=/\.at/gi</code>：匹配所有的<code>.at</code>不区分大小写</li>
</ul>
</li>
<li><code>RegExp()函数</code><ul>
<li><code>var pattern=new RegExp('[bc]at','i')</code>：接收字符串形式的匹配字符，和标志，里面不能直接使用字面量，</li>
</ul>
</li>
<li><code>区别：ECMAScript3中</code><ul>
<li>字面量始终会共享同一个<code>RegExp()实例</code>，而构造函数创建的每一个新的<code>RegExp实例</code>都是一个新的实例</li>
</ul>
</li>
</ul>
</li>
<li><p><code>RegExp</code>实例方法</p>
<ul>
<li><p><code>exec()</code></p>
<ul>
<li>捕获数组</li>
<li>一个参数：应用模式的字符串</li>
<li>返回值：匹配的数组<code>额外的属性：input（应用正则表达式的字符串） index（匹配项字符串中的位置）/null</code></li>
<li>当在匹配的字符串里面带有<code>g全局模式的时候</code>，每次调用<code>exec()</code>都会返回字符串中的下一个匹配项，直到结尾。<code>lastIndex</code>每次都会增加</li>
</ul>
</li>
<li><p><code>test()</code></p>
<ul>
<li>接收一串字符串</li>
<li>返回true/fasle</li>
</ul>
</li>
<li><p><code>toString()</code>和<code>toLocaleString()</code></p>
<ul>
<li>返回正则表达式的字面量</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="Function类型"><a href="#Function类型" class="headerlink" title="Function类型"></a><code>Function类型</code></h3><blockquote>
<p>函数是对象，每一个函数都是<code>Function类型</code>的实例，函数名实际上是一个指向函数对象的指针，操作函数，最重要的是操作函数的属性和方法；<code>prototype</code>：保存着所有的实例方法；其是不可以枚举的，不能使用for in循环</p>
</blockquote>
<h4 id="没有重载-重点"><a href="#没有重载-重点" class="headerlink" title="没有重载 重点"></a>没有重载 <strong>重点</strong></h4><blockquote>
<p>重载：让类以统一的方式处理不同类型数据的一种手段。重载<code>Overloading</code>是一个类中多态性的一种表现。方法名要一样，但是参数类型和个数不一样，返回值类型可以相同也可以不相同。</p>
</blockquote>
<ul>
<li><p>函数声明和函数表达式 </p>
<blockquote>
<p>解析器在向执行环境中加载数据的时候，会先读取函数声明（函数变量提升），并使其在执行任何代码之前都可以访问，等到解析器真正要执行函数所在的代码行的时候，才会执行函数表达式</p>
</blockquote>
<figure class="highlight scilab"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">alert(<span class="built_in">sum</span>(<span class="number">10</span>,<span class="number">10</span>))</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sun</span><span class="params">(num1,num2)</span>{</span></div><div class="line"> <span class="keyword">return</span> num1+num2 <span class="comment">// 把函数的声明放在执行环境顶部，但是我们使用函数表达式的时候，就会出现错误，不会函数变量提升</span></div><div class="line"> }</div></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>函数内部属性</p>
<ul>
<li><code>arguments</code><ul>
<li>类数组对象，包含传入函数中的所有参数，主要是用来保存函数参数的</li>
<li>还有一个<code>callee属性</code>，是一个指针，指向拥有<code>arguments</code>对象的函数</li>
</ul>
</li>
</ul>
<figure class="highlight haml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="comment"> // 阶乘函数</span></div><div class="line"> function factoriai(num){</div><div class="line"> if(num<=1){</div><div class="line"> return 1;</div><div class="line"> }else{</div><div class="line"> return num*arguments.callee(num-1); // num*facoriai(num-1)</div><div class="line"> }</div><div class="line"> } </div><div class="line"> ``` </div><div class="line"> </div><div class="line"> </div><div class="line"> </div><div class="line"></div><div class="line">好处是在于：不需要知道函数的名字就可以完成递归调用，降低函数体内的代码与函数名的耦合度</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"> -<span class="ruby"> <span class="string">`this`</span></span></div><div class="line"> -<span class="ruby"> 函数执行的环境对象</span></div><div class="line"> -<span class="ruby"> 全局函数，指向<span class="string">`window`</span>；谁调用函数就指向谁</span></div><div class="line"> </div><div class="line"> -<span class="ruby"> 函数中的非继承的方法：<span class="string">`apply(),call()`</span></span></div><div class="line"> -<span class="ruby"> 设置函数体内的<span class="string">`this`</span>对象的值</span></div><div class="line"> -<span class="ruby"> <span class="string">`apply()`</span></span></div><div class="line"> -<span class="ruby"> 参数：运行函数的作用域（必须传入），参数数组（arguments对象或者Array实例）</span></div><div class="line"> -<span class="ruby"> <span class="string">`call()`</span></span></div><div class="line"> -<span class="ruby"> 参数：运行函数的作用域（必须传入），参数必须逐个列举出来</span></div><div class="line"> </div><div class="line"> -<span class="ruby"> 这两种方法没有什么不同，就是取决你给函数传递的参数的方式，真正的作用是扩充函数运行的作用域，对象不需要与方法有任何的耦合关系。</span></div></pre></td></tr></table></figure>
<pre><code>window.color='red';
var o={color:'blue'}
function sayColor(){
alert(this.color)
}
sayColor(); // red
sayColor.call(this); // red
sayColor.call(o); // blue
</code></pre> <figure class="highlight http"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"></div><div class="line"><span class="clean">- `bind()`</span></div><div class="line"> - 创建一个函数的实例，其`this`值会绑定到传给`bind()`函数的值。</div><div class="line"> - 即使在全局作用域调用这个函数，函数里面的`this`也是指向绑定的函数的`this`</div></pre></td></tr></table></figure>
<p> window.color=’red’;<br> var o={color:’blue’}<br> function sayColor(){</p>
<pre><code>alert(this.color)
</code></pre><p> }</p>
<pre><code>var objectS=sayColor.bind(o);
</code></pre><p> objectS(); // blue 全局调用也是执行o对象中的this<br>```</p>
</li>
</ul>
<h3 id="基本包装类"><a href="#基本包装类" class="headerlink" title="基本包装类"></a>基本包装类</h3><ul>
<li><code>Boolean</code></li>
<li><code>Number</code></li>
<li><code>String</code></li>
<li>映射到同名的基本类型</li>
</ul>
<h3 id="单体内置对象"><a href="#单体内置对象" class="headerlink" title="单体内置对象"></a>单体内置对象</h3><ul>
<li><p><code>URL编码方法</code></p>
<ul>
<li><code>encodeURI()</code>：整个url，空格换成了<code>%20</code> 对应的<code>decodeURI()</code></li>
<li><code>encodeURIComponent()</code>：url中的某一段</li>
</ul>
</li>
<li><p><code>eval()</code></p>
<ul>
<li>一个完整的解析器</li>
<li>参数：一个；要<code>执行</code>的字符串</li>
</ul>
</li>
</ul>
</div>
<div>
<div>
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束,感谢您的阅读------------</div>
</div>
</div>
<div>
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span>本文标题:</span><a href="/javascript高级程序设计读书笔记（五）.html">javascript高级程序设计读书笔记（五）</a></p>
<p><span>文章作者:</span><a href="/" title="访问 icessun 的个人博客">icessun</a></p>
<p><span>发布时间:</span>2017年08月03日 - 10:08</p>
<p><span>最后更新:</span>2017年09月28日 - 10:09</p>
<p><span>原始链接:</span><a href="/javascript高级程序设计读书笔记（五）.html" title="javascript高级程序设计读书笔记（五）">http://icessun.github.io/javascript高级程序设计读书笔记（五）.html</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://icessun.github.io/javascript高级程序设计读书笔记（五）.html" aria-label="复制成功！"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
</div>
<div>
</div>
<div>
<div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
<div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
<button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
<span>翻牌</span>
</button>
<div id="QR" style="display: none;">
<div id="wechat" style="display: inline-block">
<img id="wechat_qr" src="/images/wechat-reward-image.png" alt="icessun WeChat Pay"/>
<p>微信打赏</p>
</div>
<div id="alipay" style="display: inline-block">
<img id="alipay_qr" src="/images/alipay-reward-image.png" alt="icessun Alipay"/>
<p>支付宝打赏</p>
</div>
</div>
</div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/javascript/" rel="tag"><i class="fa fa-tag"></i>    javascript</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/告别秋千.html" rel="next" title="告别秋千">
<i class="fa fa-chevron-left"></i> 告别秋千
</a>
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
<a href="/javascript高级程序设计读书笔记（四）.html" rel="prev" title="javascript高级程序设计读书笔记（四）">
javascript高级程序设计读书笔记（四） <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</article>
<div class="post-spread">
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_cqq"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_renren"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_kaixin001"></a>
<a class="jiathis_button_copy"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
</div>
</div>
</div>
<div class="comments" id="comments">
<div onclick="showGitment()" id="gitment_title" class="gitment_title">显示 Gitment 评论</div>
<div id="container" style="display:none"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
const myTheme = {
render(state, instance) {
const container = document.createElement('div');
container.lang = "en-US";
container.className = 'gitment-container gitment-root-container';
container.appendChild(instance.renderHeader(state, instance));
container.appendChild(instance.renderEditor(state, instance));
container.appendChild(instance.renderComments(state, instance));
container.appendChild(instance.renderFooter(state, instance));
return container;
}
}
function showGitment() {
$("#gitment_title").attr("style", "display:none");
$("#container").attr("style", "").addClass("gitment_container");
var gitment = new Gitment({
id: window.location.pathname,
theme: myTheme,
owner: 'icessun',