虾皮一面-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;
}
相关推荐
艾小逗42 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
董先生_ad986ad2 小时前
C# 中的 `lock` 关键字本质
开发语言·c#
元亓亓亓2 小时前
Java后端开发day36--源码解析:HashMap
java·开发语言·数据结构
道剑剑非道2 小时前
QT 打包安装程序【windeployqt.exe】报错c000007d原因:Conda巨坑
开发语言·qt·conda
小邓儿◑.◑3 小时前
C++武功秘籍 | 入门知识点
开发语言·c++
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
_一条咸鱼_4 小时前
深度揭秘!Android HorizontalScrollView 使用原理全解析
android·面试·android jetpack
_一条咸鱼_4 小时前
揭秘 Android RippleDrawable:深入解析使用原理
android·面试·android jetpack
_一条咸鱼_4 小时前
深入剖析:Android Snackbar 使用原理的源码级探秘
android·面试·android jetpack