虾皮一面-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;
}
相关推荐
R-G-B几秒前
【02】C#入门到精通——C# 变量、输入/输出、类型转换
开发语言·c#·c# 变量·c#输入/输出·c#类型转换
星河队长2 分钟前
C# 软件加密方法,有使用时间限制,同时要防止拷贝
开发语言·c#
史迪奇_xxx13 分钟前
10、一个简易 vector:C++ 模板与 STL
java·开发语言·c++
2301_8012522216 分钟前
Java中的反射
java·开发语言
Kiri霧37 分钟前
Rust开发环境搭建
开发语言·后端·rust
weixin-a1530030831641 分钟前
[数据抓取-1]beautifulsoup
开发语言·python·beautifulsoup
mapbar_front1 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
倔强青铜三1 小时前
苦练Python第67天:光速读取任意行,linecache模块解锁文件处理新姿势
人工智能·python·面试
quweiie1 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀1 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端