「前端常见简单例题」 | YisuX-lightyisu的个人博客

题目1

请你按照以下要求处理以上的字符串对象 data，
- 以上字符串开头中的星期字符串大小写混乱了，请你先统一格式化它们，确保星期为首字母大写，其余字母小写。比如 "Monday","Tuesday"
- 请您将字符串中符号（"-"）都替换为冒号（":"）
- 请您确保每一个字符串都是以单位 ml 结尾，有些字符串没有带毫升(ml)单位,请您添加上

javascript

const data = [
  "monday - 500ml",
  "mONday - 330",
  "monday - 150ml",
  "Tuesday - 100ml",
  "Tuesday - 330ml",
  "weDnesDay - 230",
  "TursDAy - 330ml",
  "Friday - 500",
  "Saturday - 100ml",
  "sunday - 250",
  "sunday - 100ml",
];
let newdatat = data.map((item) => {
  let temp = item.charAt(0).toUpperCase() + item.slice(1).toLowerCase();
  temp = temp.replace("-", ":");
  if (temp.indexOf("ml") == "-1") {
    temp = temp.concat("ml");
  }
  return temp;
});
console.log(newdatat);

实现某一天饮水信息检索功能。允许用户在搜索输入键入星期数来搜索数据 data 中某一天的饮水信息。
- 搜索应该不区分大小写（因此，输入 MONDAY，应自动过滤为 monday）。
- 此外，应该忽略搜索输入中的前导和尾随空格。
- 搜索 moday 应当返回所有包含 monday 的字符串,如下所示：

javascript

let query = (day, data = newdata) => {
  day = day.toLowerCase().trim();
  day = day[0].toUpperCase() + day.slice(1);
  let query_data = data.filter((item) => item.indexOf(day) != -1);
  console.log(query_data);
};
query(" Tuesday   ");

基于上一个任务检索出来的字符串结果，计算这一天的饮水总量，并且告知用户饮水是否达标。要求饮水 500ml 以上就算达标。
- 截取每一个字符串末尾数字内容（倒数第五位至倒数第三位）
- 计算数字总和（需要将字符串转换为数字类型）
- 如果饮水总量没有达到 500ml 就弹出信息您在星期 x 的饮水量没有达标！ ，否则就提示您在星期 x 的饮水量达标啦！

javascript

let query = (day, data = newdata) => {
  day = day.toLowerCase().trim();
  day = day[0].toUpperCase() + day.slice(1);
  let query_data = data.filter((item) => item.indexOf(day) != -1);
  console.log(query_data);
  let total_water = 0;
  query_data.forEach((item) => {
    water = Number(item.slice(-5, -2));
    total_water += water;
  });

  if (total_water < 500) {
    console.log("no you need more water");
  } else {
    console.log("you pass");
  }
};

题目2

回文检查

javascript

/**
* @param {string} str
* @return {Boolean} 如果是返回 true，如果不是回文字符串 返回 false
*/
function isPalindromicString(str) {
  // 将字符串反转
  const reversedStr = str.split('').reverse().join('');
  // 比较原字符串和反转后的字符串
  return str === reversedStr;
}

// 测试用例
console.log(isPalindromicString("aaa")); // ->true
console.log(isPalindromicString("madam")); // ->true
console.log(isPalindromicString("hello")); // ->false
console.log(isPalindromicString("")); // ->true (空字符串是回文)
console.log(isPalindromicString("a")); // ->true (单个字符是回文)

打字机

javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>请输入文本:</label><input type="text" />
    <button onclick="generateTypeEffect()">生成打字效果</button>
    <h2 id="showText"></h2>
    <script>
      function generateTypeEffect() {
        let text = document.querySelector("input").value;
        const h2 = document.querySelector("#showText");
        console.log(text);
        for (let i = 0; i < text.length; i++) {
          setTimeout(() => {
            h2.innerHTML = text.slice(0, i + 1);
            console.log(text.slice(0, i + 1));
          }, i * 1000);
        }
      }
    </script>
  </body>
</html>

题目3

发布订阅模式

javascript

class PubSub{
    constructor(){
        this.events={}
    }
    subscibe(event,callback){
        if(!this.events[event]){
            this.events[event]=[]
        }
        this.events[event].push(callback)
        //返回一个函数用于后续取消订阅
        return ()=>{
            this.events[event]=this.events[event].filter(cb=>cb!==callback)
        }
    }
    publish(event,data){
        if(!this.events[event]||this.events[event].length===0) return;
        this.events[event].forEach(cb=>cb(data))
    }
    unsubscribe(event,callback){
        if(!this.events[event]) return;
        this.events[event]=this.events[event].filter(cb=>cb!==callback)
    }
}

const pubsub=new PubSub()

const unsubscribeHello=pubsub.subscibe('hello',msg=>{
    console.log('received',msg)
})
pubsub.publish('hello','zzzzwwwkkk')
unsubscribeHello()

发布订阅模式是一种消息传递模式，其中发送者(发布者)不会直接将消息发送给特定的接收者(订阅者)，而是发布到称为"主题"或"事件"的抽象类别中，感兴趣的订阅者可以订阅这些主题。

在代码中：

PubSub 类作为事件总线或调度中心
subscribe 方法允许订阅者注册对特定事件的兴趣
publish 方法允许发布者触发事件并通知所有订阅者
unsubscribe 方法允许取消订阅

与普通函数调用的区别

解耦性：
- 发布订阅模式：发布者和订阅者完全解耦，发布者不需要知道谁在订阅
- 普通调用：调用方需要明确知道被调用方的引用
一对多通信：
- 发布订阅模式：一个发布者可以同时通知多个订阅者
- 普通调用：通常是一对一的直接调用
动态性：
- 发布订阅模式：订阅者可以在运行时动态地订阅或取消订阅
- 普通调用：调用关系在代码中静态定义
扩展性：
- 发布订阅模式：可以轻松添加新的订阅者而不需要修改发布者代码
- 普通调用：添加新的接收者可能需要修改调用方代码
灵活性：
- 发布订阅模式：可以基于事件类型进行选择性通知
- 普通调用：需要明确调用特定函数

示例对比

发布订阅模式（如你的代码）：

javascript

// 多个订阅者可以独立订阅同一事件
pubsub.subscribe('hello', msg => console.log('订阅者1:', msg));
pubsub.subscribe('hello', msg => console.log('订阅者2:', msg));

// 发布者不需要知道谁在订阅
pubsub.publish('hello', '消息内容');

普通函数调用：

javascript

// 调用方需要明确知道被调用方
function subscriber1(msg) {
  console.log('订阅者1:', msg);
}

function subscriber2(msg) {
  console.log('订阅者2:', msg);
}

// 调用方需要显式调用每个订阅者
subscriber1('消息内容');
subscriber2('消息内容');

题目1 ​

题目2 ​

题目3 ​

与普通函数调用的区别 ​

示例对比 ​

题目1

题目2

题目3

与普通函数调用的区别

示例对比