-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
482 lines (321 loc) · 40 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>十年灯的Github博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="十年灯的Github博客">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="十年灯的Github博客">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="十年灯的Github博客">
<link rel="alternate" href="/atom.xml" title="十年灯的Github博客" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">十年灯的Github博客</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Suche"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-visual-studio-ESList-plugin" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-23/visual-studio-ESList-plugin/" class="article-date">
<time datetime="2018-01-23T03:07:37.000Z" itemprop="datePublished">2018-01-23</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-23/visual-studio-ESList-plugin/">visual studio ESList plugin</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>虽然我不用visual studio 开发前端代码,但还是记录一下.</p>
<p>即使你使用的VS2017,内置了eslint,你还是会发现根本用不了.</p>
<p>我尝试出的办法是使用插件: VisualLinter</p>
<p>链接如下:</p>
<p><a href="https://marketplace.visualstudio.com/items?itemName=JeanAlexanderWoldner.VisualLinter" target="_blank" rel="noopener">https://marketplace.visualstudio.com/items?itemName=JeanAlexanderWoldner.VisualLinter</a></p>
<p>安装后可获得与 vscode 里一致的 ESLint 体验</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-23/visual-studio-ESList-plugin/" data-id="cjcr2er6d0006zwvxzpjbdqt7" class="article-share-link">Teilen</a>
</footer>
</div>
</article>
<article id="post-uglify-mangle-ie8" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-18/uglify-mangle-ie8/" class="article-date">
<time datetime="2018-01-18T08:13:11.000Z" itemprop="datePublished">2018-01-18</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-18/uglify-mangle-ie8/">gulp uglify mangle ie8</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>使用 gulp-uglify 打包出来后, art-template 在IE8-就不能用了, 直接报模板错误.加上 mangle: false 就可以用</p>
<p>但mangle: false相当于没有混淆变量名, 只要使用简单的格式化就能像阅读源码一样看打包后的代码了.</p>
<p>所以我打算研究下,既要mangle,也要ie7</p>
<p>我将原版3.1.0的template.min.js与我们压缩后的template.js, 进行 <strong>格式化-diff软件</strong> 找不同, 发现一个比较显著的差异: 我们打包出来的,会把写在后面的函数声明,提到最前面.于是辗转找到了<strong>hoist_funs</strong> 参数</p>
<p>研究出来了开启mangle在IE7下也不报错的办法： </p>
<p>1，compress.hoist_funs=false，表示打包时不自动将函数声明提升到作用域顶部。配置这个之后设置mangle=true，打包出来的<a href="http://tempalte.js/" target="_blank" rel="noopener">tempalte.js</a>已经可用</p>
<p>2，mangle.reserved：这里用来定义打乱时不动的变量名。因为第一步打包出来的代码，会导致validate插件在IE8-报“缺少对象”。尝试了几次后确定了这个方法</p>
<p>加上这个参数的坏处是,代码里的 $ 就变得很显眼了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.pipe(uglify({</span><br><span class="line"></span><br><span class="line"> mangle: {<span class="attr">reserved</span>: [<span class="string">'e'</span>,<span class="string">'$'</span>]},</span><br><span class="line"></span><br><span class="line"> compress: {<span class="attr">hoist_funs</span>: <span class="literal">false</span>}</span><br><span class="line"></span><br><span class="line">}))</span><br></pre></td></tr></table></figure>
<h2 id="更简单的办法"><a href="#更简单的办法" class="headerlink" title="更简单的办法"></a>更简单的办法</h2><p>uglify({ie8: true}) // uglify-js 3.0+</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-18/uglify-mangle-ie8/" data-id="cjcr2er6b0005zwvx3qjmd8s3" class="article-share-link">Teilen</a>
</footer>
</div>
</article>
<article id="post-self-suggestion" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-16/self-suggestion/" class="article-date">
<time datetime="2018-01-16T10:07:45.000Z" itemprop="datePublished">2018-01-16</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-16/self-suggestion/">编程,给自己的两个忠告</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1-不要因为某项功能强大就企图用它解决大部分问题"><a href="#1-不要因为某项功能强大就企图用它解决大部分问题" class="headerlink" title="1, 不要因为某项功能强大就企图用它解决大部分问题"></a>1, 不要因为某项功能强大就企图用它解决大部分问题</h2><p>比如正则表达式.举两个例子:</p>
<p>1) 验证密码强度,数字,小写字母,大写字母,特殊符号各得1分,少一个减1分<br>一个正则就能搞定. 但实际上用一个for循环加上4个简单正则, 也能搞定,且逻辑清晰便于理解</p>
<p>2) 判断同意义的字符串</p>
<p>比如, 判断是否包含 “我喜欢你” 或 “我爱你”, 然后告诉你 喜欢=爱<br>这个当然用正则的 | 多写几个条件,就能搞定<br>但更简单的是, 先使用 replace 把 喜欢替换成爱, 再判断有没有 “我爱你”</p>
<h2 id="2-不要因为能将就使用-就不想办法改进"><a href="#2-不要因为能将就使用-就不想办法改进" class="headerlink" title="2, 不要因为能将就使用, 就不想办法改进"></a>2, 不要因为能将就使用, 就不想办法改进</h2><p>没有es5, 用 es3 或用一些库的 util 类, 多写些代码也能实现<br>没有电灯, 点蜡烛也可以将就一晚上<br>那人类还发展个P<br>这时候应该想方设法用上电灯</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-16/self-suggestion/" data-id="cjcr2er690004zwvxwnt10boh" class="article-share-link">Teilen</a>
</footer>
</div>
</article>
<article id="post-first-hexo" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-16/first-hexo/" class="article-date">
<time datetime="2018-01-16T01:11:52.000Z" itemprop="datePublished">2018-01-16</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-16/first-hexo/">第一篇 hexo 文章</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>测试 hexo 发文流程</p>
<p>hexo居然把我以前仓库的东西全删了,没有提示,而且还找不到历史记录了呢</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-16/first-hexo/" data-id="cjcr2er620001zwvx9fh29iaj" class="article-share-link">Teilen</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo-test/">hexo test</a></li></ul>
</footer>
</div>
</article>
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-15/hello-world/" class="article-date">
<time datetime="2018-01-15T10:30:04.330Z" itemprop="datePublished">2018-01-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-15/hello-world/">Hello World</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-15/hello-world/" data-id="cjcr2er650002zwvxcrg6is9q" class="article-share-link">Teilen</a>
</footer>
</div>
</article>
<article id="post-es5 new Array methods" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018-01-12/es5 new Array methods/" class="article-date">
<time datetime="2018-01-12T07:49:13.331Z" itemprop="datePublished">2018-01-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018-01-12/es5 new Array methods/">es5 new Array methods</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h2><p>没有返回值</p>
<p>其作用与for循环十分接近, 但并不能替代 for循环. 因为, forEach接受一个<strong>函数</strong>做参数, 在forEach的函数中没有 break, continue, 且return 不会跳出父函数(因为其本身就是一个函数)</p>
<p>在forEach的函数中 return, 不会中断forEach的继续执行.</p>
<p>如有下列代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">allLt0</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">0</span>; a < arr.length; a++) {</span><br><span class="line"> <span class="keyword">if</span> (arr[a] > <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>改造成forEach</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">allLt0</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> arr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (item > <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> }) </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这就有点想当然了</p>
<p>所以其实 forEach 只适合”对数组所有元素执行方法, 且不需要判断中断”的情况</p>
<h2 id="map"><a href="#map" class="headerlink" title="map"></a>map</h2><p>执行完毕后返回一个数组, 数组长度等于原数组的长度</p>
<p>思考以下代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = <span class="built_in">Array</span>(<span class="number">5</span>);</span><br><span class="line"><span class="keyword">var</span> b = arr.map(<span class="function"><span class="keyword">function</span> (<span class="params">item,i</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(item);</span><br><span class="line"> <span class="keyword">return</span> item + i;</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>结果并没有 console.log 执行, 且 b 是一个长度为5的空数组</p>
<p>原因是map/forEach会跳过数组的空元素, 而 arr 的元素全是空</p>
<p>如下的arr ,则不会跳过</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="literal">undefined</span>,<span class="literal">undefined</span>,<span class="literal">undefined</span>,<span class="literal">undefined</span>,<span class="literal">undefined</span>];</span><br><span class="line"><span class="keyword">var</span> arr = <span class="built_in">Array</span>.apply(<span class="built_in">Array</span>, <span class="built_in">Array</span>(<span class="number">5</span>));</span><br></pre></td></tr></table></figure>
<p>所以”空元素” != undefined</p>
<p>这个问题需要注意下,比如:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line">arr[<span class="number">9</span>] = <span class="string">'David'</span>;</span><br><span class="line"><span class="keyword">var</span> b = arr.map(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(item);</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">name</span>: item}</span><br><span class="line">});</span><br><span class="line">b;</span><br></pre></td></tr></table></figure>
<p>此时b只有一个有效值,就是b[9], 长度也为10.</p>
<h2 id="every"><a href="#every" class="headerlink" title="every"></a>every</h2><p>every 的用途在于, 对数组中的每个元素执行函数,如果有一个执行后没返回true, 则终止并得到false; 否则返回 true</p>
<p>也就是every有返回值, 是个 boolean</p>
<p>返回<strong>falsy值</strong>会导致every 终止</p>
<p>使用 every 时,记得显式的返回 true或false, 因为如果没返回 true, 就会被当成 false, 然后得到最终 false 的结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> allLte3 = arr.every(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (item < <span class="number">3</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// return true;</span></span><br><span class="line">});</span><br><span class="line">allLte3; <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<p>如上, 被注释掉的语句,很多新手可能会忘了写, 结果得到错误的判断结果</p>
<h2 id="some"><a href="#some" class="headerlink" title="some"></a>some</h2><p>some与every是相反的. 他对每个数组元素执行函数,如果有某一个执行后返回 true, 则终止, 并得到 true</p>
<p>所以他也是有返回值的, 返回 boolean</p>
<p>要记得, 返回 <strong>truly</strong>, 会导致 some 终止!</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">age</span>:<span class="number">11</span>, <span class="attr">name</span>:<span class="string">'11'</span>,<span class="attr">salary</span>:<span class="number">11000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">age</span>:<span class="number">21</span>, <span class="attr">name</span>:<span class="string">'21'</span>,<span class="attr">salary</span>:<span class="number">21000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">age</span>:<span class="number">31</span>, <span class="attr">name</span>:<span class="string">'31'</span>,<span class="attr">salary</span>:<span class="number">31000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">4</span>,<span class="attr">age</span>:<span class="number">41</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">5</span>,<span class="attr">age</span>:<span class="number">40</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line">]</span><br><span class="line"><span class="keyword">var</span> hasLt30 = arr.some(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (item.age > <span class="number">31</span>) <span class="keyword">return</span> item;</span><br><span class="line">})</span><br><span class="line">hasLt30; <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>注意在代码中,我试图返回一个对象, 但 hasLt30 却还是个boolean. 所以some并不会取得你返回的那个值,只是判断它, 并得到 true或 false</p>
<h2 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h2><p>用于取出对数组元素执行函数后,返回 true 的元素,并组成一个新数组.</p>
<p>其有返回值,是个数组</p>
<p>filter 是个常用方法. 比如, 从一个员工对象数组中, 找出所有年龄大于 30 的(便于开除):</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line"> {<span class="attr">age</span>: <span class="number">31</span>, <span class="attr">name</span>:<span class="string">'L'</span>},</span><br><span class="line"> {<span class="attr">age</span>: <span class="number">24</span>, <span class="attr">name</span>:<span class="string">'M'</span>},</span><br><span class="line"> {<span class="attr">age</span>: <span class="number">32</span>, <span class="attr">name</span>:<span class="string">'N'</span>},</span><br><span class="line">];</span><br><span class="line"><span class="keyword">var</span> Lt30 = arr.filter(<span class="function"><span class="keyword">function</span> (<span class="params">item,i</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> item.age >= <span class="number">30</span>;</span><br><span class="line">});</span><br><span class="line">Lt30;</span><br></pre></td></tr></table></figure>
<p>filter 无法中止</p>
<h2 id="indexOf-与-lastIndexOf"><a href="#indexOf-与-lastIndexOf" class="headerlink" title="indexOf 与 lastIndexOf"></a>indexOf 与 lastIndexOf</h2><p>这两个比较简单. 要注意他们有第二个参数,即 fromIndex, 合理使用可节约大量时间开销:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">2</span>, <span class="number">9</span>, <span class="number">9</span>];</span><br><span class="line">array.indexOf(<span class="number">9</span>, <span class="number">2</span>); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
<p>这两个方法太简单了, 第一个参数不能接受<strong>函数</strong>, 所以, 没法实现获取”对象数组中有某个字段的对象的 index” 的需求</p>
<p>另外, 他们还是属于循环,所以不宜大量使用. 比如以下场景, 判断A数组中的所有元素是否都存在于B数组中:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> A = [<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"><span class="keyword">var</span> B = [<span class="number">0</span>,<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">6</span>,<span class="number">7</span>,<span class="number">8</span>];</span><br><span class="line">A.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">a</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> isIn = B.indexOf(a) > <span class="number">-1</span>;</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>这是一个不好的示例, 会产生好多次循环.</p>
<p>所以不要看起来方便就上了, 效率还是必须得考虑的.</p>
<h2 id="reduce-与-reduceRight"><a href="#reduce-与-reduceRight" class="headerlink" title="reduce 与 reduceRight"></a>reduce 与 reduceRight</h2><p>这两个是这几个”新”方法中最复杂的, 且能实现的功能也多种多样.</p>
<p>他们除了接收一个函数作为第一个参数外, 还接受一个初始值(任何类型)做第二个参数:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">accu,item,i,array</span>), <span class="title">initvalue</span>)</span></span><br></pre></td></tr></table></figure>
<p>且他们的参数函数,多了一个参数.其他方法都是(item, index, array), reduce/reduceRight的参数是: (<strong>accumulator</strong>, item, index, array)</p>
<p>记住 accumulator 这个单词,他已经说明了reduce的意义</p>
<p>其参数函数返回的对象，回成为下一个 accumulator</p>
<p>最常见的用法是对数组中的元素进行累加(比较求和,求乘积)</p>
<p>但实际情况能产生出很多变化,比如数组的元素不是简单值,而是复杂object.</p>
<p>比如我要得出所有员工加起来的总年龄:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">11</span>, <span class="attr">name</span>:<span class="string">'11'</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">21</span>, <span class="attr">name</span>:<span class="string">'21'</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">31</span>, <span class="attr">name</span>:<span class="string">'31'</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">41</span>, <span class="attr">name</span>:<span class="string">'41'</span>},</span><br><span class="line">]</span><br><span class="line"><span class="keyword">var</span> total = arr.reduce(<span class="function"><span class="keyword">function</span> (<span class="params">accu, item</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> accu.age ? accu.age + item.age : accu + item.age;</span><br><span class="line">});</span><br><span class="line">total;</span><br></pre></td></tr></table></figure>
<p>reduce本意是用来进行累加计算(凡是要对数组进行累加计算的,都可以用它),但有时会用在一些貌似和<strong>累加</strong>没关系的地方.如取得年龄最大的员工:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">11</span>, <span class="attr">name</span>:<span class="string">'11'</span>,<span class="attr">salary</span>:<span class="number">11000</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">21</span>, <span class="attr">name</span>:<span class="string">'21'</span>,<span class="attr">salary</span>:<span class="number">21000</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">31</span>, <span class="attr">name</span>:<span class="string">'31'</span>,<span class="attr">salary</span>:<span class="number">31000</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">41</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line"> {<span class="attr">age</span>:<span class="number">40</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line">]</span><br><span class="line"><span class="keyword">var</span> oldest = arr.reduce(<span class="function"><span class="keyword">function</span> (<span class="params">accu, item</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> accu.age > item.age ? accu : item;</span><br><span class="line">});</span><br><span class="line">oldest; <span class="comment">// {age:41, name:'41',salary:41000}</span></span><br></pre></td></tr></table></figure>
<p>最终只得到一个对象.</p>
<p>3, 转换对象数组为以id为key的对象</p>
<p>就拿上面的数组来说,为了便于提取到对应id的对象,我们希望将这个数组变成这样一个大对象:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="number">1</span>:{<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">age</span>:<span class="number">11</span>, <span class="attr">name</span>:<span class="string">'11'</span>,<span class="attr">salary</span>:<span class="number">11000</span>},</span><br><span class="line"><span class="number">2</span>:{<span class="attr">id</span>:<span class="number">2.</span>..}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这个可以用for循环做到, 示例代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {};</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">0</span>; a < arr.length; a++) {</span><br><span class="line"> obj[arr[a].id] = arr[a];</span><br><span class="line">}</span><br><span class="line">obj;</span><br></pre></td></tr></table></figure>
<p>多了一些额外的变量, 但用reduce来实现更简单:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">age</span>:<span class="number">11</span>, <span class="attr">name</span>:<span class="string">'11'</span>,<span class="attr">salary</span>:<span class="number">11000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">age</span>:<span class="number">21</span>, <span class="attr">name</span>:<span class="string">'21'</span>,<span class="attr">salary</span>:<span class="number">21000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">age</span>:<span class="number">31</span>, <span class="attr">name</span>:<span class="string">'31'</span>,<span class="attr">salary</span>:<span class="number">31000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">4</span>,<span class="attr">age</span>:<span class="number">41</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line"> {<span class="attr">id</span>:<span class="number">5</span>,<span class="attr">age</span>:<span class="number">40</span>, <span class="attr">name</span>:<span class="string">'41'</span>,<span class="attr">salary</span>:<span class="number">41000</span>},</span><br><span class="line">]</span><br><span class="line"><span class="keyword">var</span> trans = arr.reduce(<span class="function"><span class="keyword">function</span> (<span class="params">accu, item</span>) </span>{</span><br><span class="line"> accu[item.id] = item;</span><br><span class="line"> <span class="keyword">return</span> accu;</span><br><span class="line">}, {});</span><br><span class="line">trans;</span><br></pre></td></tr></table></figure>
<p>要注意传给 .reduce 的第二个参数(初始累加值), 这里是一个空object. 且要注意在函数里每次都返回它</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018-01-12/es5 new Array methods/" data-id="cjcr2er5u0000zwvxqn6am0s5" class="article-share-link">Teilen</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Tags</h3>
<div class="widget">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo-test/">hexo test</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget tagcloud">
<a href="/tags/hexo-test/" style="font-size: 10px;">hexo test</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Archiv</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">January 2018</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">letzter Beitrag</h3>
<div class="widget">
<ul>
<li>
<a href="/2018-01-23/visual-studio-ESList-plugin/">visual studio ESList plugin</a>
</li>
<li>
<a href="/2018-01-18/uglify-mangle-ie8/">gulp uglify mangle ie8</a>
</li>
<li>
<a href="/2018-01-16/self-suggestion/">编程,给自己的两个忠告</a>
</li>
<li>
<a href="/2018-01-16/first-hexo/">第一篇 hexo 文章</a>
</li>
<li>
<a href="/2018-01-15/hello-world/">Hello World</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2018 十年灯<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>