Javascript前端面试基础（八）

GISer_Jing2024-07-30 9:32

window.onload和$(document).ready区别

  • window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行
  • $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

window.onload

  • 触发时机 ：window.onload 事件会在整个页面（包括所有的依赖资源，如图片、样式表和脚本文件等）完全加载后触发。这意味着页面上的所有资源都必须加载完成，window.onload 事件才会触发。
  • 使用场景 ：适用于需要在页面所有资源（如图片、外部脚本等）加载完成后才执行的代码。例如，如果你需要在页面加载完成后立即显示一个包含图片的模态框，那么使用 window.onload 是合适的。
  • 原生JavaScript ：window.onload 是原生 JavaScript 的一部分，不需要额外的库或框架。

$(document).ready()

  • 触发时机 ：$(document).ready() 是 jQuery 中的一个方法，它在 DOM 完全就绪后触发，但不等待像图片这样的外部资源加载完成。这意味着 DOM 树已经被完全构建和解析，但可能还有像图片这样的元素在加载中。
  • 使用场景：适用于需要在 DOM 元素可用后立即执行代码，但又不需要等待所有资源（如图片）加载完成的情况。这对于初始化插件、绑定事件监听器等操作非常有用。
  • jQuery 依赖 ：$(document).ready() 是 jQuery 特有的方法，因此它依赖于 jQuery 库。

