• 程序是程式的一次執行
• 程序是一個程式及其資料在處理機上順序執行時所發生的活動
• 程序是具有獨立功能的程式再一個數據集合上執行的過程，是系統進行資源分配和排程的基本單位。

程序的特點: 動態性、併發性、獨立性、非同步性
執行緒的定義： CPU排程和分派的基本單位
執行緒與程序的關係：

• 包含關係：一個執行緒只能屬於一個程序，而一個程序可以有多個執行緒，但至少有一個執行緒
• 執行緒是指程序內的一個執行單元，也是程序內的可排程實體
• 資源分配給程序，同一程序的所有執行緒共享該程序的所有資源

執行緒與程序的區別：

• 併發性：不僅程序之間可以併發執行，同一個程序的多個執行緒之間也可以併發執行
• 排程：執行緒作為排程和分配的基本單位，程序作為擁有資源的基本單位
• 資源開銷：程序是擁有資源的一個獨立單位，執行緒不擁有系統資源，但可以訪問隸屬於程序的資源
• 記憶體分配：同一程序的執行緒共享本程序的地址空間和資源，而程序之間的地址空間和資源是相互獨立的
• 獨立性：每個獨立的程序有程式執行的入口、順序執行序列和程式出口，但是執行緒不能獨立執行。

2 JS | ES6新增語法有哪些？平時開發中常用到哪些
參考連結:小丘啦啦啦-ES6新增常用語法 、es6語法總結

個人知道的基本上只有前幾個，後面的都是百度的233

• let let宣告的變數只在所處的塊級有效,不能在同一作用域內重新宣告。

與var的區別：
1. var是函式作用域，而let是塊作用域。在for迴圈內定義了一個var變數，實際上在for迴圈以外也可以訪問，而let由於是塊作用域，所以如果在塊作用域內（如for迴圈內）定義的變數，在其外不可被訪問。
2.let不能在定義與宣告之前訪問該變數（即不能變數提升），但是var可以。
3.let不能被重新定義，但是var可以。

• const 宣告常量,具有塊級作用域。宣告常量時必須賦值，且常量賦值時，值不能修改。

• 解構賦值 陣列以序號位置一一對應、物件根據屬性名一一對應

  const obj = { a: "aaa", b: "bbb" }; 
  let { a, b,c, d="ddd",a:e} = obj ; 
  console.log(a,b,c,d,e);   //aaa bbb undefined ddd aaa
  
  let [a, b, c] = [1, 2, 3]// 即: let a = 1;let b = 2;let c = 3;
   
  

• 箭頭函式 （）=>{} 用來簡化函式定義語法。函式中只有一句程式碼，且程式碼的執行結果就是返回值，可以省略大括號。函式中如果形參只有一個，形參外側的小括號也可以省略。
  箭頭函式會捕獲其所在上下文的 this 值，作為自己的 this 值。如果上下文沒有this, 則this指向Window物件。

• 模板字串 使用 反單引號`` 將整個字串包裹起來，而在其中使用 ${} 來包裹一個變數或者一個表示式。

• 預設引數 如果不傳入引數, 或者傳入undefined, 則使用預設值。

  function greet(name = 'Student', greeting = 'Welcome') {
  console.log(`${Greeting} ${Name}!`);
  }
  

• 展開運算子 ···
  1.它可以將陣列或者物件進行展開，將一個不定數量的引數表示為一個數組。
  2.使用展開運算子將陣列展開為多個元素, 使用剩餘引數可以將多個元素繫結到一個數組中。

  //展開字面物件
  const arr1 = [1,2,3];
  const arr2 = [3,4];
  console.log(...arr1);  //1 2 3
  const arr3 = [...arr1,...arr2];
  console.log(arr3);  //arr1和arr2的合併
  
  //剩餘引數
  const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
  const [total, subtotal, tax, ...items] = order;
  console.log(items);   //陣列(4) ["cheese", "eggs", "milk", "bread"]
  
  //也可以用在函式中表示不定參，但只能放在最後
  const add = (a, b, ...more) => {
  return more.reduce((m, n) => m + n) + a + b;}
  console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39
  

以下為不常用到（即百度得到x）

• Class類

  class Person {
    constructor(name, age) { // 建構函式
        this.name = name;
        this.age = age;
    }
    getName() { // 原型方法（千萬不要加上function）
        return this.name
    }
  }
  

• 類的繼承extends

  class PersonExt extends Person{
    constructor(name,age,birthday){
        super(name,age);   
        //在繼承的建構函式中，必須呼叫一次super方法，它表示建構函式的繼承；必須在this之前被呼叫
        this.birthday = birthday;
    }
    supGetName(){
        console.log(super.getName());   //super直接呼叫父級的原型方法
    }
  }
  

