0
点赞
收藏
分享

微信扫一扫

面试题02

Alex富贵 2022-02-14 阅读 85

# 001

1. css的居中方式

   ```shell

   各种属性按情况搭配使用:

   1. text-align:center;

   2. line-height

   3. padding

   4. margin

   5. position

   6. translate

   ```

2. px,em,rem,%

   ```shell

   px: 像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

   em: 相对长度单位。相对于当前对象内文本的字体尺寸。

        如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

   rem: CSS3新增的一个相对单位。

        使用rem为元素设定字体大小时相对的只是HTML根元素。

   %: 元素相对于父级容器的百分比尺寸

   ```

3. display的值和作用

   ```shell

   常用的:

   none:    不显示

   block:   块级元素

   inline:  默认,内联元素

   inline-block:    内联块级元素

   ```

4. 路由跳转的方式

   ```shell

   1. 前端路由

   2. 后端路由

   3. 框架的router

   ```

5. vue生命周期的理解

   ```shell

   一个页面生成不是一瞬间的从无到有,它有一个产生过程,在这个过程中会回调生命周期钩子函数,这让我们可以在某些阶段运行一些我们自己的代码,生命周期的重点就是这些钩子函数。

   ```

6. vue数据双向绑定的原理,用了什么设计模式(web高级)

   ```shell

   数据双向绑定,无非数据在数据模型中展示到视图层时,两边的数据都保持一致,任意一方产生变化都会导致另一方产生同样的变化。

   vue帮我们支撑了这种变化,Vue的MVVM模型,主要是三个模块,视图层view,数据模型层Model,vue的ViewMode层,vue的VM层绑定Model层的数据并展示到View,View上数据的更新会被VM监听并更新Model

   ```

7. 数组去重

   ```shell

   代码简单方便用以下方法:

   1. Set()

   2. indexOf()

   3. includes()

   4. filter()

   ```

8. 统计字符串中出现最多的字符

   ```js

   let strs = "jsafl;dsjgnaglkajqiojrelj"

   let obj = {}

   for (let i=0;i<strs.length;i++) {

     let str = strs.charAt(i)

     if (!obj[str]) {obj[str] = 1}

     else obj[str]++

   }

   console.log(obj)

   

   let max = 0,res = null

   for (let key in obj) {

     if (obj[key] > max) {

       res = key

       max = obj[key]

     }

   }

   console.log(res,max)

   ```

9. js垃圾回收机制

   ```shell

   1. 周期性寻找未被引用的变量,释放其所用的内存

   2. 回收方式一般有标记清除和引用计数等

   3. 具有可达性的值不会被回收

   ```

