TRY CODING FUN

重拾编程的乐趣

0%

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

React 的父子传值，其实非常简单，但是网上基本都是这种的。

Class - 子组件通过 this.props 中获取数据

父组件要向子组件传递 dataFromParent 的值，注意代码中的 dataFromParent 就可以了

Parent.jsx

1
2
3
4
5
6
7
8
9
10
11
class Parent extends React.Component {
  state = { data: 'Hello World' };
  render() {
    return (
      <div>
        <Child1 /> //no data to send
        <Child2 dataFromParent={this.state.data} />
      </div>
    );
  }
}

Child.js

1
2
3
4
5
class Child2 extends React.Component {
  render() {
    return <div>The data from parent is:{this.props.dataFromParent}</div>;
  }
}

如果不知道 state 和 props 都从哪里来，可以看一下 React.Component 文档就好啦

Function - 子组件通过函数的形参获取值

这儿抄一下 React 官方的 demo

父组件要向子组件传递 date 的值，注意代码中的 date 就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(<Clock date={new Date()} />, document.getElementById('root'));
}

setInterval(tick, 1000);

官方文档再此：**State and Lifecycle**

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

题目

斐波那契数，通常用  F(n) 表示，形成的序列称为 斐波那契数列 。该数列由  0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是：

F(0) = 0，F(1) = 1
F(n) = F(n - 1) + F(n - 2)，其中 n > 1
给你 n ，请计算 F(n) 。

题解

暴力递归，存在大量重复计算，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
var fib = function (N) {
  if (N == 0) return 0;
  if (N == 1) return 1;
  return fib(N - 1) + fib(N - 2);
};

降维打击，解决重复计算问题，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {number} N
 * @return {number}
 */
