Javascript笔试题目（一）

1.JS查找文章中出现频率最高的单词?

要在JavaScript中查找文章中出现频率最高的单词，你可以按照以下步骤进行操作：

将文章转换为小写：这可以确保单词的比较是大小写不敏感的。
移除标点符号：标点符号会干扰单词的计数。
将文章拆分成单词：可以使用空格或其他分隔符来拆分。
统计每个单词的出现频率：使用一个对象来存储每个单词及其出现的次数。
找出频率最高的单词：遍历统计对象，找出出现次数最多的单词。

以下是一个完整的代码示例：

function findMostFrequentWord(text){
    text=text.toLowerCase();
     
    //移除标点符号（只保留字母和数字，以及空格和单引号用于缩写）
    text=text.replace(/[^\w\s]/g,'').replace(/\s+/g,' ');

    //拆分单词数组
    const words=text.split(' ');
    
    const frequency={};
    
    //统计每个单词的出现次数
    words.forEach(word=>{
        if(frequency[word]){
            frequecy[word]++    
        }else{
          frequency[word]=1;
       }
   });
    // 找出频率最高的单词  
    let mostFrequentWord = '';  
    let maxFrequency = 0;  
      
    for (const word in frequency) {  
        if (frequency[word] > maxFrequency) {  
            mostFrequentWord = word;  
            maxFrequency = frequency[word];  
        }  
    }  
      
    return { word: mostFrequentWord, frequency: maxFrequency }; 

}
// 示例文章  
const article = "This is a test. This test is only a test. In case of an actual emergency, this would be followed by more information. This is only a test.";  
  
// 查找出现频率最高的单词  
const result = findMostFrequentWord(article);  
  
console.log(`The most frequent word is "${result.word}" with a frequency of ${result.frequency}.`);

代码说明：

转换为小写 ：text = text.toLowerCase();
移除标点符号 ：
- text.replace(/[^\w\s']/g, '')：使用正则表达式匹配并移除所有非字母、数字、空格和单引号的字符。
- text.replace(/\s+/g, ' ')：将多个连续的空格替换为一个空格，避免单词计数时出现重复。
拆分成单词数组 ：const words = text.split(' ');
统计每个单词的出现次数 ：
- 使用一个对象 frequency 来存储每个单词及其出现的次数。
- 使用 forEach 遍历单词数组，更新 frequency 对象。
找出频率最高的单词 ：
- 遍历 frequency 对象，找出频率最高的单词及其出现次数。

注意事项：

示例代码中的正则表达式假设文章中不会出现特殊缩写（例如 "i.e."，"e.g." 等），如果有这些缩写，可以根据需要调整正则表达式。
如果文章非常大，可以考虑使用更高效的数据结构或算法，例如使用 Map 对象代替普通对象，或者使用哈希表进行更快速的查找和更新。

2.如何使用JS找到字符串中不重复的最长子串长度?请写出具体代码

要在JavaScript中找到字符串中不重复的最长子串的长度，你可以使用滑动窗口（Sliding Window）技术。滑动窗口是一种有效的算法，它可以在线性时间内解决该问题。以下是一个实现这个算法的示例代码：

function lengthOfLongestSubstring(s){

    let maxLength=0;//做大子串的长度
    let currentLength=0;
    let charIndexMap={};//字符及其索引的映射
    let left=0;//窗口的左边界
    
    for(let right=0;right<s.length;right++){
    
        const char=s[right];
        
        //如果字符已经在窗口中存在，则更新左边界
        if（charIndexMap[char]>=left){
            left=charIndexMap[char]+1;
        }
        
        //更新字符的索引
        charIndexMap[char]=right;
        
        //更新当前窗口的长度
        currentLength=right-left+1;
        
        //更新最大长度
        maxLength=Math.max(maxLength,currentLength);
    }
    
    return maxLength
    
}
// 示例用法  
const inputString = "abcabcbb";  
console.log(`最长的不重复子串的长度是: ${lengthOfLongestSubstring(inputString)}`);

代码解释

初始化变量 :
- maxLength：用于记录最长的不重复子串的长度。
- currentLength：当前窗口的长度。
- charIndexMap：一个对象，用于存储字符及其最近一次出现的索引。
- left：滑动窗口的左边界。
遍历字符串 :
- 使用 right 指针遍历字符串。
- 检查当前字符 char 是否已经在 charIndexMap 中，并且其索引是否在当前窗口内（即索引是否大于等于 left）。
  - 如果是，则移动 left 指针到重复字符的下一个位置，以确保窗口内不包含重复字符。
- 更新字符 char 的索引到 charIndexMap。
更新窗口长度和最大长度 :
- 计算当前窗口的长度 currentLength。
- 使用 Math.max 更新 maxLength，如果 currentLength 大于 maxLength。
返回结果 :
- 返回 maxLength，即最长的不重复子串的长度。

示例

对于输入字符串 "abcabcbb"，代码将输出 3，因为最长的不重复子串是 "abc"、"bca" 或 "cab"，它们的长度都是 3。

3.如何使用JS实现防抖函数?请写出具体代码

防抖函数用于限制某个函数在特定时间间隔内只执行一次，即使该函数在这段时间内被多次触发，即 只有当事件停止触发并经过了预设的等待时间后，才会真正执行}。