10. 原型、原型链

    ```shell

    函数类用.prototype

    实例对象用.__proto__

    每个类都有其构造函数和原型,原型的链式指向就是原型链,原型链的顶端都是Object原型对象

    ```

    ![图解](https://images2018.cnblogs.com/blog/1326410/201805/1326410-20180522221652975-1796198961.png)



 

# 002

11. 作用域链

    ```shell

    js 变量作用域调用顺序规则。

   

    js 变量是否能被调用,与该变量的使用范围有关,这个就是作用域的基本概念。

   

    比如函数内声明的变量,外部不能直接访问,相对于函数外部,函数内的范围称为局部作用域,外部则相对该函数称为全局作用域。

    函数内的变量查找首先在函数内部查找,找不到则查找相对的全局作用域,若函数嵌套,查找方式依然如此。

   

    简而言之,就是变量先在本地范围查找,未找到则在比本地大一级的范围查找,未找到再往上大一级的范围查找,直到找到或未找到,这种查找方式称为作用域链

    ```

12. 购物车的实现过程(包括怎么布局,可以用vue、react、jq等)

    ```shell

    以移动端单页面应用举例:

    - 4个选项卡:首页、分类、购物车、我

    - 4个选项卡的静态页面编写

    - 4个选项卡中需要动态获取数据的元素编写网络请求动态渲染数据

    - 配置路由,响应点击的选项卡展示相应的界面

    ```

13. 购物车详情页优化(用户商品加入太多导致页面卡顿)(懒加载、分页)

    ```shell

    - 配置路由时采用懒加载方式

    - 购物车页面只展示一定量数据,页面滚动触底前一定距离产生网络请求再获取一定量数据,分批展示

    ```

14. 页面渲染过程

    ```shell

    1. 解析html页面构建DOM树

    2. 解析CSS

    3. 结合DOM和CSS规则构建渲染树

    4. 渲染树生成布局

    5. 渲染树绘制展示

    ```

15. 闭包

    ```shell

    一个外部函数,return 出去一个函数,再用一个变量接收外部函数的返回引用地址,再调用该地址,这个就称为闭包。

    说到闭包,不得不注意:

    闭包中的变量会一直保存在内存中,费内存,不能滥用

    `

    function f1() {

        var a = 11

        return function f2() {alert(a)}

    }

    var b = a()

    b()

    `

    ```

16. http协议

    ```shell

    - 特点:简单、灵活、无连接、无状态

    - 报文:请求报文和响应报文

    - 方法:get,post,put,delete等

    - 状态码

    - 持久连接/http长连接

    ```

17. http中的方法,除了get方法、post方法

    ```shell

    - put

    - head

    - delete

    - options

    ```

18. 数据结构(排序算法,冒泡以外的)

    ```shell

    数据元素之间的一种或多种特定关系的集合,由逻辑结构和存储结构组成

    逻辑结构就是数据之间的关系,一般分为线性和非线性

    常见线性结构:列表,栈,数组

    常见非线性结构:二维数组,多维数组

    存储结构就是计算机语言实现逻辑结构

    ```

19. vue和react的区别,用法区别

    ```shell

    - 组件化方式不同,一个是.vue式,一个是类式组件

    - 路由配置方式不同

    - 生命周期不同

    - 组件通信方式不同

    - vue上手更舒适,react更注重编程水平

    - 响应式的系统不同

    - react使用 jsx 语法

    ```

20. 网页上哪里可以看到请求的所有信息

    ```shell

    开发者工具中的network选项

    ```



 

# 003

21. 继承方法

    ```shell

    - 原型继承

    - 冒充继承

    - 混合继承

    - ES6 extends

    ```

    见:https://blog.csdn.net/EatSleepPlayCode/article/details/120536425?spm=1001.2014.3001.5502

22. 团队合作的经验

23. 通宵经历(不是玩的)

24. 课外项目(自己瞎做的那种)

25. 为什么学前端?

26. 有没有参赛或者除了学校课程内容外的经验?应该是想知道有没有合作经验

27. 原型与原型链

    见:https://blog.csdn.net/EatSleepPlayCode/article/details/120540801?spm=1001.2014.3001.5502

28. 辗转相除法

    ```shell

    概念:求两个自然数的最大公约数的一种方法

    操作:较大的数除以较小的数,得余数去除除数,再得余数除除数,依次类推

    `

    function fun(a,b) {

        return b === 0 ? a : fun(b,a%b)

    }

    `

    ```

29. 数组转字符串

    ```shell

    - toString()

    - num + ""

    - String()

    - join()

    ```

30. 二级下拉菜单

    ```shell

    一级菜单显示,二级菜单隐藏,鼠标悬停一级菜单时二级菜单显示,悬停二级菜单保持显示,鼠标离开二级菜单或一级菜单时则隐藏二级菜单

    ```

   

# 004

31. bind() apply()

    ```shell

    bind和apply第一个参数都是this的指向对象

    apply第二个参数是数组

    bind返回的是一个函数,需要被调用才执行

    bind的传参要在第一个参数后一一枚举,跟call一样

    ```

32. const用法

    ```shell

    1. 用来定义常量

    2. 声明时必须赋值

    3. 原始数据类型声明后不得修改

    ```

33. Utf-8编码汉字占多少个字节

    ```shell

    3个或4个字节,4个字节占多数

    ```

34. Vue的钩子函数

    ```shell

    - beforeCreate

    - created

    - beforeMount

    - mounted

    - beforeUpdate

    - updated

    - beforeDistroy

    - distroyed

    何时回调:按字面意思理解即可

    ```

35. http和https的区别

    ```shell

    http:明文发送信息,可被截取后直接获得其中的信息

    https:http的安全加密版,安全基础为SSL协议

    区别:

    1. https 需要到CA申请证书

    2. https 具有安全的SSL加密传输协议,数据安全性更高

    3. 连接方式不同,端口也不同,一个是80,一个是443

    4. http连接方式简单,采用无状态连接,https需要身份认证,加密传输

    ```

36. 前端开发工具webstorm

37. Vue基于什么语言

    ```shell

    一款基于JavaScript的前端框架

    ```

38. Vue的第三方组件库iview

    ```shell

    一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品。

    ```

39. HTML5的新特性

    ```shell

    1. canvas图形绘制

    2. video和audio多媒体元素

    3. 本地离线存储

    4. 增加了一些语义化元素,如article,header,footer等

    5. 新的表单控件,如date,time,Email等

    ```

40. ajax

    ```shell

    - 异步的JavaScript和XML

    - 一种使用现有标准的技术方法

    - 可以与服务器交换数据并局部刷新页面

    - 不需要任何浏览器插件即可在可执行JavaScript的浏览器上执行

    ```

   

# 005

41. js对数组的操作,包括向数组中插入删除数据

    ```shell

    - push()

    - pop()

    - shift()

    - unshift()

    - join()

    - concat()

    - slice()

    - splice()

    - reverse()

    - indexOf()

    - lastIndexOf()

    - 三点运算

    - Array.from()

    - Array.of()

    - 等等

    ```

42. 组件之间的传参(例如子组件和父组件之间的传参)

    ```shell

    Vue:

    - 父传子 props

    - 子传父 自定义事件

    - vuex

    react:

    - 父传子 直接在组件标签中写

    - 子传父 要利用父组件给的回调函数传递

    - context对象

    - 消息的订阅与发布

    ```

43. css3的新特性

    ```shell

    - 新的选择器

    - 文本效果扩展

    - 边框

    - 背景

    - 渐变

    - 过渡

    - 动画

    - 媒体查询

    - 弹性盒子

    ```

44. localstore和sessionstore的区别

    ```shell

    localstore信息存储于本地,用户不删除将一直存在

    sessionstore信息临时存储,只要当前窗口或标签野关闭,该数据就会被清空

    ```

45. 盒子模型(怪异模型)

    ```shell

    盒模型有两种:标准盒模型和IE盒模型

    标准盒模型:

    - 元素宽度 = content + 左右padding + 左右border

    - content的尺寸就是我们写的width和height

    IE盒模型:

    - 元素宽度 = 我们写的width和height

    - content的尺寸受限于元素宽度

    两种盒模型切换方法:

    box-size: content-box

    box-size: border-box

    ```

46. 谈谈fixed ,related , absolute

    ```shell

    固定定位:fixed,参照于浏览器窗口的空间,它永远占据浏览器窗口一定空间大小,网页里的一些烦人广告用的就是这玩意

   

    相对定位:relative,参照于自身位置而言,不脱离文档流

   

    绝对定位:absolute,参照于上级参照物,向外层寻找相对定位的元素,没有就参照于body,它会脱离文档流

    ```

47. js的选择器

    ```shell

    - getElementById("id值")

    - getElementsByTagName("标签名")

    - getElementsByName("name属性")

    - getElementsByClassName("class属性名")

    - querySelector("选择器")

    - querySelectorAll("选择器")

    ```

48. 两种定时器,setinterval和settimeout。因为settimeout是只执行一次的,如果要执行多次怎么做。(答案:设置一个回调函数,多次调用,大概是这样,你可以去查查)

    ```shell

    封装一个包含setTimeout的函数,什么时候用就什么时候调用即可

    `

    function timer() {

      setTimeout(() => {

        console.log(1)

      },2000)

    }

    timer()

    `

    ```

49. bootstrap的响应式怎么实现的

    ```shell

    利用栅格系统,对不同大小的屏幕采用不同的类的属性。栅格系统用一系列的行与列的组合创建页面布局

    ```

50. js的数据类型

    ```shell

    - 字符串

    - 数字

    - 布尔值

    - 数组

    - 对象

    使用 typeof 即可检测数据类型

    ```

# 一. HTML、CSS



 

### 什么是Web

Web(**World Wild Web**)即**全球广域网**,也成为**万维网**,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的**分布式图形信息系统**。是建立在 Internet 上的一种网络服务,为浏览者在 Internet 上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超链接将 Internet 上的信息节点组织为一个互为关联的网状机构。

表现形式:**超文本、超媒体、超文本传输协议**

属性:**分布式图形信息系统**

特点:**图形化、与平台无关、分布式的、动态的、交互的**



 

### 什么是W3C

中文名:**万维网联盟**,外文名:**World Wide Web Consortium**

万维网联盟是一个会员组织,对Web 进行了一些标准化约定,使Web尽量能被所有用户利用。

网页主要分三个方面:**结构、行为、表现**,对应的标准也分三个方面:

- 结构化标准

  - 主要包括XHTML和XML语言

- 表现标准

  - 主要包括CSS

- 行为标准

  - 主要包括DOM和EcmaScript 语法





 

### 什么是Dotype

doctype声名叫做文件类型定义(DTD),是<html> 标签之前的<!doctype>,是一个用于告诉浏览器当前HTML版本的指令。



 

### 什么是严格模式和混杂模式

**严格模式**:又称标准模式,是指浏览器按照 W3C 标准解析代码。

**混杂模式**:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

**如何区分**:与网页中的 DTD 直接相关。

1. 如果文档包含严格的DOCTYPE,那么它一般以严格模式呈现。(**严格 DTD——严格模式**)

2. 包含过渡 DTD和 URL 的DOCTYPE,也以严格模式呈现,但有过渡 DTD 而没有 URL 会导致页面以混杂模式呈现。(**有 URL 的过渡 DTD ——严格模式;没有 URL 的过渡 DTD——混杂模式**)

3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(**DTD不存在或者格式不正确——混杂模式**)

4. HTML5 没有 DTD,因此没有严格模式和混杂模式的区别。(**HTML5 没有严格和混杂之分**)

**严格模式和混杂模式有什么不同**?

一些代码在不同模式下表现不同,有些会失效。

严格模式服务于标准规则。

混杂模式服务于兼容性。

1. 混杂模式下给span等行内元素可以设置宽高;

2. 混杂模式下设置图片的padding会失效;

3. 混杂模式下 Table 中的字体属性不能继承上层的设置;

4. 混杂模式下 white-space :pre 会失效;

5. 混杂模式下 margin:0 auto 会失效;



 

### 什么是CSS 盒模型

CSS技术所使用的一种思维模型,由内容、填充、边框、边界构成。

![盒模型](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.bubuko.com%2Finfo%2F201903%2F20190315001127747692.jpg&refer=http%3A%2F%2Fimage.bubuko.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624464052&t=c36371c25c7709878b49fd54ca5df1a6)



 

### CSS 的 link 是什么

指CSS链接。



 

### CSS 的继承属性和优先级算法是怎样的

1. CSS属性继承

   外层元素的样式,被内层元素进行继承

   - 可继承的:font-size、font-family、color、font-style、text-align、line-height等

   - 不可继承的:border、padding、background-color、width、height

2. CSS优先级算法

   优先级权重与权重有关,计算时相当于**权重 = 行内样式 ×1000 + ID选择器数量 ×100 + 第三位 ×10 + 第四位 × 1**

   权重相同,定义顺序靠后的选择器优先,或者有**!important**标记优先

   - 第一位:行内样式

   - 第二位:ID选择器数量

   - 第三位:Class、属性、伪类选择器的数量

   - 第四位:类型和伪元素选择器数量



 

### CSS 基本语句是什么

选择器 {属性:值}



 

### title 和 alt

title属性可以用在**除了** base、basefont、head、html、meta、param、script、title 之外的所有标签。

title属性的功能是提示。额外的说明信息和非本质的信息用title属性。title属性值可以比 alt 属性值设置的更长。

title属性可以为链接添加描述性文字,让用户获得更好的体验。

alt 属性的功能是不能显示图像信息时的替换文字。Alt 属性值的长度必须少于100 个英文字符。



 

### CSS的 reset

HTML标签在浏览器中都有默认的样式,不同浏览器之间的默认样式存在差别。开发时浏览器的默认样式可能会给我们带来浏览器兼容性问题,所以一开始就将浏览器的默认样式全部重新定义进行覆盖,这就是CSS的reset。



 

### CSS 的sprites

一种网页图片应用处理方式。它允许你将一个页面涉及到的所有图片都包含到一张大图中去,这样使页面渲染不会让图片一张一张显示出来。



 

### 怎样清除浮动

1. 额外标签法

   ```javascript

   <div class="clearFloat" style="clear: both;"></div>

   ```

2. 给父级元素添加  overflow  属性

   选择器 {overflow: auto/hidden;zoom: 1;}

   // zoom: 1; 是在处理兼容性问题

3. 使用 after 伪元素清除浮动 (据说该方式最帅)

   选择器: after {clear: both; content: ' '; display: block; width: 0; height: 0; visibility: hidden;}

   选择器 {zoom: 1;}

   **其中 `clear:both` 指清除所有浮动;`content:‘ ’` 可以取值可以为空;`display:block` 对于IE8/chrome/opera/FF 不能缺少;`visibility:hidden` 作用是允许浏览器渲染它但不显示出来。**



 

# 二. JavaScript



 

### 1. JavaScript 的 typeof 返回哪些数据类型

返回以下数据类型:

- undefined

- string

- number

- object

- function

- Boolean



 

### 2. 例举 3 种强制类型转换和 2 种 隐式类型转换

强制:

- string()

- number()

- boolean()

- parseInt()

- parseFloat()

隐式:

- +

- -

- ==

- ===



 

### 3. split()  join() 的区别

split()分割后返回一个数组

join()连接多个字符或字符串,返回一个字符串



 

### 4. 数组方法 pop() push() unshift() shift() 区别

pop() 在数组最后面加入一个元素

push() 删除数组最后一个元素

unshift () 在数组最前面加入一个元素

shift()删除数组最前面一个元素



 

### 5. 事件绑定和普通事件有什么区别

**事件绑定**就是在一个元素上设置监听,可以监听同一个事件多次

**普通事件**就是直接触发事件,普通事件多次触发时后者覆盖前者



 

### 6. Ajax 请求时 get() 和 post() 方式的区别

get()请求:

- get请求会将参数附加在请求url 地址中进行传递

- get请求对传输的数据大小有限制,通常不能大于2kb

- get请求的数据可以被浏览器缓存,某些情况下会产生安全问题

post()请求:

- post请求将参数作为HTTP消息实体内容发送给服务器

- post请求传输的数据大小相对更大,理论上无限制

- post请求对数据的保护安全性更高



 

### 7. call 和 apply 区别

call()方法和 apply()方法作用:**改变this指向**

区别:

`call()`:第一个参数是this值没有变化,变化的是**其余参数都直接传递给函数。**在使用`call()`方法时,**传递给函数的参数必须逐个列举出来**。

`apply()`:传递给函数的是**参数数组**

```javascript

function add(c, d){

   console.log(this.a + this.b + c + d)

}

var o = {a:1, b:3}

add.call(o, 5, 7)

add.apply(o, [10, 20])

```



 

### 8. b 继承 a 的方法

1. 原型继承

   ```javascript

   var A = function() {

      this.a = 1

      this.b = 2

      this.add = function() {

         console.log(a+b)

      }

   }

   var B = function() {}

   B.prototype = new A()

   B.prototype.c = 3

   B.prototype.add = function() {

      console.log(b.a + b.b + b.c)

   }

   // console.log(B.prototype.a)

   var b = new B()

   console.log(b.a)

   console.log(b.b)

   console.log(b.c)

   b.add()

   ```

2. 构造函数继承

   ```javascript

   var A = function() {

      this.a = 1

      this.b = 2

      this.add = function() {

         console.log(a+b)

      }

   }

   var B = new A()

   B.c = 3

   B.add = function () {

      console.log(B.a+B.b+B.c)

   }

   console.log(B.a)

   console.log(B.b)

   console.log(B.c)

   B.add()

   ```

3. call 和 apply 方法继承

   ```javascript

   function A() {

      this.a=1

      this.b=2

      this.add=function(){

         console.log(a+b)

      }

   }

   function B() {

      // A.call(this)

      A.apply(this)

      this.c = 3

      this.add = function() {

         console.log(this.a + this.b + this.c)

      }

   }

   var b = new B()

   console.log(b.a)

   console.log(b.b)

   console.log(b.c)

   b.add()

   ```



 

### 9. 写一个获取非行间样式的函数

非行间样式就是写在 style 中的样式,有两种方法:

1. 标准浏览器:(比如谷歌、火狐、360)

   ```javascript

   // getComputedStyle(元素).样式属性

   getComputedStyle(box).xxx

   ```

2. IE

   ```javascript

   // 元素.currentStyle.样式属性

   box.currentStyle.xxx

   ```



 

### 10. 事件委托是什么

**事件委托**:利用事件冒泡,只指定一个事件处理程序,达到管理某一类型的所有事件。

**事件冒泡**:事件从最深的节点开始,逐步向上传播事件。

**作用**:

1. 提高性能:只用一个事件处理程序代理所有事件,减少了内存空间的占用;

2. 动态监听:使用事件委托可以自动绑定添加的元素,即新增的节点不需要主动添加也可以具有和其他元素一样的事件。



 

### 11. 闭包是什么、有什么特性,对页面有什么影响

闭包是一种特殊的对象,它由两部分构成:函数 + 创建函数的环境。

闭包可以理解为:将函数内部和外部链接起来的桥梁。

闭包的解释:函数嵌套函数,内部的函数调用外部函数的变量或参数。

**特性:**

1. 闭包可以更新外部变量的值;

2. 闭包可以模拟私有方法;

**优点:**

1. 防止全局污染;

2. 内部函数可以调用外部的变量或参数;

3. 内部的变量不会被垃圾回收机制回收。

**缺点:**

1. 由于闭包使函数的变量保存在内存中,所以内存消耗大,滥用闭包影响页面性能;

2. 闭包和全局变量大量使用易产生内存泄漏。



 

### 12. 添加 删除 替换 插入 到某个节点的方法

1. obj.appendChild()                                                // 添加

2. obj.removeChild()                                                // 删除

3. obj.replaceChild(新节点, 旧节点)                     // 替换

4. obj.insertBefore(插入节点, 被插入节点)         // 插入

参考文档:https://my.oschina.net/u/4309098/blog/3414702



 

### 13. 解释 jsonp 的原理,以及为什么不是真正的 Ajax

**jsonp原理:**动态创建 script 标签,回调函数

JSONP( JSON with Padding )是 JSON 的一种 “ 使用模式 “ ,可用于解决主流浏览器跨域数据访问的问题。利用 <script> 元素的开放策略,网页可以得到从其他来源动态产生的 JSON 资料,这种使用模式就是 JSONP 。用 JSONP 抓取的资料是任意的 JavaScript,使用 JavaScript 直译器执行解析。

**jsonp为什么不是Ajax:**

1. Ajax和 jsonp 两种技术在调用方式上**看起来很像**,都是请求一个 url,然后把服务器返回的数据进行处理,所以 jQuery 和 ext 等框架都把 jsonp 作为 Ajax 的一种形式进行了封装;

2. Ajax 和 jsonp **本质不同** 。Ajax 核心是通过 XmlHttpRequest 获取非本页内容,而 jsonp 的核心是动态添加 <script> 标签来调用服务器提供的 js 脚本;

3. Ajax 和 jsonp 区别**不在于是否跨域**,Ajax 通过服务端代理一样可以实现跨域, jsonp 本身也不排斥同域的数据的获取;

4. jsonp 是**一种方式或者说是非强制协议**,如同 Ajax 一样,它也不一定非要用 json 格式传递数据。



 

### 14. JavaScript 的本地对象,内置对象和宿主对象

```mermaid

graph LR

A(原生中的对象) --> B(宿主对象)

A(原生中的对象) --> C(js自己的对象)

C(js自己的对象) --> D(内置对象)

C(js自己的对象) --> E(本地对象)

```

1. 本地对象

   可以理解为需要程序员自己建立的对象。

   可以 new 出来实例化,比如:array、obj、function等。

2. 内置对象

   可以理解为官方建立好的对象。

   可以直接使用,比如:math、global等。

3. 宿主对象

   就是寄生在 JavaScript 里的对象。比如:DOM、BOM。



 

### 15. document load 和 document ready 的区别

原生 JS 中不包括 ready() 这个方法,只有load 方法就是onload 事件。

- load 是当页面所有资源全部加载完毕后(包括DOM树、CSS文件、JS文件、图片资源等),执行一个函数。

- $(document).ready() 是当DOM树 加载完成后执行一个函数。



 

### 16. “==” 和 “ ===” 区别

== :比较值

=== :比较类型和值



 

### 17. 编写一个数组去重的方法

```javascript

arr = [1,2,2,3,4]

let arr1 = Array.from(new Set(arr))

//set去重,array.from 将类数组对象转换为数组

console.log(arr1)

arr2 = []

for (const item of arr) {

   if(!arr2.includes(item)){//返回布尔值

      arr2.push(item)

   }

}

console.log(arr2)

arr3 = []

for (const key in arr) {

   if(arr3.indexOf(arr[key]) ==-1){//返回匹配值的下标

      arr3.push(arr[key])

   }

}

console.log(arr3)

```



 

# 三. 和后台的对接开发



 

### 1. 什么叫双向数据绑定和注入依赖

**双向数据绑定:**数据发生变化,视图也发生变化,视图发生变化,数据也跟着同步变化。

**注入依赖:**把有依赖关系的类放到容器中,解析出这些类的实例来提供使用。



 

### 2. 前后端分离使用 Ajax 和 vue 的区别在哪里

**Ajax**:异步的 JavaScript 和 XML。

特点:当服务器响应时,不用刷新整个浏览器页面,做到`局部刷新`。

**Vue**:使用Ajax 将后台传入的数据展示到页面时,需要使用传统的 JS 方法,比较麻烦,使用 Vue 框架**能方便的把Ajax 里面的数据绑定到前端**。



 

# 四. 小程序前端

## 微信小程序相关知识点:

https://blog.csdn.net/l508742729/article/details/82079208



 

### 1. 简单描述下微信小程序的相关文件类型

1. **.WXML** : 框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。

2. **.WXSS** : 一套样式语言,用于描述 WXML 的组件样式。

3. **.js** : 逻辑处理,网络请求。

4. **.json** : 小程序设置。

5. **app.json** :必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。

6. **app.js** :必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

7. **app.wxss**



 

### 2. 你是怎么封装微信小程序的数据请求的

1. 将所有接口放在统一的 js 文件中导出

2. 在 app.js 中创建封装请求数据的方法

3. 在子页面调用封装的方法请求数据



 

### 3. 有哪些参数传值的方法

1. 给HTML元素添加 data 属性来传递我们需要的值,然后通过e.currentTarget.dataset 或 onload 的 param 参数获取。

2. 设置 id 的方法标识来传值,通过 e.currentTarget.id 获取设置的 id 值,然后通过设置全局对象的方式来传递数值。

3. 在 navigator 中添加参数传值。



 

### 4. 你使用哪些方法来提高微信小程序的应用速度

1. 提高页面加载速度

2. 用户行为预测

3. 减少默认 data 的大小

4. 组件化方案

举报

相关推荐

0 条评论