var fib = function (N) {
  var dp = [0, 1, 1];
  for (var i = 3; i <= N; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[N];
};

再次降维，优化，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
6
7
8
9
10
11
12
var fib = function (N) {
  if (N == 0) return 0;
  if (N == 2 || N == 1) return 1;
  var prev = 1,
    curr = 1;
  for (var i = 3; i <= N; i++) {
    var sum = prev + curr;
    prev = curr;
    curr = sum;
  }
  return curr;
};

后记

本文的代码摘自 - js数据结构-链表
JS中的算法与数据结构——链表(Linked-list)
数据结构：链表

发表于 更新于 分类于
本文字数： 2.7k 阅读时长 ≈ 2 分钟

题目

给你一个字符串 s，以及该字符串中的一些「索引对」数组 pairs，其中 pairs[i] = [a, b] 表示字符串中的两个索引（编号从 0 开始）。

你可以 任意多次交换 在 pairs 中任意一对索引处的字符。

返回在经过若干次交换后，s 可以变成的按字典序最小的字符串。

示例 1:

1
2
3
4
5
输入：s = "dcab", pairs = [[0,3],[1,2]]
输出："bacd"
解释：
交换 s[0] 和 s[3], s = "bcad"
交换 s[1] 和 s[2], s = "bacd"

示例 2：

1
2
3
4
5
6
输入：s = "dcab", pairs = [[0,3],[1,2],[0,2]]
输出："abcd"
解释：
交换 s[0] 和 s[3], s = "bcad"
交换 s[0] 和 s[2], s = "acbd"
交换 s[1] 和 s[2], s = "abcd"

示例 3：

1
2
3
4
5
6
输入：s = "cba", pairs = [[0,1],[1,2]]
输出："abc"
解释：
交换 s[0] 和 s[1], s = "bca"
交换 s[1] 和 s[2], s = "bac"
交换 s[0] 和 s[1], s = "abc"

并查集

说实话，我用笨办法也许可以试试解这道题，但是在学习过程中最大的收获应该是并查集这一块，解这道题之前最好先整明白什么是并查集

学习打卡 JavaScript并查集
数据结构与算法并查集
Javascript数据结构之并查集
算法学习笔记(1) : 并查集

另外几道题的题解，用到了并查集，这几道题我没做出来。
399. 除法求值
官方的并查集

阅读全文 »

发表于 更新于 分类于
本文字数： 2.6k 阅读时长 ≈ 2 分钟

题目

在一个由小写字母构成的字符串 s 中，包含由一些连续的相同字符所构成的分组。

例如，在字符串 s = "abbxxxxzyy"  中，就含有 "a", "bb", "xxxx", "z" 和 "yy" 这样的一些分组。

分组可以用区间 [start, end] 表示，其中 start 和 end 分别表示该分组的起始和终止位置的下标。上例中的 "xxxx" 分组用区间表示为 [3,6] 。

我们称所有包含大于或等于三个连续字符的分组为 较大分组 。

找到每一个 较大分组 的区间，按起始位置下标递增顺序排序后，返回结果。

题解

先写一个能用的

执行用时：96 ms, 在所有 JavaScript 提交中击败了 82.86%的用户

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
/**
 * @param {string} s
 * @return {number[][]}
 */
var largeGroupPositions = function (s) {
  let arr = [];
  let temp = [];
  debugger;
  for (let index = 0; index < s.length; index++) {
    const element = s[index];
    if (temp[0] == undefined) {
      temp[0] = {
        index,
        element,
      };
    } else {
      if (temp[0].element == element) {
        temp[1] = {
          index,
          element,
        };
        if (temp[1] && temp[1].index && temp[1].index - temp[0].index >= 2) {
          if (arr[arr.length - 1] && arr[arr.length - 1][0] == temp[0].index) {
            arr[arr.length - 1] = [temp[0].index, temp[1].index];
          } else {
            arr[arr.length] = [temp[0].index, temp[1].index];
          }
        }
      } else {
        console.log(temp);

        temp[0] = {
          index,
          element,
        };
      }
    }
  }
  return arr;
};

console.log('object', largeGroupPositions('aaa'));
// largeGroupPositions("abcdddeeeeaabbbcd")
阅读全文 »

发表于 更新于 分类于
本文字数： 3.7k 阅读时长 ≈ 3 分钟

记一下巩固 js 时碰到的一些基础知识

null 和 undefined

null 表示”没有对象”，即该处不应该有值。

  1. 作为函数的参数，表示该函数的参数不是对象。
  2. 作为对象原型链的终点。

undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。

  1. 变量被声明了，但没有赋值时，就等于 undefined。
  2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined。
  3. 对象没有赋值的属性，该属性的值为 undefined。
  4. 函数没有返回值时，默认返回 undefined。
阅读全文 »

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

题目

斐波那契数，通常用  F(n) 表示，形成的序列称为 斐波那契数列 。该数列由  0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是：

F(0) = 0，F(1) = 1
F(n) = F(n - 1) + F(n - 2)，其中 n > 1
给你 n ，请计算 F(n) 。

题解

暴力递归，存在大量重复计算，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
var fib = function (N) {
  if (N == 0) return 0;
  if (N == 1) return 1;
  return fib(N - 1) + fib(N - 2);
};

降维打击，解决重复计算问题，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {number} N
 * @return {number}
 */
var fib = function (N) {
  var dp = [0, 1, 1];
  for (var i = 3; i <= N; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[N];
};

再次降维，优化，不明白的往下翻看一下下面的干货题解就行了。

1
2
3
4
5
6
7
8
9
10
11
12
var fib = function (N) {
  if (N == 0) return 0;
  if (N == 2 || N == 1) return 1;
  var prev = 1,
    curr = 1;
  for (var i = 3; i <= N; i++) {
    var sum = prev + curr;
    prev = curr;
    curr = sum;
  }
  return curr;
};

干货题解

官方题解
动态规划套路详解
题解 - 上面的代码就是这儿抄的

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

简单了解一下 promise

参考文章

简单实现

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
class Promise {
  constructor(fn) {
    this.state = 'pending';
    this.values = null;
    this.resolveList = [];
    this.rejectList = [];
    try {
      fn(resolve, reject);
    } catch (e) {
      reject(e);
    }
    function resolve(value) {
      if (this.state === PENDING) {
        this.state = RESOLVED;
        this.value = value;
        this.resolveList.map((cb) => cb(this.value));
      }
    }

    function reject(value) {
      if (this.state === PENDING) {
        this.state = REJECTED;
        this.value = value;
        this.resolveList.map((cb) => cb(this.value));
      }
    }

    this.then = (onFulfilled, onRejected) => {
      onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (v) => v;
      onRejected =
        typeof onRejected === 'function'
          ? onRejected
          : (r) => {
              throw r;
            };
      if (this.state === PENDING) {
        this.resolveList.push(onFulfilled);
        this.rejectList.push(onRejected);
      }
      if (this.state === RESOLVED) {
        onFulfilled(this.value);
      }
      if (this.state === REJECTED) {
        onRejected(this.value);
      }
    };
  }
}
阅读全文 »

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

我近期在写一个 chrome 插件，这个插件会操作页面上的 dom 元素，但是插件自身有时候也会对页面上的 dom 元素产生影响。这给我带来的不小的麻烦。

查资料的时候发现了 shadowRoot，看上去很好使。唯一要解决的就是将 vue 代码挂载到 shadowRoot 中的元素上

创建 shadow-root 的 dom

1
2
3
4
5
// 创建 shadow-root 的 dom
let shadowRootDom = document.createElement('div');
shadowRootDom.setAttribute('id', 'shadow-root');
document.body.appendChild(shadowRootDom);
const shadow = document.querySelector('#shadow-root').attachShadow({mode: 'open'});

在 shadow-root 插入 <div id="chrome-extension-root"></div> 方便vue去挂载

1
2
3
4
5
// 在 shadow-root 插入 `<div id="chrome-extension-root"></div>` 方便vue去挂载
let chromeExtensionRootDom = document.createElement('div');
chromeExtensionRootDom.setAttribute('id', 'chrome-extension-root');
shadow.appendChild(chromeExtensionRootDom);
let getChromeExtensionRootDom = shadow.querySelector('#chrome-extension-root')

使用vue挂载

1
2
3
4
5
// 使用vue挂载
new Vue({
  el: getChromeExtensionRootDom,
  render: (h) => h(root),
});

发表于 更新于 分类于
本文字数： 2.1k 阅读时长 ≈ 2 分钟

今天早上听我司架构讲了一下公司后面的前端架构之后回来重写了一下 vue 的脚手架，但是碰到了一些奇怪的问题。

配置 webpack

我用的是 webpack5，根据文档建议，用了 vue-loader

复制文档给的wepack代码如下：

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
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
  ],
};
阅读全文 »

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

