虾皮一面-2

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

1. 算法:字符串去重

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

"abcdfbee"

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

"abcdfe"

javascript 复制代码
//@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,输出渲染结果字符串

javascript 复制代码
//@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. 附加题\] 支持搜索已输入项目

    3. 展示输入的代办事项名称
    4. 每个代办都可以勾选,表示事项完成,完成项目有特殊的划线样式,项目完成后不能再修改
typescript 复制代码
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
    }

  </>;
};
scss 复制代码
.finish {
  text-decoration: line-through;
}

.li {
  display: flex;
  align-items: center;
}
相关推荐
打瞌睡de喵几秒前
JavaScript 空对象检测
javascript
前端太佬2 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Java技术小馆3 分钟前
如何设计一个本地缓存
java·面试·架构
Mintopia3 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特8 分钟前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco8 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊10 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil11 分钟前
CSS专题之外边距重叠
前端·css
hepherd14 分钟前
Flask学习笔记 - 表单
前端·flask
求知呀14 分钟前
最直观的 Cursor 使用教程
前端·人工智能·llm