前端面试题

最新推荐文章于 2024-04-15 08:37:01 发布

jjw_zyfx

最新推荐文章于 2024-04-15 08:37:01 发布

阅读量280

点赞数

分类专栏：前端面试题文章标签：面试

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/104678274

版权

前端同时被 2 个专栏收录

296 篇文章 0 订阅

订阅专栏

面试题

3 篇文章 0 订阅

订阅专栏

JavaScript相关

1、请介绍一下对VUE生命周期的理解，created和mounted有什么区别？

2、介绍一下VUE的数据双向绑定原理？在使用中有那些注意事项，如何避免

3、VUE中组件传值的常用方法

4、前端路由的实现原理

5、前端性能优化有那些方法

6、移动端页面调试有那些技巧

7、介绍下Promise，主要解决了什么问题？如果有多个Promise 该如何优化？

8、什么是跨域？跨域的常用解决方案有哪些？（如果说到jsonp，jsonp的原理是什么？）

9、什么是闭包？闭包可以用来解决什么问题？

10、JavaScript的作用域和作用域链

11、防抖和节流的区别

12、什么是JavaScript原型，原型链 ? 有什么特点？

13、Javascript如何实现继承？

14、编码取出以下数组中的最大值？

[1,654,32,54,126,545,16,52,66,10]

15、给定以下两个数组，请编码取出ID相同的项？

let a = [
    { id: 2, name: 'bbb'},
    { id: 3, name: 'ccc'},
    { id: 5, name: 'eee'},
    { id: 6, name: 'fff'},
    { id: 8, name: 'hhh'},
]
let b = [
    { id: 1, name: 'aaa'},
    { id: 3, name: 'ccc'},
    { id: 4, name: 'ddd'},
    { id: 6, name: 'fff'},
    { id: 7, name: 'ggg'},
]

16、写一个方法将以下类型数据处理成树形结构？

[
    { "id": 1013, "parentId": 0 },
    { "id": 1014, "parentId": 0 },
    { "id": 1061, "parentId": 1013 }, 
    { "id": 1063, "parentId": 1014 }, 
    { "id": 1066, "parentId": 1014 }, 
    { "id": 1067, "parentId": 1066 }
]

17、请说明以下代码中各个console.log打印的值，以及原因：

(function () {
    console.log(this)  
    console.log(a) 
    var a = {
        b: function () {
            console.log(this)
        }
    }
    a.b()  
})()

for (var i = 1; i < 10; i++) {
    setTimeout(() => {
        console.log(i) 
    }, 0);
}
console.log(i)

var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[0] = 4
console.log(arr1)  
console.log(arr2)

console.log(1)
setTimeout(console.log, 0, 2)
new Promise(resolve => {
    console.log(3)
    setTimeout(resolve, 0, 4)
}).then(console.log)
console.log(5)

18、优化以下代码：

var str = "我和我最后的倔强"；
str = str + "握紧双手绝对不放";
str = str + "下一站是不是天堂";
str = str + "就算失望不能绝望";
console.log(str);

19、请编写一个函数对以下数组进行随机排序：

[1,2,3,4,5,6,7,8,9,10]

20、请写出以下代码执行的结果

let arr = [2, 4, 6, 8, 10];

arr.reduce((x, y) => {
    return 10 * x + y
})

CSS相关

1、如何理解CSS的盒子模型？

2、如何使用纯CSS实现一个三角形？它的原理是什么？

3、如何实现0.5px的细线？

4、移动端自适应布局的实现方式？

5、如何实现页面元素的左右垂直居中？

6、什么是CSS中的重绘和回流？

7、css3中新增了那些属性，具体有什么用处？

8、css中都有那些选择器？他们的优先级是怎么样的？

HTML相关

1、html5新增的存储类型有那些？都有什么区别？

2、谈谈你对html5语义化的理解？

3、html5中新增了那些标签，它们具体有什么作用？

4、HTML5 Canvas 元素有什么用？

5、页面的行内元素有那些？块级元素有那些？

答案：

父组件和子组件中的生命周期调用顺序是啥？

1.原型链的最终返回的为啥？

原型链最终返回的为object对象

2.深拷贝和浅拷贝的方法都有哪些

https://www.cnblogs.com/echolun/p/7889848.html

浅拷贝：concat与slice

深拷贝：JSON.stringify与JSON.parse

1、请介绍一下对VUE生命周期的理解，created和mounted有什么区别？

答案：VUE的生命周期是指一个vue组件从创建到销毁的一些执行钩子，主要包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；created是在组件实例创建成功以后执行，mounted是在组件渲染到DOM中后执行；

2、介绍一下VUE的数据双向绑定原理？在使用中有那些注意事项，如何避免

答案：主要使用了ES5中的 Object.defineProperty 将组件中的数据转换成getter/setter。

