JS基礎

JavaScript 面試

JS基礎篇

變量類型和計算

  • JS中使用typeof能得到哪些類型
    -undefinded
    • string
    • number
    • boolean
    • object
    • function
  • 何時使用 === 何時用 ==
    if (obj.a == null) {
        // 這里相當于obj.a === null || obj.a === undefined
    }
  • JS中有哪些內置函數
    • Array
    • Object
    • RegExp
    • Date
    • Error
    • Function
    • Boolean
    • String
    • umber
  • JS變量按照存儲方式區分為哪些類型，并描述其特點

區分為值類型、引用類型。值類型的值復制之后不會相互干涉，引用類型的值復制是變量指針的復制，并不是真正的值的拷貝

  • 如何理解JSON

JSON只不過是JS對象

原型和原型鏈

JS三座大山之一

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

instanceof。用于判斷引用類型屬于哪個構造函數的方法

  • 寫一個原型繼承的例子
function Elem(id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val) {
    var elem = this.elem
    if (val) {
        elem.innerHtml = val
        return this
    } else {
        return elem.html()
    }
}
Elem.prototype.on = function (type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
    return this
}
var fuck = new Elem('fuck')
fuck.html('<p>hello</p>').on('click', function () {
    alert('clicked!')
})
  • 描述new一個對象的過程
    • 創建一個新對象
    • this指向這個新對象
    • 執行代碼，即對this賦值
    • 返回this
  • zepto源碼中如何使用原型鏈

作用域和閉包

  • 說下對變量提升的理解

變量定義函數聲明都會提前定義

  • 說明this幾種不同的使用場景
    • 作為構造函數執行
    • 作為對象屬性執行
    • 作為普通函數執行
    • call apply bind
  • 創建10個<a>標簽，點擊時彈出對應的序號
for (var 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)
}
  • 如何理解作用域
    • 自由變量
    • 作用域鏈
    • 閉包的兩個場景 (函數作為值返回，函數作為參數傳遞)
  • 實際開發中閉包的應用

封裝變量，收斂權限

function isFirstLoad() {
    var _list = []
    // 保護了_list變量
    return function (id) {
        if (_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}
var firstLord = isFirstLoad()
firstLord(10)   // true
firstLord(10)   // false
firstLord(20)   // true

異步和單線程

  • 同步和異步的區別是什么

同步會阻塞代碼執行，異步不會

  • 一個關于setTimeout的筆試題
  • 前端使用異步的場景有哪些
    • 定時任務：setTimeout、setInterval
    • 網絡請求：ajax加載、動態<img>加載
    • 事件綁定

其他

  • 獲取2017-06-10格式的日期
function formateDate(dt) {
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth()
    var date = dt.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (date < 10) {
        date = '0' + date
    }
    return year + '-' + month + '-' + date
}
  • 獲取隨機數，要求是長度一致的字符串格式
  • 寫一個能遍歷對象和數組的通用forEach函數
function forEach(obj, fn) {
    var key
    if (obj instanceof Array) {
        obj.forEach(function (item, index) {
            fn(item, index)
        })
    } else {
        for (key in obj) {
            fn(key, obj[key])
        }
    }
}

webAPI

DOM操作

  • DOM是哪種數據結構

樹

  • DOM操作的常用API有哪些
    • 獲取DOM節點，以及節點的property和attribute
    • 獲取父節點，獲取子節點
    • 新增節點，刪除節點
  • DOM節點的attr和property有何區別
    • property只是一個JS對象的屬性的修改
    • attribute是對html標簽的修改

BOM操作

  • 如何檢測瀏覽器的類型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
  • 拆解url的各部分

location....

事件

  • 編寫一個通用的事件監聽函數
function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
      var target
      if (selector) {
          target = e.target
          if (target.matches(selector)) {
              fn.call(target, e)
          }
      } else {
          fn(e)
      }  
    })
}
  • 描述事件冒泡流程
    • DOM樹形結構
    • 事件冒泡
    • 阻止冒泡
    • 冒泡的應用 ==> 事件代理
  • 對于無限下拉加載圖片的頁面，如何給每個圖片綁定事件

事件代理：代碼簡介、減小瀏覽器的壓力

