.聲明

查看以下代碼，并回答輸出的內容(以及原因)。

// situation 1 
console.log(person); 
var person='John'; 
 
// situation 2 
console.log(person); 
let person='Phill'; 
 
// situation 3 
console.log(person); 
const person='Frank'; 
 
// situation 4 
const person='Vanessa'; 
console.log(person); 
person='Mike'; 
console.log(person); 
 
// situation 5 
var person='John'; 
let person='Mike'; 
console.log(person); 
 
// situation 6 
var person='John'; 
if (person) { 
 let person='Mike'; 
 console.log(person); 
} 
console.log(person); 

說明
Situation 1: 預期結果是在控制臺中看到文本 John，但是令人驚訝的是，我們看到記錄了undefined。想知道為什么嗎?
好吧，這是經典的 JavaScript 在起作用。這種行為被稱為提升。在后臺，該語言將變量聲明和值分配分為兩部分。不管變量最初由開發人員在哪里聲明，變量都將移動到頂部，聲明時將其值設置為 undefined。看起來像這樣：

var person; 
console.log(person); 
person='John'; 

Situation 2: 在這里，結果將是引用錯誤。

Uncaught ReferenceError: Cannot access 'person' before initialization 

錯誤文本說明了一切。因為我們使用了關鍵字 let，所以我們的變量被提升，但沒有初始化，并且拋出該錯誤，通知我們正在嘗試訪問未初始化的變量。在 ES6 中引入了關鍵字 let，使我們能夠使用塊作用域中的變量，從而幫助我們防止意外行為。
在這里，我們會得到與 Situation 2 中相同的錯誤。
不同之處在于我們使用了關鍵字 const，從而防止在初始化后重新分配變量。 ES6 中也引入了此關鍵字。
Situation 4: 在這種情況下，我們可以看到關鍵字 const 是如何工作的，以及它如何避免無意中重新分配變量。在我們的示例中，首先會在控制臺中看到 Vanessa，然后是一個類型錯誤。

Uncaught TypeError: Assignment to constant variable 

const 變量的使用隨著我們的代碼庫呈指數增長。
Situation 5: 如果已經在某個作用域內使用關鍵字 var 定義了變量，則在同一作用域中用關鍵字 let 再次聲明該變量將會引發錯誤。
因此，在我們的示例中，將不會輸出任何內容，并且會看到語法錯誤提示。

Uncaught SyntaxError: Identifier 'person' has already been declared 

Situation 6: 我們分別有一個函數作用域的變量，和塊作用域的變量。在這種情況下，它們是否有相同的名字或標識符并不重要。
在控制臺中，我們應該看到 Mike 和 John 被依次輸出。為什么?
因為關鍵字 let 為我們提供了塊作用域內的變量，這意味著它們僅存在于自己創建的作用域內，在這種情況下，位于if...else 語句中。內部變量優先于外部變量，這就是為什么我們可以使用相同標識符的原因。

2.繼承

考慮以下類，并嘗試回答輸出了什么以及為什么。

class Person { 
 constructor() { 
 this.sayHello=()=> { 
 return 'Hello'; 
 } 
 } 
 
 sayBye() { 
 return 'Bye'; 
 } 
} 
 
class Student extends Person { 
 sayHello() { 
 return 'Hello from Student'; 
 } 
} 
 
const student=new Student(); 
console.log(student.sayHello()); 

說明
如果你的答案是 Hello，那是對的!
為什么：每次我們創建一個新的 Student 實例時，都會將 sayHello 屬性設置為是一個函數，并返回字符串 Hello。這是在父類(Person)類的構造函數中發生的。
在 JavaScript 中，類是語法糖，在我們的例子中，在原型鏈上定義了 Student 類中的 sayHello 方法。考慮到每次我們創建 Student 類的實例時，都會將 sayHello 屬性設置為該實例，使其成為返回字符串 Hello 的 function，因此我們永遠不會使用原型鏈上定義的函數，也就永遠不會看到消息 Hello from Student 。

3.對象可變性

思考以下情況中每個部分的輸出：

// situation 1 
const user={ 
 name: 'John', 
 surname: 'Doe' 
} 
 
user={ 
 name: 'Mike' 
} 
 
console.log(user); 
 
// situation 2 
const user={ 
 name: 'John', 
 surname: 'Doe' 
} 
 
user.name='Mike'; 
console.log(user.name); 
 
// situation 3 
const user={ 
 name: 'John', 
 surname: 'Doe' 
} 
 
const anotherUser=user; 
anotherUser.name='Mike'; 
console.log(user.name); 
 
// situation 4 
const user={ 
 name: 'John', 
 surname: 'Doe', 
 address: { 
 street: 'My Street' 
 } 
} 
 
Object.freeze(user); 
 
user.name='Mike'; 
user.address.street='My Different Street'; 
console.log(user.name); 
console.log(user.address.street); 

說明
Situation 1: 正如我們在上一節中所了解的，我們試圖重新分配不允許使用的 const 變量，所以將會得到類型錯誤。
控制臺中的結果將顯示以下文本：

Uncaught TypeError: Assignment to constant variable 

