Javascript面试基础6【每日更新10】

Gulp

• gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器;它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

• Gulp的核心概念:流

1. 流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的,而不用关心流的另一头数据的真正流向

• gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作
• Gulp的特点:

1. 易于使用:通过代码优于配置的策略，gulp让简单的任务简单，复杂的任务可管理。
2. 构建快速利用Node.js 流的威力，你可以快速构建项目并减少频繁的IO操作。
3. 易于学习通过最少的API，掌握 gulp毫不费力，构建工作尽在掌握:如同一系列流管道
    

Vue双向数据绑定

Vue核心基础-CSDN博客

设计模式—观察者模式与发布订阅-CSDN博客

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过0bject.defineProperty( 来劫持各个属性的setter ,getter ,在数据变动时发布消息给订阅者，触发相应的监听回调
 

事件的各个阶段

在JavaScript中，事件处理是一个重要的概念，它允许开发者在用户与网页进行交互时执行代码。事件处理通常涉及到事件的各个阶段，这些阶段也被称为事件流（Event Flow）或事件传播（Event Propagation）。主要可以分为三个阶段：捕获阶段（Capturing Phase）、目标阶段（Target Phase，也称为事件处理阶段或冒泡前的激活阶段）、冒泡阶段（Bubbling Phase）。

1. 捕获阶段（Capturing Phase）

• 顺序：从文档的根节点（通常是document对象）开始，向下传播到目标元素。
• 特点：在捕获阶段，事件处理器会从最外层的节点开始触发，然后向事件的目标节点传播。这个阶段的目的是在事件到达目标节点之前，先给外层的元素机会来处理这个事件。
• 用途：捕获阶段通常用于事件在到达目标元素之前进行拦截处理，例如，阻止事件进一步传播或修改事件对象。

2. 目标阶段（Target Phase）

• 顺序：当事件到达目标元素时，会触发目标元素上的事件处理器。
• 特点：在这个阶段，事件处理器被绑定在目标元素上，即用户实际与之交互的元素。这通常是我们设置事件监听器的地方。
• 注意：技术上讲，目标阶段并不是事件传播的一个独立阶段，但它发生在捕获阶段和冒泡阶段之间，是事件处理器被目标元素实际调用的时刻。

3. 冒泡阶段（Bubbling Phase）

• 顺序：从目标元素开始，向上传播到文档的根节点。
• 特点：在冒泡阶段，事件会从目标元素开始，一直向上传播到DOM树的顶层。这个阶段的目的是允许事件在到达顶层之前，沿途的每个节点都有机会处理这个事件。
• 用途：冒泡阶段常用于在不特定知道哪个元素会被点击的情况下，处理事件。例如，点击了列表中的某个项，但你可能希望无论点击了哪个项，都能触发同一个事件处理器。

设置事件监听器时指定阶段

在JavaScript中，使用addEventListener方法添加事件监听器时，可以通过第三个参数来指定监听器是在捕获阶段还是冒泡阶段触发。如果省略这个参数，或者将其设置为false，则监听器会在冒泡阶段触发。如果设置为true，则监听器会在捕获阶段触发。

element.addEventListener('click', function(event) {  
    // 事件处理代码  
}, true); // 在捕获阶段触发  
  
element.addEventListener('click', function(event) {  
    // 事件处理代码  
}, false); // 在冒泡阶段触发（默认）

let VS var VS const

• let

1. 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。
2. let绑定不受变量提升的约束，这意味着let声明不会被提升到当前
3. 该变量处于从块开始到初始化处理的“暂存死区”

• var

1. ·声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的
2. 由于变量声明(以及其他声明)总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明

• const

1. 声明创建一个值的只读引用(即指针)
2. 基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成const申明基本数据类型时”再将其值改变时，将会造成报错，例如const a = 3 ;a = 5 时将会报错
3. 但是如果是复合类型时，如果只改变复合类型的其中某个Value 项时，将还是正常使用
    

快速让一个数组乱序

sort方法

const arr=[1,2,3,4,5,6];
arr.sort(function(a,b){
    return Math.random()-0.5;
})

Fisher-Yates洗牌算法

在JavaScript中，快速让一个数组乱序（即打乱数组元素的顺序）的一种常用方法是使用Fisher-Yates洗牌算法（也称为Knuth洗牌算法）。这种方法的基本思想是遍历数组元素，并在每一步中随机选择一个未处理的元素与当前元素交换位置。

以下是一个使用Fisher-Yates洗牌算法来打乱数组顺序的示例代码：

function shuffleArray(array) {  
    for (let i = array.length - 1; i > 0; i--) {  
        // 生成一个0到i的随机索引  
        const j = Math.floor(Math.random() * (i + 1));  
        // 交换array[i]和array[j]  
        [array[i], array[j]] = [array[j], array[i]];  
    }  
    return array;  
}  
  
// 示例  
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];  
console.log(shuffleArray(myArray));

 如何渲染几万条数据并不卡住界面