注意点：VUE中无法检测到对象属性的添加或删除。可以使用vue.set方法向对象添加响应式属性

var vm = new Vue({
  data:{
    a:1
  }
})
// `vm.a` 是响应式的

vm.b = 2 // `vm.b` 是非响应式的

3、前端路由的实现原理

https://blog.csdn.net/faremax/article/details/78788725

4、前端性能优化有那些方法

使用css sprites，可以有效的减少http请求数
使用缓存
压缩js，css文件，减小文件体积
使用cdn，减小服务器负担
懒加载图片
预加载css，js文件
避免dom结构的深层次嵌套
给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流

4、介绍下Promise，主要解决了什么问题？如果有多个Promise 该如何优化？

http://uunote.mit.cn/uunote/#/home?doc_id=676&pid=191

5、什么是跨域？跨域的常用解决方案有哪些？（如果说到jsonp，jsonp的原理是什么？）

答案：略

6、什么是闭包？闭包可以用来解决什么问题？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。闭包的特性： 1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收

7、JavaScript的作用域和作用域链

JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了

8、防抖和节流的区别

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
节流：指定时间间隔内只会执行一次任务。

9、什么是JavaScript原型，原型链 ? 有什么特点？

答案：每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

10、Javascript如何实现继承？

答案：构造函数继承、原型继承、实例继承、拷贝继承

14、编码取出以下数组中的最大值？

Math.max.apply(null,  [1,654,32,54,126,545,16,52,66,10])

15、给定以下两个数组，请编码取出ID相同的项？

result = a.filter(item => b.some(val => val.id === item.id))

16、写一个方法将以下类型数据处理成树形结构？

方法一：

// 通过两次遍历，将树形结构数据处理完成
// 第一次遍历将所有数据添加到map对象里面 对应的key为对象的id，
// 并给对象添加初始化的children空数组。
// 第二次遍历，判断map对象是否存在数组遍历对象的pid为key的数据，
// 如果存在，将数据插入到map中对应pid对象的children数组里面。
// 难点：灵活运用js中引用类型的数据的引用特性。
// 优点：只需要两次循环就能把树形结构处理完成，性能比较好。
function listToTree(list) {
    var map = {},
        node, tree = [],
        i;
    for (i = 0; i < list.length; i++) {
        map[list[i].id] = list[i];
        list[i].children = [];
    }
    for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (node.parentId !== 0) {
            map[node.parentId].children.push(node);
        } else {
            tree.push(node);
        }
    }
    return tree;
}

方法二：

// 根据pid找到对应的子集集合并返回，然后把子集的ID作为递归调用，最后得到需要的树形结构
toTree (arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = toTree(arr, item.id);
          return true;
       }
   })
}

17、请说明以下代码中各个console.log打印的值，以及原因：

(function () {
    console.log(this)    // window
    console.log(a)     // undefined  变量提升
    var a = {
        b: function () {
            console.log(this)   // a对象
        }
    }
    a.b()  
})()

for (var i = 1; i < 10; i++) {
    setTimeout(() => {
        console.log(i)   
    }, 0);
}
console.log(i) 
// 全都是10

var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[0] = 4
console.log(arr1)  // 4,2,3
console.log(arr2)  // 4,2,3

console.log(1)
setTimeout(console.log, 0, 2)
new Promise(resolve => {
    console.log(3)
    setTimeout(resolve, 0, 4)
}).then(console.log)
console.log(5)

//  1 3 5 2 4

18、优化以下代码：

var str = "我和我最后的倔强"；
str = str + "握紧双手绝对不放";
str = str + "下一站是不是天堂";
str = str + "就算失望不能绝望";
console.log(str);

var temp = [];
temp.push("我和我最后的倔强")
temp.push("握紧双手绝对不放")
temp.push("下一站是不是天堂")
temp.push("就算失望不能绝望")
console.log(temp.join(''));

19、请编写一个函数对以下数组进行随机排序：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for (let i = arr.length - 1; i >=0; i--) {
    let randomIndex = Math.floor(Math.random() * (i + 1));
    [arr[randomIndex], arr[i]] = [arr[i], arr[randomIndex]]
}

20、请写出以下代码执行的结果

let arr = [2, 4, 6, 8, 10];

arr.reduce((x, y) => {
    return 10 * x + y
})

// 24690

jjw_zyfx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

JavaScript相关1、请介绍一下对VUE生命周期的理解，created和mounted有什么区别？2、介绍一下VUE的数据双向绑定原理？在使用中有那些注意事项，如何避免3、VUE中组件传值的常用方法4、前端路由的实现原理5、前端性能优化有那些方法6、移动端页面调试有那些技巧7、介绍下Promise，主要解决了什么问题？如果有多个Promise 该如何优化？...
复制链接

扫一扫