标签： JavaScript

本人折腾了一个很简单的算法，但一直出错。有点没头绪，突然发现自己可能发生了一个大乌龙。JavaScript的数组索引不能取负数。因为，自己先有接触过python的语法。python的数组索引可以取负数，例如arr[-1]就是指取数组的最后一位，也就是倒数第一位。直至今天：

1
2
3

let arr=[1,2,3];
//underfined
console.log(arr[-1]);

才发现自己闹出个大笑话。

标签： javascipt

直接放代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var x = "hiohadlkioyiyimfia";
function count(str){
  var obj = {};
  for(var i=0;i<str.length;i++){
    if(!obj[str.charAt(i)]){
       obj[str.charAt(i)] = 1;
    }else{
      obj[str.charAt(i)]++;
    }
  }
  return Object.entries(obj).map(i=>i[1]).sort((a, b) => b - a)[0];
    // return Object.entries(obj).map(i=>i[1]).reduce((a,b)=>a > b ? a : b);
}
console.log(count(x));

全部修改为箭头函数

1
2
3
4
5
6

const count=(str)=> {
      let obj=str.split('').reduce((m, n) => (m[n]++ || (m[n] = 1), m), {})
      return Object.entries(obj).map(i=>i[1]).reduce((a,b)=>a > b ? a : b);
};
var x = "ayeiorewoajupoao";
console.log(count(x));

标签： web JavaScript python

https://www.zhihu.com/question/41493194
这里说明一下，这题我早就见过很相似的题目，不用循环，创建一个长度为500，每个元素都为m的数组。
当时，我就确定了两个思路，一个是使用递归（至今都不会），一个是使用map。做法：

1

Array(100).map(e=>"m")

结果，当然是出错了，数组是(100) [empty × 100]，这样的数组每个元素是undefined，是不能改变的。这样的数组叫稀释数组！直到今天，我在GitHub上看到这样的代码。

1
2
3
4
5
6
7

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

//[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]
console.log(chunk([1, 2, 3, 4, 5], 2));

一开始我就懵了，这是闹哪样啊？我可没见过这样的es6语法啊，后在MDN上看Array.from的准确用法看到这样的例子。

1
2

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

灵机一动，这不就是我积压已久问题的答案吗？

1

Array.from({length: 500}, (v) => "m");

后来进行搜索到了知乎（逼乎），看到上面的链接，才知道上面是神仙打架。比较相似和简洁的答案

1
2
3
4
5
6
7

Array.from(Array(100).keys())


 or


 [...Array(100).keys()]

递归写法：

1
2
3
4
5
6
7
8
9
10
11

function reduce(prev, curr) {
  if (curr >= 100) {
    return prev
  }
  prev.push(curr)
  return reduce(prev, curr + 1)
}

var arr = reduce([], 0)

console.log(arr);

也有写一大串字符串，再用.split(‘’)组成数组（密集数组），再替换的（不推荐不简洁）

1
2
3

'1'.repeat(100).split('').map((e,i)=>e=i);

Array(100).fill(0).map((item,index)=>index);

很搞事的idea
1<<24,也就是1向左移24位,也就是2的24次方,一共有25位，每个数组匹配4个1111，这样就有长度为100的字符串。

1

(1<<24).toString(2).replace(/\d/g,'1111').split('').map((e,i)=>e=i);

贴个python的来捣乱

1

print range(1,101)

还有很多方法，我还没有去研究，不过现在还是去看GitHub吧，远离逼乎！

带缓动效果返回顶部的按钮

标签： web

现在，当你浏览一个页面，滚动页面后会发现右下自动出现返回顶部按钮。其中我就很喜欢虎扑返回顶部按钮的设计（我应该是hupu最捞的JR吧）。

由于这个原因，自己也对返回顶部比较陌生，看了张鑫旭老师的博客
http://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/有了点想法，就自己试做了一下。下面放出主要代码（还有很多不足之处和不规范的地方等我日后再来完善吧）。

1
2
3
4
5
6
7
8
9
10

