此文章根據老師上課劃的重點進行整理

Vue考試題型

考試時間120分鐘，

考試重點：

1.var和let的區別、應用

• var關鍵字：傳統方式

• let關鍵字：現代JavaScript中的方式

• 兩者的區別：

  let宣告的變數只在代碼塊內有效，實作塊級作用域，而var宣告的變數沒有塊級作用域，只有函式作用域和全域作用域，
  var宣告的變數存在變數提升，而let宣告的變數不存在變數提升，

2.變數提升

• var宣告提高到所屬作用域的頂端：如var宣告變數在任何函式之外，則變數的作用域會提升到整個代碼的最高處（全域變數）；在函式體內使用var宣告變數，其作用域會被提升至所在函式，

• 注意：

  1. 僅宣告被提升，賦初值仍在原位置；

  2. 變數提升不會跨script塊，

• “變數提升”現象：即變數可以在宣告之前使用，值為undefined，

• let命令改變了語法行為，它所宣告的變數一定要在宣告后使用，否則報錯，

3.使用const賦初值

• 常量在腳本代碼整個運行程序中保持不變

• 使用const宣告常量時，必需賦初值

• const 常量名 = 值

• 常量不能重復宣告

4.js中的資料型別

5.字串模板（模板字面量）

• 允許嵌入運算式的字串字面量

• 使用反引號 (``) 來代替普通字串中的用雙引號和單引號

• 模板字串可以包含特定語法（${expression}）的占位符

6.嚴格相等和非嚴格相等

1. == 左右兩邊的值相等即回傳true，資料型別可不相同
2. === 左右兩邊的值相等，且資料型別相同，回傳true
3. != 和 !== 與以上類似，其區別在資料型別是否相同

7.資料型別的轉換

1. 加號

   1. 加號（+）兩邊存在字串或參考型別時，加號為字串連接符，非字串運算元自動轉換為字串，參考型別呼叫其toString()方法轉換為字串，
   2. 加號（+）兩邊為數值、布爾、null或undefined型別時，加號為加法算術運算子，此時非數值運算元自動轉換為數值型，若存在不能轉換為數值的運算元（僅有undefined），結果為NaN，

2. 其他運算子

   1. 減（-）、乘（*）、除（/）、取余（%）兩邊存在字串時，字串自動轉換為數字（如有無法轉換運算元，則結果為NaN）

   2. ++和–，字串自動轉換為數字，無法轉換的結果為NaN

   3. ‘>、<、==、<=、>=’：運算式包含數字和字串時，字串自動轉換為數字，不能轉換成數字的字串或其它型別值，運算式均回傳false

   4. 當比較兩個字串的大小時，按ASCII碼比較，比較true false null 的大小時，按值比較（ true=1， false=null=0）

   5. !：將運算元轉換為布林值后取反

      非零數值和非空字串能夠轉換為true，零和空字串能夠轉換為false

8.JS函式定義的不同方法

有名函式，函式名稱為函式變數；匿名函式賦值于某變數后，該變數為函式變數

函式變數的值為整個函式定義陳述句

• 定義方法一：有名函式

  function 函式名([引數串列]) {
    函式體;
    [return [運算式];]
  }
  

• 定義方法二：函式運算式（匿名函式）

  變數名 = function ([引數串列]) {
    函式體;
    [return [運算式];]
  }
  

  • 不需要函式名
  • 常用于定義事件的回呼函式

• 定義方法三： 箭頭函式

  (引數1, 引數2, …, 引數N) => { 函式宣告; }
  var f = (num1, num2) => {
      return num1 * num2;
  };
  
  (引數1, 引數2, …, 引數N) => 運算式（單一）
  var f = (num1, num2) => num1 * num2;
  
  單一引數 => {函式宣告}
  var f = num => num * num;
  
  () => {函式宣告}  // 無引數
  var f = () => 'hello world';
  

9.JS物件的創建方式

• 方法一：呼叫Object()創建物件

let student = new Object();
student.num = '001';
student.sex = '男';
student.getAge = function(){
    let now = new Date();
    ...
}

• 方法二：使用物件字面量，相比方法一，更簡潔

let s2 = {
    num = '002';
    sex = '女';
    getAge: function(){
        ...
    }
}

• 方法三：使用建構式模式

  建構式實質上是具有如下特點的普通函式

  • 建構式內通常使用this關鍵字對屬性和方法賦值
  • 通過 new 建構式名()的形式呼叫建構式創建物件
  • 建構式不需要回傳值

function s3(num, sex){
    this.num = num;
    this.sex = sex;
    this.getAge = function(){
        ...
    };
};

• 方法四：原型法

function s4(num, sex){
    this.num = num;
    ...
}
//使用prototype定義Student
s3.prototype.getAge = function(){
    ...
}

• 方法五：使用class關鍵字定義類

class s5{
    constructor(num, sex){
        this.num = num;
        ...
    }
    getAge(){
        ...
    }
}

10.陣列定義

JavaScript中的陣列為Array物件，Array為JavaScript語言內置物件

• 方式一(更常用)

