面試準備之ES6

ES6相關

說幾個es6的新增的一些東西

新增聲明命令let和const
模板字符串（Template String）
函數的擴展(默認參數和箭頭函數)
對象擴展(屬性和方法簡寫,Object.keys(對象)方法和Object.assign(target,obj1,obj2…)方法)
import和export
Promise
解構賦值
展開運算符(…運算符)
class類

1. let count的詳解

let 和 const 都是塊級作用域。以{}代碼塊作爲作用域範圍只能在代碼塊裏面使用。
不存在變量提升，只能先聲明再使用，否則會報錯。在代碼塊內，在聲明變量之前，該變量都是不可用的。這在語法上，稱爲“暫時性死區”（temporal dead zone，簡稱 TDZ）。
在同一個代碼塊內，不允許重複聲明。
const聲明的是一個只讀常量，在聲明時就需要賦值。（如果 const 的是一個對象，對象所包含的值是可以被修改的。抽象一點兒說，就是對象所指向的地址不能改變，而變量成員是可以修改的。）

2. 模板字符串詳解

用一對反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，也可以在字符串中嵌入變量，js表達式或函數，變量、js表達式或函數需要寫在${ }中

var str = `abc
def
gh`;
console.log(str);
let name = "小明";
function a() {
    return "ming";
}
console.log(`我的名字叫做${name}，年齡${17+2}歲，性別${'男'}，遊戲ID：${a()}`);

3. 函數的擴展詳解

可以給函數參數設置默認值

function A(a,b=1){
    console.log(a+b);
}
A(1);    //2
A(2,3);  //5

箭頭函數
1. 可以省略function關鍵字
2. 可以不寫函數名
3. 如果只有一個表達式可以不需要寫{} 和返回值,直接加一個()即可


//省略寫法
var people = name => ('hello' + name);
 
var getFullName = (firstName, lastName) => {
    var fullName = firstName + lastName;
    return fullName;
}

4. 對象的擴展詳解

屬性的簡寫。ES6 允許在對象之中，直接寫變量,這時，屬性名爲變量名, 屬性值爲變量的值.

const foo = 'bar';
const baz = {foo};//簡寫
const baz = {foo: foo};// 等同於這個

方法簡寫。


var o = {
  method() {
    return "Hello!";
  }
};
 
// 等同於
var o = {
  method: function() {
    return "Hello!";
  }
};

Object.keys()方法，獲取對象的所有屬性名或方法名（不包括原形的內容），返回一個數組

//直接傳入對象,返回屬性名數組
var obj={
    name: "john", 
    age: "21", 
    getName: function () { 
        alert(this.name)
    	}
	};
console.log(Object.keys(obj));    // ["name", "age", "getName"]
console.log(Object.keys(obj).length);    //3
 //如果傳入的是數組,則返回數組下標數組,如果傳入的是字符串,則返回字符下標數組
console.log(Object.keys(["aa", "bb", "cc"]));    //["0", "1", "2"]
console.log(Object.keys("abcdef"));    //["0", "1", "2", "3", "4", "5"]

Object.assign ()，assign方法將多個原對象的屬性和方法都合併到了目標對象上面。可以接收多個參數，第一個參數是目標對象，後面的都是源對象


var target  = {}; //目標對象
var source1 = {name : 'ming', age: '19'}; //源對象1
var source2 = {sex : '女'}; //源對象2
var source3 = {sex : '男'}; //源對象3，和source2中的對象有同名屬性sex
Object.assign(target,source1,source2,source3);
 
console.log(target);    //{name : 'ming', age: '19', sex: '男'}

5. import和export模塊化引包和導出詳解

import導入模塊;
export用於導出模塊;
import和export命令只能在模塊的頂部，不能在代碼塊之中

//導入部分:
//全部導入
import Person from './example'
//將整個模塊全部導入,並用as起別名
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
//部分導入
import { name } from './example'
 
//導出部分:
// 導出默認
export default App
// 部分導出
export class User extends Component{};