html:
  <div class="goTop">
        <!-- 注意backToTop()，不要忘记括号 -->
        <div class="rocket">
          <a class="clickTop"onclick="backToTop(6)">
            <img src="grey.png" >
          </a>
          </div>
      </div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.goTop{
  // 定位
      display: block;
      z-index: 999;
      bottom: 100px;
      position: fixed;
      right: 2%
    }

    .clickTop{
      cursor: pointer;
    }

    .clickTop:hover {
    content: url(red.png);
}

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

var show=document.querySelector('.clickTop');

window.onload=function () {
      show.style.display = "none";
}
  window.onscroll = function () {
  //这样写不够简洁，现在精力不够日后再完善
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
      //通过更改css属性来显示和隐藏
          show.style.display = "block";
      }
      else {
        show.style.display = "none";
      }
  }

  // requestAnimationFrame的兼容处理
  if (!window.requestAnimationFrame) {
  requestAnimationFrame = function(fn) {
      setTimeout(fn, 17);
  };
  }
// 滚动到顶部缓动实现
// rate表示缓动速率，默认是2
var backToTop = function (rate) {
//获取当前页面滚动条纵坐标的位置（可能为了浏览器的兼容）
  var doc = document.body.scrollTop? document.body : document.documentElement;
  var scrollTop = doc.scrollTop;
  var top = function () {
   // 默认为2
      scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);

      // 临界判断，终止动画
      if (scrollTop < 1) {
          doc.scrollTop = 0;
          return;
      }
      doc.scrollTop = scrollTop;
      // 动画gogogo!
      //回调函数
      requestAnimationFrame(top);
  };
  top();
  };

网站应该使用的是jQuery来控制效果吧。确实jQuery调用函数控制会比较简单漂亮，不过我对jQuery很陌生就算了。

标签： css 笔记

此文作为个人阅读css世界的记录。

这是简单给图片添加透明遮罩层效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgbox{
            width:200px;
            height: 140px;
            position:relative;
            overflow: hidden;
        }
        img{
            width:100%;
        }
        .imgbox:after{
            position:absolute;
            /* 不能少 */
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            display: block;
            width:50%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            /* 应用了css世界p97中同时实现竖直和水平居中方法 */
            margin:auto;
            text-align: center;
            /* 设置文字竖直居中 */
            line-height: 70px;
            transition: all 1s ease;
            /* 改变遮罩层位置 */
            transform: translateY(150%);
            color: #FFF;
        }
        .imgbox:hover:after{
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="imgbox" data-text="hello">
            <img src="./1.jpg" alt="">
    </div>
</body>
</html>

通过alt在图片还没加载就显示提示信息，还有用content更换图片。

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style media="screen">
   div{
     text-align: center;
   }
   img {
  display: inline-block;
  width: 256px; height: 192px;
  /* 隐藏Firefox alt文字 */
  color: transparent;
  position: relative;
  overflow: hidden;
}

img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;
}

img::before {
    /* 淡蓝色占位背景 */
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #f0f3f9;
    visibility: visible;
}

img::after {
    /* 黑色alt信息条 */
    content: attr(alt);
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    transform: translateY(100%);
    /* 来点过渡动画效果 */
    transition: transform .5s;
    visibility: visible;
}

img:hover::after {
    transform: translateY(0);
}

.gal:hover {
    content: url(1.png);
}
   </style>
 </head>
 <body>
   <div>
   <img alt="沉思图" data-src="1.jpg">
  <p><button>设置src属性显示图片</button></p>
  <img class="gal" src="1.jpg">
</div>
  <script type="text/javascript">
  var eleButton = document.querySelector('button'),
  eleImg = document.querySelector('img');

if (eleButton && eleImg) {
  var initValueButton = eleButton.innerHTML;
  // 图片地址 先把图片地址保存在srcImage中
  var srcImage = eleImg.getAttribute('data-src');
  // 移除该属性
  eleImg.removeAttribute('data-src');
  // 按钮点击事件
  eleButton.addEventListener('click', function() {
      if (this.innerHTML == initValueButton) {
        //改变按钮
          this.innerHTML = '移除src属性';
          //添加src属性显示图片
          eleImg.setAttribute('src', srcImage);
      } else {
        //改变按钮
          this.innerHTML = initValueButton;
          // src属性移除
          eleImg.removeAttribute('src');
      }
  });
}
  </script>
 </body>
 </html>