防抖（Debounce）是延迟执行，节流（Throttle）是定期执行

防抖（Debounce）与节流（Throttle）：

防抖：在一段时间内多次触发事件时，只在最后一次触发事件后的指定时间内执行一次函数。这可以通过在每次触发事件时清除之前的定时器并设置一个新的定时器来实现。

节流：在一段时间内多次触发事件时，按照指定的时间间隔执行函数。这可以通过记录上一次执行函数的时间，并在每次触发事件时检查是否已达到指定的时间间隔来实现。

防抖函数（Debounce Function）是一种用于限制函数被频繁调用的技术。它确保函数在特定时间间隔内只执行一次，即使在短时间内被多次触发。这在处理如滚动、窗口调整大小、键盘输入等频繁事件时非常有用。

下面是一个使用JavaScript实现防抖函数的示例代码：

// 防抖函数工厂  
function debounce(func, wait) {  
  let timeout;  
  
  return function(...args) {  
    const context = this;  
    clearTimeout(timeout);  
    timeout = setTimeout(() => func.apply(context, args), wait);  
  };  
}  
  
// 示例函数：用于打印日志  
function logMessage(message) {  
  console.log(message, new Date().toLocaleTimeString());  
}  
  
// 使用防抖函数包装示例函数  
const debouncedLogMessage = debounce(logMessage, 2000);  
  
// 示例：绑定到输入框的输入事件  
document.getElementById('inputField').addEventListener('input', function() {  
  debouncedLogMessage('Input event triggered');  
});

代码说明：

防抖函数工厂：

function debounce(func, wait) {
let timeout;

return function(...args) {  
  const context = this;  
  clearTimeout(timeout);  
  timeout = setTimeout(() => func.apply(context, args), wait);  
};

}

func：需要被防抖处理的函数。
wait：等待时间（毫秒），在这个时间段内，无论触发多少次，只执行一次func。
timeout：保存setTimeout返回的定时器ID，用于在下次触发时清除之前的定时器。
返回的函数：在每次事件触发时调用，它会清除之前的定时器并设置一个新的定时器，定时器在wait毫秒后执行func。
示例函数：

function logMessage(message) {
console.log(message, new Date().toLocaleTimeString());
}
logMessage：一个简单的函数，用于打印日志，包含当前时间。
使用防抖函数：

const debouncedLogMessage = debounce(logMessage, 2000);
使用debounce工厂函数创建一个防抖版本的logMessage函数，等待时间为2000毫秒（2秒）。
绑定到事件：

document.getElementById('inputField').addEventListener('input', function() {
debouncedLogMessage('Input event triggered');
});
将防抖函数绑定到输入框的input事件上。这样，无论用户输入多快，logMessage函数最多每2秒执行一次。

注意事项：

防抖函数适用于那些需要限制调用频率的场景，例如搜索自动补全、滚动加载等。
等待时间（wait）应根据具体需求设置，以确保用户体验和性能之间的平衡。

