Javascript口试手撕常见标题（回顾一）

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

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

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

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

1. function findMostFrequentWord(text){
2.     text=text.toLowerCase();
3.      
4.     //移除标点符号（只保留字母和数字，以及空格和单引号用于缩写）
5.     text=text.replace(/[^\w\s]/g,'').replace(/\s+/g,' ');
7.     //拆分单词数组
8.     const words=text.split(' ');
9.    
10.     const frequency={};
11.    
12.     //统计每个单词的出现次数
13.     words.forEach(word=>{
14.         if(frequency[word]){
15.             frequecy[word]++   
16.         }else{
17.           frequency[word]=1;
18.        }
19.    });
20.     // 找出频率最高的单词  
21.     let mostFrequentWord = '';  
22.     let maxFrequency = 0;  
23.       
24.     for (const word in frequency) {  
25.         if (frequency[word] > maxFrequency) {  
26.             mostFrequentWord = word;  
27.             maxFrequency = frequency[word];  
28.         }  
29.     }  
30.       
31.     return { word: mostFrequentWord, frequency: maxFrequency };
33. }
34. // 示例文章  
35. 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.";  
36.   
37. // 查找出现频率最高的单词  
38. const result = findMostFrequentWord(article);  
39.   
40. 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）技能。滑动窗口是一种有用的算法，它可以在线性时间内办理该题目。以下是一个实现这个算法的示例代码：

1. function lengthOfLongestSubstring(s){
3.     let maxLength=0;//做大子串的长度
4.     let currentLength=0;
5.     let charIndexMap={};//字符及其索引的映射
6.     let left=0;//窗口的左边界
7.    
8.     for(let right=0;right<s.length;right++){
9.    
10.         const char=s[right];
11.         
12.         //如果字符已经在窗口中存在，则更新左边界
13.         if（charIndexMap[char]>=left){
14.             left=charIndexMap[char]+1;
15.         }
16.         
17.         //更新字符的索引
18.         charIndexMap[char]=right;
19.         
20.         //更新当前窗口的长度
21.         currentLength=right-left+1;
22.         
23.         //更新最大长度
24.         maxLength=Math.max(maxLength,currentLength);
25.     }
26.    
27.     return maxLength
28.    
29. }
30. // 示例用法  
31. const inputString = "abcabcbb";  
32. 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实现防抖函数的示例代码：

1. // 防抖函数工厂  
2. function debounce(func, wait) {  
3.   let timeout;  
4.   
5.   return function(...args) {  
6.     const context = this;  
7.     clearTimeout(timeout);  
8.     timeout = setTimeout(() => func.apply(context, args), wait);  
9.   };  
10. }  
11.   
12. // 示例函数：用于打印日志  
13. function logMessage(message) {  
14.   console.log(message, new Date().toLocaleTimeString());  
15. }  
16.   
17. // 使用防抖函数包装示例函数  
18. const debouncedLogMessage = debounce(logMessage, 2000);  
19.   
20. // 示例：绑定到输入框的输入事件  
21. document.getElementById('inputField').addEventListener('input', function() {  
22.   debouncedLogMessage('Input event triggered');  
23. });

复制代码

代码分析：

• 防抖函数工厂：
  

1. function debounce(func, wait) {  
2.   let timeout;  
4.   return function(...args) {  
5.     const context = this;  
6.     clearTimeout(timeout);  
7.     timeout = setTimeout(() => func.apply(context, args), wait);  
8.   };  
9. }

复制代码

• func：必要被防抖处理处罚的函数。
  
• wait：期待时间（毫秒），在这个时间段内，无论触发多少次，只实验一次func。
  
• timeout：生存setTimeout返回的定时器ID，用于在下次触发时扫除之前的定时器。
  
• 返回的函数：在每次变乱触发时调用，它会扫除之前的定时器并设置一个新的定时器，定时器在wait毫秒后实验func。
  

• 示例函数：
  

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

复制代码

• logMessage：一个简朴的函数，用于打印日志，包罗当前时间。
  
• 利用防抖函数：
  

1. const debouncedLogMessage = debounce(logMessage, 2000);

复制代码

• 利用debounce工厂函数创建一个防抖版本的logMessage函数，期待时间为2000毫秒（2秒）。
  
• 绑定到变乱：
  

1. document.getElementById('inputField').addEventListener('input', function() {  
2.   debouncedLogMessage('Input event triggered');  
3. });

复制代码