考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分DOM，那么就可以通过requestAnimationFrame来每16 ms刷新一次
 

requestAnimationFrame 是 Web API 的一部分，它用于在浏览器下一次重绘之前调用指定的函数来更新动画。这是一种高效的方式来创建平滑的动画，因为它允许浏览器优化和最小化重绘和重排，从而提供更好的性能和用户体验。

当你使用 requestAnimationFrame 时，你需要提供一个回调函数作为参数。浏览器会在这个函数准备好进行屏幕更新之前调用它。这个函数通常用于更新动画的当前状态，比如改变元素的位置或样式。

基本用法

function step(timestamp) {  
  // 更新动画状态  
  // 例如，改变元素的位置  
  // ...  
  
  // 如果需要继续动画，则再次调用 requestAnimationFrame  
  requestAnimationFrame(step);  
}  
  
// 启动动画  
requestAnimationFrame(step);

优点

1. 高效：requestAnimationFrame 由浏览器进行优化，以确保动画的平滑性和性能。
2. 自动时间间隔：你不需要自己设置时间间隔（如使用 setTimeout 或 setInterval），浏览器会基于屏幕刷新率来调用你的回调函数。
3. 节省CPU：当标签页或窗口不在前台时，requestAnimationFrame 会自动暂停调用回调函数，从而节省CPU资源。

停止动画

要停止动画，你可以简单地不再调用 requestAnimationFrame。但是，如果你需要从一个特定的回调中停止动画（例如，基于某些条件），你可能需要将 requestAnimationFrame 的返回值（一个ID）保存起来，并使用 cancelAnimationFrame 来取消它。

let animationId = null;  
  
function startAnimation() {  
  animationId = requestAnimationFrame(step);  
}  
  
function stopAnimation() {  
  if (animationId) {  
    cancelAnimationFrame(animationId);  
    animationId = null;  
  }  
}  
  
function step(timestamp) {  
  // ... 更新动画状态  
    
  // 根据需要决定是否继续动画  
  // requestAnimationFrame(step);  
}  
  
// 启动和停止动画  
startAnimation();  
// ... 在某个时刻停止动画  
stopAnimation();

 获取页面所有checkbox

怎样添加、移除、移动、复制、创建和查找节点

在JavaScript中，操作DOM（文档对象模型）是常见的任务，包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例，说明如何执行这些操作：

1. 创建节点

要创建一个新的DOM节点，你可以使用document.createElement()方法。

// 创建一个新的div元素  
var newDiv = document.createElement("div");  
  
// 设置其一些属性  
newDiv.id = "newDivId";  
newDiv.className = "newDivClass";  
newDiv.textContent = "这是一个新的div";  
  
// 将新创建的元素添加到body中  
document.body.appendChild(newDiv);

2. 查找节点

查找DOM节点可以使用多种方法，如getElementById()，getElementsByClassName(),

 getElementsByTagName(), querySelector(), querySelectorAll()等

// 通过ID查找  
var elementById = document.getElementById("someElementId");  
  