通过上述代码，你可以轻松实现一个防抖函数，并在实际项目中应用。

4.如何使用JS实现节流函数?请写出具体代码

节流函数 用于在特定时间间隔内只允许函数执行一次，以减少函数被频繁调用的次数，提高性能。【在一段时间内控制事件的执行频率】

在JavaScript中，节流函数（Throttle Function）用于限制某个函数在一定时间间隔内的调用次数。它确保函数在指定的时间间隔内只执行一次，即使在时间间隔内该函数被多次触发。以下是一个实现节流函数的示例代码：

// 节流函数工厂  
function throttle(func, limit) {  
  let lastFunc;  
  let lastRan;  
  let context;  
  let args;  
  let result;  
  
  const executeFunc = function() {  
    result = func.apply(context, args);  
    lastRan = Date.now();  
    clearTimeout(lastFunc);  
    lastFunc = null;  
    args = null;  
    context = null;  
    return result;  
  };  
  
  return function(..._args) {  
    context = this;  
    args = _args;  
    const now = Date.now();  
  
    if (!lastRan) {  
      executeFunc();  
    } else {  
      clearTimeout(lastFunc);  
      lastFunc = setTimeout(executeFunc, limit - (now - lastRan));  
    }  
  };  
}  
  
// 示例函数：用于打印日志  
function logMessage(message) {  
  console.log(message, new Date().toLocaleTimeString());  
}  
  
// 使用节流函数包装示例函数  
const throttledLogMessage = throttle(logMessage, 2000);  
  
// 示例：绑定到按钮的点击事件  
document.getElementById('myButton').addEventListener('click', function() {  
  throttledLogMessage('Button clicked');  
});

代码说明：

节流函数工厂：

function throttle(func, limit) {  
  // ...（省略变量声明和内部函数executeFunc）  

  return function(..._args) {  
    // 保存当前上下文和参数  
    context = this;  
    args = _args;  
    const now = Date.now();  

    // 如果上次执行时间不存在（即第一次调用），则立即执行函数  
    if (!lastRan) {  
      executeFunc();  
    } else {  
      // 否则，计算剩余等待时间并设置定时器  
      clearTimeout(lastFunc);  
      lastFunc = setTimeout(executeFunc, limit - (now - lastRan));  
    }  
  };  
}

func：需要被节流处理的函数。
limit：时间间隔（毫秒），在这个时间段内，只允许func执行一次。
lastRan：上次执行函数的时间戳。
lastFunc：保存setTimeout返回的定时器ID，用于在下次触发时清除之前的定时器。
context、args：分别保存函数的上下文（this）和参数，以便在定时器执行时使用。
executeFunc：内部函数，用于实际执行func，并更新lastRan等状态。

示例函数：

function logMessage(message) {  
  console.log(message, new Date().toLocaleTimeString());  
}

logMessage：一个简单的函数，用于打印日志，包含当前时间。

使用节流函数：

const throttledLogMessage = throttle(logMessage, 2000);

使用throttle工厂函数创建一个节流版本的logMessage函数，时间间隔为2000毫秒（2秒）。
绑定到事件：

document.getElementById('myButton').addEventListener('click', function() {
throttledLogMessage('Button clicked');
});
将节流函数绑定到按钮的click事件上。这样，无论用户点击多快，logMessage函数最多每2秒执行一次。

通过上述代码，你可以轻松实现一个节流函数，并在实际项目中应用。

5.如何使用JS实现函数柯里化?请写出具体代码

函数柯里化（Currying）是函数式编程中的一种技术，它将一个多参数的函数转换成一系列只接受一个参数的函数。

函数柯里化（Currying）是函数式编程中的一种技术，它将一个多参数的函数转换成一系列只接受一个参数的函数。通过柯里化，你可以将一个多参数调用转换成一系列嵌套的函数调用。

以下是一个使用JavaScript实现函数柯里化的具体代码示例：