• Set和map 類同c++資料型別結構

• 字串新方法
  1、String.prototype.includes('判斷要包含的字串')
  2、String.prototype.padStart(maxLength,fillString='')從開始位置填充；
  3、String.prototype.padEnd(maxLength,fillString='')從結束位置填充。
  maxLength填充完畢之後的長度；fillString='用什麼來填充',不改變原來字串。

• 陣列新方法
  1、reduce()：
  用於合併處理陣列。接收一個函式作為累加器（calback對陣列每個元素進行處理），陣列中每個值按順序開始合併，最終為一個值。

   array.reduce(calback(previousValue,currentValue,[index],[array]),[initialValue])
  
   var numbers = [15.5, 2.3, 1.1, 4.7];
        //total上次呼叫累加處理函式的返回值;num陣列當前元素;index當前元素在陣列中索引;array陣列
        function getSum(total, num ,index ,array) {   
            console.log(`當前元素索引:${index}`);
            console.log(`被處理的陣列:${array}`);
            return total + Math.round(num); //取最近的整數，0.5向大數的方向算
        }
        function myFunction(item) {
            return item.reduce(getSum, 1);   //1為迴圈合併處理的初始值
        }
        console.log(myFunction(numbers)); //1+24 
  

  2、filter()：
  用於篩選陣列元素成新陣列。使用指定函式測試陣列所有元素，並建立一個包含通過測試元素的新陣列。

    array.filter(callback(currentValue,[index],[arr]), [thisArg])
  
    var a = [1, 2, 3, 4, 5];
        var b = a.filter((item,index,arr) => {
            console.log(`當前元素索引:${index}`);
            console.log(`被處理的陣列:${arr}`);
            return item > 3;
        });
  
        console.log(b);
  

• 匯入模組 ES6中匯入其他模組的一種方式import

• 唯一型別Symbol Symbol是ES6引入的第七種資料型別,所有Symbol()生成的值都是獨一無二的，可以從根本上解決物件屬性太多導致屬性名衝突覆蓋的問題。物件中Symbol()屬性不能被for…in遍歷，但是也不是私有屬性。
  Symbol.for可以用來命名具有相同的key值的物件。

    let a1 = Symbol();
    let a2 = Symbol();
    console.log(a1 === a2);             // false
  
    let a3 = Symbol.for('a3');          // 類似於“常量池”
    let a4 = Symbol.for('a3');
    console.log(a3 === a4)
  
    let a1 = Symbol.for('abc');
    let obj = {
    [a1]: '123',                    // 如a1的值不是Symbol則會報錯
    'abc': 345,
    'c': 456
    };
    console.log('obj', obj);        //abc:234 c:345 Symbol(abc):123
  
    for (let [key, value] of Object.entries(obj)) {         // 獲取物件中非Symbol屬性
    console.log('let of', key, value);
  

  Object.getOwnPropertySymbols方法返回一個數組，成員是當前物件的所有用作屬性名的 Symbol 值。

    Object.getOwnPropertySymbols(obj).forEach(function (item) {     // 獲取物件中的Symbol屬性
    console.log(obj[item]);
    });     //symbol symbol(abc)123
  
     Reflect.ownKeys(obj).forEach(function (item) {          // 獲取物件中所有屬性
    console.log('ownkeys', item, obj[item]);
     })//abc 234  c 345  sssswaSymbol(abc) 123
    }   
  

• proxy和reflect
  proxy用於修改某些操作的預設行為，即對程式語言層面進行修改，屬於“超程式設計”，Proxy意思為“代理”，即在訪問物件之前建立一道“攔截”，任何訪問該物件的操作之前都會通過這道“攔截”，即執行Proxy裡面定義的方法。

    let target = {
    name:"小明"，
    age: 15     
    }
  
    let handler = {
       get:(target,name,)=>{
         return "success"
    }
    }
  
    let pro = new Proxy(target,handler);
  
    console.log(pro.name);
    //此時打印出來的結果為 success；
  

  Reflect設計的目的是為了優化Object的一些操作方法以及合理的返回Object操作返回的結果,對於一些命令式的Object行為，Reflect物件可以將其變為函式式的行為。

• Promise 待補充

• Iterator 待補充

• Generator 待補充

3 JS | 瞭解最近的(ES2020,ES2021)一些新語法糖嗎?說說看知道哪些，是否用過

瞭解肯定是不瞭解的，用也肯定是沒用過的，但是我選擇百度√ 搬運連結
ES2020