搜集一些群里看到的代码。

为秀而秀，一行走天下

  • 是 f(x) 如果 x=1 就 true, 0 就 false，undefined 回''，其他都 undefined
  • 参与群友：霜霜家 💕 小迷妹 💕-Pomo（资深c lang java lang 开发，算法工程师，深度学习开发 湿鸡-叉叉（资深前端专家） 写作星空，读作 NASA（资深前端、React开发工程师，高级游戏玩家）
1
2
3
4
5
6
7
8
9
var r = (_) => ([false, true][_] === undefined ? '' : [false, true][_]);

a === 1 ? true : a === 0 ? false : undefined;

var a = (_) => {
  return_ === undefined ? _ : Boolean(_);
};

var a = { 0: false, 1: true };

递归处理树（我也不知道怎么描述）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 数据
let data = {
  a: 1,
  b: 2,
};

// 详细信息
let list = {
  a: { c: 3, d: 4 },
  b: 2,
  c: { d: 4, e: 5 },
  d: 4,
  e: 5,
};

// 期望递归处理后得到结果
let out = {
  a: { c: { d: 4, e: 5 } },
  b: 2,
};

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function resolve(params, list) {
  const res = {};
  for (const key in params) {
    if (Object.prototype.hasOwnProperty.call(params, key)) {
      if (typeof list[key] == 'object') {
        res[key] = resolve(list[key], list);
      } else {
        res[key] = list[key];
      }
    }
  }
  return res;
}

resolve(data,list)