标签： 数学

1, 2, 4, 8, 16，31……

当我打开一个b站视频
https://www.bilibili.com/video/av17442695/
看到当用直线连接圆上各点时(n=1,2,3,4,5)所划分的区域数目构成数列是1, 2, 4, 8, 16，31……，你能求出通项公式吗？
单看前四项，肯定会以为是2的n次方，但是第5个为什么是奇数？


很遗憾，我毫无头绪。可能脑子离开数学太久了吧。看到评论区贴上知乎的答案后，仔细阅读并思考后有感而发写下本文。
b站原作者的答案
https://www.bilibili.com/video/av19849697/?from=search&seid=1097064019385868872
视频制作是作者自制的python库，在GitHub上开源
https://github.com/3b1b/manim
b站有大神的教程：
https://www.bilibili.com/read/cv17444
下面我主要引述知乎大神的答案进行解释：
知乎链接：https://www.zhihu.com/question/49249958/answer/116348707?utm_source=qq&utm_medium=social
作者：匡世珉
他提供非常好的几何解释。
首先研究一条线是怎么划分圆？

线a从左往右画的时候，碰到别的线（如图中的绿线）就将绿线与圆划分的区域再划分两个子区域（+1），依次类推直线之间的交点都会把圆的区域多划分一份。当直线a继续画，到达右边的终点时，线a也会圆多划分一份。
所以，总份数应该是 1+『圆内部的交点数量』+『直线段的数量』。
1代表是圆本身为一份。
直线段的数量，则从圆上n个点中任选2个点连接直线的直线数量:具体公式暂时不知道怎么在md写，可以查看知乎链接。
那圆内部的交点数量怎么求呢？我们可以把圆内部的每个交点看成是某个圆内接四边形的对角线交点，于是在n个点中，任意四个点的组合都对应了圆内部的某个交点。

所以求圆内部的交点数相当于是求『n个点中选4个点有几种选法』

通项公式还可以有各种数学方法求出。
但是，存在两个巧合:1.为什么，n较少时为什么是2的n次幂？
2.当n等于10时，巧合区域为256？

解答这个问题，就要提到杨辉三角；
百度百科
https://baike.baidu.com/item/%E6%9D%A8%E8%BE%89%E4%B8%89%E8%A7%92/215098?fr=aladdin

杨辉三角形的构造方法：
每一个数被复制了两份，分别加进了左下角与右下角的两个数中。

下一行的和是上一行的两倍，而由于第一行的和是1，所以每一行的和就都是2的幂啦！
另一种表现形式：

这里，我也是第一次见，直接引用知乎作者的介绍：

所以，当n=6时，即可转化为图中绿色的组合数求和，重新写回数字形式


把两个15再转化为10和5

现在一眼就明白为什么当n=6，它是31，因为它缺少右边的1。
同理，当n=10，刚好是上一列的一半，所以就是256。

第一次看到杨辉三角时，还是在廖雪峰老师的python（不好意思，中途弃学了）https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014317799226173f45ce40636141b6abc8424e12b5fb27000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

def triangles(n):
    # 创建初始值为1的数组
    L = [1]
    while True:
        # yield是生成器函数专属关键词，函数进行到这里中断，再执行时从中断处再进行
        yield L
        # 重新声明这个数组，用循环计算下一列中间部分的数值（每列首尾都为1），长度正好是上一列的长度-1
        L = [L[x]+L[x+1] for x in range(len(L)-1)]
        # insert(0,1)在数组的开头插入1，insert(index,object),JS对应的方法是splice(0,0,1)
        # splice(par1,pa2,par3) par1是起始位置，par2是删除项数(0就可以替换)，par3是object
        L.insert(0,1)
        # append和JS的append用法相同
        L.append(1)
        # 判断推出条件
        if len(L)>n:
            break
for l in triangles(8):
    print(l)

附一个fib函数

1
2
3
4
5
6
7

