JS基礎知識（覆蓋JS基礎面試題）

時間  2019-11-16
標籤 基礎 知識 覆蓋 面試 欄目 JavaScript 简体版
原文   原文鏈接

總結一些前端基礎的知識，有些知識可能在前端面試的時候會問到，因此作個記錄，也有助於其餘人查看，若是有什麼問題，能夠指出，會積極修正。javascript

變量類型和計算

JS中typeof的類型有哪些

console.log(typeof undefined);  //undefined
    console.log(typeof 123);  //number
    console.log(typeof '123');  //string
    console.log(typeof true); //boolean
    console.log(typeof [1,2,3]);  //object
    console.log(typeof {"id": 11}); //object
    console.log(typeof null); //object
    console.log(typeof console.log);  //function
複製代碼

類型轉換

  • 顯式類型轉換
    • Number 函數
      • 數字：轉換後仍是數字
      • 字符串：若是能夠被解析爲數值，則爲相應的數值，若是不能，則是 NaN，若是是空字符串那就是0
      • 布爾值：true爲1，false爲0
      • undefined：NaN
      • null：0
      • object：先執行valueOf，看是否能轉換，若是不能夠再執行toString，看是否能夠轉換，若是不能夠報錯
    • String 函數
      • 數字：轉換成對應的字符串
      • 字符串：仍是對應的字符串
      • 布爾值：true爲'true'，false爲'false'
      • undefined：undefined
      • null：null
      • object：先執行toString，看是否能轉換，若是不能夠再執行valueOf，看是否能夠轉換，若是不能夠報錯
    • Boolean
      下面這幾個是false，其餘都是true
      • NaN
      • null
      • undefined
      • 0
      • ""
      • false
  • 隱式類型轉換
    • 四則運算
    • 判斷語句
  • 奇葩的類型轉換面試題

什麼時候使用==，什麼時候使用===

除了obj.a == null之外，都用===，==要用的時候必定要是已經定義的
obj.a == null 轉換以後實際上是 obj.a == null || obj.a == undefinedhtml

JS中有哪些內置函數

Object
    Array
    Boolean
    Number
    String
    Function
    Date
    RegExp
    Error
複製代碼

JS變量按照存儲方式有哪些類型

  • 1.值類型
  • 2.引用類型（節省空間，公用內存塊）

區別：值類型改變一個不會影響其餘的，引用類型改變都改變，由於公用內存塊前端

如何理解JSON

JSON是JS的一個對象，也是一種數據格式，JSON中的兩個api以下java

  1. 將JSON字符串轉換成JSON對象 JSON.parse()
  2. 將JSON對象轉換成JSON字符串 JSON.stringify()

使用Object.prototype.toString獲取一個對象的類型

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]
toString.call(/s/); // [object RegExp]
toString.call([]); // [object Array]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]
複製代碼

原型和原型鏈

原型的五條規則

  1. 全部的引用類型均可以自定義添加屬性
  2. 全部的引用類型都有本身的隱式原型（proto）
  3. 函數都有本身的顯式原型（prototype）
  4. 全部的引用類型的隱式原型都指向對應構造函數的顯示原型
  5. 使用引用類型的某個自定義屬性時，若是沒有這個屬性，會去該引用類型的__proto__（也就是對應構造函數的prototype）中去找

原型鏈.png

如何準確判斷一個變量是數組類型

arr instanceof Array面試

instanceof判斷一個引用類型是什麼引用類型，是經過__proto__（隱式原型一層一層往上找，可否找到對應構造函數的prototype）ajax

寫一個原型鏈繼承的例子

function Element(ele) {
  this.ele = document.getElementById(ele);
}

Element.prototype.html = function(val) {
  var ele = this.ele;
  if (val) {
    ele.innerHTML = val;
    return this;
  } else {
    return ele.innerHTML;
  }
};

Element.prototype.on = function(type, fn) {
  var ele = this.ele;
  ele.addEventListener(type, fn);
  return this;
}

var element = new Element('main');

element.html('hello').on('click', function() {
  alert('handleClick');
});
複製代碼

描述new一個對象的過程

  1. 建立一個新對象
  2. this指向這個新對象
  3. 執行代碼給this賦值
  4. return this
function Foo(name) {
  this.name = name;
  // return this; // 自己會執行這一步
}

var f = new Foo('shiyanping');
複製代碼

做用域及閉包

變量提高

如下兩種狀況會進行提高：api

  1. 變量定義
  2. 函數說明

this幾種不一樣的使用場景

  1. 在構造函數中使用（構造函數自己）
  2. 做爲對象屬性時使用（調用屬性的對象）
  3. 做爲普通函數時使用（window）
  4. call，apply，bind（執行的第一個參數）
var a = {
  name: 'A',
  fun: function() {
    console.log(this.name);
  }
};

a.fun();  //this === a
a.fun.call({ name: 'B' });  //this === { name: 'B' }
var fun1 = a.fun;
fun1(); //this === window
複製代碼

建立10個a標籤，點擊每一個彈出對應的序號

var i;
for (i = 0; i < 10; i++) {
  (function(i) {
    // 函數做用域
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
      e.preventDefault();
      alert(i);
    });
    document.body.appendChild(a);
  })(i);
}
複製代碼