Situation 2: 在這種情況下，即使我們改用關鍵字 const 聲明的變量，也會有不同的行為。不同之處在于我們正在修改對象屬性而不是其引用，這在 const 對象變量中是允許的。
控制臺中的結果應為單詞 Mike。
Situation 3: 通過將 user 分配給 anotherUser 變量，可以在它們之間共享引用或存儲位置(如果你愿意)。換句話說，它們兩個都會指向內存中的同一個對象，因所以更改一個對象的屬性將反映另一個對象的更改。
控制臺中的結果應為 Mike。
Situation 4: 在這里，我們使用 Object.freeze 方法來提供先前場景(Situation 3)所缺乏的功能。通過這個方法，我們可以“凍結”對象，從而不允許修改它的屬性值。但是有一個問題!它只會進行淺凍結，這意味著它不會保護深層屬性的更新。這就是為什么我們能夠對 street 屬性進行更改，而 name 屬性保持不變的原因。
控制臺中的輸出依次為 John 和 My Different Street 。

4.箭頭函數

運行以下代碼段后，將會輸出什么以及原因：

const student={ 
 school: 'My School', 
 fullName: 'John Doe', 
 printName: ()=> { 
 console.log(this.fullName); 
 }, 
 printSchool: function () { 
 console.log(this.school); 
 } 
}; 
 
student.printName(); 
student.printSchool(); 

說明
控制臺中的輸出將依次為 undefined 和 My School。
你可能會熟悉以下語法：

var me=this; 
// or 
var self=this; 
 
// ... 
// ... 
// somewhere deep... 
// me.doSomething(); 

你可以把 me 或 self 變量視為父作用域，該作用域可用于在其中創建的每個嵌套函數。
當使用箭頭函數時，這會自動完成，我們不再需要存儲 this 引用來訪問代碼中更深的地方。箭頭函數不綁定自己，而是從父作用域繼承一個箭頭函數，這就是為什么在調用 printName 函數后輸出了 undefined 的原因。

5.解構

請查看下面的銷毀信息，并回答將要輸出的內容。給定的語法是否允許，否則會引發錯誤?

const rawUser={ 
 name: 'John', 
 surname: 'Doe', 
 email: 'john@doe.com', 
 displayName: 'SuperCoolJohn', 
 joined: '2016-05-05', 
 image: 'path-to-the-image', 
 followers: 45 
} 
 
let user={}, userDetails={}; 
({ name: user.name, surname: user.surname, ...userDetails }=rawUser); 
 
console.log(user); 
console.log(userDetails);

說明
盡管有點開箱即用，但是上面的語法是允許的，并且不會引發錯誤! 很整潔吧?
上面的語法功能強大，使我們能夠輕松地將任何對象分成兩個更具體的對象，上面的示例在控制臺的輸出為：

// {name: "John", surname: "Doe"} 
// {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45} 

6.異步/等待

調用以下函數后將輸出什么?

(async ()=> { 
 let result='Some Data'; 
 
 let promise=new Promise((resolve, reject)=> { 
 setTimeout(()=> resolve('Some data retrieved from the server'), 2000); 
 }); 
 
 result=await promise; 
 console.log(result); 
})(); 

說明
如果你認為是兩秒鐘后輸出 Some data retrieved from the server ，那么你是對的!
代碼將會暫停，直到 promise 得到解決。兩秒鐘后，它將繼續執行并輸出給定的文本。這意味著 JavaScript 引擎實際上會等到異步操作完成。可以說 async/await 是用來獲得 promise 結果的語法糖。也有人認為它是比 promise.then 更具可讀性的方式。

7. Return 語句

const multiplyByTwo=(x)=> { 
 return 
 { 
 result: x * 2 
 }; 
} 
console.log(multiplyByTwo(2)); 

說明
如果你的答案是 {result: 4}，那你就錯了。輸出是 undefined。但是不要對自己太苛刻，考慮到我也寫 C# 代碼，這也曾經困擾著我，這在 C# 那兒不是個問題。
由于自動分號插入的原因，上面的代碼將返回 undefined。 return 關鍵字和表達式之間不允許使用行結束符
解決方案是用以下列方式之一去修復這個函數：

要實現一個面部識別的功能究竟該怎么做？在本文中，我們將以 JavaScript 庫 pico.js 為依托，手把手教你如何為一款應用添加面部檢測功能。

作者 | Jonathan Freeman

譯者 | 彎月，責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

在本文中，我們將使用pico.js添加簡單的面部檢測。Pico.js是一個很小的JavaScript庫，目前它還是一個近似于概念驗證的庫，還不能用于生產環境，但在我研究過的人臉檢測庫中，Pico.js的效果最佳。

本文的目標首先是在地圖上通過一個紅點顯示用戶的頭部位置：

首先，我們創建一個包含pico.js功能的簡單React類，然后用它來獲取用戶臉部的位置：

<ReactPico onFaceFound={(face)=> {this.setState({face})}} />

接下來，如果檢測到面部，我們就使用其位置信息來渲染組件：

{face && <FaceIndicator x={face.totalX} y={face.totalY} />}