• 1. String.protoype.matchAll
     matchAll()方法是ES2020中新增的一個字串方法，它返回一個包含所有匹配正則表示式的結果及分組捕獲組的迭代器。
     在matchAll()出現之前，我們一般通過在迴圈中呼叫 RegExp.exec() 來獲取所有匹配項資訊。現在有了matchAll()方法，我們便可以替代while迴圈加exec的方式:

     const reg = /\b(t(\w)+)\b/g;
     const str = 'It is never too late to learn.';
     
     // before
     let match;
     while ((match = reg.exec(str)) !== null) {
      console.log(match);
     }
     // ['too', 'too', 'o', index: 12, input: 'It is never too late to learn.', groups: undefined]
     // ['to', 'to', 'o', index: 21, input: 'It is never too late to learn.', groups: undefined]
     
     // es2020
     const result = str.matchAll(reg);
     console.log([...result]); 
     // [['too', 'too', 'o', index: 12, input: 'It is never too late to learn.', groups: undefined], ['to', 'to', 'o', index: 21, input: 'It is never too late to learn.', groups: undefined]]
     

• 2. dynamic import 動態匯入通過import關鍵字，在執行時載入指令碼或者模組，返回一個Promise物件，實現按需載入,如圖片懶載入、spa應用的元件按需載入、滑鼠點選載入等等。

     function showModal(){
        import('./modal.js').then((Modal)=>{
            Modal.show();
        })
     }
     

• 3. BigInt BigInt這種基本型別，它可以超出javascript中number型別的安全範圍的限制，表示任意大小的整數。
     我們可以通過把 n 加到數字後面或者呼叫 BigInt() 建構函式的方式，來建立BigInt型別的值：

     const bigIntNum1 = 9007199254740991n; // 9007199254740991n
     const bigIntNum2 = BigInt(9007199254740991); // 9007199254740991n
     const bigIntNum3 = BigInt('9007199254740991'); // 9007199254740991n
     
     
     

ES2021

• 1. String.prototype.replaceAll
• 2. Promise.any
• 3. WeakRef
• 4. 邏輯賦值
• 3. 數值分割符

太多了就不記載了，看鄒大佬總結吧

4 html | h5新增標籤你瞭解的有哪些？為什麼會增加例如 <section>, <article>, <nav>, <header>,<footer>這樣的標籤

繪圖標籤

• canvas 點陣圖區域，用於繪製圖形。h5遊戲基於此繪製開發。
• svg 向量圖

媒體標籤

• video 一段視訊並提供播放頁面
• sudio 音訊
• embed 嵌入內容（包括各種媒體）

結構標籤

• template h5中的template標籤內容不會顯示，但是再後臺檢視介面DOM是存在template標籤的，但是display:none
  我們可以使用template.innerHTML獲取完整的HTML片段。通過content屬性可以獲取template標籤中的內容，template物件.content可以呼叫getElementById、querySelector、querySelectorAll方法來獲取裡面的子節點。

  vue中的template是可以顯示內容的，但是檢視後臺的dom結構不存在template標籤。
  注意：vue例項繫結的元素內部的template標籤不支援v-show指令，即v-show="false"對template標籤來說不起作用

• datalist 與option結合使用，選擇器結構。雖然一般來說用ui的datalist更好看

• header 標籤定義文件或者文件的一部分割槽域的頁首

• nav 標籤定義導航連結的部分。

• article 標籤定義外部的內容。外部內容可以是來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文字，或者是來自論壇的文字。亦或是來自其他外部源內容。總感覺效果不是很明顯

• footer 和header同理

• section 標籤定義了文件的某個區域。比如章節、頭部、底部或者文件的其他區域

新增原因
可讀性。
使用更多語義的html標籤將使您的HTML更具可讀性和清晰性，同時還允許您擁有與標籤相關的特定CSS，並且不一定需要div的自定義類。HTML標記了文件的結構,它告訴使用者代理：這個元素是一個標題/段落/報價

5 css | display:none visible:hidden opacity:0; 三者有何區別?分別有作用?都會有什麼副作用?</、font>

個人經驗：三者的共同點都是隱藏。display:none將不再在介面上顯示並佔據高度，而hidden不再顯示但是依舊佔據高度，而opcity顯示且佔據高度，不過透明度為0。

補充：
display:none不會被子元素繼承，父元素都不存在了，子元素也不會顯示出。無法觸發它繫結的事件。transition無效。
visibility:hidden會被子元素繼承，通過設定子元素visibility:visible來顯示子元素。 不會觸發它上面繫結的事件。transition無效。
opacity:0會被子元素繼承，但是不能設定子元素opacity:0來重新顯示。繫結事件觸發，transition有效。
visibility:hidden與display:none更類似於‘不存在’狀態，無法被檢測到，但是前者佔據高度，後者不佔據。而opacity是‘存在’狀態，有高度且能夠被觸碰到。類似一體積的空氣與一體積的水的關係。

總結： 好累！！前端好難！！不想繼續了我好菜啊。