-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
112 lines (61 loc) · 39.9 KB
/
atom.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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>邵涛的个人博客</title>
<link href="/atom.xml" rel="self"/>
<link href="http://st253625445.github.io/"/>
<updated>2018-01-11T08:25:48.109Z</updated>
<id>http://st253625445.github.io/</id>
<author>
<name>shaotao</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>'新年伊始'</title>
<link href="http://st253625445.github.io/2018/01/11/%E6%96%B0%E5%B9%B4%E4%BC%8A%E5%A7%8B/"/>
<id>http://st253625445.github.io/2018/01/11/新年伊始/</id>
<published>2018-01-11T02:27:25.000Z</published>
<updated>2018-01-11T08:25:48.109Z</updated>
<content type="html"><![CDATA[<p>2017悄然过去,2018年已经来到,本文仅对自己去年做下总结,并对新的一年做些展望与计划;</p><h2 id="2017总结"><a href="#2017总结" class="headerlink" title="2017总结"></a>2017总结</h2><p>在过去的一年中:<br>1、React 继续在前端领域占据主导地位,备受期待的 React 16 也正式发布;<br>2、Vue 依然越来越受欢迎,是 React 在因许可证问题被抵制时的主要替代方案之一;<br>3、Angular 跨越了两个大版本:发不了v4以及v5;<br>4、Yarn 快速普及,NPM 跟上脚步;<br>5、下一代 Web 应用模型 — PWA已被迅速采用;<br>6、静态网站卷土重来,Gatsby 等框架使你能够使用 React 和其他现代工具构建静态网站;<br>7、……</p><p>前端技术正在高速发展着,有时真的感觉学的没有更新的快,压力山大啊Σ( ° △ °|||)︴。</p><p>而就我自身而言,工作中并未深入使用过三个框架,还是以jquery为主的开发,技术上并未深入掌握新的东西,突然有种罪恶感:不进步就是在退步。今年需要多放些精力在自我提升上。<br>谨记!!!!!</p><h2 id="2018展望"><a href="#2018展望" class="headerlink" title="2018展望"></a>2018展望</h2><p>先说下今年的趋势把:<br>1、PWA的发展毋庸置疑;<br>2、三架马车依旧会发展迅猛;<br>3、TypeScript会更加火热;<br>4、flex和grid布局更加流行;</p><p>当然还有其他的技术趋势,了解不多就不一一列举。<br>同时给自己18年定个目标,职能上要转为中高级,同时:<br>1、React 为主 VUE为辅的前端框架掌握;<br>2、ES6的学习,日常开发中能够熟练使用ES6进行开发;<br>3、flex布局的学习,并成为日常使用;<br>4、webpack工具掌握精通;<br>5、js设计模式的深入学习,代码的规范化,开发健壮的代码;<br>6、开发整合出一个自己的 js库;<br>7、了解下pwa、TS 能够开发一两个项目</p><p>目标不大,相信自己可以的。<br>年底回来挖坟。</p>]]></content>
<summary type="html">
<p>2017悄然过去,2018年已经来到,本文仅对自己去年做下总结,并对新的一年做些展望与计划;</p>
<h2 id="2017总结"><a href="#2017总结" class="headerlink" title="2017总结"></a>2017总结</h2><p>
</summary>
</entry>
<entry>
<title>JS 数组使用心得笔记</title>
<link href="http://st253625445.github.io/2017/10/16/array-use/"/>
<id>http://st253625445.github.io/2017/10/16/array-use/</id>
<published>2017-10-16T03:36:32.000Z</published>
<updated>2017-10-16T07:32:52.444Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>离博客搭建好也过去一个月了,一直也没时间静下心好好写博客,今天忙里偷闲写下最近工作中的关于数组方法的一些心得笔记,借此来巩固所学。</p><h2 id="一、字符串分割为数组-split-与数组元素拼接转字符串-join"><a href="#一、字符串分割为数组-split-与数组元素拼接转字符串-join" class="headerlink" title="一、字符串分割为数组.split()与数组元素拼接转字符串.join()"></a>一、字符串分割为数组.split()与数组元素拼接转字符串.join()</h2><pre><code><figure class="highlight bash"><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></pre></td><td class="code"><pre><div class="line">/**1.</div><div class="line">* 字符串.split(分隔符) 将字符串生成为数组</div><div class="line">* */</div><div class="line">var welcome = <span class="string">"welcome to my blog"</span>;</div><div class="line">var words = welcome.split(<span class="string">" "</span>); //通过空格分割</div><div class="line">console.log(words);</div><div class="line"></div><div class="line">/**2.</div><div class="line">* 数组转字符串</div><div class="line">* .join(分隔符)</div><div class="line">* 数组各元素间放分隔符并连接成一个字符串</div><div class="line">* */</div><div class="line">var words = [<span class="string">'welcome'</span>,<span class="string">'to'</span>,<span class="string">'my'</span>,<span class="string">'blog'</span>];</div><div class="line"></div><div class="line">var welcome = words.join(<span class="string">" "</span>); //通过空格拼接</div><div class="line">console.log(welcome);</div></pre></td></tr></table></figure></code></pre><h2 id="二、-indexOf-查找数组是否存在某元素及下标"><a href="#二、-indexOf-查找数组是否存在某元素及下标" class="headerlink" title="二、.indexOf()查找数组是否存在某元素及下标"></a>二、.indexOf()查找数组是否存在某元素及下标</h2><pre><code><figure class="highlight bash"><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></pre></td><td class="code"><pre><div class="line">/**1.</div><div class="line">* 数组.indexOf(参数值) 参数值是否存在于数组,</div><div class="line">* 存,返第一个出现该元素的下标;</div><div class="line">* 不存,返-1;</div><div class="line">*</div><div class="line">* 数组.lastIndexOf(参数值)</div><div class="line">* 反序找第一个的下标(存在返回下标,否则返-1)</div><div class="line">*</div><div class="line">* */</div><div class="line">var names = [<span class="string">"David"</span>,<span class="string">"Cynthia"</span>,<span class="string">"Raymond"</span>,<span class="string">"Clayton"</span>,<span class="string">"Jennifer"</span>,<span class="string">"David"</span>],</div><div class="line"> name = <span class="string">"David"</span>,</div><div class="line"> position = names.indexOf(name),</div><div class="line"> lastPosition = names.lastIndexOf(name);</div><div class="line"><span class="keyword">if</span> (position >= 0) {</div><div class="line"> console.log(<span class="string">"Found "</span> + name + <span class="string">" at position "</span> + position);</div><div class="line">}</div><div class="line"><span class="keyword">else</span> {</div><div class="line"> console.log(name + <span class="string">" not found in array."</span>);</div><div class="line">}</div><div class="line"><span class="keyword">if</span> (lastPosition >= 0) {</div><div class="line"> console.log(<span class="string">"Found last "</span> + name + <span class="string">" at position "</span> + position);</div><div class="line">}</div><div class="line"><span class="keyword">else</span> {</div><div class="line"> console.log(<span class="string">"last"</span>+ name + <span class="string">" not found in array."</span>);</div><div class="line">}</div></pre></td></tr></table></figure></code></pre><h2 id="三、数组中间添加和删除修改元素-splice"><a href="#三、数组中间添加和删除修改元素-splice" class="headerlink" title="三、数组中间添加和删除修改元素.splice()"></a>三、数组中间添加和删除修改元素.splice()</h2><pre><code><figure class="highlight bash"><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><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line">* .splice() 可以根据参数的不同对数组进行截取(删除)、添加、替换、</div><div class="line">* 可用于为一个数组增加或移除或修改元素</div><div class="line">* 参数一:截取(删除)的起始索引(0是第一个元素)</div><div class="line">* 参数二:截取(删除)的元素的个数</div><div class="line">* 参数三:删除截取后要添加进数组的元素</div><div class="line">* */</div><div class="line"></div><div class="line">/**1.</div><div class="line">* 数组中间删除(截取)元素</div><div class="line">* 从nums数组 下标为3的位置开始删除(截取)3个长度的数组</div><div class="line">* */</div><div class="line">var nums = [1,2,3,4,5,6,7,8,9];</div><div class="line">var nums2 = nums.splice(3,3);</div><div class="line">console.log(nums,nums2); // [1,2,3,7,8,9],[4,5,6,]</div><div class="line"></div><div class="line">/**2.</div><div class="line">* 数组中间添加元素</div><div class="line">* 从nums数组 下标为3的位置开始添加4,5,6</div><div class="line">* */</div><div class="line">var nums = [1,2,3,7,8,9];</div><div class="line">nums.splice(3,0,4,5,6);</div><div class="line">console.log(nums); //[1,2,3,4,5,6,7,8,9]</div><div class="line"></div><div class="line">/**3.</div><div class="line">* 从数组中替换元素</div><div class="line">* 从nums数组 下标为3的位置开始2长度的内容替换成 4,5,6</div><div class="line">* 相当与先删除(截取)2长度的内容 再添加进3个长度的内容</div><div class="line">* */</div><div class="line">var nums = [1,2,3,100,200,7,8,9];</div><div class="line">var nums2 = nums.splice(3,2,4,5,6);</div><div class="line">console.log(nums,nums2); //[1,2,3,4,5,6,7,8,9] ,[100,200]</div></pre></td></tr></table></figure></code></pre><h2 id="四、不生成新数组的迭代器方法"><a href="#四、不生成新数组的迭代器方法" class="headerlink" title="四、不生成新数组的迭代器方法"></a>四、不生成新数组的迭代器方法</h2><pre><code><figure class="highlight bash"><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><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line">* 1. Array.forEach(func) 对数组每个元素执行某操作</div><div class="line">* 它接受一个函数作为参数,对数组中的每个元素使用该函数</div><div class="line">* */</div><div class="line"><span class="keyword">function</span> squareFunc(num) {</div><div class="line"> console.log(num, num * num); </div><div class="line">}</div><div class="line"></div><div class="line">var nums = [1, 2, 3, 4, 5];</div><div class="line">nums.forEach(squareFunc);</div><div class="line"></div><div class="line">/**</div><div class="line">* 2. Array.every(func), </div><div class="line">* 检查数组中每个元素是否满足某条件</div><div class="line">* 它接受一个返回值为布尔类型的函数, 对数组中的每个元素使用该函数。</div><div class="line">* 如果对于所有的元素,该函数均返回 <span class="literal">true</span>, 则该方法返回 <span class="literal">true</span></div><div class="line">*</div><div class="line">* Array.some(func)</div><div class="line">* 是否存在一个元素满足</div><div class="line">* 也接受一个返回值为布尔类型的函数, 只要有一个元素使得该函数返回 <span class="literal">true</span>,</div><div class="line">* 该方法就返回 <span class="literal">true</span></div><div class="line">* */</div><div class="line"><span class="keyword">function</span> isEven(num) {</div><div class="line"> <span class="built_in">return</span> num % 2 == 0;</div><div class="line">}</div><div class="line">var nums = [2, 4, 6, 8, 10],</div><div class="line"> even = nums.every(isEven),</div><div class="line"> nums2 = [1,3,5,6,7],</div><div class="line"> even2 = nums2.some(isEven);</div><div class="line"><span class="keyword">if</span> (even) {</div><div class="line"> console.log(<span class="string">"nums all numbers are even"</span>);</div><div class="line">} <span class="keyword">else</span> {</div><div class="line"> console.log(<span class="string">"nums not all numbers are even"</span>);</div><div class="line">}</div><div class="line"><span class="keyword">if</span> (even2) {</div><div class="line"> console.log(<span class="string">"nums2 has numbers are even"</span>);</div><div class="line">} <span class="keyword">else</span> {</div><div class="line"> console.log(<span class="string">"nums2 has not numbers are even"</span>);</div><div class="line">}</div><div class="line"></div><div class="line">/**</div><div class="line">* 3.</div><div class="line">* reduce() 数组中的各个元素累计进行操作</div><div class="line">* 它接受一个函数, 返回一个值。 该方法会从一个累加值开始, 不断对累加值和</div><div class="line">* 数组中的后续元素调用该函数, 直到数组中的最后一个元素, 最后返回得到的累加值。</div><div class="line">* */</div><div class="line"></div><div class="line">//使用 reduce() 方法为数组中的元素求和:</div><div class="line"><span class="keyword">function</span> add(runningTotal, currentValue) {</div><div class="line"> <span class="built_in">return</span> runningTotal + currentValue;</div><div class="line">}</div><div class="line">var nums = [1,2,3,4,5,6,7,8,9,10];</div><div class="line">var sum = nums.reduce(add); //</div><div class="line">console.log(sum); // 显示 55</div><div class="line"></div><div class="line">//reduce() 方法也可以用来将数组中的元素连接成一个长的字符串</div><div class="line"><span class="keyword">function</span> concat(accumulatedString, item) {</div><div class="line"> <span class="built_in">return</span> accumulatedString + item;</div><div class="line">}</div><div class="line">var words = [<span class="string">"the "</span>, <span class="string">"quick "</span>,<span class="string">"brown "</span>, <span class="string">"fox "</span>];</div><div class="line">var sentence = words.reduce(concat);</div><div class="line">console.log(sentence); // 显示 <span class="string">"the quick brown fox"</span></div><div class="line"></div><div class="line"></div><div class="line">/**</div><div class="line">* 4.reduceRight() 方法,从右到左执行。</div><div class="line">* 下面的程序使用 reduceRight() 方法将数组中的元素连接成一个字符串:</div><div class="line">* */</div><div class="line"><span class="keyword">function</span> concat(accumulatedString, item) {</div><div class="line"> <span class="built_in">return</span> accumulatedString + item;</div><div class="line">}</div><div class="line">var words = [<span class="string">"the "</span>, <span class="string">"quick "</span>,<span class="string">"brown "</span>, <span class="string">"fox "</span>];</div><div class="line">var sentence = words.reduceRight(concat);</div><div class="line">console.log(sentence); // 显示 <span class="string">"fox brown quick the"</span></div></pre></td></tr></table></figure></code></pre><h2 id="五、生成新数组的迭代器方法"><a href="#五、生成新数组的迭代器方法" class="headerlink" title="五、生成新数组的迭代器方法"></a>五、生成新数组的迭代器方法</h2><pre><code><figure class="highlight bash"><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><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line">* 1. Array.map(func)</div><div class="line">* map() 和 forEach() 有点儿像,</div><div class="line">* 对数组中的每个元素使用某个函数。 两者的区别是</div><div class="line">* map() 返回一个新的数组, 该数组的元素是对原有元素应用某个函数得到的结果</div><div class="line">* */</div><div class="line"><span class="keyword">function</span> curve(num) {</div><div class="line"> <span class="built_in">return</span> num = num*num;</div><div class="line">}</div><div class="line">var grades = [1, 2, 3, 4, 5];</div><div class="line">var newgrades = grades.map(curve);</div><div class="line">console.log(newgrades); // [1, 4, 9, 16,25]</div><div class="line">// 下面是个将字符串 生成首字母大写的 简称的方法</div><div class="line"></div><div class="line"><span class="keyword">function</span> first(word) {</div><div class="line"> <span class="built_in">return</span> word[0].toUpperCase();</div><div class="line">}</div><div class="line">var words = <span class="string">"for your information"</span>;</div><div class="line">var acronym = words.split(<span class="string">" "</span>).map(first);</div><div class="line">console.log(acronym)</div><div class="line">console.log(acronym.join(<span class="string">""</span>)); // 显示 <span class="string">"FYI"</span></div><div class="line"></div><div class="line">/**</div><div class="line">* 2 Array.filter() 传入一个返回值为布尔类型的函数。</div><div class="line">* 和 every() 方法不同的是,</div><div class="line">* 当对数组中的所有元素应用该函数,该方法并不返回 <span class="literal">true</span>,</div><div class="line">* 而是返回一个新数组, 该数组包含应用该函数后结果为 <span class="literal">true</span> 的元素。</div><div class="line">* 可通过该方法实现筛选</div><div class="line">* */</div><div class="line">//下列程序筛选数组中的奇数和偶数元素</div><div class="line"><span class="keyword">function</span> isEven(num) {</div><div class="line"> <span class="built_in">return</span> num % 2 == 0;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">function</span> isOdd(num) {</div><div class="line"> <span class="built_in">return</span> num % 2 != 0;</div><div class="line">}</div><div class="line">var nums = [];</div><div class="line"><span class="keyword">for</span> (var i = 0; i < 20; ++i) {</div><div class="line"> nums[i] = i + 1;</div><div class="line">}</div><div class="line">var evens = nums.filter(isEven);</div><div class="line">console.log(<span class="string">"Even numbers: "</span>+ evens);</div><div class="line">var odds = nums.filter(isOdd);</div><div class="line">console.log(<span class="string">"Odd numbers: "</span>+ odds);</div><div class="line"></div><div class="line">//执行结果如下:Even numbers:2,4,6,8,10,12,14,16,18,20 Odd numbers:1,3,5,7,9,11,13,15,17,19</div><div class="line"></div><div class="line">//下面使用 filter() 筛选所有成绩及格的分数:</div><div class="line"><span class="keyword">function</span> passing(num) {</div><div class="line"> <span class="built_in">return</span> num >= 60;</div><div class="line">}</div><div class="line">var grades = [];</div><div class="line"><span class="keyword">for</span> (var i = 0; i < 20; ++i) {</div><div class="line"> grades[i] = Math.floor(Math.random() * 101);</div><div class="line">}</div><div class="line">var passGrades = grades.filter(passing);</div><div class="line">console.log(<span class="string">"All grades:"</span>+ grades);</div><div class="line">console.log(<span class="string">"Passing grades: "</span>+passGrades);</div><div class="line"></div><div class="line">//还可以使用 filter() 方法过滤字符串数组,下面这个例子过滤掉了那些不包含“ cie” 的单词:</div><div class="line"><span class="keyword">function</span> afterc(str) {</div><div class="line"> <span class="keyword">if</span> (str.indexOf(<span class="string">"cie"</span>) > -1) {</div><div class="line"> <span class="built_in">return</span> <span class="literal">true</span>;</div><div class="line"> }</div><div class="line"> <span class="built_in">return</span> <span class="literal">false</span>;</div><div class="line">}</div><div class="line">var words = [<span class="string">"recieve"</span>,<span class="string">"deceive"</span>,<span class="string">"percieve"</span>,<span class="string">"deceit"</span>,<span class="string">"concieve"</span>];</div><div class="line">var misspelled = words.filter(afterc);</div><div class="line">console.log(misspelled); // 显示 recieve,percieve,concieve</div></pre></td></tr></table></figure></code></pre><h2 id="六、二维数组和多维数组"><a href="#六、二维数组和多维数组" class="headerlink" title="六、二维数组和多维数组"></a>六、二维数组和多维数组</h2><pre><code><figure class="highlight bash"><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><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line">* 1.创建二维数组</div><div class="line">* 比较好的方式:</div><div class="line">* 通过扩展 JavaScript 数组对象, 为其增加了一个新方法,</div><div class="line">* 该方法根据传入的参数, 设定了数组的行数、 列数和初始值</div><div class="line">* */</div><div class="line">Array.matrix = <span class="keyword">function</span>(numrows, numcols, initial) {</div><div class="line"> var arr = [];</div><div class="line"> <span class="keyword">for</span> (var i = 0; i < numrows; ++i) {</div><div class="line"> var columns = [];</div><div class="line"> <span class="keyword">for</span> (var j = 0; j < numcols; ++j) {</div><div class="line"> columns[j] = initial;</div><div class="line"> }</div><div class="line"> arr[i] = columns;</div><div class="line"> }</div><div class="line"> <span class="built_in">return</span> arr;</div><div class="line">}</div><div class="line"></div><div class="line">//测试该生成二维数组方法的一些测试代码</div><div class="line">var nums = Array.matrix(5,5,0);</div><div class="line">console.log(nums[1][1]); // 显示 0</div><div class="line">var names = Array.matrix(3,3,<span class="string">""</span>);</div><div class="line">names[1][2] = <span class="string">"Joe"</span>;</div><div class="line">console.log(names[1][2]); // <span class="string">"Joe"</span></div><div class="line"></div><div class="line">/**</div><div class="line">* 还可以仅用一行代码就创建并且使用一组初始值来初始化一个二维数组:</div><div class="line">* 对于小规模的数据, 这是创建二维数组最简单的方式。</div><div class="line">* */</div><div class="line">var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];</div><div class="line">console.log(grades[2][2]); // 显示 89</div><div class="line"></div><div class="line"></div><div class="line">/**</div><div class="line">* 2.处理二维数组的元素</div><div class="line">*</div><div class="line">* 以数组 grades 为例, 每一行对应一个学生的成绩记录。</div><div class="line">* 可以将该学生的所有成绩相加, 然后除以科目数得到该学生的平均成绩。</div><div class="line">* */</div><div class="line">var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];</div><div class="line">var total = 0;</div><div class="line">var average = 0.0;</div><div class="line"><span class="keyword">for</span> (var row = 0; row < grades.length; ++row) {</div><div class="line"> <span class="keyword">for</span> (var col = 0; col < grades[row].length; ++col) {</div><div class="line"> total += grades[row][col];</div><div class="line"> }</div><div class="line"></div><div class="line"> average = total / grades[row].length;</div><div class="line"> console.log(<span class="string">"Student "</span> + parseInt(row+1) + <span class="string">" average: "</span> +</div><div class="line"> average.toFixed(2));</div><div class="line"> total = 0;</div><div class="line"> average = 0.0;</div><div class="line">}</div></pre></td></tr></table></figure></code></pre><h2 id="七、后记"><a href="#七、后记" class="headerlink" title="七、后记"></a>七、后记</h2><pre><code>以上差不多为数组相关的常用JS方法,希望对大家有所帮助</code></pre>]]></content>
<summary type="html">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>离博客搭建好也过去一个月了,一直也没时间静下心好好写博客,今天忙里偷闲写下最近工作中的关于数组方法的一些心得笔记,借此来巩固所学。</p>
</summary>
<category term="js" scheme="http://st253625445.github.io/tags/js/"/>
</entry>
<entry>
<title>hexo 搭建个人博客</title>
<link href="http://st253625445.github.io/2017/09/14/hexo/"/>
<id>http://st253625445.github.io/2017/09/14/hexo/</id>
<published>2017-09-14T02:59:00.000Z</published>
<updated>2017-09-29T07:09:19.741Z</updated>
<content type="html"><![CDATA[<h2 id="动机"><a href="#动机" class="headerlink" title="动机"></a>动机</h2><p>由于自己很久以前就有搭建博客的想法,但迟迟没有实现,相信很多同学都跟我一样有这样的问题。所有就想把自己搭建的过程给大家分享下,同时给自己的博客扩充点东西,写的不好的话,大家多多担待。</p><h2 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h2><h3 id="node-git"><a href="#node-git" class="headerlink" title="node,git"></a>node,git</h3><p>node配置就不多说了,相信来看这篇博文的同学基本都是会的,即使不会网上也有很多资料能查到,我这就不多说给个地址把<br>node中文网: <a href="http://nodejs.cn/" target="_blank" rel="external">http://nodejs.cn/</a> </p><p>安装好node环境后大家就需要装git了,git也不多说,码农基本都用,直接给个地址<br>git安装:<a href="https://tortoisegit.org/" target="_blank" rel="external">https://tortoisegit.org/</a></p><h3 id="github配置"><a href="#github配置" class="headerlink" title="github配置"></a>github配置</h3><p>既然咱们需要将页面搭建在github上,当然首先需要一个账号了。<br>登录后新建一个仓库(new repository),并命名为YourSiteName.github.io/com,此时Github会帮助你初始化一个静态网页,你可以根据自己的喜好选择一些模版,接着尝试访问下你所建的站点,成功后就可以开始动工了。</p><h2 id="Hexo初始化博客框架"><a href="#Hexo初始化博客框架" class="headerlink" title="Hexo初始化博客框架"></a>Hexo初始化博客框架</h2><h3 id="1-安装Hexo"><a href="#1-安装Hexo" class="headerlink" title="1. 安装Hexo"></a>1. 安装Hexo</h3><pre><code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install -g hexo-cli</div></pre></td></tr></table></figure></code></pre><h3 id="2-初始化框架"><a href="#2-初始化框架" class="headerlink" title="2. 初始化框架"></a>2. 初始化框架</h3><pre><code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo init <yourFolder></div><div class="line">$ <span class="built_in">cd</span> <yourFolder></div><div class="line">$ npm install</div></pre></td></tr></table></figure></code></pre><h3 id="3-新建文章(创建一个Hello-World)"><a href="#3-新建文章(创建一个Hello-World)" class="headerlink" title="3. 新建文章(创建一个Hello World)"></a>3. 新建文章(创建一个Hello World)</h3><pre><code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"Hello World"</span></div></pre></td></tr></table></figure></code></pre><p>在/source/_post里添加hello-world.md文件,之后新建的文章都将存放在此目录下。</p><h3 id="4-生成网站"><a href="#4-生成网站" class="headerlink" title="4. 生成网站"></a>4. 生成网站</h3><pre><code><figure class="highlight bash"><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">$ hexo generate</div><div class="line">//$ hexo g 简写</div></pre></td></tr></table></figure></code></pre><p>此时会将/source的.md文件生成到/public中,形成网站的静态文件。</p><h3 id="5-服务器"><a href="#5-服务器" class="headerlink" title="5. 服务器"></a>5. 服务器</h3><pre><code><figure class="highlight bash"><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">$ hexo server -p 3000 //端口3000</div><div class="line">// hexo s 简写,默认端口4000</div></pre></td></tr></table></figure></code></pre><p>输入<a href="http://localhost:3000" target="_blank" rel="external">http://localhost:3000</a> 即可查看网站,当前只为本地查看。</p><h3 id="6-部署网站"><a href="#6-部署网站" class="headerlink" title="6. 部署网站"></a>6. 部署网站</h3><pre><code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure></code></pre><p>部署网站为 将静态博客上传到git上,部署前需要进行配置,将hexo与github关联起来,下面详细介绍该步操作。</p><h2 id="hexo-与-github-关联"><a href="#hexo-与-github-关联" class="headerlink" title="hexo 与 github 关联"></a>hexo 与 github 关联</h2><h3 id="1-git配置密钥"><a href="#1-git配置密钥" class="headerlink" title="1.git配置密钥"></a>1.git配置密钥</h3><p>这步网上很多教程,不过多描述。</p><h3 id="2-hexo配置"><a href="#2-hexo配置" class="headerlink" title="2.hexo配置"></a>2.hexo配置</h3><p>打开根目录下的 _config.yml配置文件,配置成你所要部署的站点:<br> <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">type</span>: git</div><div class="line">repo: git@github.com:YourRepository.git //修改成你的地址</div><div class="line">branch: master</div></pre></td></tr></table></figure></p><p>安装组件<br> <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-deployer-git --save</div></pre></td></tr></table></figure></p><p>这样就配置完成,然后重新生成及部署<br> <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">hexo clean //清除生成</div><div class="line">hexo generate //生成</div><div class="line">hexo deploy //部署</div></pre></td></tr></table></figure></p><h2 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h2><p>简单的个人博客就搭建好了,当然现在的博客样子并不是你想要的,你需要更改样式主题,目前比较流行的主题就是next了,可以去网上看看配置文档咯。<br>OK 篇幅不算长,但也写了半天,写的不好,多多体谅。</p>]]></content>
<summary type="html">
<h2 id="动机"><a href="#动机" class="headerlink" title="动机"></a>动机</h2><p>由于自己很久以前就有搭建博客的想法,但迟迟没有实现,相信很多同学都跟我一样有这样的问题。所有就想把自己搭建的过程给大家分享下,同时给自己的博
</summary>
<category term="其他分享" scheme="http://st253625445.github.io/tags/%E5%85%B6%E4%BB%96%E5%88%86%E4%BA%AB/"/>
</entry>
<entry>
<title>开启hexo博客之旅</title>
<link href="http://st253625445.github.io/2017/09/14/first/"/>
<id>http://st253625445.github.io/2017/09/14/first/</id>
<published>2017-09-14T02:33:42.000Z</published>
<updated>2017-09-14T02:55:47.570Z</updated>
<content type="html"><![CDATA[<p>很久以前就有搭建自己的博客的想法,但是由于各种问题都没实现。最近看到github 的个人博客开发,觉得挺适合自己的,不用买服务器,前期也不用买域名,就网上查了教程自己搭建了个,虽然不算新鲜东西,但也算是自己的博客起步之旅把。</p><p>这个博客将会记录自己的心情,学习,笔记。</p><p>文笔不好,就这些了。</p>]]></content>
<summary type="html">
<p>很久以前就有搭建自己的博客的想法,但是由于各种问题都没实现。最近看到github 的个人博客开发,觉得挺适合自己的,不用买服务器,前期也不用买域名,就网上查了教程自己搭建了个,虽然不算新鲜东西,但也算是自己的博客起步之旅把。</p>
<p>这个博客将会记录自己的心情,学习,
</summary>
<category term="心情随笔" scheme="http://st253625445.github.io/tags/%E5%BF%83%E6%83%85%E9%9A%8F%E7%AC%94/"/>
</entry>
</feed>