我們在使用pico.js時所面臨的第一個難題是，它是JavaScript的研究項目的實現，不一定是遵循現代JavaScript標準的面向生產環境的庫。除此之外，你還不能直接使用yarn add picojs。雖然pico.js的入門教程是一個很好的入門級別的對象檢測，但這個教程更像是一篇研究論文而不像API文檔。但是，其中提供的示例足夠代碼使用。我花了幾個小時將該教程提供的樣本代碼放入了一個相對簡單的React類中。

pico.js需要做的第一件事就是加載級聯模型，該模型會進行一個AJAX調用，而這個調用會引入預先訓練好的模型的二進制文件。（你也可以使用pico.js來檢測其他類型的對象，但你需要使用官方的pico實現來自己訓練模型。）我們可以在componentDidMount方法中加載模型。為了清楚起見，我進一步將示例代碼抽象為另一個名為loadFaceFinder的方法：

componentDidMount {
this.loadFaceFinder;
}
loadFaceFinder {
const cascadeurl='https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
fetch(cascadeurl).then((response)=> {
response.arrayBuffer.then((buffer)=> {
var bytes=new Int8Array(buffer);
this.setState({
faceFinder: pico.unpack_cascade(bytes)
});
new camvas(this.canvasRef.current.getContext('2d'), this.processVideo);
});
});
}

除了獲取和解析人臉檢測模型的二進制文件并設置到state中之外，我們還創建了一個新的camvas，它引用了<canvas>上下文和一個回調處理程序。camvas庫從用戶的網絡攝像頭將視頻加載到canvas上，并針對渲染的每一幀調用處理程序。loadFaceFinder的代碼幾乎與pico.js提供的參考項目相同。我們只是更改了存儲模型的位置，以便可以利用state訪問，我們通過React的Ref（而不是使用瀏覽器提供的DOM API）來引用我們的canvas上下文。

我們的this.processVideo也幾乎與參考項目中提供的代碼相同。我們只需要稍微做一些改動。我們希望只在加載模型時執行代碼，因此我們在代碼的整個主體外又添加一個檢查。我還用我們希望用戶傳入的回調處理程序創建了這個React類，因此只有在定義了該處理程序時，才會運行處理代碼：

processVideo=(video, dt)=> {
if(this.state.faceFinder && this.props.onFaceFound) {
/* all the code */
}
}

我只改動了一個地方：在檢測到面部時作何處理。pico.js示例在canvas繪制了一些圓圈，但我們希望將數據傳遞回我們的回調處理程序。讓我們稍微修改一下代碼， 以方便我們的回調處理程序更容易地處理這些值：

 this.props.onFaceFound({
x: 640 - dets[i][1],
y: dets[i][0],
radius: dets[i][2],
xRatio: (640 - dets[i][1]) / 640,
yRatio: dets[i][0] / 480,
totalX: (640 - dets[i][1]) / 640 * window.innerWidth,
totalY: dets[i][0] / 480 * window.innerHeight,
});

這種格式允許我們傳回在捕獲到的canvas元素中面部的絕對位置和半徑，面部相對于canvas元素的相對位置，以及面部相對于canvas元素的位置映射到整個頁面后的位置。到這里我們自定義的類就基本完成了。接下來，我還需要對pico.js和pico版本的camvas.js進行一些小改動才能使用現代語法，但這些只是關鍵字的變化，不涉及邏輯關系。

現在，我們可以將我們的自定義ReactPico類導入到我們的應用程序中，渲染，并在我們檢測到面部時有條件地渲染FaceIndicator類。在嘗試了其他一些人臉檢測庫之后，我很驚喜地發現pico.js的準確性和可用性非常高，盡管它還不是一個完全成熟的庫。

原文：https://www.infoworld.com/article/3403019/javascript-tutorial-add-face-detection-to-your-web-app.html

本文為 CSDN 翻譯，轉載請注明來源出處。

【End】

軟欲將Edge打造成為全球最佳的網頁瀏覽器，將Edge塑造成為高速、安全、低資源占用和長續航表現的典范。繼此前表明Edge在續航方面的卓越表現之后在今天發布的博文中，公司再次表明在即將到來的Windows 10周年更新中將會為Edge和Chakra引擎帶來一些JavaScript性能升級，在JavaScript性能上要比Chrome、Firefox等競爭對手快很多。

在這篇博文中最為有趣的的部分就是微軟張貼的JavaScript跑分結果中，微軟Edge瀏覽器在Octane和JetStream測試中要優于Google Chrome Canary和Firefox Alpha版本。

在Octane 2.0跑分中Edge瀏覽器的成績為31187，Chrome Canary的成績為25910，Firefox Alpha的成績為24836（分數越高越好）。在JetStream 1.1版本中，Edge執行成績作為優秀獲得233.7點，隨后是Chrome獲得168.3點，Firefox獲得146.6點（同樣越高越好）。

微軟表示：“我們非常激動的向你分享我們在內存腳本和啟動時間上的性能改進。然而這條通往更優秀性能的道路從未走到盡頭，我們將竭盡所能的讓JavaScript變得更快。在今年夏季發布的更新中我們將會持續在這個方面進行改善。”