虾​皮​一​面​-​2

很舒服，没有八股，算法全手撕出来了。

1. 算法：字符串去重

设计一个 javascript 函数，实现字符串去重

“abcdfbee”

参数是字符串，返回值是去掉其中重复字符的字符串

“abcdfe”

//@ts-check

/**
* @param {string[]} arr
*/
const MySet=(arr)=>{
    return arr.reduce((pre,cur)=>{
        if(pre.includes(cur)){
            return pre;
        }
        return [...pre,cur];
    },[])
}
/**
* @param {string} str
*/
const stringSet=(str)=>{
    return [...MySet(str.split(''))].join('');
}
console.log(stringSet('abcdfbee'));

2. 树转字符串（深度优先搜索）

要求实现一个 javascript 函数，输入节点 Node，输出渲染结果字符串

//@ts-check
/**
 * @typedef {{text: string;children?: MyNode[]}} MyNode
* @param {MyNode} node
*/
const render=(node)=>{
    return `${node.text}${node.children?.reduce((pre,cur)=>{
        return pre+render(cur);
    },'') ?? ''}`
}
console.log(render({
    text: "hello",
    children: [{
        text: "Hello"
   }],
}))
console.log(render({
text: "Hello",
children: [
{
 text: "World",
 children: [{ text: "1"}]
 },
 { text: "Kitty" }
]
}))

3. React Todo List

设计一个 Todo List 组件

1. 使用 React 或者 Vue3 编写，可以使用熟悉的 UI 库
2. 使用 Typescript
3. 输入框
   1. 用于输入代办事项名称，在输入框中按回车后，将输入框中的文本加入代办列表
   2. [附加题] 支持搜索已输入项目
4. 代办列表
   1. 展示输入的代办事项名称
   2. 每个代办都可以勾选，表示事项完成，完成项目有特殊的划线样式，项目完成后不能再修改

import { useState } from "react";
import style from './index.module.scss';

export function TodoList () {
  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useState<string[]>([]);
  const [searchVal, setSearchVal] = useState('');
  return <><div>
    <input type='search'
      value={searchVal}
      onChange={e => setSearchVal(e.target.value)}
      placeholder='搜索'
    /></div>
    <div>
      <input
        placeholder="输入"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
        onKeyDown={e => {
          if (e.keyCode === 13) {
            setTodoList([...todoList, inputValue]);
            setInputValue('');
          }
        }}
      /></div>
    <ul>
      {
        todoList.map(t => <>
          <TODO t={t} searchVal={searchVal} />
        </>)
      }
    </ul>
  </>;
}
const TODO = ({ t, searchVal }: { t: string; searchVal: string; }) => {

  const [isFinish, setIsFinish] = useState(false);
  return <>
    {
      t.includes(searchVal) ? <li className={style['li']}>
        <p
          className={isFinish ? style['finish'] : ''}
        >{t}</p>
        <input type='checkbox'
          onChange={() => {
            setIsFinish(true);
          }}
          disabled={isFinish}
        />
      </li> : null
    }

  </>;
};

.finish {
  text-decoration: line-through;
}

.li {
  display: flex;
  align-items: center;
}