6. Promise對象異步對象

Promise的概念和作用： Promise是異步編程的一種解決方案，將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數
Promise的狀態：它有三種狀態，分別是pending進行中、resolved已完成、rejected已失敗
Promise用法：用new關鍵字創建Promise對象,參數是一個匿名函數,裏面有兩個參數:resolve和reject,這兩個參數均爲方法。resolve方法用於處理異步操作成功後業務,reject方法用於操作異步操作失敗後的業務.
then和catch方法:Promise實例化後的對象也是一個Promise對象,它有一個then和catch方法,then是是成功後會調用,then可以有多個,用來發不同的請求,catch寫一個,是前面出現失敗後就會調用.

語法：


let pro =new Promise(function(resolve,reject){
    let condition =true;//假設condition的值爲true
    if(condition){
        resolve('操作成功');
    }else{
        reject('操縱失敗');
    }
})
pro.then(function(res){
    console.log(res);//最終打印:操作成功
    
}).catch(function(error){
    console.log(error);
    
})

多個異步調用過程:

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bL6qw0qU-1574701347377)(C:\Users\91583\AppData\Roaming\Typora\typora-user-images\1574498506011.png)]

5.Promise.all([promise對象1,promise對象2])方法:

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EGb1tTT7-1574701347378)(C:\Users\91583\AppData\Roaming\Typora\typora-user-images\1574498923845.png)]

6.Promise.rase([p對象1,p對象2])方法

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WftBfy6d-1574701347378)(C:\Users\91583\AppData\Roaming\Typora\typora-user-images\1574499141298.png)]

關於Promise的問題一覽

什麼是Promise?
傳統的回調式異步操作有什麼缺點？（Promise是如何解決異步操作）
Promise中的異步模式有哪些？有什麼區別？
如果向Promise.all()和Promise.race()傳遞空數組，運行結果會有什麼不同？
如何確保一個變量是可信任的Promise（Promise.resolve方法傳入不同值的不同處理有哪些）
Promise是如何捕獲異常的？與傳統的try/catch相比有什麼優勢？

解答如下：

什麼是Promise？

下面的回答很像在背概念，但是很精闢

所謂Promise，簡單說就是一個容器，裏面保存着某個未來纔會結束的事件的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理，讓開發者不用再關注於時序和底層的結果。Promise的狀態具有不受外界影響和不可逆兩個特點。

傳統的回調式異步操作有什麼缺點？（Promise是如何解決異步操作）

傳統的回調有五大信任問題：

調用回調過早
調用回調過晚（或沒有被調用）
調用回調次數過少或過多
未能傳遞所需的環境和參數
吞掉可能出現的錯誤和異常

Promise的解決辦法：

1.調用回調過早

對於Promise來說，即使是立即完成的Promise也無法被同步觀察到，也就是說一個Promise調用then()的時候，即使這個Promise已經決議了，提供給then的回調也總會被異步調用。

2.調用回調過晚（或沒有被調用）

對於一個Promise對象註冊的每一個觀察回調都是相對獨立、互不干預的。而Promise對象調用resolve()和reject()時，每個註冊的觀察回調也都會被自動調度。所以這些觀察回調的任意一個都無法影響或延誤對其他回調的調用。

此外，關於回調未調用。正常情況下，沒有任何東西可以阻止Promise向你通知它的決議，即使你的JavaScript代碼報錯了，一會通過異常回調來捕獲到。如果Promise永遠不被決議的話，Promise本身已提供了競態的抽象機制來作爲解決方案。

3.調用回調次數過少或過多

Promise的定義方式使得它只能被決議一次。即使代碼中出現多次決議，這個Promise也會接受第一次決議，並會忽略掉其他任何後續調用。所以任何通過then()註冊的回調只會被調用一次。

4.未能傳遞所需的環境和參數

