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

//1.柯里化函数1
function add(){let args=Array.prototype.slice.call(arguments);console.log(args)let inner=function (..._args){console.log(_args)// contact时返回新数组//Array.prototype.push.apply(args, _args)与 args.push(..._args)//arguments与_args//** 剩余参数（数组）与arguments对象不共存//** arguments（类数组）【Array.prototype.slice.call(arguments)将其转换为数组】// Array.prototype.push.apply(args, _args);args.push(..._args)console.log(args)return inner;}//重写toString方法inner.toString=function (){return args.reduce(function (prev,cur){return prev+cur;},0)};return inner;
}
let result=add(1)(2);
console.log(result.toString())

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]

1.如何使用ES6语法对函数所有参数进行求和?请写出具体代码

function sumAll(...args) {  // args 是一个数组，包含了函数接收到的所有参数  return args.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
}  // 测试函数  
console.log(sumAll(1, 2, 3, 4)); // 输出: 10  
console.log(sumAll(5, 10, 15));  // 输出: 30  
console.log(sumAll(2.5, -1, 3.5)); // 输出: 5

2.如何使用JS 实现交换两个变量的值（不使用临时变量)?写出具体代码

方法一：使用数组解构赋值（ES6）

这是ES6引入的一种非常简洁且易读的方法，利用数组解构的特性来交换变量的值。

let a = 5;  
let b = 10;  // 使用数组解构赋值交换变量值  
[a, b] = [b, a];  console.log(a); // 输出: 10  
console.log(b); // 输出: 5

方法二：通过数学运算（适用于数字）

你可以通过加减运算或异或运算来交换两个数字变量的值。但请注意，异或运算方法在某些情况下可能不太直观，且仅限于整数。

加减运算

let a = 5;  
let b = 10;  a = a + b; // a 现在是 15  
b = a - b; // b 现在是 5 (因为 a 是 15, 15 - 10 = 5)  
a = a - b; // a 现在是 10 (因为 a 是 15, 15 - 5 = 10)  console.log(a); // 输出: 10  
console.log(b); // 输出: 5

异或运算（仅限整数）

定义：异或运算符表示两个值如果不同则为真（1），相同则为假（0）。

let a = 5; // 二进制: 0101  
let b = 10; // 二进制: 1010  a = a ^ b; // a 现在是 15 (二进制: 1111), 相当于两个数不进行进位的相加  
b = a ^ b; // b 现在是 5  (二进制: 0101), 相当于原a的值  
a = a ^ b; // a 现在是 10 (二进制: 1010), 相当于原b的值  console.log(a); // 输出: 10  
console.log(b); // 输出: 5

3.如何使用JS实现将对象转换为树形结构?请写出具体代码

在JavaScript中，将对象数组转换为树形结构是一个常见的任务，特别是在处理具有层级关系的数据时。假设你有一个对象数组，其中每个对象都有一个唯一的id和一个指向其父节点的parentId（对于根节点，parentId可能是null或undefined），你可以通过以下步骤将其转换为树形结构。

以下是一个具体的代码示例，它展示了如何将这样的对象数组转换为树形结构：

// 示例数据：一个对象数组，每个对象有id和parentId属性  
const data = [  { id: 1, parentId: null, name: 'Root 1' },  { id: 2, parentId: 1, name: 'Child 1.1' },  { id: 3, parentId: 1, name: 'Child 1.2' },  { id: 4, parentId: 2, name: 'Grandchild 1.1.1' },  { id: 5, parentId: null, name: 'Root 2' },  { id: 6, parentId: 5, name: 'Child 2.1' },  
];  // 函数：将对象数组转换为树形结构  
function arrayToTree(items) {  // 创建一个空对象来存储树节点，以id为键  const idMapping = {};  // 创建一个数组来存储根节点（没有parentId的节点）  const rootNodes = [];  // 遍历数据项，构建idMapping和根节点数组  items.forEach(item => {  // 将当前项添加到idMapping中  const { id } = item;  idMapping[id] = { ...item, children: [] };  // 检查是否有parentId，如果有，则将其添加到父节点的children数组中  if (item.parentId !== null) {  // 确保父节点已经存在于idMapping中（对于根节点，这一步会在后面的迭代中完成）  if (!idMapping[item.parentId]) {  idMapping[item.parentId] = { children: [] };  }  // 将当前项添加到父节点的children数组中  idMapping[item.parentId].children.push(idMapping[id]);  } else {  // 如果没有parentId，则这是根节点，添加到根节点数组中  rootNodes.push(idMapping[id]);  }  });  // 返回根节点数组，即树形结构的根  return rootNodes;  
}  // 调用函数并打印结果  
const tree = arrayToTree(data);  
console.log(JSON.stringify(tree, null, 2));