def fib(max):
    n, a, b = 0, 0, 1
    while n < max:
        yield b
        a, b = b, a + b
        n = n + 1
    return 'done'

注：

1
2
3

t = (b, a + b) # t是一个tuple
a = t[0]
b = t[1]

再附廖老师的关于yield文章
https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/

这篇文章写的比较杂乱，也有很多不足，请多包涵。

标签： 笔记 python 简单算法

K最邻算法(KNN算法）

• 前言

我第一次见到此算法(k-nearest neighbour)，是在《机器学习实战》中，也是用python实现的。那时看的比较匆忙，应该不怎么理解，这次再深入理解吧！算法图解这本书已经接近尾声了，过一阵子我会好好写《机器学习实战》的笔记。（难度很大，会参考其他大神的笔记，更新会慢很多）。
KNN算法只要应用在分类。

• 原理简述和举例
  首先，明确分类的依据是事物的特征。而特征可分为能用数字表示和不能用数字表示两类。例如，年龄，长度和体重可以用数字表示，但像形状，气味等感官特征就难以用数字表示，这时我们可以人为规定数字给相应的特征。
  然后将这些表示在坐标系中表示出来（人类的思维）。如下图，就是两个特征坐标系。
  举例说明：
  你有三个水果，想判断它们分别是柚子还是橙子。这时，你会想到从两个特征来分类，一是个头大小，二是红的程度。（书本假定，柚子比橙子更红更大），然后用欧式距离公式计算该点与其他点的距离。这个例子中，K选择为1，即选择最近点来衡量该点是柚子还是橙子。
  

注意：这里有两个特征所以为平面坐标系，当超过三个特征就难以用图形（人类难以理解）表示出来，不过距离公式还是相同。

补充

算法图解只是简单介绍KNN算法，关于此算法的优缺点，K的选择等会在我写《机器学习实战》笔记更详细介绍。总的来说，这算法还是挺有趣的，而且很实用。

第10章的练习都值得思考（参考答案）。

标签（空格分隔）： 简单算法 笔记 python

动态规划

动态规划原理是先解决子问题，再逐步解决大问题。
简单例子（背包问题）：你是小偷，现有一个容量为4磅的背包。商店有三种商品为：$3000的音响重为4磅；$2000的笔记本电脑重为3磅，$1500的吉他重为1磅。你怎样偷窃才能获利最多？

最简单的办法：遍历所有可能组合，找到最值钱的组合。可惜存在一个巨大的缺点，算法运行时间为O(2^n),慢如蜗牛。
合理的方法（动态归划）：原理是先解决小背包（子背包）问题，再逐步解决原来的问题。通过迭代当前容量最大价值解决问题，如下图：

局限：但仅当每个子问题都是离散的，即不依赖于其他子问题时，动态规划才管用。举例，有限时间在英国各地游览和中途去法国各景点游览。

启示：

• 动态规划可帮助你在给定约束条件下找到最优解。在背包问题中，你必 须在背包容量给定的情况下，偷到价值最高的商品。

• 在问题可分解为彼此独立且离散的子问题时，就可使用动态规划来解决。

• 每种动态规划解决方案都涉及网格。

• 单元格中的值通常就是你要优化的值。在前面的背包问题中，单元格的值为商品的价值。

• 每个单元格都是一个子问题，因此你应考虑如何将问题分成子问题，这有助于你找出网格的坐标轴。

最长公共子串

当你不小心hish，输入法怎样会提供相近的单词fish作为参考，而不是vista？这是就要计算最长公共子串(是网格中最大的数字)，如下图：


由此，输入法判断的是fish作为参考。
具体代码实现，以后再补充。

最长公共子序列

假设你不小心输入了fosh，原本想输入的是fish还是fort呢?
可以看出，两个单词和fosh的最长公共子串都为2，这是就要判断最长公共子序列，计算公式如下图：


所以输入法判断想输入的是fish。
具体代码，以后补充。

小结

标签： 简单算法 笔记 python

贪婪算法思想：

每步都选择局部最优解，最终得到的就是全局最优解。

集合覆盖问题

假如你办了个广播节目。要让全美50个州的听众都收听到，为了支付较低的费用，你决定在尽可能少的广播台播出。
每个广播台都覆盖特定的区域，不同广播台的覆盖区域可能重叠。

求完美解的时间复杂度O(2^n),会导致运行时间太长，不符合实际应用。
我们可以采用近似算法，贪婪算法解决。

衡量一种近似算法的好坏只要有两种标准：

1. 运行速度；
2. 得到的近似解与最优解的接近程度。

运用贪婪算法解决集合覆盖问题

假设有如下的州：

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

#传入一个州数组并转换为集合set，表示还需要覆盖州
states_needed = set(["mt", "wa", "or", "id", "nv", "ut", "ca", "az"])  
#用散列表表示可选电台
stations = {}
stations["kone"] = set(["id", "nv", "ut"])
stations["ktwo"] = set(["wa", "id", "mt"])
stations["kthree"] = set(["or", "nv", "ca"])
stations["kfour"] = set(["nv", "ut"])
stations["kfive"] = set(["ca", "az"])
#存储最终选择的电台
final_stations = set()
#选择最佳的未选择电台
#循环直至覆盖完
while states_needed:
  best_station = None
#包含该电台覆盖的所有未覆盖的州
  states_covered = set()
  #第一个参数返回散列表的键，第二个参数返回散列表的值
  for station, states_for_station in stations.items():
  #计算交集
  #它包含当前电台覆盖的 一系列还未覆盖的州
    covered = states_needed & states_for_station
  #判断最佳电台
    if len(covered) > len(states_covered):   
      best_station = station   
      states_covered = covered

  states_needed -= states_covered   
  final_stations.add(best_station)  

 print final_stations

set:
集合的特点是去重，在前面的博文有提过用JS的Set对象，进行去重。我猜测JS应该借鉴了python吧。
集合运算：|（并集）,&（交集）, -（差集）
item():
Python 字典 items() 方法以列表返回可遍历的(键, 值) 元组数组。

NP完全问题

旅行商问题：游览n个城市（不重复），可能的路径有多少条？
答案是：n!。当要求精确求出最短路径时，就需遍历n!条路径（当n=10时，n!= 3 628 800）。可以看出，当n越大，路径就急速增加，所以求出精确解也是不符实际。所以，只能近似求解。
上述的旅行商问题和集合覆盖问题同属于NP完全问题，对于此类问题较为合适的方法是近似求解，而不是求完美解。
这样就诞生一个新的问题：什么问题才是NP完全问题？
NP完全问题特征：

• 元素较少时算法的运行速度非常快，但随着元素数量的增加，速度会变得非常慢。
• 涉及“所有组合”的问题通常是NP完全问题。
• 不能将问题分成小问题，必须考虑各种可能的情况。这可能是NP完全问题。
• 如果问题涉及序列（如旅行商问题中的城市序列）且难以解决，它可能就是NP完全问题。
• 如果问题涉及集合（如广播台集合）且难以解决，它可能就是NP完全问题。
• 如果问题可转换为集合覆盖问题或旅行商问题，那它肯定是NP完全问题。

idea:

• 贪婪算法与内存管理
• 没点数学思维，快递我都送不好，快递小哥辛苦了！

标签： 笔记 简单算法 python

狄克斯特拉算法

要计算非加权图中的最短路径，可使用广度优先搜索。要计算 加权图中的最短路径，可使用狄克斯特拉算法。

实例分析：

在这张图上，你怎样用最少的钱将乐谱交换到钢琴？这时就要使用狄克斯特拉算法。

1. 找出最便宜的节点，即可在最短时间内前往的节点。
2. 对于该节点的邻居，检查是否有前往它们的更短路径，如果有，就更新其开销。
3. 重复这个过程，直到对图中的每个节点都这样做了。
4. 计算最终路径。

算法执行后更新的开销如下表：

从此，可以看出最低花销是35，如何将交换路线确定？只需从钢琴出发，不断求父节点直到乐谱为止就可以确定了。
补充：此算法不适用于负加权的图，若有负加权，应采用贝尔曼-福得算法（Bellman-Ford algorithm）。以后我会补充说明

代码实现狄克斯特拉算法

以上图为例，进行实现。
准备：
要构建两个散列表（costs&parents)和一个图（graph)。

