2月16日昆明面试经历部分考题

2月16日昆明面试部分考题

1.说说em和rem的区别？rpx呢？

1. rem是相对于根元素（HTML）进行计算，而em是相对于当前元素或父元素的字体大小，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px。
2. rem不仅可以设置字体的大小，还支持元素宽、高等属性。
3. em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系。

2.说说c3的新特性？

1.文本阴影text-shadow

2.盒子阴影 box-shadow

3.边框圆角 border-radius

4.边框图片boeder-image

5.背景大小 background-size

6.设置背景原点background-origin

作用：设置背景图片原点位置，这个原点，指的是图片左上角

也就是重新定义了background-position的显示位置

应用background-origin:content-box； //以内容左上角为原点

padding-box; //默认选项，以内边距为原点

border-box; //以外边距为原点

7.background-clip背景区域裁切（也就是让图片在什么区域内显示）

作用：裁切背景，移动端应用的多

8.多背景background: url() ,url(),url();

9.渐变,线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）),渐变方向：可以是具体方向：to top。

10.过渡trasition

11.2D转换：transiform:translate(x,y) //第一个值是水平，第二个垂直

12.3D转换

13.透视 perspective

14.动画：

@keyframes scale{

from{}

to{}

}

3.什么是事件冒泡？

​ 就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡。

4.浅拷贝与深拷贝的区别，以及怎么实现？

js数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象(引用)数据类型。

• 基本数据类型的特点：直接存储在栈(stack)中的数据。
• 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。
• 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

赋值和浅拷贝的区别
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

浅拷贝的实现方式
1.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

注意：当object只有一层的时候，是深拷贝。

2.Array.prototype.concat()

3.Array.prototype.slice()

深拷贝的实现方式

1.JSON.parse(JSON.stringify())

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

2.手写递归方法
递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

3.函数库lodash
该函数库也有提供_.cloneDeep用来做 Deep Copy

6.es6新增了些什么？

• 块级作用域，可以在块级作用域中声明变量；
• 箭头函数，一种新的函数声明方式；
• 解构赋值，一种从数组或对象中提取值并赋值给变量的语；
• 默认参数，允许在函数定义时为参数提供默认值；
• 扩展运算符，可以将数组或对象展开，提取出其中的元素；
• 模板字符串；
• 类和模块；
• 迭代器和生成器；
• Promise对象；
• 模块化导入和导出等等。

7.说说你对Promise的理解？

Promise是异步编程的一种解决方案，他是一个对象，可以获取异步操作的消息，避免了回调地狱

Promise的实例有三个状态 ：

Pending（进行中）

Resolved（已完成）

Rejected（已拒绝）

把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected

Promise的特点:

(1) 对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来——“承诺”

(2) 一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的

总结: 状态的改变是通过 resolve() 和 reject() 函数来实现的,它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数

8、浏览器中输入url到网页显示，整个过程发生了什么？

1.域名解析

2.发起tcp三次握手

3.建立tcp连接之后发起htttp请求

4.服务器端响应http请求，浏览器得到html代码

5.浏览器器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

9.get / post？

• get : 缓存、请求长度受限、会被历史保存记录
  • 无副作用(不修改资源)，幂等(请求次数与资源无关)的场景
• post : 安全、大数据、更多编码类型