技術標籤：前端

2021校招準備工作（持續更新）

JavaScript

學好JavaScript，至少把紅寶書和犀牛書看三遍。

ES6的新語法

let宣告的變數只在 let 命令所在的程式碼塊內有效

let在程式碼塊內有效，var在全域性內有效

let只能宣告一次，var可以宣告多次

for迴圈適合使用let

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 輸出十個 10
for (let j = 0; j < 10; j++) {
  setTimeout(function
 
(){
    console.log(j);
  })
}
// 輸出 0123456789

變數 i 是用 var 宣告的，在全域性範圍內有效，所以全域性中只有一個變數 i, 每次迴圈時，setTimeout 定時器裡面的 i 指的是全域性變數 i ，而迴圈裡的十個 setTimeout 是在迴圈結束後才執行，所以此時的 i 都是 10。

變數 j 是用 let 宣告的，當前的 j 只在本輪迴圈中有效，每次迴圈的 j 其實都是一個新的變數，所以 setTimeout 定時器裡面的 j 其實是不同的變數，即最後輸出 12345。

不存在變數提升

console.log(a);  //ReferenceError: a is not defined
 

let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

const宣告一個只讀的常量，一旦宣告，常量的值就不能改變

ES6 明確規定，程式碼塊內如果存在 let 或者 const，程式碼塊會對這些命令宣告的變數從塊的開始就形成一個封閉作用域。

解構賦值

• 陣列模型的解構
• 物件模型的解構

Symbol

ES6 引入了一種新的原始資料型別 Symbol ，表示獨一無二的值，最大的用法是用來定義物件的唯一屬性名。

ES6 資料型別除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，還新增了 Symbol 。

Map與Set

Map物件儲存鍵值對，Set 物件允許你儲存任何型別的唯一值，無論是原始值或者是物件引用。成員值總是唯一的。

Reflect 與 Proxy

Proxy 用於對程式語言程式設計，對外界訪問進行過濾和改寫。Reflect是為了代替Object操作物件提供的新API，比如異常情況下Object.defineProperty會丟擲錯誤，而Reflect.defineProperty會返回false

數值二進位制字首0b/0B和八進位制字首0o/0O

陣列

• 陣列建立：Array.of 將引數中所有值作為元素形成陣列。
• 轉化陣列：Array.from 將類陣列物件或可迭代物件轉化為陣列。

Array.map() :建立一個新陣列，其結果是該陣列中的每個元素呼叫一次提供的函式後的返回值。

Array.forEach() :對陣列的每個元素執行一次給定的函式。

Object.assign()合併物件

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

箭頭函式

基本語法：

引數 => 函式體

使用場景：

為了將外部 this 傳遞到回撥函式中。當需要維護一個this上下文的時候，就可以使用箭頭函式。

Iterator迭代器 和 for...of迴圈

Iterator

• 通過 Symbol.iterator 建立一個迭代器，指向當前資料結構的起始位置
• 隨後通過 next 方法進行向下迭代指向下一個位置， next 方法會返回當前位置的物件，物件包含了 value 和 done 兩個屬性， value 是當前屬性的值， done 用於判斷是否遍歷結束
• 當 done 為 true 時則遍歷結束

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
 
it.next();
>{value: "zero", done: false}
it.next();
>{value: "one", done: false}
it.next();
>{value: "two", done: false}
it.next();
>{value: undefined, done: true}

#### ``for...of``迴圈

for…of 是 ES6 新引入的迴圈，用於替代 for…in 和 forEach() ，並且支援新的迭代協議。它可用於迭代常規的資料型別，如 Array 、 String 、 Map 和 Set 等等。

const nums = ["zero", "one", "two"];
 
for (let num of nums) {
  console.log(num);
}

Class 類

class作為物件的模版被引入，可以通過class關鍵字定義類。

class的本質是function。

模組化

export與import

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

Promise

Promise是一個物件，可以非同步獲取操作的資訊。

Promise 非同步操作有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。除了非同步操作的結果，任何其他操作都無法改變這個狀態。

then 方法

then 方法接收兩個函式作為引數，第一個引數是 Promise 執行成功時的回撥，第二個引數是 Promise 執行失敗時的回撥，兩個函式只會有一個被呼叫。

在 JavaScript 事件佇列的當前執行完成之前，回撥函式永遠不會被呼叫。

Generator/yield 用於非同步程式設計

Decorator修飾器

許多面向物件的語言都有修飾器（Decorator）函式，用來修改類的行為。