前端常见的部分面试题

1.pop ,push,shift, unshift的用法：

pop: 删除数组中最后一个 返回值为删除的元素

push: 在数组最后添加一项 返回值为数组的长度

shift：删除数组第一项 ， 返回值为删除的元素

unshift: 再数组第一项添加一个元素，返回值为数组的长度

2.split与join的区别：

split是字符串的方法 ，可以将字符串以对应的字符进行切割返回值为数组 ，是切割后的数组

join是数组的方法，可以将数组中的 每一项以想应的字符进行链接，返回值是连接之后的字符串。

3.事件绑定和普通的事件有什么关系

事件绑定的方式为： addEventlinster();来绑定

普通事件的方式为：

btn.onclick = function() {}

对于事件绑定来说，同一个DOM元素上绑定同样的事件类型时，可以绑定多个事件处理函数， 普通事件方式解决这个问题时会出现后边的代码将前边写的代码重写操作，造成环境污染

4.call 和apply的区别

都是改变this的指向 call传入的第二个参数后边的参数可以传多个参数

apply传入的第二个参数的是一个数组

5.javascript如何实现继承？

6.em 和 rem的区别

em指的相对父元素大小来定义自身的大小

rem是根据html根元素来设置自身的大小 可以通过浏览器的设置来进行改变默认的大小

7.事件委托是什么？

事件委托是依靠事件冒泡的原理，利用父元素去触发子元素的事件

可以解决 使用模板引擎时 页面还没有渲染 可以通过页面上的父容器 为子元素设置相应的事件

② 减轻了为ul中多个li每个绑定事件的问题

8.闭包是什么，有什么特性，对程序有什么影响？

作用域外的变量可以使用作用域内的变量就是闭包；

实现： 外层函数的返回值是一个函数 ，这个函数使用了外边的变量

优点： 实现了变量的作用时间将想要的变量长期存储起来

缺点： 除非手动改变，才能触发js的垃圾回收机制将所存储内容进行回收，容易造成内存泄漏。

9.编写一个数组去重的代码

var arr = [1,4,5,2,4,'a','b','a'];

        var obj = {};

​

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

            var item = arr[i];

            if (obj[item]) {

                obj[item]++;

            } else {

                obj[item] = 1;

            }

        };

        var newArry = [];

        for (var k in obj) {

            newArry.push(k);

        }

10.javascript的同源策略

同源：协议，端口号，域名 都相同 同源策略是浏览器为了安全性考虑，不同源不能进行数据通信

解决同源策略的方法：

1. 如果服务器是自己的可以在服务器端设置请求头Access-Control-Allow-Origin：域名 实现不同源的数据共享

2. jsonp 通过动态添加script标签，来调用服务器提供的js脚

3. 通过自己的服务器端 去跨域请求服务器资源 再通过自己的服务器 将请求到的数据返回给前端

4. 可以通过wamp设置反向代理来实现

11.Es6的新特性

类的定义与继承

变量的另外两种定义方式 let const

字符串模板

解构赋值

模块化的开发 导入导出

箭头函数

12. 如何阻止事件冒泡

阻止事件冒泡 ：IE通过cancelBubble = true ，标准通过 e.preventDefault

阻止默认事件： IE通过return Value = true，标准通过 stopPropagation

13.添加 删除 替换 插入节点的方法

appendChild() 在一个节点后边添加一个节点

repliceChild() 替换某一个节点

removeChild() 删除某个节点

innsertBefore() 在指定节点前添加一个节点

14. window.onload 和 document ready的区别

window.onload是在DOM文档树加载完所有文件执行一个函数；只能出现一次document.ready 原生中没有这个方法，jquery中有$().ready(funtion),在都dom文档树加载完成后执行这个函数 可以出现

15.javascript的数据类型有什么？

基本数据类型： String，bollean，Number，undefined，null

复杂数据类型： Object(Array,{},regExp(正则),data,funciton);

如何判断一个变量是否为数组(假设这个变量的名称为arr);

方法一： 可以判断 arr instanceof Array

方法二： Array.isArray(obj) 调用数组的isArray方法

方法三：.Object.prototype.toString.call(obj) ===‘[object Array]’ Object.prototype.toString方法会取得对象的一个内部属性［［Class］］，然后依据这个属性，返回一个类似于［object Array］的字符串作为结果，call用来改变toString的this指向为待检测的对象

方法四：.判断对象是否有push等数组的一些方法。（这个方法有兼容问题，但也是一个简单易用的方法）

方法五：.obj.constructor===Array //true

16.Dom事件流

三个阶段： 事件捕获 目标阶段 事件冒泡

事件冒泡： 事件开始由最具体的开始，一直到根节点

事件捕获：有根节点到最具体；

17javascript的typeof的返回的数据类型

