前端—每天5道面试题（3）

1、JavaScript是一门什么样的语言，它有哪些特点？

　　javaScript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。

　　是一种解释性脚本语言(代码不进行预编译)

　　主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为

　　可以直接嵌入HTML也页面，但写成单独的js文件有利于结构和行为的分离

　　跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行

 

2、JavaScript的数据类型都有什么？

　　基本数据类型：number string boolean null undefined

　　引用类型：object array function date regexp

 

3、将字符串"<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

　　"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

 

4、在前端开发中，比如我们要监听例如页面滚动事件这类频繁触发的事件，一般我们会做哪些优化处理？

　　节流 在一定时间内只会执行一次  

　　拓展 防抖，只会执行最后一次触发的事件

 

5、什么是防抖、节流？

　　概念：

　　函数防抖(debounce)：触发高频事件n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，简而言之，就是n秒内只会执行最后一次触发的事件

　　函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会吸是函数的执行频率

　　函数防抖(debounce)和节流(throttle)都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象

　　1、函数防抖(debounce)

　　实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法

　　缺点：如果事件在规定时间内不断的触发，则调用方法会不断的延迟　　

　　// 防抖debounce代码：
　　function debounce(fn,delay) {
　　　　var timeout = null; // 创建一个标记用来存放定时器的返回值
　　　　return function (e) {
　　　　　　// 每当用户输入的时候把前一个 setTimeout clear 掉
　　　　　　clearTimeout(timeout);
　　　　　　// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
　　　　　　timeout = setTimeout(() => {
　　　　　　　　fn.apply(this, arguments);
　　　　　　}, delay);
　　　　};
　　}
　　// 处理函数
　　function handle() {
　　　　console.log('防抖：', Math.random());
　　}

　　//滚动事件
　　window.addEventListener('scroll', debounce(handle,500));

　　// 节流throttle代码：
　　function throttle(fn,delay) {
　　　　let canRun = true; // 通过闭包保存一个标记
　　　　return function () {
　　　　// 在函数开头判断标记是否为true，不为true则return
　　　　　　if (!canRun) return;
　　　　　　// 立即设置为false
　　　　　　canRun = false;
　　　　　　// 将外部传入的函数的执行放在setTimeout中
　　　　　　setTimeout(() => {
　　　　　　　　// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
　　　　　　　　// 当定时器没有执行的时候标记永远是false，在开头被return掉
　　　　　　　　fn.apply(this, arguments);
　　　　　　　　canRun = true;
　　　　　　}, delay);
　　　　};
　　}
　　function sayHi(e) {
　　　　console.log('节流：', e.target.innerWidth, e.target.innerHeight);
　　}
　　window.addEventListener('resize', throttle(sayHi,500));

 

 

 

 

原文链接：https://blog.csdn.net/zuorishu/article/details/93630578