前端JavaScript高級面試筆記

時間 2019-11-08

標籤前端 javascript 高級面試筆記欄目 JavaScript 简体版

原文原文鏈接

1、ES6javascript

一、模塊化html

ES6經過export和import實現模塊化java

ES6的模塊化的基本規則或特色，歡迎補充：jquery

　　　　1：每個模塊只加載一次，每個JS只執行一次，若是下次再去加載同目錄下同文件，直接從內存中讀取。一個模塊就是一個單例，或者說就是一個對象；webpack

　　　　2：每個模塊內聲明的變量都是局部變量，不會污染全局做用域；es6

　　　　3：模塊內部的變量或者函數能夠經過export導出；web

　　　　4：一個模塊能夠導入別的模塊ajax

例子：npm

 1 //  util1.js
 2 export default{
 3   a: 100 // export default
 4 }
 5 
 6 // util2.js
 7 export function fn1(){
 8    console.log('fn1')
 9 }
10 export function fn2(){
11    console.log('fn2')
12 }
13 
14 // index.js
15 import util from './util.js'
16 import {fn1,fn2} from './util2.js'

二、編譯方法，把es6編譯成es5promise

都是用的babel這個東西

第一種方法：babel（簡單的直接用babel）

cmd安裝babel-cli，用於在終端使用babel

npm install -g babel-cli

安裝babel-core babel-preset-es2015 babel-preser-latest

npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

經過 babel --version來判斷babel版本

想要編譯某個js，能夠執行下面的代碼

babel index.js -o babel1.js

三、使用webpack進行編譯

四、使用rollup編譯

五、export和export default的區別

在一個文件中，export和import能夠用多個

1 //demo1.js
2 export const str = 'hello world'
3 
4 export function f(a){
5     return a+1
6 }

對應的導入方式

1 //demo2.js
2 import { str, f } from 'demo1' //也能夠分開寫兩次，導入的時候帶花括號

1 //demo1.js
2 export default const str = 'hello world'

對應的導入方式

1 //demo2.js
2 import str from 'demo1' //導入的時候沒有花括號

export default本質上是輸出一個叫default的變量

export default str = str編譯之後是exports.default

export function ss() {
  console.log('ss')
}

export function aa() {
  console.log('aa')
}
編譯之後是

exports.ss = ss;
exports.aa = aa;

2、class

對比下面倆組代碼

 1 function Ttest(x,y) {
 2   this.x = x;
 3   this.y = y;
 4 }
 5 Ttest.prototype.adds = function () {
 6    return this.x + this.y
 7 }
 8 var m =new Ttest(1,2)
 9 console.log(m.adds())
10 console.log('類型是什麼：'+typeof Ttest)
11 console.log(Ttest === Ttest.prototype.constructor)
12 console.log(m.__proto__===Ttest.prototype)

 1 class MathHandle{
 2   constructor(x,y){
 3     this.x=x;
 4     this.y=y;
 5   }
 6   add(){
 7     return this.x+this.y
 8   }
 9 }
10 console.log('類型是什麼：'+typeof MathHandle)
11 console.log(MathHandle === MathHandle.prototype.constructor)
12 const m = new MathHandle(1,2);
13 console.log(m.add())

上面倆組的代碼對比能夠知道：class就是一個語法糖，本質仍是function

ES6裏面的class和js構造函數的區別？

3、promise

先來個例子，用callback實現

 1 function LoadImg(src, callback, fail) {
 2   var img = document.createElement('img')
 3   img.onload = function () {
 4     callback(img)
 5   }
 6   img.onerror = function () {
 7     fail()
 8   }
 9   img.src = src
10 }
11 var src = ''
12 LoadImg(src,function (img) {
13   console.log(img.width)
14 },function () {
15   console.log('failed')
16 })

用promise實現

 1 function LoadImg(src) {
 2   const promise = new Promise(function (resolve, reject) {
 3     var img = document.createElement('img')
 4     img.onload = function () {
 5       resolve(img)
 6     }
 7     img.onerror = function () {
 8       reject()
 9     }
10     img.src = src
11   })
12   return promise
13 }
14 var src = 'http://www.imooc.com/static/img/index/logo_new.png'
15 var result = LoadImg(src)
16 result.then(function (img) {
17   console.log(img.width)
18 },function () {
19   console.log('failed')
20 })
21 result.then(function (img) {
22   console.log(img.height)
23 })

Promise語法

4、箭頭函數

看上面的例子：箭頭函數是普通function的補充，不是全部地方都適用箭頭函數，上面的例子告訴咱們，箭頭函數最大的意義是，this指向了函數體外面最近一層，普通函數指向的是window

5、單線程

單線程的解決方案之一：異步，可是它有個問題

jquery的deferred

http://www.runoob.com/jquery/misc-jquery-deferred.html

上面這倆種方式，要比經常使用的ajax好不少

當新加方法的時候，不用修改已有的方法

執行成功的時候，進入then，出現了錯誤，統一進入catch

例子：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="ie=edge">
 6   <title>Title</title>
 7   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
 8 </head>
 9 <body>
10    <script type="text/javascript" src="./jquery-3.1.1.js"></script>
11    <script type="text/javascript">
12      function LoadImg(src) {
13        var promise = new Promise(function (resolve, reject) {
14          var img = document.createElement('img')
15          img.onload = function () {
16            resolve(img)
17          }
18          img.onerror = function () {
19            reject("圖片加載失敗")
20          }
21          img.src = src
22        })
23        return promise
24      }
25      var src = 'http://www.imooc.com/static/img/index/logo_new1.png'
26      var result = LoadImg(src)
27      result.then(function (img) {
28        console.log(1, img.width)
29        return img
30      }).then(function (img) {
31        console.log(2, img.height)
32      }).catch(function (ex) {
33        console.log(ex)
34      })
35    </script>
36 </body>
37 </html>