前端查漏补缺面试被问到

清疚 2023-02-28 05:22 14阅读 0赞

[Object.keys() Object.values() Object.entries()用法][Object.keys_ Object.values_ Object.entries]

1，Object.keys() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名（方法会返回一个由一个给定对象的自身可枚举属性组成的数组）。
    
    console.log(  Object.keys(data)  );      // [ 'name' , 'age' , 'id ' ]
    
    
    2，Object.values() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。
    
    console.log(  Object.keys(data)  );      // [ '阿三' , '18' , '10' ]
    
    
    3，Object.entries() 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。
    
    console.log(  Object.entries(data)  );      // [ [ 'name' : '阿三' ]  , [ 'age','18 ]  , [  'id' : '10' ]  ]

**- 实现单行文本的溢出显示省略号**

overflow: hidden;//盒子溢出隐藏
    text-overflow:ellipsis;//文字溢出显示省略号   发音 美 [ɪˈlɪpsɪs] 
    white-space: nowrap;//文字不换行

**es6模块化是怎么发展过来的**

AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点
    AMD：requirejs 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置
    CMD：seajs 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近
    CommonJs：模块输出的是一个值的 copy，运行时加载，加载的是一个对象（module.exports 属性），该对象只有在脚本运行完才会生成
    ES6 Module：模块输出的是一个值的引用，编译时输出接口，ES6模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。

**对象深拷贝**

1.json.stringify() json.parse（）

3.es6对象拓展运算符

var a = {a:0}
    
    var b = {...a}

**vue 自定义过滤器**

Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                    return value + 4;
                });

通过管道符使用

**vue自定义指令**

el是指定绑定的元素，bind是一个对象包含多种属性,进行传参，在使用自定义指令的时候v-color="'red'"必须引号，以字符串的形式传参。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70][]

**vue.use() vue.components()区别**

1.都可以用来注册组件，vue.components()注册组件第一个参数是组件名，第二个参数是要注册的组件。vue.use()更切确的说是注册插件，它会执行install方法。

2.vue.use()注册组件，参数可以可以是对象，或者函数，它们都执行了install方法

3.vue.use() 可以一次性注册多个组件 ，vue.components()一次只能注册一个组件

[http://www.manongjc.com/article/91655.html][http_www.manongjc.com_article_91655.html]

**前端提高工作效率**

1.拓展知识面

2.任务分解/时间管理

3.自动化，npm管理我们的项目包文件，利用webpakc 来压缩我们代码

4.模块化（在ES6出来之前应该说前端代码本身不具备实现模块的功能，我们必须要使用一些模块化加载器来实现，比如RequireJS、SeaJs等。）

5.组件化

6.前后端分离

7.开发规范

**项目权限设置**

[https://blog.csdn.net/qq\_43202482/article/details/95618041?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu\_weight&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu\_weight][https_blog.csdn.net_qq_43202482_article_details_95618041_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight]

[https://segmentfault.com/a/1190000019532448][https_segmentfault.com_a_1190000019532448]

**vue删除缓存原理  我们用到**

决方案是通过直接操控 keep-alvie 组件里的 cahce 列表，暴力移除缓存：

箭头函数优点：

1.  箭头函数写代码拥有更加简洁的语法；
2.  不会绑定`this`

**ajax原理**

ajax 是asynchronous javascript and xml的简称 ajax核心是xmlhttpRequest对象 可以在不刷新页面的时候得到更新的数据

open()  send（）方法

**vue双向数据绑定原：**

[https://zhuanlan.zhihu.com/p/78276361][https_zhuanlan.zhihu.com_p_78276361]

**FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库。**

原理：在检测到touchend事件的时候，会通过DOM自定义事件立即发出模拟一个click事件，并把300ms之后发出的click事件阻止掉。

**1.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？**  
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

浏览器默认的margin和padding不同。解决方案是加一个全局的\*\{margin:0;padding:0;\}来统一。

IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

//解决方案：  
var page = \{\};  
page.x = event.x ? event.x : event.pageX;  
page.y = event.y ? event.y:event.pageY;  
   
Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

说几个移动端浏览器兼容的问题

> ### ios端兼容input光标高度 ###
> 
> **问题详情描述：**input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。
> 
> **出现原因分析：**通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部
> 
> **解决办法：**高度height和行高line-height内容用padding撑开

> ### ios键盘唤起，键盘收起以后页面不归位 ###
> 
> **问题详情描述：**输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
> 
> **出现原因分析：**固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
> 
> **解决办法：**
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
>     <div class="list-warp">
>       <div class="title"><span>投·被保险人姓名</span></div>
>        <div class="content">
>          <input class="content-input" 
>                 placeholder="请输入姓名"
>                 v-model="peopleList.name"
>                @focus="changefocus()"
>                @blur.prevent="changeBlur()"/>
>        </div>
>     </div>
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
>     changeBlur(){
>           let u = navigator.userAgent, app = navigator.appVersion;
>           let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
>           if(isIOS){
>             setTimeout(() => {
>               const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
>               window.scrollTo(0, Math.max(scrollHeight - 1, 0))
>               }, 200)
>          }
>     }
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
> **拓展知识：** `position: fixed`的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘

> ### 安卓弹出的键盘遮盖文本框 ###
> 
> **问题详情描述：**安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子
> 
> ![format_png][]
> 
>  
> 
> **出现原因分析：****待补充**
> 
> **解决办法：**给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
>     changefocus(){
>           let u = navigator.userAgent, app = navigator.appVersion;
>           let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
>           if(isAndroid){
>             setTimeout(function() {
>              document.activeElement.scrollIntoViewIfNeeded();
>              document.activeElement.scrollIntoView();
>             }, 500);       
>          }
>     },
> 
> ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]
> 
> **拓展知识：**`Element.scrollIntoView()`方法让当前的元素滚动到浏览器窗口的可视区域内。而`Element.scrollIntoViewIfNeeded()`方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

**2.rem**

通过媒体查询获取当前屏幕的宽度，然后定义一个固定数为，

那么rem计算公式为rem=width（获取的当前的屏幕的宽）/ 固定数

我们通过媒体查询监听屏幕不同的尺寸，然后只要屏幕宽度变化，那么HTML的大小也会跟随变化

**3.css3新增伪类**

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)

**4.动画**

**animate通过@keyframes来设置动画的帧的状态，from,to 百分比。animation有几个常用属性**

*[animation-name][]*

*[animation-delay][]*

*[animation-direction][] ：normal *

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70 1][]

**5.对象继承**

原型链继承

原理：JS是一门基于原型的语言。在JS中prototype对象的任何属性和方法都被传递给那个类的所有实例。

//父类构造函数
    var Parent = function(name){
        this.name = name;
        this.sayHi = function(){
            console.log("Hi" + this.name + ".");
        }
    }
    //子类构造函数
    var Children = function(){};
    
    Children.prototype = new Parent();
    
    var P = new Parent();
    var C = new Children();
    
    P.sayHi();
    C.sayHi();

**注意：**  
调用Parent的构造函数，没有给它传递参数。这是原型链中的标准做法，要确保构造函数没有任何参数。

## 方式三：使用call或apply方法 ##

原理：通过改变this指向实现继承。apply第二个参数必须是数组，call依次传入。

//父类构造函数
    var Parent = function(name){
        this.name = name;
        this.sayHi = function(){
            console.log("Hi" + this.name + ".");
        }
    };
    //子类构造函数
    var Children = function(name){
        Parent.call(this,name);
        this.getName = function(){
            console.log(this.name);
        }
    };
    var C = new Children("Joe");
    C.sayHi();  //Hi john
    C.getName();    //Joe

方式四：混合使用（推荐）  
因此，在JS中创建类，最好使用构造函数定义属性，使用原型链定义方法。

//父类构造函数
    var Parent = function(name){
        this.name = name;
    }
    Parent.prototype.sayHi = function(){
        console.log("Hi ! " + this.name + "!!!");
    }
    var P = new Parent("John");
    P.sayHi();  //Hi John !!!

# #

## 方式六：extends关键字实现继承 ##

class Paren{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
    }
    class Children extends Parent{
        constructor(name,age,job){
            super(name,age);    //super必须在前，否则代码报错
            this.job = job;
        }
    }

**注意：**  
子类的constructor方法没有调用super之前，就使用this关键字会报错。原因是：子类Children的构造函数之中的super(),代表调用父类Parent的构造函数。

super虽然代表了父类Parent的构造函数，但是返回的是子类Children的实例，即super内部的this指的是Children，因此super()在这里相当于Parent.prototype.constructor.call(this);

[Object.keys_ Object.values_ Object.entries]: https://www.cnblogs.com/js0618/p/11790657.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70]: /images/20230209/5cd0eec21c2748a581a1a505a5780f8a.png
[http_www.manongjc.com_article_91655.html]: http://www.manongjc.com/article/91655.html
[https_blog.csdn.net_qq_43202482_article_details_95618041_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight]: https://blog.csdn.net/qq_43202482/article/details/95618041?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.edu_weight
[https_segmentfault.com_a_1190000019532448]: https://segmentfault.com/a/1190000019532448
[https_zhuanlan.zhihu.com_p_78276361]: https://zhuanlan.zhihu.com/p/78276361
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230209/d1aa791d1fbe4ecfb2435ce96b3b364b.png
[format_png]: /images/20230209/fbb8d093f8134bcba9e750afe7a2b061.png
[animation-name]: https://www.w3school.com.cn/cssref/pr_animation-name.asp
[animation-delay]: https://www.w3school.com.cn/cssref/pr_animation-delay.asp
[animation-direction]: https://www.w3school.com.cn/cssref/pr_animation-direction.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70 1]: /images/20230209/33734f001da342d58b43b9b1b7b2ba2b.png