凡是被決議的值都會傳遞到觀察回調中，如果沒有顯示的決議值也會傳遞一個undefined給觀察回調。需要注意的是，Promise只允許傳一個決議值，其他值將會被默默忽略掉。

5.吞掉可能出現的錯誤和異常

如果在創建Promise時，存在JavaScript代碼錯誤，會直接導致該Promise的拒絕決議，那麼你可以通過reject()來捕獲異常，代碼中的任何異常都不會吞掉。

以上的回答十分的囉嗦，但是如果上面的五點你都能記住的話，你會了解很多關於Promise的細節問題，也會應對一些面試官的追問，如Promise的then()會不會被重複調用等。

Promise中的異步模式有哪些？有什麼區別？

好吧，這個問題可能會把面試者問懵……可以考慮另一種問法，或者直接進入下一個問題，說一說Promise.all()和Promise.race()的區別。因爲ES6中的Promise中只有這兩個模式all和race，其他的如first、any、last等都是其他Promise庫提供的。

回到問題本身，Promise.all()和Promise.race()的區別

all會將傳入的數組中的所有promise全部決議以後，將決議值以數組的形式傳入到觀察回調中，任何一個promise決議爲拒絕，那麼就會調用拒絕回調。

race會將傳入的數組中的所有promise中第一個決議的決議值傳遞給觀察回調，即使決議結果是拒絕。

如果向Promise.all()和Promise.race()傳遞空數組，運行結果會有什麼不同？
all會立即決議，決議結果是fullfilled，值是undefined

race會永遠都不決議，程序卡死……

如何確保一個變量是可信任的Promise（Promise.resolve方法傳入不同值的不同處理有哪些）
可以通過Promise.resolve()方法對不確定的值進行Promise化，返回一個Promise對象。

如果是一個立即值，如一個普通變量，那麼該Promise會立即決議爲成功。

如果是一個Promise值，那麼會將該Promise直接返回賦值給這個Promise，不會有額外開銷。

如果是一個類Promise值，比如其中含有名稱爲then的成員變量，那麼會將then展開形成一個新的Promise對象。

Promise是如何捕獲異常的？與傳統的try/catch相比有什麼優勢？

傳統的try/catch捕獲異常方式是無法捕獲異步的異常的，代碼如下：

try {
setTimeout(function(){
undefined(); //undefined不是一個方法，會拋出異常
}, 500)
} catch(err){
//這裏並不能捕獲異常
console.log(err);
}
而對於Promise對象來說，構造Promise實例時的代碼如果出錯，則會被認爲是一個拒絕的決議，並會向觀察回調中傳遞異常信息。所以即使是一個異步的請求，Promise也是可以捕獲異常的。此外，Promise還可以通過catch回調來捕獲回調中的異常。

7. 解構賦值詳解

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）

數組的解構賦值
數組的元素是按次序排列的，變量的取值由它的位置決定, 如果有對應不上的就是undefined
```
var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
```

對象的解構賦值
對象的解構與數組有一個重要的不同,就是對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值.

對象的解構賦值可以起別名.


var obj={name:"小周", pwd:"123456", sex:"男"}
var {name, pwd, sex}=obj;
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男

//如果想要變量名和屬性名不同，要寫成這樣
let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };
console.log(foz) // "aaa"
console.log(foo) // error: foo is not defined

8. 展開運算符(…運算符)

將字符串轉成數組

var str="abcd";
console.log([...str]) // ["a", "b", "c", "d"]

兩個數組的合併

var a1=[1,2,3];
var a2=[4,5,6];
console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]

3.對象的合併

let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }//如果重複的會覆蓋

將集合轉成數組

var sets=new Set([1,2,3,4,5]) //解釋Set對象是值的集合,它是js的內置對象
console.log([...sets]) // [1, 2, 3, 4, 5]

在函數的參數中使用，用來代替arguments參數

function func(...args){
    console.log(args);//[1, 2, 3, 4]
    console.log(arguments)//Arguments[1, 2, 3, 4]
}
func(1, 2, 3, 4);
 
