发表于 更新于 分类于

按位非（NOT）

按位非操作符由一个波浪线（~）表示，执行按位非的结果就是返回数值的反码。

对 25 执行按位非操作，结果得到了 -26。这也验证了按位非操作的本质：操作数的负值减 1。

1
2
let a = 25;
console.log(~a);  // -26

按位与（AND）

按位与操作符由一个和号字符（&）表示，它有两个操作符数。

简而言之，按位与操作只在两个数值的对应位都是 1 时才返回 1，任何一位是 0，结果都是 0。

1
2
3
4
5
 25 和 3 执行按位与操作的结果是 1。为什么呢？请看其底层操作：
 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
 ---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001
1
2
let res = 25 & 3;
console.log(res);  // 1

按位或（OR）

按位或操作符由一个竖线符号（|）表示，同样也有两个操作数。

按位或操作在有一个位是 1 的情况下就返回 1，而只有在两个位都是 0 的情况下才返回 0。

1
2
3
4
5
25 与 3 按位或的结果是 27：
25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011
1
2
let res = 25 | 3;
console.log(res);  // 27

按位异或（XOR）

按位异或操作符由一个插入符号（^）表示，有两个操作数。

按位异或的不同之处在于，这个操作在两个数值对应位上只有一个 1 时才返回 1，如果对应的两位都是 1 或都是 0，则返回 0。所以任何数异或 0 都是其本身，两个相同的数进行异或结果为 0。 

1
2
3
4
5
 25 与 3 按位异或的结果是 26，其底层操作如下所示：
 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
 ---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010
1
2
3
4
let res = 25 ^ 3
console.log(res)  // 26
let zero = 200 ^ 0
console.log(zero) // 200

只出现一次的数字 利用异或就可以很轻松的把这道题解决

发表于 更新于 分类于

对数组的排序

1
2
let arr = [1,6,9,3,4,12];
console.log(arr.sort()) // [1, 12, 3, 4, 6, 9]

因为 sort 方法在对数组做排序时，把元素默认成字符串进行相互比较，因此需要添加一个辅助函数，然后 sort 就能根据返回值的情况对数组进行排序

1
2
3
4
5
6
7
8
9
10
11
let arr = [1,6,9,3,4,12];
function compare(a, b) {
    if (a < b) {
        return -1;
    }
    if (a > b) {
        return 1;
    }
    return 0;
}
console.log(arr.sort(compare));  // [1, 3, 4, 6, 9, 12]

上面的方法可以简化为

1
2
let arr = [1,6,9,3,4,12];
console.log(arr.sort((a, b) => a - b));  // [1, 3, 4, 6, 9, 12]

对字符串的排序

1
2
let names = ['Ana','ana','john','John'];
console.log(names.sort())  // ["Ana", "John", "ana", "john"]

为什么会出现上面的结果呢？这是因为 JavaScript 在做字符比较的时候，是根据字符对应的 ASCII 值来比较的，例如 A、J、a、j 对应的 ASCII 值分别是 65、74、97、106，虽然 a 在字母表中是最靠前的，但 J 的 ASCII 值比 a 的小，所以排在了 a 前面。

加入 toLowerCase() 使其按照字母顺序排序

1
2
3
let names = ['Ana','ana','john','John'];
console.log(names.sort((a, b) => a.toLowerCase() - b.toLowerCase()))
//  ["Ana", "ana", "john", "John"]

使用 localeCompare() 可以使小写子母排在前面

1
2
3
let names = ['Ana','ana','john','John'];
console.log(names.sort((a, b) => a.localeCompare(b)))
//  ["ana", "Ana", "john", "John"]

自定义排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const friends = [
    { name: 'John', age: 30 },
    { name: 'Ana', age: 20 },
    { name: 'Chris', age: 25 }
];
function comparePerson(a, b) {
    if (a.age < b.age) {
        return -1;
    }
    if (a.age > b.age) {
        return 1;
    }
    return 0;
}
console.log(friends.sort(comparePerson));
// 0: {name: "Ana", age: 20}
// 1: { name: "Chris", age: 25 }
// 2: { name: "John", age: 30 }

简化一下

1
2
3
4
5
6
const friends = [
    { name: 'John', age: 30 },
    { name: 'Ana', age: 20 },
    { name: 'Chris', age: 25 }
];
console.log(friends.sort((a, b) => a.age - b.age));

发表于 更新于 分类于

防抖

一个比较形象的比喻就是电梯每进来一个人就要等10秒再运行。

防抖函数代码：

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, delay) {
  let timer = null;
  return function () {
    let context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

比较常见的应用是 input 输入框添加防抖

节流

一个比较形象的比喻就是打穿越火线（cf）时，就算一直按着鼠标，也只能在规定射速内射出子弹。

节流代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function throttle(fn, threshhold = 250, scope) {
  let last,
    deferTimer;
  return function () {
    let context = scope || this;

    let now = +new Date,
      args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

比较常见的应用是监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

图片对比

对比

参考

https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function

http://demo.nimius.net/debounce_throttle/

https://remysharp.com/2010/07/21/throttling-function-calls

https://juejin.im/post/5b8de829f265da43623c4261#heading-4