• costs散列表
  用来存储每个节点的开销，算法代码运行后会更新起点到该节点的最低花销。

  1 2 3 4 5 6 7

  #假设到达终点的花销为无穷大 infinity=float("inf") #使用python的字典 costs={} costs["a"]=6 costs["b"]=2 cost["fin"]=infinity

• parents散列表
  存储各节点的父节点的散列表，算法代码运行后会更新起点到终点花销最低的路线（从终点不停找父节点直至起点）。

  1 2 3 4 5

  parents={} parents["a"]="start" parents["b"]="start" #将终点节点的父节点设为空 parents["fin"]=None

• graph图

  1 2 3 4 5 6 7 8 9 10

  graph={} graph["start"]={} graph["start"]["a"]=6 graph["start"]["b"]=2 graph["a"] = {} graph["a"]["fin"] = 1 graph["b"] = {} graph["b"]["a"] = 3 graph["b"]["fin"] = 5 graph["fin"] = {}

  实现：
  

详细部分和思路请浏览第7章后半部分。

小结：

• 广度优先搜索用于在非加权图中查找最短路径。
• 狄克斯特拉算法用于在加权图中查找最短路径
• 仅当权重为正时狄克斯特拉算法才管用。
• 如果图中包含负权边，请使用贝尔曼-福德算法。

