前端常見的部分面試題

I Love雪發表於2018-03-10
前端面試題

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));

相關文章