开发者社区> 聂雄> 正文

前端高频面试题 JavaScript篇

简介: 以下问题都来自于互联网前端面经分享,回答为笔者通过查阅资料加上自身理解总结,不保证解答的准确性,有兴趣讨论的同学可以留言或者私信讨论。 1.JS的异步机制? 2.闭包如何实现? 3.原型链、继承? 4.实现订阅者发布者模式? 5.数组的方法有哪些? 1.JS的异步机制? JS使用一个任务队列记录异步任务的回调函数,当异步任务(或者事件被激发,如鼠标点击)完成后,其回调函数会被添加到该任务队列的末尾,JS主线程在将所有的同步任务执行完毕后,会无限循环地去检查任务队列,如果任务队列不为空,则主线程回去执行任务队列中的任务。
+关注继续查看

以下问题都来自于互联网前端面经分享,回答为笔者通过查阅资料加上自身理解总结,不保证解答的准确性,有兴趣讨论的同学可以留言或者私信讨论。

1.JS的异步机制?
2.闭包如何实现?
3.原型链、继承?
4.实现订阅者发布者模式?
5.数组的方法有哪些?

1.JS的异步机制?

JS使用一个任务队列记录异步任务的回调函数,当异步任务(或者事件被激发,如鼠标点击)完成后,其回调函数会被添加到该任务队列的末尾,JS主线程在将所有的同步任务执行完毕后,会无限循环地去检查任务队列,如果任务队列不为空,则主线程回去执行任务队列中的任务。
关于异步机制的详细解答,可以参考:Javascript异步机制

2.闭包如何实现?

在计算机科学中,闭包是引用了自由变量的函数。在Javascript中,在一个函数中定义一个内部函数,并且内部函数引用了外部函数作用域的变量,然后将这个内部函数作为外部函数的返回值,这样就构成了一个闭包。如下代码:

function wrapper() {
    var milk = '特仑苏'
    function drink() {
        console.log('我喝了' + milk)
    }
    return drink
}
var result = wrapper()
result()  //我喝了特仑苏

关于闭包的详细解答,可以参考:Javascript闭包

3.原型链、继承?

在Javascript中,每当我们定义一个函数,Javascript引擎就会自动为这个函数对象添加一个prototype属性(也被称作原型),每当我们使用这个函数new创建一个对象时,Javascript引擎就会自动为这个对象中添加一个__ proto __ 属性,并让其指向其类的prototype。当我们访问一个对象的属性时,首先回去寻找该对象本身的属性,如果找不到的话回去寻找该对象的 __ proto __ 作用域下的属性,一直到寻找到该属性或者没有__ proto __为止。这种寻找实例属性的方式我们称作原型链。
当我们让子类的prototype指向父类的实例时,便实现了原型链继承。

// 原型链实现继承的关键代码
Son.prototype = new Father()

当然Javascript的继承方式还有 构造函数继承 、 组合继承 、 寄生继承,更详尽的解答,可以参考:对Javascript 类、原型链、继承的理解

4.实现订阅/发布者模式?

var publisher = {}; // 定义发布者
publisher.list = []; // 缓存列表 存放订阅者回调函数
// 增加订阅者
publisher.listen = function(fn) {
    publisher.list.push(fn);  // 订阅消息添加到缓存列表
}
// 发布消息
publisher.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        var that = this
        fn.apply(null, arguments); 
    }
}

详细答案可以参考:Javascript中理解发布--订阅模式

5.数组的方法有哪些?

这个题属于开放题,答案就比较多了,下面我列举一下比较常用的数组方法:
遍历方法:
包括 map、foreach、filter

let arr = [{
    name:"西瓜",
    type:"水果"
},{
    name:"芒果",
    type:"水果"
},{
    name:"小龙虾",
    type:"夜宵"
}]
arr.forEach((item, index) => {
    console.log(item.name)
}) //分别打印 西瓜 芒果 小龙虾
arr.map((item, index) => {
    return item.name
}) //返回数组["西瓜", "芒果", "小龙虾"]
arr.filter((item, index) => {
    if (item.type == "水果")
        return true;
    else 
        return false;
}) //返回数组[{ name: 西瓜, type : 水果 }, { name: 芒果, type : 水果 }]

forEach:用于遍历数组,无返回值;
map:遍历数组之后,对每一项返回一个值,并将这些返回值都推入一个数组,最后返回这个新的数组;
filter:对数据进行过滤,回调函数返回值为false的项将被过滤掉,最后返回过滤后的数组。
操作方法:
包括 concat、push、pop、unshift、shift、splice

let listA = ["西瓜", "芒果"]
let listB = ["小龙虾"]
let listC = listA.concat(listB)
// 返回值:[西瓜, 芒果, 小龙虾]

listC.push("鸡腿")
// 返回值:4
// 数组值:[西瓜, 芒果, 小龙虾, 鸡腿]

listC.pop()
// 返回值:"鸡腿"
// 数组值:[西瓜, 芒果, 小龙虾]

listC.unshift("鸡腿")
// 返回值:4
// 数组值:[鸡腿, 西瓜, 芒果, 小龙虾]

listC.shift()
// 返回值:"鸡腿"
// 数组值:[西瓜, 芒果, 小龙虾]

listC.splice(1, 1, "冰激凌", "奶茶")
// 返回值:[芒果]
// 数组值:[西瓜, 冰激凌, 奶茶, 小龙虾]

concat:拼接数组,将参数数组拼接到调用数组末尾,并返回这个新数组;值得一提的是,这个方法并不会改变调用数组和参数数组,即上例中的listA、listB);
push:在数组尾部插入新的元素,返回插入元素之后的数组长度;
pop:从数组尾部删除元素,返回删除的元素;
unshift:在数组头部插入新的元素,返回插入元素之后的数组长度;
shift:从数组头部删除元素,返回删除的元素;
splice:删除元素并插入元素,第一个参数为操作位置X,第二个参数为需要从操作位置X删除元素数量,后面的参数为需要从操作位置X插入的元素,返回删除的元素组成的数组。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18822 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25154 0
前端必知词汇:JavaScript
JavaScript (JS) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript是一种属于网络的脚本语言, 已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
311 0
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 下
15 0
前端开发教程:Javascript中如何定义类?
很多新手朋友第一次建网站时候,如何选择一款适合的网站源码是比较困惑的问题,选择一款好的网站源码可以节约大量时间和金钱,但是由于网站源码参差不齐,免费的,收费的,淘宝几元钱购买的,几万块钱的都有,那么怎么看一个网站源码是否值得使用呢,下面从专业的角度来分析。
612 0
前端学习:javascript进阶
前端学习:javascript进阶
46 0
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 上
1.2w字 | 初中级前端 JavaScript 自测清单 - 1 上
9 0
前端进阶: 如何用javascript存储函数?
任何一家Saas企业都需要有自己的低代码平台.在可视化低代码的前端研发过程中, 发现了很多有意思的技术需求, 在解决这些需求的过程中, 往往也会给自己带来很多收获, 今天就来分享一下在研发Dooring过程中遇到的前端技术问题——javascript函数存储.
17 0
+关注
聂雄
原材料专业小硕一枚,一年前端从业经验,目前主学机器学习方向。
14
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载