addEventListener()和attachEvent()的区别

  • addEventListener(是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法
  • addEventListener()支持事件冒泡和事件捕获;-而attachEvent()只支持事件冒泡addEventListener()的第一个参数中,事件类型不需要添加on ; attachEvent(需要添加'on'
  • 如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行，attachEvent()会按照事件绑定的顺序倒序执行

数组去重方法总结

1. 使用ES6的Set结构

ES6 提供了 Set 数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。利用这一特性，可以轻松实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = [...new Set(arr)];  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2. 使用filter()和indexOf()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。而 indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。通过这两个方法结合使用，也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3. 使用Map数据结构

Map 对象保存键值对，并且能够记住键的原始插入顺序。利用这一特性，也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let map = new Map();  
let uniqueArr = arr.filter(item => !map.has(item) && map.set(item, true));  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4. 使用reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。通过 reduce()，我们也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = arr.reduce((acc, current) => {  
  if (acc.indexOf(current) === -1) {  
    acc.push(current);  
  }  
  return acc;  
}, []);  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

5. 使用for循环

最后，虽然不如上面的方法简洁，但你也可以使用传统的 for 循环结合 indexOf() 方法实现去重

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = [];  
for (let i = 0; i < arr.length; i++) {  
  if (uniqueArr.indexOf(arr[i]) === -1) {  
    uniqueArr.push(arr[i]);  
  }  
}  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

75(设计题)想实现一个对页面某个节点的拖曳?如何做(使用原生JS)

  • "给需要拖拽的节点绑定mousedown , mousemove , mouseup 事件
  1. mousedown事件触发后，开始拖拽
  2. mousemove时，需要通过event.c1ientX和clientY获取拖拽位置，并实时更新位置
  3. mouseup时，拖拽结束

76 Javascript全局函数和全局变量

全局变量

  • infinity 代表正的无穷大的数值。
  • NaN指示某个值是不是数字值。
  • undefined 指示未定义的值。

全局函数

  • decodeURI()解码某个编码的 URI 。
  • decodeURIComponent(解码一个编码的 URI组件。encodeURI()把字符串编码为URI。
  • encodeURIComponent()把字符串编码为URI 组件。escape()对字符串进行编码。
  • eval() 计算JavaScript字符串，并把它作为脚本代码来执行。
  • isFinite()检查某个值是否为有穷大的数。
  • isNaN()检查某个值是否是数字。
  • Number()把对象的值转换为数字。
  • parseFloat()解析一个字符串并返回一个浮点数。parseInt()解析一个字符串并返回一个整数。String()把对象的值转换为字符串。
  • unescape()对由escape()编码的字符串进行解码

使用js实现⼀个持续的动画效果

在JavaScript中，实现一个持续的动画效果通常涉及到定时器（如setInterval或requestAnimationFrame）来不断更新DOM元素的属性（如位置、大小、透明度等），以产生动画效果。这里，我将使用requestAnimationFrame来展示一个简单的例子，因为它提供了更好的性能和更平滑的动画效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>持续动画示例</title>  
<style>  
  #movingBox {  
    width: 50px;  
    height: 50px;  
    background-color: blue;  
    position: absolute;  
    left: 0;  
  }  
</style>  
</head>  
<body>  
<div id="movingBox"></div>  
<script src="animate.js"></script>  
</body>  
</html>

function animateBox(element, startX, endX, duration) {  
    let startTime = null;  
  
    function step(timestamp) {  
        if (!startTime) startTime = timestamp;  
        const progress = timestamp - startTime;  
        const position = startX + (progress / duration) * (endX - startX);  
  
        // 更新元素的位置  
        element.style.left = position + 'px';  
  
        // 如果动画未结束，则继续动画  
        if (progress < duration) {  
            requestAnimationFrame(step);  
        }  
    }  
  
    // 开始动画  
    requestAnimationFrame(step);  
}  
  
// 获取元素并调用动画函数  
const box = document.getElementById('movingBox');  
animateBox(box, 0, 500, 3000); // 从左到右移动，持续3秒

这个例子中，animateBox函数接受一个DOM元素、起始X位置、结束X位置和持续时间作为参数。它使用requestAnimationFrame来更新元素的位置，直到达到指定的结束位置或持续时间结束。

注意事项

  • requestAnimationFrame的回调函数接收一个时间戳参数，它表示调用requestAnimationFrame时的时间。这个时间戳可以用来计算动画的进度。
  • 使用requestAnimationFrame相比setInterval或setTimeout，可以更有效地控制动画的帧率，并且更节能，因为它在浏览器重绘之前调用回调函数，避免了不必要的绘制工作。
  • 为了让动画看起来更自然，可以根据需要调整动画的速度曲线（如线性、缓入、缓出等）。
  • 当你不再需要动画时，可以使用cancelAnimationFrame来停止它，以避免不必要的资源消耗

封装一个函数，参数是定时器的时间，.then执行回调函数

项目做过哪些性能优化?

  • 减少HTTP请求数
  • 减少DNS 查询使用CDN
  • 避免重定向图片懒加载
  • 减少DOM元素数量·
  • 减少DOM操作
  • 使用外部JavaScript和css
  • 压缩JavaScript .css、字体、图片等
  • 优化 css Sprite
  • 使用iconfont
  • 字体裁剪
  • 多域名分发划分内容到不同域名"
  • 尽量减少iframe使用
  • 避免图片src为空
  • ·把样式表放在link 中
  • .把JavaScript放在页面底部

JS怎样判断两个对象相等

1. 递归比较

通过递归地遍历对象的每个属性，并比较它们的值和类型，可以编写一个函数来检查两个对象是否相等。这种方法比较复杂，但可以处理嵌套对象和数组

function deepEqual(obj1, obj2) {  
    if (obj1 === obj2) {  
        return true;  
    }  
  
    if (typeof obj1 !== 'object' || obj1 === null ||  
        typeof obj2 !== 'object' || obj2 === null) {  
        return false;  
    }  
  
    const keys1 = Object.keys(obj1);  
    const keys2 = Object.keys(obj2);  
  
    if (keys1.length !== keys2.length) {  
        return false;  
    }  
  
    for (let key of keys1) {  
        if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {  
            return false;  
        }  
    }  
  
    return true;  
}  
  
// 示例  
const obj1 = { a: 1, b: { c: 2 } };  
const obj2 = { a: 1, b: { c: 2 } };  
console.log(deepEqual(obj1, obj2)); // true

2. 使用JSON.stringify()

一种简单但可能不总是可靠的方法是使用JSON.stringify()将对象转换成字符串，然后比较这些字符串。这种方法简单且易于实现，但它不能处理函数、undefined、循环引用等特殊情况。

function shallowEqualJson(obj1, obj2) {  
    return JSON.stringify(obj1) === JSON.stringify(obj2);  
}  
  
// 示例  
const obj1 = { a: 1, b: 2 };  
const obj2 = { a: 1, b: 2 };  
console.log(shallowEqualJson(obj1, obj2)); // true

3. 使用库

许多流行的JavaScript库（如Lodash）提供了深度比较对象的功能。例如，Lodash的_.isEqual方法能够处理复杂的数据结构，包括嵌套对象和数组。

// 假设已经通过<script>标签或npm/yarn引入了Lodash  
const _ = require('lodash');  
  
const obj1 = { a: 1, b: { c: 2 } };  
const obj2 = { a: 1, b: { c: 2 } };  
console.log(_.isEqual(obj1, obj2)); // true
相关推荐
(⊙o⊙)~哦41 分钟前
JavaScript substring() 方法
前端
无心使然云中漫步1 小时前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
Bug缔造者1 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
C-SDN花园GGbond1 小时前
【探索数据结构与算法】插入排序：原理、实现与分析（图文详解）
c语言·开发语言·数据结构·排序算法
xnian_2 小时前
解决ruoyi-vue-pro-master框架引入报错，启动报错问题
前端·javascript·vue.js
迷迭所归处2 小时前
C++ —— 关于vector
开发语言·c++·算法
麒麟而非淇淋3 小时前
AJAX 入门 day1
前端·javascript·ajax
架构文摘JGWZ3 小时前
Java 23 的12 个新特性！！
java·开发语言·学习
2401_858120533 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
leon6253 小时前
优化算法（一）—遗传算法（Genetic Algorithm）附MATLAB程序
开发语言·算法·matlab
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07浏览器插件——ModHeader 的分享和学习08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CCF-CSP认证考试 202406-3 文本分词 100分题解