对javascript中对象进行typeof

• typeof Number //function

• typeof String //function ...

• typeof Math //Object 其余都是function

  两个特殊值

  typeof null // object

  typeof undefined //undefined

  最后对常用的具体值进行typeof

  typeof /(?:)/(正则) //object

  ​

18.原型相关

1.对象是通过构造函数实例出来的

2.每一个函数都有prototype属性，该属性是一个对象

3.每一个对象都有一个protot属性 指向原型对象 （该链路是只读的）

4.所有实例都直接或间接继承了原型对象的成员

自己理解： 将对象的属性放在构造函数中，将方法放在原型对象中

可以解决 通过构造函数构造出来的不同对象 都可以访问原型中的公共方法

19. 深拷贝的代码

var obj1 = {

  name: 'zhangsan',

  age: 30,

  gender: '男',

  dog: {

    name: '打黄',

    age: 2,

    color: 'yellow'

},

  friends: ['lisi','ahsda']

}

var obj2 = {};

function deepCopy(o1,o2) {

  //遍历o1对象

  for (var key in o1) {

    //判断o1里边的值是否为数组 如果是数组初始化为o2里边的key值也初始化为[];如果是对象 o2里边的key值初始化为{} ,再次通过递归调用deepCopy函数 传入o1中key的值 与o2中key的值； 

      if( o1[key] instanceof Array) {

        o2[key] = [];

        deepCopy(o1[key],o2[key]);

        }  else if(o1[key] instanceof Object) {

            o2[key] = {};

            deepCopy(o1[key],o2[key]);

        } else {

            o2[key] = o1[key];

        }

    }

}

deepCopy(obj1,obj2);

 console.log(obj2);

*即 深拷贝拷贝的是里边的内容 不再是单纯的复制地址 因此拷贝的两个对象之间没有关系，不会相互影响

20.浅拷贝的代码

var obj1 = {

  name: 'zhangsan',

  age: 30,

  gender: '男',

  dog: {

    name: '大黄',

    age: 2,

    color: 'yellow'

},

  friends: ['lisi','ahsda']

}

var obj2 = {};

​

function copy(o1,o2) {

  for (var key in o1) {

  o2[key] = o1[key];

    };

}

obj1.name = '阿斯顿';

obj1.dog.name = '豆豆'

copy(obj1,obj2);

console.log(obj2); //obj2输出的结果为: {name: 'zhangsan',age: 30,gender: '男',dog: {name: '豆豆',age: 2,color: 'yellow'},friends: ['lisi','ahsda']}}

*即 浅拷贝只有对象里边的复杂数据类型里边的数据如果发生改变 由于存储的是地址 因此一个发生改变拷贝的对象也会发生改变

21.输出两个日期之间的时间差以yyyy-mm-dd的方式

function getInterval(start,end) {

            var interval = end - start; // 单位为毫秒

            interval = interval / 1000; //变为秒

            var day =Math.floor(interval /60 / 60 / 24);

            var hour = Math.floor (interval / 60 / 60 % 24);

            var Minute = Math.floor(interval / 60 % 60);

            var second = Math.floor(interval % 60);

            var obj = {

                day: day,

                hour: hour,

                minute: Minute,

                second: second

            }

             return '相差的时间为: '+ obj.day +' - '+ obj.hour +' - '+ obj.minute +' - '+ obj.second+'';

        }

        var day1 = new Date(); //当前时间

        var day2 = new Date('2019-3-1');

        console.log(getInterval(day1,day2));

​

​

22.获取当前的日期，以yyyy-mm-dd的方式

function data() {

            var curtentTime = new Date();

            var year = curtentTime.getFullYear();

            var month = curtentTime.getMonth();

            var date = curtentTime.getDate();

            var hour = curtentTime.getHours();

            var minute = curtentTime.getMinutes();

            var second = curtentTime.getSeconds();

​

            var dataArr = [year,month + 1,date]; //前边的年月日

            var dataArrEnd = [hour,minute,second]; //当前的时分秒

​

            return dataArr.join('-')+' ' +dataArrEnd.join('-');

        }

        console.log(data()); // 2018-3-4 15-45-24

23.用js上实现随机选取10-100之间10个数字存入一个数组，并排序

 function getData(num) {

            var arr = [];

            for (var i = 0; i < num; i++) {

                var number = Math.floor((Math.random()*(100 -10))+10);

​

                arr.push(number);

            }

            return arr;

        }

        function getSortArr(num) {

            var arr = getData(num);

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

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

                    if (arr[j] > arr[j+1]) {

                        var tmp = arr[j];

                        arr[j] = arr[j+1];

                        arr[j + 1] =tmp;

                    }

                }

            }

            return arr

        }

        console.log(getSortArr(10));