Javascript笔试题目（二）

最新推荐文章于 2024-11-13 15:29:17 发布

GISer_Jinger

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量1.2k

点赞数 26

分类专栏： Javascript 面试题目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_55049655/article/details/142863360

版权

Javascript 同时被 2 个专栏收录

136 篇文章 1 订阅

订阅专栏

面试题目

115 篇文章 1 订阅

订阅专栏

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中实现一个简单的路由功能，可以使用前端路由技术，这通常用于单页面应用（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>  
</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元素。