JS面试题汇总(五)

news/2024/7/11 1:22:30 标签: js, javascript, 前端, 面试, es6

📒博客首页:酸狗的博客🍋
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
💖热爱前端学习,期待一起交流!✨
🙏作者水平很有限,如果发现错误,求告知,多谢!🌈
😎有问题可私信我交流🙄

🧲往期点这里:↓⚡
JS面试题汇总(一)
JS面试题汇总(二)
JS面试题汇总(三)
JS面试题汇总(四)
41. this 和 apply 的应用

参考答案:
比如求数组的最大值 Math. max. apply(this, 数组)

js">var numbers = [5, 458, 120, -215];
var maxInNumbers = Math.max.apply(this, numbers); //第一个参数也可以填Math或null
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this, 5, 458, 120, -215);
console.log(maxInNumbers); // 458

42. split() join()的区别

参考答案:

join():用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串

split():用于把一个字符串通过指定的分隔符进行分隔成数组

43. JavaScript 的数据类型

参考答案:JS 数据类型共有六种,分别是 String、Number、Boolean、Null、Undefined 和 Object 等, 另外,ES6 新增了 Symbol 类型。其中,Object 是引用类型,其他的都是基本类型(Primitive Type)。

44. 如何判断一个对象是否属于某个类?

参考答案:instanceof

解析:

js">if (a instanceof Person) {
    alert("yes");
}

45. new 操作符具体干了什么呢?

参考答案:

样本一

new 共经过了 4 几个阶段

  • 1、创建一个空对象
  • 2、设置原型链
  • 3、让 Func 中的 this 指向 obj,并执行 Func 的函数体
  • 4、判断 Func 的返回值类型:

样本二

js">function Test(){}
const test = new Test()

1. 创建一个新对象:

js">const obj = {}

2. 设置新对象的 constructor 属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的 prototype 对象

js">obj.constructor = Test
obj.__proto__ = Test.prototype

3. 使用新对象调用函数,函数中的 this 被指向新实例对象

js">Test.call(obj)

4. 将初始化完毕的新对象地址,保存到等号左边的变量中

46. call() 和 apply() 的含义和区别?

参考答案:

首先说明两个方法的含义:

  • call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B. call(A, args1, args2); 即 A 对象调用 B 对象的方法。
  • apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B. apply(A, arguments); 即 A 对象应用 B 对象的方法。

call 与 apply 的相同点:

  • 方法的含义是一样的,即方法功能是一样的;
  • 第一个参数的作用是一样的;

call 与 apply 的不同点:两者传入的列表形式不一样

  • call 可以传入多个参数;
  • apply 只能传入两个参数,所以其第二个参数往往是作为数组形式传入

想一想哪个性能更好一些呢?

47. sort 排序原理

参考答案:

冒泡排序法

解析:

冒泡排序法的原理:

  • 比较相邻的元素。如果第一个比第二个大,就交换他们两个。
  • 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
  • 针对所有的元素重复以上的步骤,除了最后一个。
  • 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。

示例:

js">var arr = [1, 5, 4, 2];
// sort()方法的比较逻辑为:
// 第一轮:1和5比,1和4比,1和2比
// 第二轮:5和4比,5和2比
// 第三轮:4和2比
js">// 一.sort排序规则 return大于0则交换数组相邻2个元素的位置
// 二.arr.sort(function (a,b) {})中
//         a -->代表每一次执行匿名函时候,找到的数组中的当前项;
//         b -->代表当前项的后一项;

// 1.升序
var apple = [45, 42, 10, 147, 7, 65, -74];
// ①默认法,缺点:只根据首位排序
console.log(apple.sort());
// ②指定排序规则法,return可返回任何值
console.log(
    apple.sort(function(a, b) {
        return a - b; //若return返回值大于0(即a>b),则a,b交换位置
    })
);

//2.降序
var arr = [45, 42, 10, 111, 7, 65, -74];
console.log(
    apple.sort(function(a, b) {
        return b - a; //若return返回值大于零(即b>a),则a,b交换位置
    })
);

参考 1、参考 2

48. Zepto 的点透问题如何解决?

参考答案:

方案一:来得很直接 github 上有个 fastclick 可以完美解决https://github.com/ftlabs/fastclick