項目運行環境

頁面加載

  • 從輸入url到得到html的詳細過程
    • 瀏覽器根據DNS服務器得到域名的IP地址
    • 向這個IP的機器發送http請求
    • 服務器收到、處理并返回http請求
    • 瀏覽器得到返回的內容
  • window.onload和DOMContentLoaded的區別
    • window.onload是等
      待全部資源都加載完畢才會執行，包括圖片、視頻
    • DOMContentLoaded是當DOM結構渲染完成即執行，此時圖片、視頻可能沒有加載完成

性能優化

  • 多使用內存、緩存或者其他方法
  • 減少CPU計算、減少網絡

安全性

Snippets

發生類型轉換的場景

  • 字符串拼接
  • == 運算符
  • if語句
  • 邏輯運算

原型規則

原型規則是學習原型鏈的基礎

  1. 所有的引用類型都具有對象的特性，即可用自由擴展屬性('null'除外)
  2. 所有的引用類型都有一個proto屬性(隱式原型)，屬性值是一個普通對象
  3. 所有的函數都有一個prototype屬性(顯式原型)，屬性值是一個普通對象
  4. 所有引用類型的proto屬性值指向它的構造函數的prototype屬性值
  5. 當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的proto(即它的構造函數的prototype)中尋找

執行上下文

  • 范圍：一段<script>或者一個函數
  • 全局：變量定義、函數聲明
  • 函數：變量定義、函數聲明、this、arguments

this

this要在執行時才能確定值，定義時無法確認

var a = {
    name: 'A',
    fn: function () {
        console.log(this.name)
    }
}
a.fn()  // this ==> a
a.fn.call({name: 'B'})  // this ==> {name: 'B'}
var fn1 = a.fn
fn1()   // this ==> window

作用域

  • 沒有塊級作用域
  • 只有函數和全局作用域
  • 自由變量：當前作用域未定義的變量

linux命令

  • mkdir 創建新文件夾
  • ls 查看當前文件夾內容
  • pwd 查看當前文件夾路徑
  • rm -rf a 刪除文件夾
  • cp 拷貝文件
  • mv 移動文件
  • rm 刪除文件
  • vim 創建并編輯文件
  • cat 查看文件內容
  • head 查看文件前部內容
  • tail 查看文件末尾內容

加載資源的形式

  • 輸入url（或跳轉頁面）加載html
  • 加載html中的靜態資源

加載資源的過程

  • 瀏覽器根據DNS服務器得到域名的IP地址
  • 向這個IP的機器發送http請求
  • 服務器收到、處理并返回http請求
  • 瀏覽器得到返回的內容

瀏覽器渲染頁面的過程

  • 根據HTML結構生成DOM tree
  • 根據CSS生成CSSOM
  • 將DOM和CSSOM整合成RenderTree
  • 根據將DOM和CSSOM整合成RenderTree開始渲染和展示
  • 遇到script時，會執行并阻塞渲染

加載資源優化

  • 靜態資源合并壓縮
  • 靜態資源緩存
  • 使用CDN讓資源加載更快（不同區域的網絡優化）
  • 使用SSR后端渲染，數據直接輸出到HTML中

渲染優化

  • CSS放錢、JS放后面
  • 懶加載（圖片懶加載，下拉加載更多）
  • 減少DOM查詢，對DOM查詢做緩存
  • 減少DOM操作，多個操作盡量合并在一起執行
  • 事件節流
  • 盡早執行操作
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Js中使用typeof能得到的類型typeof underfined //underfinedtypeo...
    Primers閱讀 110評論 0贊 0
  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品，去做同樣的事情，實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2贊 17
  • 單例模式 適用場景：可能會在場景中使用到對象，但只有一個實例，加載時并不主動創建，需要時才創建 最常見的單例模式，...
    Obeing閱讀 2,109評論 1贊 10
  • 一、DOM 什么是DOM？Document Object Model(文檔對象模型)。DOM是針對HTML和XML...
    空谷悠閱讀 987評論 0贊 2
  • 首先給大家分享一個交流平臺http://kotlin.cn/ 由于我的Android項目在轉換Kotlin編碼后我...
    年少常慕樓外樓閱讀 295評論 1贊 2