标签： 笔记 基础算法 python

数据结构

队列是一种先进先出（First In First Out，FIFO）的数据结构，而栈是一种后进先出（Last In First Out，LIFO）的数据结构。

简单图的python表示

1
2
3
4
5
6
7
8
9

graph = {}
graph["you"] = ["alice", "bob", "claire"]
graph["bob"] = ["anuj", "peggy"]
graph["alice"] = ["peggy"]
graph["claire"] = ["thom", "jonny"]
graph["anuj"] = []
graph["peggy"] = []
graph["thom"] = []
graph["jonny"] = []

补充：散列表是无序的，因此添加键—值对的顺序无关紧要。

图分为有向图和无向图（等价）。

广度优先搜索算法示例

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

from collections import deque
def search(name):
#创建一个双端队列
  search_queue = deque()
#将你的邻居都加入到这个搜索队列中
  search_queue += graph["you"]
  searched = []
  while search_queue:
    person = search_queue.popleft()
  #当此人不被标记是才判断
    if not person in searched:
      if person_is_seller(person):
        print person + " is a mango seller!"
        return True
      else:
        search_queue += graph[person] s
        earched.append(person)
  return false

#简单的判断函数
def person_is_seller(name):     
  return name[-1] == 'm'


search("you")

广度优先搜索的运行时间为 O(人数 + 边数)，这通常写作O(V + E)，其中V为顶点（vertice）数，E为边数。

标签： 数组 JavaScript

前言

  博客第一篇技术文章（非常基础,因为我太菜了）总结了几种不同方法的数组去重方法。文章不是很全面，还有例如利用对象唯一性去重等方法，可是我觉得太麻烦和有些缺点就没有收集了。

双循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function unique(arr) {
      var result = [];
      for (var i = 0; i < arr.length; i++) {
        //对于原数组的每个元素遍历
        for (var j = i + 1; j < arr.length; j++) {
          //对选定元素跟后面的各个元素遍历比较
          if (arr[i] === arr[j]) {
            // 遇到重复元素就跳过
            j = ++i;
          }
        }
        //将不重复的元素添加到result数组
        result.push(arr[i]);
      }
      return result;
    }

说明：这就是基本的双循环去重。注释已经较好的说明原理，注意的就是j=++i;相当于j = j+1; i = i+1;。

sort()

1
2
3
4
5
6
7
8
9
10
11
12

function unique(arr) {
    var result = [];
    //先将原数组排序，再比较
    arr.sort();
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] != arr[i + 1]) {
      //元素跟后一个元素比较，不同则添加
        result.push(arr[i]);
      }
    }
    return result;
  }

说明：由于排序的缘故，元素只需跟后一个元素比较就可以了，该方法效率偏低，但思路很清晰。

