js 二进制与位运算

生活中，我们经常用到的是以十进制为单位，进位是满 10 进 1，而计算机是用二进制，那么就是满 2 进 1 喽，为什么采用二进制呢？简单说下，Ta的由来其实是根据电路的开关闭合，电路只有 0 和 1，具体的详情这里不多做解释了，可以自行百科^_^。javascript 采用有符号 32 位的 2 进制，可表示 4294967295 个整数(含正负)，范围是 -2147483648(2 的 32 次方) ~ 2147483647。

带符号二进制基本规则与几个概念

在计算机中规定最高位是符号位，0 为正，1 为负。正数表示是原码，负数是原码的补码。

原码

除去符号位，其他 32 位都为正。

例：00000000000000000000000000001010 原码 00000000000000000000000000001010。

反码

所谓反码，除符号位外，其他位 0 变 1，1 变 0。 例：1010 反码 1101

补码

所谓补码，就像是小学学过的 10 进制补数，举个例子就很好理解，3 的补数是多少？是 7。4 的补数是 6，补数就是 10 减去这个数。在二进制的补码就是相加等于 0，互为相反数。

• 0 的补码 0 的原码、反码、补码均为 0
• 正数的补码 原码
• 负数的补码 原码除符号位外的所有位取反+1。如何推出来的，看了一篇文章，挺有意思。点击查看

Web Notifications 技术使页面可以发出通知，通知将被显示在页面之外的系统层面上。能够为用户提供更好的体验，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。

PS：除了IE外，各大现代浏览器都对这个桌面推送有了基本的支持。

脚本运行

建立一个文本文件demo，以.sh结尾的或者不需要后缀都可以。

1
2
3
4

#!/bin/bash
NUM=10
printf "输出数字$NUM\n"
echo $NUM

通过sh或者bash命令运行脚本，sh scriptname 运行一个Bash脚本将会禁止所有Bash的扩展特性。

1
2
3
4
5

# 你能够运行它用命令
sh demo

# 另外也也可以用bash来执行
bash demo

脚本以”#!”行开头，行将会命令解释器(sh或是bash)。#!/bin/rm 当你运行这个脚本时，除了这个脚本消失了之外，你不会发现更多其他的东西。

注释

以#开头的行就是注释，会被解释器忽略。注释行前面也可以有空白字符。

1

# 这是一个注释

命令分隔符

分号;命令分割符，分割符允许在同一行里有两个或更多的命令。

1
2
3
4
5
6
7

echo hello; echo there         # 输出 hello 和 there
filename='cosyer'               # 变量文件名
if [ -x "$filename" ]; then    # 注意："if" and "then"需要分隔符
  echo "File $filename exists."; cp $filename $filename.bak
else
  echo "File $filename not found."; touch $filename
fi; echo "File test complete.

结束符

双分号;;，case语句分支的结束符。

1
2
3
4
5
6
7
8
9

read Keypress
case "$Keypress" in
  [[:lower:]]   ) echo "Lowercase letter";;
  [[:upper:]]   ) echo "Uppercase letter";;
  [0-9]         ) echo "Digit";;
  *             ) echo "Punctuation, whitespace, or other";;
esac      #  允许字符串的范围出现在[]中,
          #+ 或者POSIX风格的[[中.
exit 0

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

Immer 中文文档

前言

Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对JS不可变数据结构的需求。
无奈网络上完善的文档实在太少，所以自己写了一份，本篇文章以贴近实战的思路和流程，对 Immer 进行了全面的讲解。

目录

• 数据处理存在的问题
• 解决引用类型对象被修改的办法
• immer功能介绍
  • 安装immer
  • immer如何fix掉那些不爽的问题
  • 概念说明
  • 常用api介绍
• 用immer优化react项目的探索
  • 抛出需求
  • 优化setState方法
  • 优化reducer
• 参考文档

爱心

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

!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);

实现compose函数的五种思路

• 面向过程
• 函数组合（reduce）
• 函数交织（AOP编程）
• Promise（sequence）
• Generator（yield）

面试流程

大公司面试无论是实习还是校招，普遍存在面试轮次多，面试周期长的特点，就拿腾讯来说，如果你想成为暑期实习生，大概需要四到五轮面试，3-4 轮技术面+一轮 HR 面试，每次面试时间大概在 0.5-1 小时之间，推荐对自己能力没有把握或者缺少工作经验的同学尽可能在大三下学期找找实习，去自己想去的公司实习，因为大三的暑期实习既可以丰富你的履历，并且实习期间好好表现都是可以相对容易地通过转正，拿到校招 offer。

在申请实习或者校招 offer 的时候，尽可能多找人帮忙内推，因为大公司部门比较多，你如果直接从官网上网申的话，简历不容易被人查看，找认识的师兄师姐帮忙内推的优势在于：

1. 能够更有效增加你的简历的曝光，让部门主管能够直接查阅到你的简历
2. 加快面试进度，联系师兄师姐提前知道面试结果
3. 内推或者网申(可能有笔试)完之后，就等待面试官打电话给你，一般他们会跟你通过电话或者短信确认现在是否方便或者约个时间进行面试，面试的方式也分为电话面试，视频面试，现场面试等等。

函数的定义

函数其实就是一个封装一段代码段的对象，那函数名其实仅是用来引用函数对象的一个普通变量

写代码的时候我们避免不了要重复用一些代码，一直重复写很耗时，而且不美观也不利于维护，因此函数的出现就是来让代码重用，便于维护。

一段代码，可能被反复使用，可以定义为函数，然后调用函数来使用这段代码。

在JavaScript中函数就是对象。函数不同于其他对象的决定性特点是，函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是

定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性，这些内部属性都用双重中括号来标注。

[[Call]]属性是函数独有的，表明该对象可以被执行。由于仅函数拥有该属性，ECMAScript定义了typeof操作符对任何具有[[Call]]属性的对

象返回 [object Function]

场景：事件频繁被触发，频繁执行DOM操作、资源加载等重复行为，导致UI停顿甚至浏览器崩溃。如 input 实时搜索、scrollview 滚动更新。

函数防抖和节流用于限制函数的执行。是优化高频率执行js代码的一种手段。