在这个示例中，arrayToTree函数接收一个对象数组items作为参数，并返回一个树形结构的数组。树形结构中的每个节点都有一个children数组，用于存储其子节点。函数首先创建一个空对象idMapping来存储每个节点，并以节点的id作为键。然后，它遍历输入数组，将每个节点添加到idMapping中，并根据parentId将其添加到父节点的children数组中。最后，函数返回根节点数组，即没有parentId的节点。

4.如何使用JS解析URL参数为对象?请写出具体代码

方法一：使用正则表达式和`split`方法

这种方法通过正则表达式匹配URL中的查询字符串部分，并使用split方法将其拆分为键值对，然后进一步处理以生成对象。

// 示例URL，包含查询参数  
const url = 'https://example.com/page?name=JohnDoe&age=30&city=NewYork';  // 提取查询字符串部分（?后面的部分）  
const queryString = url.split('?')[1];  // 创建一个空对象来存储参数  
const paramsObject = {};  // 如果没有查询字符串，则直接返回空对象  
if (!queryString) {  return paramsObject;  
}  // 使用正则表达式和split方法将查询字符串拆分为键值对数组  
const pairs = queryString.split('&').map(pair => pair.split('='));  // 遍历键值对数组，并将它们添加到对象中  
pairs.forEach(([key, value]) => {  // 对键和值进行解码（如果需要）  const decodedKey = decodeURIComponent(key);  const decodedValue = decodeURIComponent(value || ''); // 处理没有值的情况，例如 ?key&anotherKey  paramsObject[decodedKey] = decodedValue;  
});  // 输出结果对象  
console.log(paramsObject);

方法二：利用内置URLSearchParms

// 示例URL，包含查询参数  
const url = 'https://example.com/page?name=JohnDoe&age=30&city=NewYork';  // 创建一个URL对象（注意：这里只使用了URL的构造函数来解析字符串，并没有实际发起网络请求）  
const parsedUrl = new URL(url);  // 使用URLSearchParams对象来解析查询字符串  
const params = new URLSearchParams(parsedUrl.search);  // 将URLSearchParams对象转换为一个普通的JavaScript对象  
const paramsObject = {};  
for (const [key, value] of params.entries()) {  paramsObject[key] = value;  
}  // 输出结果对象  
console.log(paramsObject);

5.如何使用JS实现每隔一秒打印1,2,3，4?请写出具体代码

方法一：setInterval(fun,interval)

在JavaScript中，你可以使用setInterval函数来每隔一段时间执行一次指定的代码。以下是一个具体的代码示例，展示了如何每隔一秒打印数字1, 2, 3, 4：

// 定义一个计数器变量  
let counter = 1;  // 定义一个函数来打印当前计数器的值  
function printNumber() {  console.log(counter);  // 检查是否已经打印完所有数字  if (counter === 4) {  // 清除定时器，停止进一步执行  clearInterval(intervalId);  } else {  // 递增计数器  counter++;  }  
}  // 使用setInterval设置定时器，每隔1000毫秒（1秒）执行一次printNumber函数  
const intervalId = setInterval(printNumber, 1000);

方法二：使用`setTimeout`递归调用

你可以使用setTimeout函数来设置一个延时，然后在延时结束后执行一个函数。在这个函数内部，你可以打印当前的数字，并再次设置setTimeout来延时执行下一个数字的打印。这种方法通过递归调用自身来实现循环。

let counter = 1;  function printNumber() {  console.log(counter);  counter++;  if (counter <= 4) {  // 使用setTimeout设置1000毫秒（1秒）后的延时调用  setTimeout(printNumber, 1000);  }  
}  // 初次调用printNumber函数  
printNumber();

方法三：使用`requestAnimationFrame`与自定义计时（不推荐）

let counter = 1;  
let startTime = performance.now(); // 获取高精度当前时间  
let interval = 1000; // 所需的时间间隔，以毫秒为单位  function printNumberAndRequestNextFrame() {  const currentTime = performance.now();  if (currentTime - startTime >= interval) {  console.log(counter);  counter++;  if (counter <= 4) {  startTime = currentTime; // 重置开始时间以计算下一个间隔  requestAnimationFrame(printNumberAndRequestNextFrame);  }  } else {  // 如果没有达到间隔，则再次请求下一帧  requestAnimationFrame(printNumberAndRequestNextFrame);  }  
}  // 初次调用函数  
requestAnimationFrame(printNumberAndRequestNextFrame);