let a1 = [5, 10. 15];
let a2 = ['aaa', 'bbb', 'ccc']

• 方式二

let a3 = new Array('a1', 'a2', 'a3');

11.陣列的常用方法

1. 陣列元素的訪問

console.log(a1[1]); // 10
console.log(a2[0]); // aaa
console.log(a3[a3.length - 1]); // a3

2. 陣列元素的常用屬性及方法

   1. length屬性: 可讀寫，讀回傳陣列中元素的個數，寫可增加或減少元素的個數

   2. push(e1, …, en)：將引數指定的元素依次添加到陣列的末尾，并回傳新陣列的長度

   3. pop()：彈出（回傳，并在陣列中洗掉）陣列最末一個元素

   4. shift(): 洗掉陣列的第一個元素，并回傳該元素

   5. unshift(e1, …, en): 將引數e1, …, en依次添加到陣列的開頭，并回傳新陣列的長度

   6. splice(index, count[, e1, …, en): 在陣列中洗掉、替換或添加元素

      1. 洗掉元素：只提供index和count兩個引數，洗掉從index位置開始的count個元素，并回傳洗掉的元素陣列

         let a = [1, 2, 3, 4, 5];
         let e = a.splice(2, 1); // 從索引為2的位置開始，洗掉1個元素
         console.log(e); // (1) [3]，被洗掉元素組成的陣列
         console.log(a); // (4) [1, 2, 4, 5]，改變后的陣列
         
         

      2. 替換元素：提供三個以上引數，前兩個引數的作用與1相同，在1洗掉的基礎上，第三個及之后的引數被插入到index位置，回傳值與1相同

         let a2 = [1, 2, 3, 4, 5];
         // 從索引為2的位置開始，洗掉2個元素，并將元素10播放到索引為2的位置
         let e2 = a2.splice(2, 2, 10); 
         console.log(e2);  // (2) [3, 4]
         console.log(a2);  // (4) [1, 2, 10, 5]
         
         a2.splice(1, 1, 6);	// a2[1] = 6
         console.log(a2); // (4) [1, 6, 10, 5 ]
         
         

      3. 添加元素：提供三個以上引數，第二個count引數值為0，此時不洗掉元素，只在index位置插入第三個及之后的引數，回傳值為空陣列

         let a3 = [1, 2, 3, 4, 5];
         // 從索引為2的位置開始，洗掉0個元素，并將元素10播放到索引為2的位置
         let e3 = a3.splice(2, 0, 10); 
         console.log(e3);  // []
         console.log(a3);  // (6) [1, 2, 10, 3, 4, 5]
         
         

   7. sort()或sort(compareFunction)：對陣列元素排序

      • 不提供引數時，按字典順序（Unicode從小到大）排序
      • 提供compareFunction時，如compareFunction回傳正值則交換元素

   8. forEach(function(currentValue[, index[, array]])[, thisArg]): 對陣列中的每個元素執行一次回呼函式

   9. filter(function(currentValue[, index[, array]])[, thisArg]): 對所有元素依次應用回呼函式，回傳一個新陣列，包含所有回呼函式回傳true的元素

   10. 生成一個新的陣列，其中的元素為指定陣列中的元素應用回呼函式回傳值

   11. reduce(function(previousResult, currentValue[, index[, array]])[, initialValue])：使用回呼函式對陣列中的每個元素進行處理，并將處理結果匯總回傳，其中：

       • previousResult: 必須提供，上一次執行的結果，第一次執行時，如提供initialValue引數，則previousResult的值為initialValue，否則previousResult的值為陣列中的第一個元素， 且currentValue為陣列中的第二個元素
       • currentValue:必須提供，當前正在處理的元素

12.json相關語法的定義和運用，json資料

Json簡介

JSON（JavaScript Object Notation, JavaScript物件表示法）是一種輕量級資料交換格式，易于理解，易于決議與生成，基于JavaScript的一個子集，

JSON資料采用文本格式，獨立于編程語言，

JavaScript原生支持生成與決議JSON格式資料，主流編程語言均支持JSON格式，是目前前后端資料互動的主流資料格式之一，

相比XML，JSON可讀性更好，更輕量，

Json資料格式

• JSON資料基于兩種結構：

1. " 名稱/值"對的集合，在JavaScript中，由物件（Object）實作
2. 值的有序串列，在JavaScript中，由陣列（Array）實作

• JSON資料格式與JavaScript中物件和陣列的定義類似
• JSON中物件由花括號包裹，其中的每個“名稱/值”對之間使用（英文）逗號分隔，最后一個“名稱/值”對后不需要逗號
• JSON“名稱/值”中的**“名稱”必須是雙引號包裹的字串**

Json資料的決議

• JSON格式基于文本，因此JSON資料可以字串形式賦值給變數

let studentJson = '{"name": "小明",  "gender": "男",  "dob": "1990-01-01"}';

• 通過JSON.parse(jsonData)方法將JSON資料轉換為JavaScript物件，該方法接收的引數為字串型別的JSON資料

let studentJson = '{"name": "小明",  "gender": "男",  "dob": "1990-01-01"}';
let student = JSON.parse(studentJson);
console.log(typeof student); // object
console.log(student.name);  // 小明
console.log(student.gender);// 男
console.log(student); // {“name": "小明",  "gender": "男",  "dob":... ...

Json資料的生成

• 通過JSON.stringify(object)方法將JavaScript物件/陣列轉換為JSON資料

let s1 = {name: '小紅', gender: '女', dob: new Date('1991-6-2')};
let s2 = {name: '小剛', gender: '男', dob: new Date('1991-5-16')};
let students = [s1, s2];
console.log(JSON.stringify(students));
// [
//  {"name":"小紅","gender":"女","dob":"1991-06-01T15:00:00.000Z"},
//  {"name":"小剛","gender":"男","dob":"1991-05-15T15:00:00.000Z"}
// ]

13.promise物件

Promise是ES 6新增的用于異步操作的物件，它包裝了異步操作的最終完成和結果

Promise物件包裝了一個將來會得到、當前未知的結果（如AJAX請求的回應），允許設定操作成功完成和失敗時的回呼函式

通過使用Promise，異步方法可以像同步方法一樣回傳值：一個Promise物件

1. 一個Promise物件總是處于以下三種狀態之一：
   • pending: 初始狀態, 既沒有完成也沒有拒絕
   • fulfilled: 意味著操作成功完成
   • rejected:意味著操作失敗
   • fulfilled和rejected這兩種狀態又被稱為settled狀態
2. 一個Promise物件有兩種可能的狀態改變：
   • 從pending轉變為fulfilled，或者
   • 從pending轉變為rejected
   • 且狀態改變之后不會再改變
3. Promise物件的基本使用
   1. then(onFulfilled[, onRejected])方法：接受兩個引數：操作成功和失敗時的回呼函式，回傳一個新的Promise物件以實作鏈式呼叫
      • onFulfilled回呼函式接收一個引數，是異步操作的回傳值
      • onRejected函式接收一個引數，是操作失敗的原因
   2. then方法的二個引數均是可選的，常常提供只提供第一個引數而忽略第二個引數，在catch方法中處理失敗的情況
   3. catch(onRejected)方法處理失敗的情況，同樣回傳Promise，引數onRejected是失敗時的回呼函式
   4. 實質上，p.catch(onRejected)內部呼叫的是p.then(undefined, onRejected)
   5. finally(onFinally)方法：引數onFinally為進入settled狀態時執行的回呼函式，即進入fulfilled或rejected狀態，時序上會先執行then和catch方法設定的onFulfilled或onRejected回呼函式

14.回應式布局的使用和原理

? 采用CSS的媒體查詢（media query）技術，將三種已有的開發技巧，包括彈性網格布局、彈性圖片、媒體和媒體查詢整合在一起

15.bootstraps怎么支持相應布局的（柵格系統）

容器

• Bootstrap中最基本的布局元素之一
• 容器用來容納內容，設定內邊距，并將內容居中
• 使用Bootstrap的柵格系統需要使用容器元素
• Bootstrap中的三類容器：
  • container，所有回應斷點設定max-width
  • .container-fluid，所有回應斷點設定width為100%
  • .container-{breakpoint}，斷點以下設定width為100%

作業方式

1. 行必須放置在 .container class內，以便獲得適當的對齊（alignment）和內邊距（padding），
2. 使用行(row)來創建列的水平組，內容應該放置在列內，且唯有列可以是行(row)的直接子元素，
3. 預定義的網格類，比如 .row 和 .col-xs-4，可用于快速創建網格布局，
4. 網格系統是通過指定您想要橫跨的十二個可用的列來創建的，例如，要創建三個相等的列，則使用三個 .col-xs-4

16.移動優先原則

? 移動優先的回應式布局采用的是漸進增強原則，制作回應式網站時，先搞定手機版，然后再去為更大設備去設計和開發更復雜的功能，特征是使用min-width匹配頁面寬度，從上到下書寫樣式時，首先考慮的是移動設備的使用場景，默認查詢的是最窄的情況，再依次考慮設備螢屏逐漸變寬的情況，

? 由簡入繁易，由繁入簡難，如果是桌面優先，布局端是桌面端代碼，只有在media中，才是手機端代碼，加載了多余的桌面端代碼，如果是圖片檔案，則下載的無用資源更多，

1. 顯示設備種類繁多，尺寸差異大
2. 問題：橫屏、豎屏、2K、4K，不同像素密度 … …

17.mvm模式的定義

• MVVM(Model-View-ViewModel) 是一種軟體架構設計模式
• MVVM 的核心是資料驅動即 ViewModel，ViewModel 是 View 和 Model 的關系映射
• ViewModel 類似中轉站 (Value Converter)，負責轉換 Model 中的資料物件，使得資料 變得更加易于管理和使用
• MVVM 本質是基于操作資料來操作視圖進而操作 DOM，借助于 MVVM 無需直接操作 DOM，開發者只需完成包含宣告系結的視圖模板，撰寫 ViewModel 中有業務，使得 View 完全實作自動化

18.VUE的語法和應用

參考課本吧

19.第六章不考