如何理解做用域

  1. 自由變量
  2. 做用域鏈，及自由變量的查找，找不到逐級向上找
  3. 閉包的兩個場景
    1. 函數做爲變量傳遞
    2. 函數做爲返回值

實際開發中閉包的應用

// 判斷一個數字是否出現過
function isFirst() {
  var _list = [];
  return function(id) {
    if (_list.indexOf(id) >= 0) {
      return false;
    } else {
      _list.push(id);
      return true;
    }
  };
}

var first = isFirst();
first(10);
first(10);
first(20);
複製代碼

單線程和異步

同步和異步的區別，分別列舉一個同步和異步的例子

同步會阻塞代碼，可是異步不會 alert是同步 setTimeout是異步數組

關於setTimeout的筆試題

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
console.log(3);
setTimeout(function() {
  console.log(4);
}, 1000);
console.log(5);
// 輸出結果：1，3，5，2，4
複製代碼

前端使用異步的場景

  1. 定時任務：setTimeout，setInterval
  2. 網絡請求：ajax請求，動態img加載
  3. 事件綁定

須要等待的狀況下都須要異步，由於不會像同步同樣阻塞網絡

日期和Math

知識點：

日期

console.log(Date.now());  // 獲取當前毫秒數
var dt = new Date();  // 獲取當前時間
console.log(dt.getTime());  // 當前時間的毫秒數
console.log(dt.getFullYear());  // 年
console.log(dt.getMonth()+1); // 月（0-11）
console.log(dt.getDate());  // 日（0-31）
console.log(dt.getHours()); // 時（0-23）
console.log(dt.getMinutes()); // 分（0-59）
console.log(dt.getSeconds()); // 秒（0-59）
複製代碼

Math

  • Math.random() - 返回 0 ~ 1 之間的隨機數
  • Math.abs(x) - 返回數的絕對值
  • Math.ceil(x) - 向上取整
  • Math.floor(x) - 向下取整

經常使用的數組api

  • forEach（遍歷全部元素）
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function (item, index) {
  console.log(item + ',' + index);
})
複製代碼
  • map（對數組進行從新組裝，生成新的數組）
// map，生成新數組，不改變原來數組的格式
var arr = ['a', 'b', 'c', 'd'];
var result = arr.map(function (item, index) {
  return index + '/' + item;
})
console.log(result);
複製代碼
  • sort（對數組進行排序）
// sort， 會改變原來數組
var arr = [1, 23, 3, 4];
var result = arr.sort(function (a, b) {
  // 從小到大排序
  return a - b;

  // 從大到小排序
  // return b - a;
})
console.log(result);
複製代碼
  • filter（過濾符合條件的元素）
var arr = [1, 2, 3, 4];
var result = arr.filter(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);
複製代碼
  • every（判斷全部元素是否都符合要求）
var arr = [1, 2, 3, 4];
var result = arr.every(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);   // false
複製代碼
  • some（判斷是否有至少一個元素符合條件）
var arr = [1, 2, 3, 4];
var result = arr.some(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);  // true
複製代碼
  • join（根據條件對數組組合成字符串）
var arr = [1, 2, 3, 4];
var result = arr.join(',');
console.log(result);
複製代碼
  • reverse（將數組反轉）
var arr = [1, 2, 3, 4];
var result = arr.reverse();
console.log(result);
複製代碼

經常使用的對象api

  • for in
  • hasOwnProperty（檢查屬性是否是對象自有的，排除從原型鏈找到的屬性）
var obj = {
  x: 10,
  y: 20,
  z: 30
}

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ':' + obj[key]);
  }
}
複製代碼

問題：

獲取當前日期

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();

  if (month < 10) {
    month = '0' + month;
  }

  if (date < 10) {
    date = '0' + date;
  }

  return year + '-' + month + '-' + date;
}

var nowDate = new Date();
var formatDate = formatDate(nowDate);
console.log(formatDate);
複製代碼

獲取隨機數，要求長度一致的字符串格式

function randomStr(len) {
  var random = Math.random();
  random = random + '0000000000'; // 防止自動生成的數字不知足長度報錯而且強制轉換成字符串
  return random.substr(0, len)
}

console.log(randomStr(20));
複製代碼

寫一個能遍歷對象和數組的通用forEach函數

function forEach(obj, fn) {
  if (obj instanceof Array) {
    obj.forEach(function (item, index) {
      fn(index, item);
    })
  } else {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        fn(key, obj[key]);
      }
    }
  }
}

var arr = [1, 2, 3, 4];
forEach(arr, function (index, item) {
  console.log(index + ',' + item);
});

var obj = {
  x: 10,
  y: 20
};
forEach(obj, function (index, item) {
  console.log(index + ',' + item);
});
複製代碼

閱讀完後兩部曲

  1. 喜歡的小夥伴點個贊吧，感受對身邊人有幫助的，麻煩動動手指，分享一下。很是感謝各位花時間閱讀完，同時很感謝各位的點贊和分享。
  2. 但願各位關注一下個人公衆號吧，新的文章第一時間發到公衆號，公衆號主要發一些我的隨筆、讀書筆記、還有一些技術熱點和實時熱點，而且還有很是吸引人的我我的自費抽獎活動哦~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程