// 柯里化函数工厂  
function curry(fn) {  
  // 获取函数的参数个数  
  const arity = fn.length;  
  
  // 内部递归函数  
  function curried(...args) {  
    // 如果已经传入了所有必要的参数，则调用原函数  
    if (args.length >= arity) {  
      return fn(...args);  
    } else {  
      // 否则，返回一个新的函数，该函数接受剩余的参数  
      return function(...moreArgs) {  
        // 将当前参数和后续参数合并，并递归调用curried函数  
        return curried(...args, ...moreArgs);  
      };  
    }  
  }  
  
  return curried;  
}  
//fn：需要被柯里化的函数。
//arity：原函数的参数个数，通过fn.length获取。
//curried：内部递归函数，它接受任意数量的参数。
//如果传入的参数数量达到了原函数的参数个数，则调用原函数并返回结果。
//否则，返回一个新的函数，该函数接受剩余的参数，并将它们与之前传入的参数合并，然后递归调用curried
//函数。
  
// 示例函数：接受三个参数并返回它们的和  
function add(a, b, c) {  
  return a + b + c;  
}  
  
// 使用柯里化函数工厂包装示例函数  
const curriedAdd = curry(add);  
  
// 使用柯里化后的函数  
console.log(curriedAdd(1)(2)(3)); // 输出: 6  
console.log(curriedAdd(1, 2)(3)); // 输出: 6  
console.log(curriedAdd(1)(2, 3)); // 输出: 6  
console.log(curriedAdd(1, 2, 3)); // 输出: 6

6.如何使用JS实现链式调用?请写出具体代码

在JavaScript中，链式调用（Chaining）是一种常见的设计模式，它允许你在单个表达式中连续调用同一个对象的方法。要实现链式调用，每个方法需要返回对象本身（通常是 this），以便可以继续调用下一个方法。

以下是一个简单的例子，展示了如何实现链式调用：

class ChainExample {  
    constructor(value) {  
        this.value = value;  
    }  
  
    // 第一个方法，返回 this 以实现链式调用  
    addValue(newValue) {  
        this.value += newValue;  
        return this; // 返回对象本身  
    }  
  
    // 第二个方法，返回 this 以实现链式调用  
    multiplyValue(multiplier) {  
        this.value *= multiplier;  
        return this; // 返回对象本身  
    }  
  
    // 获取当前值的方法，不返回 this，返回当前值  
    getValue() {  
        return this.value;  
    }  
}  
  
// 使用链式调用  
const example = new ChainExample(5);  
const result = example  
    .addValue(10)  
    .multiplyValue(2)  
    .getValue();  
  
console.log(result); // 输出 30

在这个例子中：

ChainExample 类有一个构造函数，用于初始化 value 属性。
addValue 方法将传入的 newValue 加到 value 上，并返回 this，以便可以链式调用下一个方法。
multiplyValue 方法将 value 乘以传入的 multiplier，并返回 this。
getValue 方法返回当前的 value，但不返回 this，以结束链式调用。

通过这种方式，你可以在一个表达式中连续调用多个方法，从而简化代码并提高可读性。

7.如何使用JS实现类数组对象转换为数组?请写出具体代码

类数组对象

类数组对象（Array-like object）在JavaScript中是指那些具有整数索引和length属性的对象，但它们并不是真正的数组。类数组对象与数组的区别在于它们没有数组的方法，比如push、pop或map等。尽管如此，它们仍然可以通过索引来访问元素，并且有一个表示元素数量的length属性。

常见的类数组对象包括：

arguments对象 ：在函数内部，arguments对象包含了传递给该函数的所有参数。它是一个类数组对象，因为你可以通过索引来访问每个参数（arguments[0]、arguments[1]等），并且它有一个length属性来表示参数的个数。

NodeList对象 ：通过document.querySelectorAll等方法获取的元素集合是一个NodeList对象。它也是一个类数组对象，因为你可以通过索引来访问集合中的每个元素，并且它有一个length属性。

