面试题

杂项

  1. <script type="text/javascript">
    /*
     问题: 结果输出多少?
     
     作用域在函数定义时就已经确定
     */
    var x = 10;
    function fn() {
      console.log(x);
    }
    function show(f) {
      var x = 20;
      f();
    }
    show(fn) // 10
</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    ```html
    <script type="text/javascript">
        /*
         问题: 结果输出多少?
         
         作用域在函数定义时就已经确定
         */
        var x = 10;
        function show() {
          var x = 20;
          function fn() {
          console.log(x);
        }
          fn();
        }
        show() // 20
    </script>
    

沿着作用域链找变量，而作用域链在函数定义时就已经确定好了。

  2. var obj = {
    fn2: function () {
        console.log(fn2) // fn2不是声明的变量，而是obj的属性
    }
}
obj.fn2()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
       
    3. XSS攻击：

       方法：

       * 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
       * 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
       * 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
       * 在标签的 href、src 等属性中，包含 `javascript:` 等可执行代码。
       * 在 onload、onerror、onclick 等事件中，注入不受控制代码。

       如果开发者没有将用户输入的文本进行合适的过滤，就贸然插入到 HTML 中，这很容易造成注入漏洞。攻击者可以利用漏洞，构造出恶意的代码指令，进而利用恶意代码危害数据安全。

       Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。

       XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

       分类：

       * 存储型 - 攻击者将恶意代码提交到目标网站的数据库中
       * 反射型 - 攻击者构造出特殊的 URL，其中包含恶意代码
       * DOM型 - 攻击者构造出特殊的 URL，其中包含恶意代码
         * DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
         * 实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行，如VUE中的`v-html`

       预防：

       * 输入过滤
       * 纯前端渲染
       * HTML转义，使用转义HTML库
       * 在使用 `.innerHTML`、`.outerHTML`、`document.write()` 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 `.textContent`、`.setAttribute()` 等。
       * 如果用 Vue/React 技术栈，并且不使用 `v-html`/`dangerouslySetInnerHTML` 功能，就在前端 render 阶段避免 `innerHTML`、`outerHTML` 的 XSS 隐患。
       * 输入内容长度限制
       * 验证码
       * HTTP-only Cookie

       [前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队 (meituan.com)](https://tech.meituan.com/2018/09/27/fe-security.html)

    * 区分赋值、浅拷贝、深拷贝？

      <img src="https://gitee.com/zhangjialin_zhulan/myimagerepo/raw/master/images/image-20211226155317204.png" alt="image-20211226155317204" style="zoom:80%;" />

    * 面试：讲一讲ES6里面的Set/WeakSet/Map/WeakMap

      * Set：
        * 成员唯一、无序且不重复。
        * [value, value]，键值与键名是一致的（或者说只有键值，没有键名）。
        * 可以遍历，方法有：add、delete、has。

      * WeakSet：
        * 成员都是对象。
        * 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏。
        * 不能遍历，方法有add、delete、has。

      * Map：
        * 本质上是键值对的集合，类似集合。
        * 可以遍历，方法很多可以跟各种数据格式转换。
      * WeakMap：
        * 只接受对象作为键名（null除外），不接受其他类型的值作为键名。
        * 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的。
        * 不能遍历，方法有get、set、has、delete。

    * ES6手写迭代器并优化（太难了）。。。

    ## **Vue面试题**


    **生命周期函数面试题**

    + 1.什么是 vue 生命周期
    + 2.vue生命周期的作用是什么
    + 3.第一次页面加载会触发哪几个钩子
    + 4.简述每个周期具体适合哪些场景
    + 5.created和mounted的区别
    + 6.vue获取数据在哪个周期函数
    + 7.请详细说下你对vue生命周期的理解？

    **vue路由面试题**

    + 1.mvvm 框架是什么？
    + 2.vue-router 是什么?它有哪些组件
    + 3.active-class 是哪个组件的属性？
    + 4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
    + 5.vue-router 有哪几种导航钩子?
    + 6.route和router 的区别
    + 7.vue-router响应路由参数的变化
    + 8.vue-router传参
    + 9.vue-router的两种模式
    + 10.vue-router实现路由懒加载（ 动态加载路由 ）

    **vue常见面试题**

    + 1.vue优点
    + 2.vue父组件向子组件传递数据？
    + 3.子组件像父组件传递事件
    + 4.v-show和v-if指令的共同点和不同点
    + 5.如何让CSS只在当前组件中起作用
    + 6.的作用是什么?
    + 7.如何获取dom
    + 8.说出几种vue当中的指令和它的用法？
    + 9.vue-loader是什么？使用它的用途有哪些？
    + 10.为什么使用key
    + 11.axios及安装
    + 12.axios解决跨域
    + 13.v-modal的使用
    + 14.scss的安装以及使用
    + 15.请说出vue.cli项目中src目录每个文件夹和文件的用法？
    + 16.分别简述computed和watch的使用场景
    + 17.v-on可以监听多个方法吗
    + 18.$nextTick的使用
    + 19.vue组件中data为什么必须是一个函数
    + 20.vue事件对象的使用
    + 21 组件间的通信
    + 22.渐进式框架的理解
    + 23.Vue中双向数据绑定是如何实现的
    + 24.单页面应用和多页面应用区别及优缺点
    + 25.vue中过滤器有什么作用及详解
    + 26.v-if和v-for的优先级
    + 27.assets和static的区别
    + 28.列举常用的指令
    + 29.vue常用的修饰符
    + 30.数组更新检测
    + 31.Vue.set视图更新
    + 32.自定义指令详解
    + 33.vue的两个核心点
    + 34.vue和jQuery的区别
    + 35 引进组件的步骤
    + 36.Vue-cli打包命令是什么？打包后悔导致路径问题，应该在哪里修改
    + 37.三大框架的对比
    + 38.跨组件双向数据绑定
    + 39.delete和Vue.delete删除数组的区别
    + 40.SPA首屏加载慢如何解决
    + 41.Vue-router跳转和location.href有什么区别
    + 42.vue slot
    + 43.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
    + 44.vue遇到的坑，如何解决的？
    + 45.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
    + 46.Vue2中注册在router-link上事件无效解决方法
    + 47.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
    + 48.axios的特点有哪些
    + 49.请说下封装 vue 组件的过程？
    + 50.vue 各种组件通信方法（父子 子父 兄弟 爷孙 毫无关系的组件）
    + 51.params和query的区别
    + 52.vue mock数据
    + 53 vue封装通用组件
    + 54.vue初始化页面闪动问题
    + 55.vue禁止弹窗后的屏幕滚动
    + 56.vue更新数组时触发视图更新的方法
    + 57.vue常用的UI组件库
    + 58.vue如何引进本地背景图片
    + 59.vue如何引进sass
    + 60.vue修改打包后静态资源路径的修改

    **vuex常见面试题**

    + 1.vuex是什么？怎么使用？哪种功能场景使用它？
    + 2.vuex有哪几种属性
    + 3.不使用Vuex会带来什么问题
    + 4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
    + 5.vuex一个例子方法
    + 6.Vuex中如何异步修改状态
    + 7.Vuex中actions和mutations的区别

    **vue项目实战**

    + 1.顶部悬停效果
    + 2.电话本列表效果（ 右边字母分类 上下滑动 旁边字母显示高亮）
    + 3.vue做代理
    + 4.Vue路由切换时的左滑和右滑效果示例

    ## **ES6面试题**


    **ES6新增方法面试题**

    + 1.let const var比较
    + 2.反引号（`）标识
    + 3.函数默认参数
    + 4.箭头函数
    + 5.属性简写
    + 6.方法简写
    + 7.Object.keys()方法，获取对象的所有属性名或方法名
    + 8.Object.assign ()原对象的属性和方法都合并到了目标对象
    + 9.for...of 循环
    + 10.import和export
    + 11.Promise对象
    + 12.解构赋值
    + 13.set数据结构（可用于快速去重）
    + 14.Spread Operator 展开运算符(...)
    + 15.字符串新增方法



    **ES6数组面试题**

    + 1.forEach()
    + 2.map()
    + 3.filter()
    + 4.reduce()
    + 5.some()
    + 6.every()
    + 7.all()方法

    **ES6编程题**

    + 1.使用解构，实现两个变量的值的交换
    + 2.利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。
    + 3.使用ES6改下面的模板
    + 4.把以下代码使用两种方法，来依次输出0到9？

    ## **js面试题**

    + 1.简述同步和异步的区别
    + 2.怎么添加、移除、复制、创建、和查找节点
    + 3.实现一个函数clone 可以对Javascript中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制
    + 4.如何消除一个数组里面重复的元素
    + 5.写一个返回闭包的函数
    + 6.使用递归完成1到100的累加
    + 7.Javascript有哪几种数据类型
    + 8.如何判断数据类型
    + 9.console.log(1+'2')和console.log(1-'2')的打印结果
    + 10.Js的事件委托是什么，原理是什么
    + 11.如何改变函数内部的this指针的指向
    + 12.列举几种解决跨域问题的方式，且说明原理
    + 13.谈谈垃圾回收机制的方式及内存管理
    + 14.写一个function ，清除字符串前后的空格
    + 15.js实现继承的方法有哪些
    + 16.判断一个变量是否是数组，有哪些办法
    + 17.let ，const ，var 有什么区别
    + 18.箭头函数与普通函数有什么区别
    + 19.随机取1-10之间的整数
    + 20.new操作符具体干了什么
    + 21.Ajax原理
    + 22.模块化开发怎么做
    + 23.异步加载Js的方式有哪些
    + 24.xml和 json的区别
    + 25.webpack如何实现打包的
    + 26.常见web安全及防护原理
    + 27.用过哪些设计模式
    + 28.为什么要同源限制
    + 29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
    + 30.javascript有哪些方法定义对象
    + 31.说说你对promise的了解
    + 32.谈谈你对AMD、CMD的理解
    + 33.web开发中会话跟踪的方法有哪些
    + 34.介绍js有哪些内置对象？
    + 35.说几条写JavaScript的基本规范？
    + 36.javascript创建对象的几种方式？
    + 37.eval是做什么的？
    + 38.null，undefined 的区别？
    + 39.[“1”, “2”, “3”].map(parseInt) 答案是多少？
    + 40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
    + 41.js延迟加载的方式有哪些？
    + 42.defer和async
    + 43.说说严格模式的限制
    + 44.attribute和property的区别是什么？
    + 45.ECMAScript6 怎么写class么，为什么会出现class这种东西?
    + 46.常见兼容性问题
    + 47.函数防抖节流的原理
    + 48.原始类型有哪几种？null是对象吗？
    + 49.为什么console.log(0.2+0.1==0.3) //false
    + 50.说一下JS中类型转换的规则？
    + 51.深拷贝和浅拷贝的区别？如何实现
    + 52.如何判断this？箭头函数的this是什么
    + 53.== 和 ===的区别
    + 54.什么是闭包
    + 55.JavaScript原型，原型链 ? 有什么特点？
    + 56.typeof()和instanceof()的用法区别
    + 57.什么是变量提升
    + 58.all、apply以及bind函数内部实现是怎么样的
    + 59.为什么会出现setTimeout倒计时误差？如何减少
    + 60.谈谈你对JS执行上下文栈和作用域链的理解
    + 61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？
    + 62.prototype 和 proto 区别是什么？
    + 63.使用ES5实现一个继承？
    + 64.取数组的最大值（ES5、ES6）
    + 65.ES6新的特性有哪些？
    + 66.promise 有几种状态, Promise 有什么优缺点 ?
    + 67.Promise构造函数是同步还是异步执行，then呢 ?promise如何实现then处理 ?
    + 68.Promise和setTimeout的区别 ?
    + 69.如何实现 Promise.all ?
    + 70.如何实现 Promise.finally ?
    + 71.如何判断img加载完成
    + 72.如何阻止冒泡？
    + 73.如何阻止默认事件？
    + 74.ajax请求时，如何解释json数据
    + 75.json和jsonp的区别?
    + 76.如何用原生js给一个按钮绑定两个onclick事件？
    + 77.拖拽会用到哪些事件
    + 78.document.write和innerHTML的区别
    + 79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
    + 80.浏览器是如何渲染页面的？
    + 81.$(document).ready()方法和window.onload有什么区别？
    + 82.jquery中.get()提交和post()提交有区别吗？
    + 83.对前端路由的理解？前后端路由的区别？
    + 84.手写一个类的继承
    + 85.XMLHttpRequest：XMLHttpRequest.readyState;状态码的意思



    ## **正则表达式常见面试题**

    + 1.给一个连字符串例如：get-element-by-id转化成驼峰形式。

      ```js
      let str = "get-element-by-id"
      str.match(/[a-z]+/g).map(v=>{
          return v.slice(0,1).toUpperCase() + v.slice(1) 
      }).join("")

  • 2.匹配二进制数字

    1
    2
    3
    var str = "10101111";
    var reg = /^[01]+$/g;
    console.log(reg.test(str));

  • 3.非零的十进制数字 (有至少一位数字, 但是不能以0开头)

  • 4.匹配一年中的12个月

  • 5.匹配qq号最长为13为

  • 6.匹配常见的固定电话号码

  • 7.匹配ip地址

    1
    2
    let address = '127.0.0.1';
    console.log(/((0.)|([1-9]+.))/.test(address))

  • 8.匹配用尖括号括起来的以a开头的字符串

  • 9.分割数字每三个以一个逗号划分

  • 10.判断字符串是否包含数字

  • 11.判断电话号码

  • 12.判断是否符合指定格式

  • 13.判断是否符合USD格式

  • 14.JS实现千位分隔符

  • 15.获取 url 参数

  • 16.验证邮箱

  • 17.验证身份证号码

  • 18.匹配汉字

  • 19.去除首尾的’/‘

  • 20.判断日期格式是否符合 ‘2017-05-11’的形式，简单判断，只判断格式

  • 21.判断日期格式是否符合 ‘2017-05-11’的形式，严格判断（比较复杂）

  • 22.IPv4地址正则

  • 23.十六进制颜色正则

  • 24.车牌号正则

  • 25.过滤HTML标签

  • 26.密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

  • 27.URL正则

  • 28.匹配浮点数

浏览器/html/css面试题

1.什么是盒模型

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

3.简述src和href的区别

4.什么是css Hack

5.什么叫优雅降级和渐进增强

6.px和em的区别

7.HTML5 为什么只写

8.Http的状态码有哪些

9.一次完整的HTTP事务是怎么一个过程

10.HTTPS是如何实现加密

11.浏览器是如何渲染页面的

12.浏览器的内核有哪些？分别有什么代表的浏览器

13.页面导入时，使用link和@import有什么区别

14.如何优化图像，图像格式的区别

15.列举你了解Html5. Css3 新特性

16.可以通过哪些方法优化css3 animation渲染

17.列举几个前端性能方面的优化

18.如何实现同一个浏览器多个标签页之间的通信

19.浏览器的存储技术有哪些

20.css定位方式

21.尽可能多的写出浏览器兼容性问题

22.垂直上下居中的方法

23.响应式布局原理

25.清除浮动的方法

26.http协议和tcp协议

27.刷新页面，js请求一般会有哪些地方有缓存处理

28.如何对网站的文件和资源进行优化

29.你对网页标准和W3C重要性的理解

30.Http和https的区别

31.data-属性的作用

32.如何让Chrome浏览器显示小于12px的文字

33.哪些操作会引起页面回流（Reflow）

34.CSS预处理器的比较less sass

35.如何实现页面每次打开时清除本页缓存

36.什么是Virtual DOM,为何要用Virtual DOM

37.伪元素和伪类的区别

38.http的几种请求方法和区别

39.前端需要注意哪些SEO

40.的title和alt有什么区别

41.从浏览器地址栏输入url到显示页面的步骤

42.如何进行网站性能优化

43.语义化的理解

44.HTML5的离线储存怎么使用，工作原理能不能解释一下？

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

46.iframe有那些缺点？

47.WEB标准以及W3C标准是什么?

48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

49.HTML全局属性(global attribute)有哪些

50.Canvas和SVG有什么区别？

51.如何在页面上实现一个圆形的可点击区域？

52.网页验证码是干嘛的，是为了解决什么安全问题

53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

54.CSS选择器有哪些？哪些属性可以继承？

55.CSS优先级算法如何计算？

56.CSS3有哪些新特性？

57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

58.用纯CSS创建一个三角形的原理是什么？

59.常见的兼容性问题？

60.为什么要初始化CSS样式

61.absolute的containing block计算方式跟正常流有什么不同？

62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

63.display:none与visibility：hidden的区别？

64.position跟display、overflow、float这些特性相互叠加后会怎么样？

65.对BFC规范(块级格式化上下文：block formatting context)的理解？

66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

67.上下margin重合的问题

68.设置元素浮动后，该元素的display值是多少？

69.移动端的布局用过媒体查询吗？

70.CSS优化、提高性能的方法有哪些？

71.浏览器是怎样解析CSS选择器的？

72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

73.margin和padding分别适合什么场景使用？

74.元素竖向的百分比设定是相对于容器的高度吗？

75.全屏滚动的原理是什么？用到了CSS的哪些属性？

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

77.视差滚动效果？

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

79.让页面里的字体变清晰，变细用CSS怎么做？

80.position:fixed;在android下无效怎么处理？

81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

83.display:inline-block 什么时候会显示间隙？

84.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

86.style标签写在body后与body前有什么区别？

87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

88.阐述一下CSS Sprites