然而，需要注意的是，这种方法可能会因为屏幕刷新率的差异而引入一些不准确性。因此，对于需要精确时间间隔的任务，通常建议使用setInterval或setTimeout。

6.如何使用JS实现双向数据绑定?请写出具体代码

方法一：使用 `Object.defineProperty` 实现数据双向绑定

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Object.defineProperty 双向绑定</title>  
</head>  
<body>  <div>  <input type="text" id="inputBox">  <p>你输入的内容是: <span id="displayBox"></span></p>  </div>  <script>  // 创建一个数据对象  const data = {};  // 使用 Object.defineProperty 来定义数据属性及其 getter 和 setter  Object.defineProperty(data, 'text', {  get() {  return this._text;  },  set(value) {  this._text = value;  // 更新 DOM ，通知依赖项修改 document.getElementById('displayBox').textContent = value;  },  configurable: true,  enumerable: true  });  // 初始化私有属性 _text  data._text = '';  // 获取输入框和显示框的 DOM 元素  const inputBox = document.getElementById('inputBox');  const displayBox = document.getElementById('displayBox');  // 监听输入框的 input 事件  inputBox.addEventListener('input', function() {  // 更新数据对象的 text 属性，这会触发 setter 并更新 DOM  data.text = inputBox.value;  });  // 初始化显示框的内容  displayBox.textContent = data.text;  </script>  
</body>  
</html>

方法二：使用 `Proxy` 实现数据双向绑定

Proxy:

let target = {  foo: 'bar'  
};  let handler = {  get(target, property) {  console.log(`Getting ${property}`);  return target[property];  },  set(target, property, value) {  console.log(`Setting ${property} to ${value}`);  target[property] = value;  return true; // 表示设置成功  }  
};  let proxy = new Proxy(target, handler);  console.log(proxy.foo); // 输出: Getting foo，然后输出: bar  
proxy.foo = 'baz';      // 输出: Setting foo to baz  
console.log(proxy.foo); // 输出: Getting foo，然后输出: baz

要使用Proxy实现数据双向绑定，我们需要创建一个代理对象来监听对原始数据对象属性的读写操作。当这些属性被读取或修改时，我们可以执行一些自定义的逻辑，比如更新DOM元素以反映数据的变化。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Proxy 双向绑定示例</title>  
</head>  
<body>  <div>  <input type="text" id="inputField">  <p>你输入的内容是: <span id="displayField"></span></p>  </div>  <script>  // 原始数据对象  const data = { text: '' };  // Proxy handler，用于拦截对原始对象的操作  const handler = {  get(target, property, receiver) {  // 读取属性时，直接返回原始值  return Reflect.get(target, property, receiver);  },  set(target, property, value, receiver) {  // 设置属性时，更新原始值并触发DOM更新  Reflect.set(target, property, value, receiver);  updateDOM(property, value);  return true; // 表示设置成功  }  };  // 创建代理对象  const proxyData = new Proxy(data, handler);  // 更新DOM的函数  function updateDOM(property, value) {  if (property === 'text') {  document.getElementById('displayField').textContent = value;  }  }  // 获取DOM元素并设置初始值  const inputField = document.getElementById('inputField');  const displayField = document.getElementById('displayField');  displayField.textContent = proxyData.text; // 初始化显示  // 监听输入框的input事件  inputField.addEventListener('input', function() {  // 更新代理对象的text属性，这会触发Proxy的set方法并更新DOM  proxyData.text = inputField.value;  });  </script>  
</body>  
</html>

在这个示例中，我们做了以下几件事：

创建了一个原始数据对象data，它有一个text属性。
定义了一个handler对象，它有两个方法：get和set。get方法用于拦截对属性的读取操作，set方法用于拦截对属性的设置操作。
使用Proxy构造函数创建了一个代理对象proxyData，它代理了原始数据对象data，并使用了我们定义的handler。
定义了一个updateDOM函数，用于在属性被设置时更新DOM元素。
获取了输入框和显示框的DOM元素，并设置了显示框的初始值。
为输入框添加了input事件监听器，当用户输入时，更新代理对象的text属性。由于代理对象的set方法被拦截，这会触发updateDOM函数来更新显示框的内容。

这样，当用户在输入框中输入文本时，显示框的内容会实时更新，实现了数据的双向绑定。

7.如何使用JS实现一个简单的路由功能?请写出具体代码

Javascript与前端路由相关webAPI-CSDN博客

在JavaScript中实现一个简单的路由功能，可以使用前端路由技术，这通常用于单页面应用（SPA）。前端路由通过在浏览器历史记录中添加和监听不同的路径来实现页面的无刷新切换。以下是一个使用纯JavaScript实现简单路由功能的示例：

HTML

首先，我们需要一些基本的HTML结构来容纳我们的视图（页面）：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Simple Routing</title>  <style>nav {display: flex;justify-content: space-around; /* 或者使用 space-between, flex-start, center 等 */align-items: center;background-color: #333; /* 背景颜色可以根据需求调整 */padding: 10px;}.router-link {color: white; /* 链接文字颜色 */text-decoration: none; /* 去掉链接下划线 */padding: 10px 20px; /* 链接内边距，可以根据需求调整 */transition: background-color 0.3s ease; /* 背景色过渡效果 */}.router-link:hover {background-color: #575757; /* 鼠标悬停时背景颜色 */}</style>
</head>  
<body>  <nav>  <a href="/home" class="router-link">Home</a>  <a href="/about" class="router-link">About</a>  <a href="/contact" class="router-link">Contact</a>  </nav>  <div id="app"></div>  <script src="router.js"></script>  
</body>  
</html>

JavaScript (router.js)

接下来，我们在router.js文件中实现路由功能：

// 创建一个简单的路由类  
class Router {  constructor() {  this.routes = {};  this.currentRoute = null;  this.appElement = document.getElementById('app');  // 监听点击事件，阻止默认行为并处理路由  document.querySelectorAll('.router-link').forEach(link => {  link.addEventListener('click', (e) => {  e.preventDefault();  this.navigateTo(e.target.getAttribute('href'));  });  });  // 监听 popstate 事件以处理浏览器前进/后退按钮  window.addEventListener('popstate', (e) => {  this.navigateTo(document.location.pathname);  });  // 初始化路由，处理页面加载时的路由  this.init();  }  init() {  this.navigateTo(document.location.pathname);  }  defineRoute(path, component) {  this.routes[path] = component;  }  navigateTo(path) {  // 规范化路径，确保路径以 '/' 开头  if (!path.startsWith('/')) {  path = '/' + path;  }  // 更新浏览器历史记录  history.pushState({}, '', path);  // 渲染相应的组件  if (this.routes[path]) {  this.currentRoute = path;  this.appElement.innerHTML = ''; // 清空之前的视图  this.appElement.appendChild(this.routes[path]());  } else {  // 处理 404 页面  this.appElement.innerHTML = '<h1>404 - Page Not Found</h1>';  }  }  
}  // 定义一些简单的组件  
function HomeComponent() {  const div = document.createElement('div');  div.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page!</p>';  return div;  
}  function AboutComponent() {  const div = document.createElement('div');  div.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>';  return div;  
}  function ContactComponent() {  const div = document.createElement('div');  div.innerHTML = '<h1>Contact Page</h1><p>Contact us at example@example.com.</p>';  return div;  
}  // 初始化路由并定义路由规则  
const router = new Router();  
router.defineRoute('/home', HomeComponent);  
router.defineRoute('/about', AboutComponent);  
router.defineRoute('/contact', ContactComponent);

- 一个导航栏，每个链接都带有router-link类，这些链接用于触发路由。
- #app元素是我们放置不同页面组件的地方。
JavaScript路由：
- Router类：管理路由定义、导航和视图渲染。
- constructor：初始化路由，监听链接点击和浏览器前进/后退按钮。
- init方法：在页面加载时初始化路由。
- defineRoute方法：定义路径和对应的组件。
- navigateTo方法：处理路径导航，更新浏览器历史记录，并渲染相应的组件。
- HomeComponent、AboutComponent和ContactComponent：简单的组件函数，返回包含HTML内容的div元素。

通过这种方式，你可以实现一个简单的前端路由系统，用于单页面应用。