字符串 ：虽然字符串不是对象（在JavaScript中，字符串是原始数据类型），但你可以像访问数组元素那样访问字符串中的字符（str[0]、str[1]等），并且字符串有一个length属性。然而，由于字符串不是对象，你不能在它们上调用数组方法。但你可以通过将字符串转换为数组（例如使用Array.from(str)或str.split('')）来使用数组方法。

其他自定义的类数组对象 ：你可以创建自己的类数组对象，只要确保它们有整数索引和length属性。

要将类数组对象转换为真正的数组，你可以使用之前提到的方法，如Array.from()、Array.prototype.slice.call()、扩展运算符（...）等。这些方法允许你利用类数组对象的索引和length属性来创建一个新的数组实例，该实例包含与类数组对象相同的元素，并且可以使用数组的所有方法。

Array.from() 是最现代和简洁的方法。
Array.prototype.slice.call() 和 Array.prototype.slice.apply() 兼容性较好，适用于多种环境。
扩展运算符（...）语法简洁，但需要ES6支持。
手动转换方法兼容性较好，但代码相对复杂。

在JavaScript中，可以使用多种方法将类数组对象（如arguments对象或带有数字索引和length属性的对象）转换为数组。以下是几种常见的方法：

方法一：使用 `Array.from()`

Array.from() 是一个简洁且现代的方法，用于从类数组对象或可迭代对象中创建一个新的数组实例。

function exampleFunction() {  
    // 假设我们使用 arguments 对象作为类数组对象  
    var args = Array.from(arguments);  
    console.log(args); // 输出转换后的数组  
}  
  
exampleFunction(1, 2, 3); // 输出: [1, 2, 3]

方法二：使用 `Array.prototype.slice`

**Array.prototype.slice 可以应用于类数组对象，从而返回一个新的数组。**这种方法兼容性好，适用于各种环境。

function exampleFunction() {  
    // 假设我们使用 arguments 对象作为类数组对象  
    var args = Array.prototype.slice.call(arguments);  
    console.log(args); // 输出转换后的数组  
}  
  
exampleFunction(1, 2, 3); // 输出: [1, 2, 3]
------------------------------------------------------
function exampleFunction() {  
    var args = Array.prototype.slice.apply(arguments);  
    console.log(args); // 输出转换后的数组  
}  
  
exampleFunction(1, 2, 3); // 输出: [1, 2, 3]

方法三：使用扩展运算符（Spread Operator）

扩展运算符（...）可以将类数组对象展开为数组。这是一种语法简洁且直观的方法，但需要ES6或更高版本的JavaScript支持。

function exampleFunction() {  
    // 假设我们使用 arguments 对象作为类数组对象  
    var args = [...arguments];  
    console.log(args); // 输出转换后的数组  
}  
  
exampleFunction(1, 2, 3); // 输出: [1, 2, 3]

方法四：使用 `for` 循环手动转换

如果你需要在不支持现代JavaScript特性的环境中手动转换，可以使用 for 循环。

function exampleFunction() {  
    var args = {};  
    args.length = arguments.length;  
    for (var i = 0; i < args.length; i++) {  
        args[i] = arguments[i];  
    }  
    var array = Array.prototype.slice.call(args); // 使用 slice 确保它是真正的数组  
    console.log(array); // 输出转换后的数组  
}  
  
exampleFunction(1, 2, 3); // 输出: [1, 2, 3]

Javascript笔试题目（一）

1.JS查找文章中出现频率最高的单词?

代码说明：

注意事项：

2.如何使用JS找到字符串中不重复的最长子串长度?请写出具体代码

代码解释

示例

3.如何使用JS实现防抖函数?请写出具体代码

代码说明：

注意事项：

4.如何使用JS实现节流函数?请写出具体代码

代码说明：

5.如何使用JS实现函数柯里化?请写出具体代码

6.如何使用JS实现链式调用?请写出具体代码

7.如何使用JS实现类数组对象转换为数组?请写出具体代码

方法一：使用 Array.from()

方法二：使用 Array.prototype.slice

方法三：使用扩展运算符（Spread Operator）

方法四：使用 for 循环手动转换

方法一：使用 `Array.from()`

方法二：使用 `Array.prototype.slice`

方法四：使用 `for` 循环手动转换