function f(x, ...y) {
    console.log(x);
    console.log(y);
}
f('a', 'b', 'c');     //a 和 ["b","c"]
f('a')                //a 和 []
f()                   //undefined

9.類

在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明一個類，之後以這個類來實例化對象。類抽象了對象的公共部分，它泛指某一大類（class）對象特指某一個，通過類實例化一個具體的對象

創建類

語法:

//步驟1 使用class關鍵字
class name {
  // class body
}     
//步驟2使用定義的類創建實例  注意new關鍵字
var xx = new name();

示例

 // 1. 創建類 class  創建一個 明星類
 class Star {
   // 類的共有屬性放到 constructor 裏面
   constructor(name, age) {
   this.name = name;
   this.age = age;
   }
 }
   // 2. 利用類創建對象 new
   var ldh = new Star('劉德華', 18);
   console.log(ldh);

以上代碼運行結果:

構造函數的創建方式

通過結果我們可以看出,運行結果和使用構造函數方式一樣

類創建添加屬性和方法

 // 1. 創建類 class  創建一個類
class Star {
    // 類的共有屬性放到 constructor 裏面 constructor是 構造器或者構造函數
    constructor(uname, age) {
      this.uname = uname;
      this.age = age;
    }//------------------------------------------->注意,方法與方法之間不需要添加逗號
    sing(song) {
      console.log(this.uname + '唱' + song);
    }
}
// 2. 利用類創建對象 new
var ldh = new Star('劉德華', 18);
console.log(ldh); // Star {uname: "劉德華", age: 18}
ldh.sing('冰雨'); // 劉德華唱冰雨

以上代碼運行結果:

注意喲:

通過class 關鍵字創建類, 類名我們還是習慣性定義首字母大寫
類裏面有個constructor 函數,可以接受傳遞過來的參數,同時返回實例對象
constructor 函數只要 new 生成實例時,就會自動調用這個函數, 如果我們不寫這個函數,類也會自動生成這個函數
多個函數方法之間不需要添加逗號分隔
生成實例 new 不能省略
語法規範, 創建類類名後面不要加小括號,生成實例類名後面加小括號, 構造函數不需要加function

類的繼承

語法

// 父類
class Father{   
} 

// 子類繼承父類
class  Son  extends Father {  
}

示例

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}

class Son extends Father{  // 這樣子類就繼承了父類的屬性和方法
}
var damao= new Son('劉');
damao.say();      //結果爲 你的姓是劉

以上代碼運行結果:

子類使用super關鍵字訪問父類的方法

//定義了父類
class Father {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   sum() {
   console.log(this.x + this.y);
	}
 }
//子元素繼承父類
    class Son extends Father {
   		 constructor(x, y) {
    		super(x, y); //使用super調用了父類中的構造函數
    	}
    }
    var son = new Son(1, 2);
    son.sum(); //結果爲3

注意:

繼承中,如果實例化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行子類的
繼承中,如果子類裏面沒有,就去查找父類有沒有這個方法,如果有,就執行父類的這個方法(就近原則)

如果子類想要繼承父類的方法,同時在自己內部擴展自己的方法,利用super 調用父類的構造函數,super 必須在子類this之前調用

 // 父類有加法方法
 class Father {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   sum() {
   console.log(this.x + this.y);
   }
 }
 // 子類繼承父類加法方法 同時 擴展減法方法
 class Son extends Father {
   constructor(x, y) {
   // 利用super 調用父類的構造函數 super 必須在子類this之前調用,放到this之後會報錯
   super(x, y);
   this.x = x;
   this.y = y;

  }
  subtract() {
  console.log(this.x - this.y);
  }
}
var son = new Son(5, 3);
son.subtract(); //2
son.sum();//8

以上代碼運行結果爲:

時刻注意this的指向問題,類裏面的共有的屬性和方法一定要加this使用.
1. constructor中的this指向的是new出來的實例對象
2. 自定義的方法,一般也指向的new出來的實例對象
3. 綁定事件之後this指向的就是觸發事件的事件源
在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象.

