JS常見面試題總結-真實被問到的！

1、判斷數據類型有幾種方法

console.log(typeof 'abc')
//  string
console.log(Object.prototype.toString.call('abc'))
//  [object String]
console.log('abc'.constructor == String)
//  true

 

2、數據類型有哪些？

基本類型：String、Number、boolean、undefined、null

復雜類型：function、object、NaN、Array、regexp

 

3、字符串反轉

var str = 'abcdef'.split('').reverse().join('')

 

4、什么是事件委托；

事件委托是利用冒泡，子標簽的觸發事件讓父標簽代替執行；

  //  html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3<li>
</ul>
//  script
  var ul = document.querySelector('ul');
  ul.onclick = function(e){
    e.target.style.color = 'red'
  }

 

5、什么是閉包，有什么作用

        閉包就是能夠記住當初所處作用域時候的變量，不管函數在哪里執行，都能夠記住當初所處作用域時候的變量，並且會遮蔽新作用域的變量；

    1、可用作迭代器

    2、可預測狀態容器

function fun (){
  let a = 10;
  return function(){
    return a ++;
  }
}
var inner = fun()
console.log(inner())//  10
console.log(inner())//  11

 

6、this的指向問題

JavaScript中this的8大指向詳解！

 

7、請寫出一個函數，清楚前后空格，所有瀏覽器都兼容

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

 

8、獲取url中的地址

console.log(window.location.href)

 

9、如何實現一個深克隆

const deepclone = (o) => {
  if(Array.isArray(o)){
    var arr = [];
    o.forEach(item => {
      arr.push(deepclone(item));
    });
    return arr;
  }else if(typeof o === "object"){
    var oo = {};
    for(var k in obj){
      oo[k] = deepclone(obj[k]);
    }
    return oo;
  }
  return o;
}

 

10、0.1+0.3等於多少

console.log(0.1+0.2)
//  0.30000000000000004

 

11、什么是優雅降級和漸進漸強？

    其實這是瀏覽器的兩種方案

優雅降級：能力檢測，如果能力有用新的；如果能力沒有，用舊的。

    比如：

if（瀏覽器是高級瀏覽器）{
      使用<video>
    }else{
      使用flash
    }

漸進漸強： 

低端瀏覽器僅實現基本功能，高級瀏覽器實現額外功能。

比如上傳文件，低端瀏覽器就給它提供上傳按鈕，高端瀏覽器增

 

12、substring 和 substr 和 slice 的區別是什么？

    substring(首位下標， 末位下標前1位)

    slice(首位下標， 末位下標前1位)

    substr(首位下標， 子串長度)

   

    slice能夠用負數，但是不能顛倒參數位置

    substring不能用負數，但是會自動小數在前

 

13、如何實現小於 10px 的文字？

transform:scale(0.5);

 

14、輸出今天的日期以 YYYY-MM-DD 形式顯示？

const date = new Date();
  const y = date.getFullYear();
  const m = date.getMonth() + 1;
  const d = date.getDate();

  function buling(n){
    return n.toString().length == 1 ? '0' + n : n;
  }

  console.log(y + '-' + buling(m) + '-' + buling(d))

 

15、添加、移除、移動、復制、創建和查找節點

增加節點

createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

移除、替換、插入

removeChild() //移除
replaceChild() //替換
insertBefore() //插入

查找

getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性

 

16、call和apply的區別

Object.call(this,obj1,obj2,obj3)
Object.apply(this,argument

 

17、實現一個對象更改后不會影響原來的對象

let obj = {a:1,b:2}
let newobj = JSON.parse(JSON.stringify(obj))
newobj.b = 5
console.log(obj)
console.log(newobj)

 

18、問：有一筐雞蛋，1個1個能取完, 2個2個剩1個,3個3個剩1個,4個4個剩1個,5個5個剩1個,6個6個剩1個,7個7個可以取完；

for(let i = 0 ; i < 1000 ; i++){
  if( i % 1 == 0 &&
      i % 2 == 1 &&
      i % 3 == 1 &&
      i % 4 == 1 &&
      i % 5 == 1 &&
      i % 6 == 1 &&
      i % 7 == 0){
        console.log(i)
    }
  }

 

 如果大家喜歡的話，歡迎關注“前端偽大叔”我將為您不間斷的分享前端學習知識！