Toypipi's blog

发表于 分类于 本文字数： 389 阅读时长 ≈ 1 分钟

Vue 2.x 的虚拟 DOM 采用的是基于 Snabbdom 库实现的 diff 算法。其基本思想是通过比较新旧节点，找出它们之间的差异，然后将这些差异应用于真实 DOM 上，从而最小化 DOM 操作次数，提高渲染效率。

Vue 2.x 的 diff 算法主要分为以下几个步骤：

  1. 新旧节点的比较：首先比较新旧节点的类型和标签名，如果不同，则直接替换整个节点；如果相同，则继续比较节点的属性和子节点。

  2. 属性的比较：对于同一节点，比较它们的属性是否相同，如果不同，则更新属性值。

  3. 子节点的比较：对于同一节点，比较它们的子节点是否相同，如果不同，则递归地对子节点进行比较。

  4. 列表的比较：对于列表节点，比较它们的子节点是否相同，如果不同，则使用 diff 算法找出它们之间的差异，然后更新列表。

  5. 键值的比较：在进行列表比较时，如果节点具有 key 值，则通过 key 值来快速定位节点，从而提高比较效率。

总的来说，Vue 2.x 的 diff 算法是一种高效的算法，可以最小化 DOM 操作次数，提高渲染效率。但是，开发者仍然需要注意一些性能问题，如避免过多的嵌套组件、避免重复渲染等，以优化应用程序的性能。

发表于 分类于 本文字数： 827 阅读时长 ≈ 3 分钟

垃圾回收机制

JavaScript 的垃圾回收机制是自动的，也就是说，开发者不需要手动释放内存。JavaScript 引擎会自动跟踪内存中所有对象的引用，并在对象没有被引用时自动释放其占用的内存空间。

垃圾回收器会定期扫描内存中的对象，并标记那些被引用的对象。然后，它会删除那些没有被标记的对象，并将它们占用的内存空间释放回系统。这个过程被称为垃圾回收。

JavaScript 中的垃圾回收器使用的是基于标记和清除（Mark and Sweep）算法的垃圾回收机制。这个算法的基本思想是，通过遍历所有的对象，标记那些仍然被引用的对象，然后删除那些没有被标记的对象。

这个算法有一个缺点，就是在执行标记和清除算法的过程中会暂停 JavaScript 的执行。这个暂停时间的长短取决于需要清理的内存空间的大小。为了解决这个问题，现代浏览器使用了一些优化算法，如增量标记和清除、分代回收等，来减少垃圾回收的暂停时间。

总的来说，JavaScript 的垃圾回收机制是非常高效和自动化的，开发者不需要手动管理内存。但是，开发者仍然需要注意一些内存泄漏的情况，如循环引用、全局变量等，以避免浪费内存和影响性能。

阅读全文 »

发表于 更新于 分类于 本文字数： 134 阅读时长 ≈ 1 分钟

DESCRIPTION

Write a function that when given a URL as a string, parses out just the domain name and returns it as a string.

SOLUTION

  • 方法一：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function domainName(url) {
  let domain;
  // find & remove protocol (http, ftp, etc.) and get domain
  if (url.indexOf("://") > -1) {
    domain = url.split("/")[2];
  } else {
    domain = url.split("/")[0];
  }
  // remove port number if any
  domain = domain.split(":")[0];
  // remove www if any
  domain = domain.replace("www.", "");
  // remove .com if any
  domain = domain.replace(".com", "");
  return domain.split(".")[0];
}
阅读全文 »

发表于 分类于 本文字数： 272 阅读时长 ≈ 1 分钟

The Hashtag Generator

The marketing team is spending way too much time typing in hashtags. Let’s help them with our own Hashtag Generator!

Here’s the deal:

It must start with a hashtag (#). All words must have their first letter capitalized. If the final result is longer than 140 chars it must return false. If the input or the result is an empty string it must return false.

SOLUTION

  • 方法一：普通循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function generateHashtag(str) {
  // 判断是否是空字符串，或只包含多个空格的字符串
  if (str.length === 0 || str.replace(/\s+/g, "").length === 0) {
    return false;
  }
  // 将每个单词的首字母大写
  let words = str.split(" ");
  for (let i = 0; i < words.length; i++) {
    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
  }
  // 拼接 #
  let result = "#" + words.join("");
  return result.length > 140 ? false : result;
}
阅读全文 »

发表于 分类于 本文字数： 320 阅读时长 ≈ 1 分钟

DESCRIPTION

Create a function that takes a Roman numeral as its argument and returns its value as a numeric decimal integer. You don’t need to validate the form of the Roman numeral.

Modern Roman numerals are written by expressing each decimal digit of the number to be encoded separately, starting with the leftmost digit and skipping any 0s. So 1990 is rendered “MCMXC” (1000 = M, 900 = CM, 90 = XC) and 2008 is rendered “MMVIII” (2000 = MM, 8 = VIII). The Roman numeral for 1666, “MDCLXVI”, uses each letter in descending order.

注意一点：题目没有描述，当较小的值出现在较大的值之前时，将从较大的值中减去该值。可参考文末的引用链接。

SOLUTION

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
function solution(roman) {
  // 定义一个罗马数字到整数的映射
  const romanMap = {
    I: 1,
    V: 5,
    X: 10,
    L: 50,
    C: 100,
    D: 500,
    M: 1000,
  };
  // 初始化结果变量，以存储罗马数字的最终值
  let result = 0;
  // 遍历罗马数字
  for (let i = 0; i < roman.length; i++) {
    // 获取当前字母和下一个字母
    let letter = roman[i];
    let letterAfter = roman[i + 1];
    // 如果当前字母小于后一个字母，则从结果中减去当前字母的值
    if (romanMap[letter] < romanMap[letterAfter]) {
      result -= romanMap[letter];
    } else {
      // 如果当前字母大于后一个字母，则从结果中加上当前字母的值
      result += romanMap[letter];
    }
  }
  // 返回罗马数字的最终值
  return result;
}
阅读全文 »
0%