用get和set聲明一個屬性

  // get,set聲明屬性,記住它實際不是方法
  class Parent{
    constructor(name='mukewang'){
      this.name=name;
    }

    get longName(){//增加longName讀的屬性
      return 'mk'+this.name
    }

    set longName(value){//增加longName修改屬性
      this.name=value;
    }
  }

  let v=new Parent();
  console.log('getter',v.longName);//get mkmukewang
  v.longName='hello';
  console.log('setter',v.longName);//set mkhello

類的實例成員和靜態成員(也叫實例方法/屬性和靜態方法/屬性)

實例成員(實例方法和實例屬性):

本質就是通過實例化的對象添加的屬性和方法,特點只能通過實例化的對象來訪問

實例成員就是構造函數內部通過this添加的成員如下列代碼中uname age sing 就是實例成員,實例成員只能通過實例化的對象來訪問

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
     this.sing = function() {
     console.log('我會唱歌');
    }
}
var ldh = new Star('劉德華', 18);
console.log(ldh.uname);//實例成員只能通過實例化的對象來訪問

靜態成員(靜態方法和靜態屬性)

靜態成員在構造函數本身上添加的成員如下列代碼中 sex 就是靜態成員,靜態成員只能通過構造函數來訪問

靜態屬性的使用

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
     this.sing = function() {
     console.log('我會唱歌');
    }
}
Star.sex = '男';//直接使用類名點屬性=值,不用static關鍵字
var ldh = new Star('劉德華', 18);
console.log(Star.sex);//靜態成員只能通過構造函數來訪問

靜態方法的使用

使用static關鍵字即可定義一個靜態方法。

class Antzone{
  static show(){//方法只能使用static關鍵字
    console.log("螞蟻部落");
  }
}
let ant=new Antzone();
Antzone.show();//"螞蟻部落"
ant.show();//報錯,不能通過實例對象調用靜態方法.

代碼分析如下：

（1）.通過關鍵字static定義一個靜態方法show。

（2）.直接通過類調用靜態方法，而不是對象實例調用。

（3）.ant.show之所以會報錯，它是調用的實例方法show，然而並沒有定義。

靜態屬性和方法也可以繼承

靜態屬性與靜態方法的繼承：
使用extends關鍵字可以實現類之間的繼承。
可以繼承父類的實例屬性和方法，靜態屬性和方法也會被繼承。
代碼實例如下：

class F{
  static func(){
    console.log("螞蟻部落");
  }
}
F.address="青島市南區";
class C extends F{}
C.func();//"螞蟻部落"
console.log(C.address);//"青島市南區"

面試準備之ES6

ES6相關

說幾個es6的新增的一些東西

1. let count的詳解

2. 模板字符串詳解

3. 函數的擴展詳解

4. 對象的擴展詳解

5. import和export模塊化引包和導出詳解

6. Promise對象異步對象

關於Promise的問題一覽

解答如下：

什麼是Promise？

傳統的回調式異步操作有什麼缺點？（Promise是如何解決異步操作）

Promise中的異步模式有哪些？有什麼區別？

Promise是如何捕獲異常的？與傳統的try/catch相比有什麼優勢？

7. 解構賦值詳解

8. 展開運算符(…運算符)

9.類

創建類

類創建添加屬性和方法

類的繼承

用get和set聲明一個屬性

類的實例成員和靜態成員(也叫實例方法/屬性和靜態方法/屬性)

實例成員(實例方法和實例屬性):

本質就是通過實例化的對象添加的屬性和方法,特點只能通過實例化的對象來訪問

靜態成員(靜態方法和靜態屬性)

靜態屬性的使用

靜態方法的使用

靜態屬性和方法也可以繼承

canvas刮刮卡遊戲開發

vue路由懶加載辦法

面試準備之原生JS

JQ編程原理

項目中用到的特別函數封裝

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結