• 将防抖函数绑定到输入框的input变乱上。如许，无论用户输入多快，logMessage函数最多每2秒实验一次。
  

留意事项：

• 防抖函数实用于那些必要限定调用频率的场景，比方搜刮自动补全、滚动加载等。
  
• 期待时间（wait）应根据具体需求设置，以确保用户体验和性能之间的均衡。
  

通过上述代码，你可以轻松实现一个防抖函数，并在实际项目中应用。
4.怎样利用JS实现节省函数?请写出具体代码

    节省函数用于在特定时间隔断内只答应函数实验一次，以淘汰函数被频仍调用的次数，进步性能。【在一段时间内控制变乱的实验频率】
  

  在JavaScript中，节省函数（Throttle Function）用于限定某个函数在肯定时间隔断内的调用次数。它确保函数在指定的时间隔断内只实验一次，纵然在时间隔断内该函数被多次触发。以下是一个实现节省函数的示例代码：

1. // 节省函数工厂  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) {  
2.   console.log(message, new Date().toLocaleTimeString());  
3. }    // 利用节省函数包装示例函数  const throttledLogMessage = throttle(logMessage, 2000);    // 示例：绑定到按钮的点击变乱  document.getElementById('myButton').addEventListener('click', function() {  
4.   throttledLogMessage('Button clicked');  
5. });

复制代码

代码分析：

节省函数工厂：

1. function throttle(func, limit) {  
2.   // ...（省略变量声明和内部函数executeFunc）  
4.   return function(..._args) {  
5.     // 保存当前上下文和参数  
6.     context = this;  
7.     args = _args;  
8.     const now = Date.now();  
10.     // 如果上次执行时间不存在（即第一次调用），则立即执行函数  
11.     if (!lastRan) {  
12.       executeFunc();  
13.     } else {  
14.       // 否则，计算剩余等待时间并设置定时器  
15.       clearTimeout(lastFunc);  
16.       lastFunc = setTimeout(executeFunc, limit - (now - lastRan));  
17.     }  
18.   };  
19. }

复制代码

• func：必要被节省处理处罚的函数。
  
• limit：时间隔断（毫秒），在这个时间段内，只答应func实验一次。
  
• lastRan：前次实验函数的时间戳。
  
• lastFunc：生存setTimeout返回的定时器ID，用于在下次触发时扫除之前的定时器。
  
• context、args：分别生存函数的上下文（this）和参数，以便在定时器实验时利用。
  
• executeFunc：内部函数，用于实际实验func，并更新lastRan等状态。
  

示例函数：

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

复制代码

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

利用节省函数：

1. const throttledLogMessage = throttle(logMessage, 2000);

复制代码

• 利用throttle工厂函数创建一个节省版本的logMessage函数，时间隔断为2000毫秒（2秒）。
  

• 绑定到变乱：
  

1. document.getElementById('myButton').addEventListener('click', function() {  
2.   throttledLogMessage('Button clicked');  
3. });

复制代码

• 将节省函数绑定到按钮的click变乱上。如许，无论用户点击多快，logMessage函数最多每2秒实验一次。
  

通过上述代码，你可以轻松实现一个节省函数，并在实际项目中应用。
5.怎样利用JS实现函数柯里化?请写出具体代码

   函数柯里化（Currying）是函数式编程中的一种技能，它将一个多参数的函数转换成一系列只担当一个参数的函数。
  函数柯里化（Currying）是函数式编程中的一种技能，它将一个多参数的函数转换成一系列只担当一个参数的函数。通过柯里化，你可以将一个多参数调用转换成一系列嵌套的函数调用。
以下是一个利用JavaScript实现函数柯里化的具体代码示例：

1. // 柯里化函数工厂  
2. function curry(fn) {  
3.   // 获取函数的参数个数  
4.   const arity = fn.length;  
5.   
6.   // 内部递归函数  
7.   function curried(...args) {  
8.     // 如果已经传入了所有必要的参数，则调用原函数  
9.     if (args.length >= arity) {  
10.       return fn(...args);  
11.     } else {  
12.       // 否则，返回一个新的函数，该函数接受剩余的参数  
13.       return function(...moreArgs) {  
14.         // 将当前参数和后续参数合并，并递归调用curried函数  
15.         return curried(...args, ...moreArgs);  
16.       };  
17.     }  
18.   }  
19.   
20.   return curried;  
21. }  
22. //fn：需要被柯里化的函数。
23. //arity：原函数的参数个数，通过fn.length获取。
24. //curried：内部递归函数，它接受任意数量的参数。
25. //如果传入的参数数量达到了原函数的参数个数，则调用原函数并返回结果。
26. //否则，返回一个新的函数，该函数接受剩余的参数，并将它们与之前传入的参数合并，然后递归调用curried
27. //函数。
28.   
29. // 示例函数：接受三个参数并返回它们的和  
30. function add(a, b, c) {  
31.   return a + b + c;  
32. }  
33.   
34. // 使用柯里化函数工厂包装示例函数  
35. const curriedAdd = curry(add);  
36.   
37. // 使用柯里化后的函数  
38. console.log(curriedAdd(1)(2)(3)); // 输出: 6  
39. console.log(curriedAdd(1, 2)(3)); // 输出: 6  
40. console.log(curriedAdd(1)(2, 3)); // 输出: 6  
41. console.log(curriedAdd(1, 2, 3)); // 输出: 6

复制代码

1. //1.柯里化函数1
2. function add(){
3.     let args=Array.prototype.slice.call(arguments);
4.     console.log(args)
5.     let inner=function (..._args){
6.         console.log(_args)
7.         // contact时返回新数组
8.         //Array.prototype.push.apply(args, _args)与 args.push(..._args)
9.         //arguments与_args
10.             //** 剩余参数（数组）与arguments对象不共存
11.            //** arguments（类数组）【Array.prototype.slice.call(arguments)将其转换为数组】
12.         // Array.prototype.push.apply(args, _args);
13.         args.push(..._args)
14.         console.log(args)
15.         return inner;
16.     }
17.     //重写toString方法
18.     inner.toString=function (){
19.         return args.reduce(function (prev,cur){
20.               return prev+cur;
21.         },0)
22.     };
23.     return inner;
24. }
25. let result=add(1)(2);
26. console.log(result.toString())

复制代码

6.怎样利用JS实现链式调用?请写出具体代码

在JavaScript中，链式调用（Chaining）是一种常见的筹划模式，它答应你在单个表达式中连续调用同一个对象的方法。要实现链式调用，每个方法必要返回对象自己（通常是 this），以便可以继承调用下一个方法。
以下是一个简朴的例子，展示了怎样实现链式调用：

1. class ChainExample {  
2.     constructor(value) {  
3.         this.value = value;  
4.     }  
5.   
6.     // 第一个方法，返回 this 以实现链式调用  
7.     addValue(newValue) {  
8.         this.value += newValue;  
9.         return this; // 返回对象本身  
10.     }  
11.   
12.     // 第二个方法，返回 this 以实现链式调用  
13.     multiplyValue(multiplier) {  
14.         this.value *= multiplier;  
15.         return this; // 返回对象本身  
16.     }  
17.   
18.     // 获取当前值的方法，不返回 this，返回当前值  
19.     getValue() {  
20.         return this.value;  
21.     }  
22. }  
23.   
24. // 使用链式调用  
25. const example = new ChainExample(5);  
26. const result = example  
27.     .addValue(10)  
28.     .multiplyValue(2)  
29.     .getValue();  
30.   
31. 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() 是一个轻便且今世的方法，用于从类数组对象或可迭代对象中创建一个新的数组实例。

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

复制代码

方法二：利用 Array.prototype.slice

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

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

复制代码

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

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

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

复制代码

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

假如你必要在不支持今世JavaScript特性的情况中手动转换，可以利用 for 循环。

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

复制代码

 1.怎样利用ES6语法对函数全部参数举行求和?请写出具体代码

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

复制代码

2.怎样利用JS 实现互换两个变量的值（不利用临时变量)?写出具体代码

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

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

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

复制代码

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

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

1. let a = 5;  
2. let b = 10;  
3.   
4. a = a + b; // a 现在是 15  
5. b = a - b; // b 现在是 5 (因为 a 是 15, 15 - 10 = 5)  
6. a = a - b; // a 现在是 10 (因为 a 是 15, 15 - 5 = 10)  
7.   
8. console.log(a); // 输出: 10  
9. console.log(b); // 输出: 5

复制代码

异或运算（仅限整数）

   界说：异或运算符表现两个值假如差别则为真（1），类似则为假（0）。

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

复制代码

 3.怎样利用JS实现将对象转换为树形布局?请写出具体代码

在JavaScript中，将对象数组转换为树形布局是一个常见的任务，特殊是在处理处罚具有层级关系的数据时。假设你有一个对象数组，此中每个对象都有一个唯一的id和一个指向其父节点的parentId（对于根节点，parentId大概是null或undefined），你可以通过以下步调将其转换为树形布局。
以下是一个具体的代码示例，它展示了怎样将如许的对象数组转换为树形布局：

1. // 示例数据：一个对象数组，每个对象有id和parentId属性  
2. const data = [  
3.   { id: 1, parentId: null, name: 'Root 1' },  
4.   { id: 2, parentId: 1, name: 'Child 1.1' },  
5.   { id: 3, parentId: 1, name: 'Child 1.2' },  
6.   { id: 4, parentId: 2, name: 'Grandchild 1.1.1' },  
7.   { id: 5, parentId: null, name: 'Root 2' },  
8.   { id: 6, parentId: 5, name: 'Child 2.1' },  
9. ];  
10.   
11. // 函数：将对象数组转换为树形结构  
12. function arrayToTree(items) {  
13.   // 创建一个空对象来存储树节点，以id为键  
14.   const idMapping = {};  
15.   // 创建一个数组来存储根节点（没有parentId的节点）  
16.   const rootNodes = [];  
17.   
18.   // 遍历数据项，构建idMapping和根节点数组  
19.   items.forEach(item => {  
20.     // 将当前项添加到idMapping中  
21.     const { id } = item;  
22.     idMapping[id] = { ...item, children: [] };  
23.   
24.     // 检查是否有parentId，如果有，则将其添加到父节点的children数组中  
25.     if (item.parentId !== null) {  
26.       // 确保父节点已经存在于idMapping中（对于根节点，这一步会在后面的迭代中完成）  
27.       if (!idMapping[item.parentId]) {  
28.         idMapping[item.parentId] = { children: [] };  
29.       }  
30.       // 将当前项添加到父节点的children数组中  
31.       idMapping[item.parentId].children.push(idMapping[id]);  
32.     } else {  
33.       // 如果没有parentId，则这是根节点，添加到根节点数组中  
34.       rootNodes.push(idMapping[id]);  
35.     }  
36.   });  
37.   
38.   // 返回根节点数组，即树形结构的根  
39.   return rootNodes;  
40. }  
41.   
42. // 调用函数并打印结果  
43. const tree = arrayToTree(data);  
44. console.log(JSON.stringify(tree, null, 2));

复制代码

在这个示例中，arrayToTree函数吸取一个对象数组items作为参数，并返回一个树形布局的数组。树形布局中的每个节点都有一个children数组，用于存储其子节点。函数起首创建一个空对象idMapping来存储每个节点，并以节点的id作为键。然后，它遍历输入数组，将每个节点添加到idMapping中，并根据parentId将其添加到父节点的children数组中。末了，函数返回根节点数组，即没有parentId的节点。
4.怎样利用JS分析URL参数为对象?请写出具体代码

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

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

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

复制代码

 方法二：利用内置URLSearchParms

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

复制代码

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

方法一：setInterval(fun,interval)

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

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

复制代码

方法二：利用setTimeout递归调用

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

1. let counter = 1;  
2.   
3. function printNumber() {  
4.   console.log(counter);  
5.   counter++;  
6.    
7.   if (counter <= 4) {  
8.     // 使用setTimeout设置1000毫秒（1秒）后的延时调用  
9.     setTimeout(printNumber, 1000);  
10.   }  
11. }  
12.   
13. // 初次调用printNumber函数  
14. printNumber();

复制代码

方法三：利用requestAnimationFrame与自界说计时（不保举）

1. let counter = 1;  
2. let startTime = performance.now(); // 获取高精度当前时间  
3. let interval = 1000; // 所需的时间间隔，以毫秒为单位  
4.   
5. function printNumberAndRequestNextFrame() {  
6.   const currentTime = performance.now();  
7.    
8.   if (currentTime - startTime >= interval) {  
9.     console.log(counter);  
10.     counter++;  
11.       
12.     if (counter <= 4) {  
13.       startTime = currentTime; // 重置开始时间以计算下一个间隔  
14.       requestAnimationFrame(printNumberAndRequestNextFrame);  
15.     }  
16.   } else {  
17.     // 如果没有达到间隔，则再次请求下一帧  
18.     requestAnimationFrame(printNumberAndRequestNextFrame);  
19.   }  
20. }  
21.   
22. // 初次调用函数  
23. requestAnimationFrame(printNumberAndRequestNextFrame);

复制代码

  然而，必要留意的是，这种方法大概会由于屏幕革新率的差别而引入一些禁绝确性。因此，对于必要正确时间隔断的任务，通常发起利用setInterval或setTimeout。
   6.怎样利用JS实现双向数据绑定?请写出具体代码

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
6.     <title>Object.defineProperty 双向绑定</title>  
7. </head>  
8. <body>  
9.     <div>  
10.         <input type="text" id="inputBox">  
11.         <p>你输入的内容是: <span id="displayBox"></span></p>  
12.     </div>  
13.   
14.     <script>  
15.         // 创建一个数据对象  
16.         const data = {};  
17.   
18.         // 使用 Object.defineProperty 来定义数据属性及其 getter 和 setter  
19.         Object.defineProperty(data, 'text', {  
20.             get() {  
21.                 return this._text;  
22.             },  
23.             set(value) {  
24.                 this._text = value;  
25.                 // 更新 DOM ，通知依赖项修改
26.                 document.getElementById('displayBox').textContent = value;  
27.             },  
28.             configurable: true,  
29.             enumerable: true  
30.         });  
31.   
32.         // 初始化私有属性 _text  
33.         data._text = '';  
34.   
35.         // 获取输入框和显示框的 DOM 元素  
36.         const inputBox = document.getElementById('inputBox');  
37.         const displayBox = document.getElementById('displayBox');  
38.   
39.         // 监听输入框的 input 事件  
40.         inputBox.addEventListener('input', function() {  
41.             // 更新数据对象的 text 属性，这会触发 setter 并更新 DOM  
42.             data.text = inputBox.value;  
43.         });  
44.   
45.         // 初始化显示框的内容  
46.         displayBox.textContent = data.text;  
47.     </script>  
48. </body>  
49. </html>

复制代码

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

   Proxy:

1. let target = {  
2.   foo: 'bar'  
3. };  
4.   
5. let handler = {  
6.   get(target, property) {  
7.     console.log(`Getting ${property}`);  
8.     return target[property];  
9.   },  
10.   set(target, property, value) {  
11.     console.log(`Setting ${property} to ${value}`);  
12.     target[property] = value;  
13.     return true; // 表示设置成功  
14.   }  
15. };  
16.   
17. let proxy = new Proxy(target, handler);  
18.   
19. console.log(proxy.foo); // 输出: Getting foo，然后输出: bar  
20. proxy.foo = 'baz';      // 输出: Setting foo to baz  
21. console.log(proxy.foo); // 输出: Getting foo，然后输出: baz

复制代码

        要利用Proxy实现数据双向绑定，我们必要创建一个署理对象来监听对原始数据对象属性的读写操纵。当这些属性被读取或修改时，我们可以实验一些自界说的逻辑，比如更新DOM元素以反映数据的厘革。

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
6.     <title>Proxy 双向绑定示例</title>  
7. </head>  
8. <body>  
9.     <div>  
10.         <input type="text" id="inputField">  
11.         <p>你输入的内容是: <span id="displayField"></span></p>  
12.     </div>  
13.   
14.     <script>  
15.         // 原始数据对象  
16.         const data = { text: '' };  
17.   
18.         // Proxy handler，用于拦截对原始对象的操作  
19.         const handler = {  
20.             get(target, property, receiver) {  
21.                 // 读取属性时，直接返回原始值  
22.                 return Reflect.get(target, property, receiver);  
23.             },  
24.             set(target, property, value, receiver) {  
25.                 // 设置属性时，更新原始值并触发DOM更新  
26.                 Reflect.set(target, property, value, receiver);  
27.                 updateDOM(property, value);  
28.                 return true; // 表示设置成功  
29.             }  
30.         };  
31.   
32.         // 创建代理对象  
33.         const proxyData = new Proxy(data, handler);  
34.   
35.         // 更新DOM的函数  
36.         function updateDOM(property, value) {  
37.             if (property === 'text') {  
38.                 document.getElementById('displayField').textContent = value;  
39.             }  
40.         }  
41.   
42.         // 获取DOM元素并设置初始值  
43.         const inputField = document.getElementById('inputField');  
44.         const displayField = document.getElementById('displayField');  
45.         displayField.textContent = proxyData.text; // 初始化显示  
46.   
47.         // 监听输入框的input事件  
48.         inputField.addEventListener('input', function() {  
49.             // 更新代理对象的text属性，这会触发Proxy的set方法并更新DOM  
50.             proxyData.text = inputField.value;  
51.         });  
52.     </script>  
53. </body>  
54. </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布局来容纳我们的视图（页面）：

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
6.     <title>Simple Routing</title>  
7.    <style>
8.         nav {
9.             display: flex;
10.             justify-content: space-around; /* 或者使用 space-between, flex-start, center 等 */
11.             align-items: center;
12.             background-color: #333; /* 背景颜色可以根据需求调整 */
13.             padding: 10px;
14.         }
16.         .router-link {
17.             color: white; /* 链接文字颜色 */
18.             text-decoration: none; /* 去掉链接下划线 */
19.             padding: 10px 20px; /* 链接内边距，可以根据需求调整 */
20.             transition: background-color 0.3s ease; /* 背景色过渡效果 */
21.         }
23.         .router-link:hover {
24.             background-color: #575757; /* 鼠标悬停时背景颜色 */
25.         }
26.     </style>
27. </head>  
28. <body>  
29.     <nav>  
30.         <a href="/home" class="router-link">Home</a>  
31.         <a href="/about" class="router-link">About</a>  
32.         <a href="/contact" class="router-link">Contact</a>  
33.     </nav>  
34.     <div id="app"></div>  
35.   
36.     <script src="router.js"></script>  
37. </body>  
38. </html>

复制代码

JavaScript (router.js)

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

1. // 创建一个简单的路由类  
2. class Router {  
3.     constructor() {  
4.         this.routes = {};  
5.         this.currentRoute = null;  
6.         this.appElement = document.getElementById('app');  
7.   
8.         // 监听点击事件，阻止默认行为并处理路由  
9.         document.querySelectorAll('.router-link').forEach(link => {  
10.             link.addEventListener('click', (e) => {  
11.                 e.preventDefault();  
12.                 this.navigateTo(e.target.getAttribute('href'));  
13.             });  
14.         });  
15.   
16.         // 监听 popstate 事件以处理浏览器前进/后退按钮  
17.         window.addEventListener('popstate', (e) => {  
18.             this.navigateTo(document.location.pathname);  
19.         });  
20.   
21.         // 初始化路由，处理页面加载时的路由  
22.         this.init();  
23.     }  
24.   
25.     init() {  
26.         this.navigateTo(document.location.pathname);  
27.     }  
28.   
29.     defineRoute(path, component) {  
30.         this.routes[path] = component;  
31.     }  
32.   
33.     navigateTo(path) {  
34.         // 规范化路径，确保路径以 '/' 开头  
35.         if (!path.startsWith('/')) {  
36.             path = '/' + path;  
37.         }  
38.   
39.         // 更新浏览器历史记录  
40.         history.pushState({}, '', path);  
41.   
42.         // 渲染相应的组件  
43.         if (this.routes[path]) {  
44.             this.currentRoute = path;  
45.             this.appElement.innerHTML = ''; // 清空之前的视图  
46.             this.appElement.appendChild(this.routes[path]());  
47.         } else {  
48.             // 处理 404 页面  
49.             this.appElement.innerHTML = '<h1>404 - Page Not Found</h1>';  
50.         }  
51.     }  
52. }  
53.   
54. // 定义一些简单的组件  
55. function HomeComponent() {  
56.     const div = document.createElement('div');  
57.     div.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page!</p>';  
58.     return div;  
59. }  
60.   
61. function AboutComponent() {  
62.     const div = document.createElement('div');  
63.     div.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>';  
64.     return div;  
65. }  
66.   
67. function ContactComponent() {  
68.     const div = document.createElement('div');  
69.     div.innerHTML = '<h1>Contact Page</h1><p>Contact us at example@example.com.</p>';  
70.     return div;  
71. }  
72.   
73. // 初始化路由并定义路由规则  
74. const router = new Router();  
75. router.defineRoute('/home', HomeComponent);  
76. router.defineRoute('/about', AboutComponent);  
77. router.defineRoute('/contact', ContactComponent);

复制代码

• 
  
  
  
  • 一个导航栏，每个链接都带有router-link类，这些链接用于触发路由。
    
  • #app元素是我们放置差别页面组件的地方。
    
  
  
• JavaScript路由：
  
  
  
  • Router类：管理路由界说、导航和视图渲染。
    
  • constructor：初始化路由，监听链接点击和欣赏器进步/退却按钮。
    
  • init方法：在页面加载时初始化路由。
    
  • defineRoute方法：界说路径和对应的组件。
    
  • navigateTo方法：处理处罚路径导航，更新欣赏器汗青记载，并渲染相应的组件。
    
  • HomeComponent、AboutComponent和ContactComponent：简朴的组件函数，返回包罗HTML内容的div元素。
    
  
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。