引入 fastclick. js,因为 fastclick 源码不依赖其他库所以你可以在原生的 js 前直接加上

js">window.addEventListener(
    "load",
    function() {
        FastClick.attach(document.body);
    },
    false
);

或者有 zepto 或者 jqm 的 js 里面加上

js">$(function() {
    FastClick.attach(document.body);
});

当然 require 的话就这样:

js">var FastClick = require("fastclick");
FastClick.attach(document.body, options);

方案二:用 touchend 代替 tap 事件并阻止掉 touchend 的默认行为 preventDefault()

js">$("#cbFinish").on("touchend", function(event) {
    //很多处理比如隐藏什么的
    event.preventDefault();
});

方案三:延迟一定的时间(300ms+)来处理事件

js">$("#cbFinish").on("tap", function(event) {
    setTimeout(function() {
        //很多处理比如隐藏什么的
    }, 320);
});

这种方法其实很好,可以和 fadeInIn/fadeOut 等动画结合使用,可以做出过渡效果

理论上上面的方法可以完美的解决 tap 的点透问题,如果真的不行,用 click

解析:

1、“点透”是什么?

你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。

2、为什么会出现点透呢?

参考

49. 如何判断当前脚本运行在浏览器还是 node 环境中?

参考答案:

通过判断 Global 对象是否为 window,如果不为 window,当前脚本没有运行在浏览器中

50. 移动端最小触控区域是多大?

参考答案:

苹果推荐是 44pt x 44pt

解析:参考

感谢阅读,后续还会更新,关注酸狗不迷路~


http://www.niftyadmin.cn/n/805956.html

相关文章

my github

https://github.com/GitHub42096/zhangjie

IEEE 802.11b标准简析 (转)

IEEE 802.11b标准简析 (转)[more]IEEE 802.11b标准简析(作者:李伟 2001年02月14日 09:44)以往,无线局域网发展缓慢,推广应用困难,主要是由于传输速率低、成本高、产品系列有限,且很多产品不能相…

【线程池源码系列】ThreadPoolExecutor 源码解析(上)

ThreadPoolExecutor 属性 /*** 高 3 位是 线程池状态* 后 29 位是 工作线程个数*/ private final AtomicInteger ctl new AtomicInteger(ctlOf(RUNNING, 0));private static final int COUNT_BITS Integer.SIZE - 3; private static final int CAPACITY (1 << COU…

JS面试题汇总(六)

&#x1f4d2;博客首页&#xff1a;酸狗的博客&#x1f34b; &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f496;热爱前端学习&#xff0c;期待一起交流&#xff01;✨ &#x1f64f;作者水平很有限&#xff0c;如果发现错误&#x…

Android-IM架构设计

###1. 架构总览 ###2. 模块介绍 ####2.1 协议封装与任务流程 #####1) 协议与任务的封装 a. 协议有协议头(协议头因为格式相同&#xff0c;被抽象出来)和协议体组成&#xff0c;协议有两类&#xff1a;请求协议(request)和回复协议(response)&#xff1b;b. 任务(action)由请求协…

Cygwin中vi编辑器方向键和Backspace键不好使的解决方法

cd ~touch .virc修改.virc文件&#xff08;如果没有就创建&#xff09;vi .virc添加以下内容set nocpset backspacestart,indent,eol保存退出:wq如果是vim就修改.vimrc文件。 转&#xff1a;http://blog.chinaunix.net/xmlrpc.php?rblog/article&uid26669282&id406836…

家用电脑何去何从 (转)

家用电脑何去何从 (转)[more]家用电脑何去何从新华网 (2001.02.16 16:01:20)新华网消息 &#xff12;&#xff10;&#xff10;&#xff10;年中国个人电脑市场在互联网应用的推动下保持了高速增长。今后的家用电脑市场将会出现哪些变化呢&#xff1f;笔者为此请教了业内专家&…

【线程池源码系列】ThreadPoolExecutor 源码解析(下)

Woker worker 就是工作线程的 Runnable 参数对象&#xff0c;线程启动后会调用其 run() // 继承 AQS 主要是为了方便线程的中断处理&#xff0c;即不是为了防止有多个线程来争抢什么资源&#xff0c; // 而是因为&#xff0c;如果当前线程在 getTask() 获取到 task &#xff…