// 通过类名查找（返回HTMLCollection）  
var elementsByClass = document.getElementsByClassName("someClass");  
  
// 通过标签名查找（返回HTMLCollection）  
var elementsByTagName = document.getElementsByTagName("p");  
  
// 使用querySelector查找第一个匹配的元素  
var firstElement = document.querySelector(".someClass");  
  
// 使用querySelectorAll查找所有匹配的元素（返回NodeList）  
var allElements = document.querySelectorAll(".someClass");

3. 添加节点

将新节点添加到DOM中，可以使用appendChild()或insertBefore()。

// 将新节点添加到body的末尾  
document.body.appendChild(newDiv);  
  
// 将新节点添加到某个特定元素之前  
var referenceNode = document.getElementById("someElementId");  
document.body.insertBefore(newDiv, referenceNode);

4. 移除节点

使用removeChild()方法可以从DOM中移除一个节点。

var elementToRemove = document.getElementById("someElementIdToRemove");  
if (elementToRemove && elementToRemove.parentNode) {  
    elementToRemove.parentNode.removeChild(elementToRemove);  
}

5. 移动节点

移动节点实际上是一个先移除再添加的过程。首先，使用removeChild()从当前位置移除节点，然后使用appendChild()或insertBefore()将其添加到新位置。

6. 复制节点

使用cloneNode()方法可以复制一个节点。这个方法接受一个布尔值作为参数，指定是否进行深复制（复制节点及其所有子节点）。

// 浅复制（只复制节点本身）  
var clonedNode = elementById.cloneNode(false);  
  
// 深复制（复制节点及其所有子节点）  
var clonedNodeDeep = elementById.cloneNode(true);  
  
// 然后，你可以将复制的节点添加到DOM中的某个位置  
document.body.appendChild(clonedNodeDeep);

正则表达式

 正则表达式-CSDN博客

Javascript中callee与caller的作用 

• caller是返回一个对函数的引用，该函数调用了当前函数;
• callee是返回正在被执行的function函数，也就是所指定的function对象的正文

在JavaScript中，callee和caller是两个非标准的、但曾经在早期JavaScript版本中广泛使用的属性，它们分别用于函数内部引用当前执行的函数和调用当前函数的外部函数。然而，值得注意的是，由于它们带来的混淆和潜在的性能问题，现代JavaScript开发中通常不推荐使用这两个属性，并且在严格模式（strict mode）下，这两个属性是不可用的。

callee

callee属性是arguments对象的一个属性，它指向当前正在执行的函数本身。这在编写递归函数时特别有用，因为你可以直接使用arguments.callee来引用函数自身，而不需要在函数体内显式地引用函数名。然而，这种做法可能会导致代码难以理解和维护，因为它隐藏了函数的实际名称。

function factorial(n) {  
    if (n <= 1) {  
        return 1;  
    } else {  
        return n * arguments.callee(n - 1);  
    }  
}

现代JavaScript中，更推荐使用函数名来引用自身，或者使用箭头函数来避免this和arguments的混淆。

caller

caller属性是一个函数对象的属性，它指向调用当前函数的函数。这在你需要知道是哪个函数调用了当前函数时非常有用。然而，与callee一样，caller属性也带来了代码可读性和维护性的挑战，并且在严格模式下是不可用的。

function outerFunction() {  
    innerFunction();  
}  
  
function innerFunction() {  
    console.log(innerFunction.caller); // 指向outerFunction  
}  
  
outerFunction();

替代方案

1. 递归函数：对于递归函数，直接使用函数名而不是arguments.callee。
2. 调试和日志记录：对于需要知道调用栈的情况，考虑使用现代浏览器的开发者工具，或者利用Error对象的堆栈跟踪（尽管这可能会因浏览器而异且不是跨平台的解决方案）。
3. 设计模式：考虑使用设计模式（如事件监听器、回调函数等）来管理函数间的依赖和调用关系，而不是依赖caller属性。