indexOf()

1
2
3
4
5
6
7
8
9
10

function unique(arr) {
      var result = [];
      for (var i = 1; i < arr.length; i++) {
        if (result.indexOf(arr[i]) === -1) {
        //在result中没找到的元素，就进行添加
          result.push(arr[i]);
        }
      }
      return result;
    }

说明：indexOf()是es5的语法，对它不熟悉的话可以点击下面的链接浏览一下。去重的原理是indexOf()会对没找到的元素，返回-1，此时添加此元素即可去重。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

includes()

1
2
3
4
5
6
7
8
9

function unique(arr) {
      var result = [];
      arr.forEach(function(item) {
        if (!newArr.includes(item)) {
          result.push(item);
        }
      });
      return result;
    }

说明：原理跟上面的indexOf()一样，值得注意的是forEach()是es5语法，ie6-8是不能用的，mdn上有兼容的方法。forEach()的作用是遍历数组元素，对它们执行相同的方法。includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。下面链接介绍它们的用法。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Map（es6)

对于es6不熟悉的人（我）可以看看阮一峰大神的著作，里面就有详细的Map和Set的说明
http://es6.ruanyifeng.com/#docs/set-map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function unique(arr) {
      const res = new Map();
      return arr.filter((a) => !res.has(a) && res.set(a, 1))
    }

    function unique0(arr) {
      var result = [];
      var len = arr.length;
      var tmp = new Map();
      for (var i = 0; i < len; i++) {
        if (!tmp.get(arr[i])) {
          tmp.set(arr[i], 1);
          result.push(arr[i]);
        }
      }
      return newArr;
    }

说明：关于这部分我还不是很熟悉，待我研究后再来补充吧。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

Set（es6)

1
2
3
4

function unique(arr) {
//使用Array.from()将Set对象转化为数组
      return Array.from(new Set(arr));
    }

1
2

// 拓展运算符(…)内部使用for...of循环,for...of支持数组，和类数组对象
let result=[...new Set(arr)];

说明：你没看错，去重就这么简单，具体的原理我再来补充吧！

标签： PS4 神秘海域 失落的遗产

起因

  第一篇文章写一下年后通关的神海4DLC吧，用来熟悉一下Markdown语法和用hexo搭建的博客吧。对于这个博客还有很多不熟悉的地方，样式也是照搬别人家的，慢慢的继续研究吧，欲速而不达。对于搭建自己的blog，虽然没有绑定域名，还是很兴奋的算是实现一个很酷的想法吧。

背景

  首先，自己对神秘海域4是有特殊情感的，它是我第一款PS4游戏，第一个通关的PS4游戏，第一个获得白金奖杯的游戏。

  至今还记得，奈特在嵩山峻岭中飞檐走壁，在枪林弹雨中肉搏杂兵（我是近战莽夫流，哈哈），在长草中悄无声息的暗杀敌人，在沉船中和Rafe比剑，与妻子在家打电动，与山姆在碧海中遨游。最后还有在白金路上的苦苦挣扎。

感想

  在这里先赞一下这个DLC做的不错，长度不是太长，但玩的我畅快淋漓，热血沸腾。这次故事发生在印度，但其文化背景我通关后还是弄不明白什么湿婆啊，象神啊。不过还是给我带来耳目一新的感觉，场景细节塑造的太好了（比神海4又进步了），看到那些雕像和壁画真的栩栩如生。战斗方面，敌人好像没本篇的强大，但是地形实在太恶劣，一会是悬崖，一会是四通八达的山洞（最后一章死的心态有点爆炸）。结尾的追逐战高潮迭起，狠揍那个反抗军首领解气，还有山姆宝宝的搞笑担当。虽然，知道神秘海域系列就此完结，但没有一丝遗憾，反而有一种由衷的满足感。在我的游戏史，可能忘不了这群欢乐的宝藏盗贼吧。希望，将来顽皮狗在最后生还者2给我更大的惊喜吧！

结尾

  未来，我会勤奋的更博（主要总结自己学习的心得）好好装扮这个blog，还要接触更多的技术。就说这么多吧，bye!

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment