前端常见面试题

1、数组去重的方式

（1）sort排序后去重

function fn(arr){

   let newArr = []

   arr.sort((a,b)=>{

       return a-b

   })

   arr.forEach((val,index)=>{

       if(val != arr[index+1]){

            newArr.push(val)

       }

   })

   return newArr

}

（2）用indexOf来去重

function fn(arr){

   let newArr = []

   arr.forEach((val)=>{

         if(newArr.indexOf(val) == -1){

              newArr.push(val)

          }

    })    

   return newArr  

}    

（3）普通去重

for(var i=0;i<arr.length;i++){

    for(var j=i+1;j<arr.length;j++){

         if(arr[i]==arr[j]){

              arr.splice(j,1)

         }

    }

}    

（4）键值去重，根据键值的唯一性去重

function fn(arr){

     let arr1 = [],

         arr2 = []

     arr.forEach((val)=>{

         arr1[val]=val

     })

     //arr1数组会存在空的情况

     //所以返回arr2

     arr1.forEach((val)=>{

        if(!!val){

            arr2.push(val)

        }

     })

     return arr2

}

（5）set去重

var arr = [1,2,2,4,3,4,1,3,2,7,5,6,1]

var newArr = new Set(arr)

2、如何显示/隐藏一个dom元素

（1）style属性的display 被隐藏的控件不再占用显示时位置。
this.getElementByXid(‘domXid’).style.display=”none”;
this.getElementByXid(‘domXid’).style.display=”block”;

（2）“visibility”隐藏的控件将控件设置成不可见。
this.getElementByXid(‘domXid’).style.visibility=”hidden”;
this.getElementByXid(‘domXid’).style.visibility=”visible””;

（3）通过jquery 进行控制。
$(this.getElementByXid(‘domXid’)).hide(); // 隐藏
$(this.getElementByXid(‘domXid’)).show(); // 显示

（4）通过bind-visible 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点实际还在。
http://doc.wex5.com/data-bind-visible/

（5）通过bind-if 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点不存在，用法和bind-visible一样。

3、Javascript中检测变量类型的方式？如何检测一个变量是一个String类型

检测变量类型的方式：

（1）typeof：用于判断基本数据类型，对于引用数据类型除了function返回function，其余全部返回object。

（2）instanceof：主要用于区分引用数据类型，检测方法是检测类型在当前实例的原型链上，检测结果是true，不适用于简单数据类型的检测，检测过程繁琐，无法检测简单数据类型中的undefined,null, symbol。

（3）constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据符合哪个数据类型。

（4）Object.prototype.toString.call()：适用于所有类型的判断检测，返回的是该数据类型的字符串。

这四种判断数据类型的方法中，各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()这种方法。

判断变量是否是String类型的方法：

方法1

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}

方法2

function isString(obj){
    return obj.constructor === String? true: false;
}

方法3

function isString(obj){
     return Object.prototype.toString.call(obj) === "[object String]" ? true : false;
}
如：
var isstring = isString('xiaoming');
console.log(isstring);  // true

4、Ajax的工作过程是怎样的

（1）用户发送请求（例如在网页上点击按钮），此时由javascript创建XMLHttpRequest对象。

（2）HTTP请求由XMLHttpRequest对象发送到web服务器。

（3）服务器处理请求，使用JSP，PHP，Servlet，ASP等与数据库交互。

（4）检索数据。

（5）服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。

（6）JavaScript 读取服务器响应，执行操作（比如更新页面），将HTML和CSS数据显示在浏览器上。

5、列举数组循环的几种方法

（1）map()，会返回一个新数组, 不会改变原来数组里的内容。

let array = [3, 4, 5,6 ];

let temp = array.map((item, index, array) => {

return item * 10;

});

console.log(temp); //  [30,40, 50, 60];

console.log(array); // [3, 4, 5, 6]

（2）filter()，会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组。

let array = [1, 2, 3, 4];

let temp = array.filter((item, index, array) => {

return item >  3;

});

console.log(temp);

console.log(array); // [1, 2, 3, 4]

（3）reduce()

let array = [1, 2, 3, 4];

let temp = array.reduce((x, y) => {

console.log("x,"+x);

console.log("y,"+y);

console.log("x+y,",Number(x)+Number(y));

return x + y;

});

console.log(temp); // 10

console.log(array); // [1, 2, 3, 4]

6、ES6的曝光与引入语法

（1）统一暴露

let name = 'lihua'

function teach(){

    console.log("李华")

}

export {

name ,

    teach

}

引入方式 :  

import { name, teach }  from  '模块标识符(路径)'  

（2）默认暴露

let name = 'lihua'

function teach(){

    console.log("李华")

}

export default {

    name,

    teach

}

引入方式 ：

import 接收名称(自定义的名称)  from  '模块标识符(路径)'

（3）按需暴露

export let shcool = 'lihua'

export function teach(){

    console.log("李华")

}

 按需引入
import { shcool,teach }  from  '模块标识符(路径)'  

{ }中的名称必须和按需导出的名称一样

7、Vue中父子组件嵌套时，父组件和子组件的生命周期钩子执行顺序是什么

（1）加载渲染过程：

父beforeCreate ->父created ->父beforeMount ->子beforeCreate ->子 created ->子beforeMount ->子mounted ->父mounted

（2）父组件更新过程：

父beforeUpdate ->父updated

（3）子组件更新过程：

父beforeUpdate ->子beforeUpdate ->子updated ->父updated

（4）销毁过程：

父beforeDestroy ->子beforeDestroy ->子destroyed ->父destroyed

8、JavaScript的事件流包含哪三个阶段

事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；

捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。事件由页面元素接收，逐级向下，到具体的元素。

目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。

冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收，然后逐级传播到较为不具体的节点。跟捕获相反，具体元素本身，逐级向上，到页面元素。

9、写出下面代码片段执行结果

const promise = new Promise((resolve,reject)=>{

console.log(1);

resolve(“success”);

console.log(2);

});

promise.then(()=>{

console.log(3);

});

console.log(4);

执行结果为1243

10、数组的操作方法，并简述各个方法的作用

 方法一：shift()

 删除数组的第一个值，并返回删除后的第一个下标值      

      let data = [2,3];

      data.shift();

      console.log(data);  // [3]

 方法二：concat()

 合并两个数组并返回一个新数组

        let arr1 = [2,3 ];

        let arr2 = [3, 4];

        let arr = arr1.concat(arr2);

        console.log(arr)  // [2, 3, 3, 4]

 方法三：join()

 用于将数组中的所有元素通过指定的字符串连接起来返回一个字符串

        let joinData = [1, 2, 3]

        console.log(joinData.join('+'))  // 1+2+3

 方法四：pop()

 删除数组的最后一个元素，并返回被删除的元素

        let propData = [1, 2, 3]

        console.log(propData.pop())  // 3

        console.log(propData) //  [1, 2]

 方法五：push()

 向数组的末尾添加一个或多个元素，返回的是push后的长度

        let pushData = [1, 2, 3]

        pushData.push(4)

        console.log(pushData) //  [1, 2, 3, 4]

  方法六：reverse()

  调到数组中元素的顺序

        let reverseData = [1, 2, 3, 4];

        reverseData.reverse();

        console.log(reverseData)  //[4, 3, 2, 1]

仍然

 方法七：slice()

可从已有的数组中返回选定的元素，slice(开始截取位置，结束截取位置)，返回结果包含开始下标，不包含结束下标，该方法不会改变原数组。

        let sliceData = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        console.log(sliceData.slice(3, 7)) // [4, 5, 6, 7]

方法八：splice()

从指定下标开始删除不同个数的元素，并声明一个或多个值来替换被删除的元素

        let spliceData = [1, 2, 3, 4, 5]

        spliceData.splice(3, 1, { name: 100 }, '200')

        console.log(spliceData)  // [1, 2, 3, {…}, "200", 5]

方法九：unshift()

往元素开头添加一个或多个元素

        let unshiftData = [1, 2, 3, 4, 5]

        unshiftData.unshift(0);

        console.log(unshiftData)  // [0, 1, 2, 3, 4, 5]

方法十：sort()

对数组元素进行排序，参数必须为函数

        function sortNumber(a, b) {

            return a - b;

        }

        var sortData = [1, 40, 500, 4, 459, 65, 3254];

        console.log(sortData.sort())  // [1, 4, 3254, 459, 40, 500, 65]

        console.log(sortData.sort(sortNumber))  // [1, 4, 40, 65, 459, 500, 3254]