建站
咨詢
售后
建站咨詢
新聞中心
我相信學(xué)習(xí)新事物并評估我們所知的東西對自己的進(jìn)步非常有用，可以避免了我們覺得自己的知識過時的情況。在本文中，我將介紹一些常見的 JavaScript 知識。請享用!
創(chuàng)新互聯(lián)于2013年成立，先為新泰等服務(wù)建站，新泰等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為新泰企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
1.聲明
查看以下代碼，并回答輸出的內(nèi)容(以及原因)。
- // 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: 預(yù)期結(jié)果是在控制臺中看到文本 John，但是令人驚訝的是，我們看到記錄了undefined。想知道為什么嗎?
好吧，這是經(jīng)典的 JavaScript 在起作用。這種行為被稱為提升。在后臺，該語言將變量聲明和值分配分為兩部分。不管變量最初由開發(fā)人員在哪里聲明，變量都將移動到頂部，聲明時將其值設(shè)置為 undefined?？雌饋硐襁@樣：
- var person;
- console.log(person);
- person = 'John';
Situation 2: 在這里，結(jié)果將是引用錯誤。
- Uncaught ReferenceError: Cannot access 'person' before initialization
錯誤文本說明了一切。因為我們使用了關(guān)鍵字 let，所以我們的變量被提升，但沒有初始化，并且拋出該錯誤，通知我們正在嘗試訪問未初始化的變量。在 ES6 中引入了關(guān)鍵字 let，使我們能夠使用塊作用域中的變量，從而幫助我們防止意外行為。
在這里，我們會得到與 Situation 2 中相同的錯誤。
不同之處在于我們使用了關(guān)鍵字 const，從而防止在初始化后重新分配變量。 ES6 中也引入了此關(guān)鍵字。
Situation 4: 在這種情況下，我們可以看到關(guān)鍵字 const 是如何工作的，以及它如何避免無意中重新分配變量。在我們的示例中，首先會在控制臺中看到 Vanessa，然后是一個類型錯誤。
- Uncaught TypeError: Assignment to constant variable
const 變量的使用隨著我們的代碼庫呈指數(shù)增長。
Situation 5: 如果已經(jīng)在某個作用域內(nèi)使用關(guān)鍵字 var 定義了變量，則在同一作用域中用關(guān)鍵字 let 再次聲明該變量將會引發(fā)錯誤。
因此，在我們的示例中，將不會輸出任何內(nèi)容，并且會看到語法錯誤提示。
- Uncaught SyntaxError: Identifier 'person' has already been declared
Situation 6: 我們分別有一個函數(shù)作用域的變量，和塊作用域的變量。在這種情況下，它們是否有相同的名字或標(biāo)識符并不重要。
在控制臺中，我們應(yīng)該看到 Mike 和 John 被依次輸出。為什么?
因為關(guān)鍵字 let 為我們提供了塊作用域內(nèi)的變量，這意味著它們僅存在于自己創(chuàng)建的作用域內(nèi)，在這種情況下，位于if...else 語句中。內(nèi)部變量優(yōu)先于外部變量，這就是為什么我們可以使用相同標(biāo)識符的原因。
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，那是對的!
為什么：每次我們創(chuàng)建一個新的 Student 實例時，都會將 sayHello 屬性設(shè)置為是一個函數(shù)，并返回字符串 Hello。這是在父類(Person)類的構(gòu)造函數(shù)中發(fā)生的。
在 JavaScript 中，類是語法糖，在我們的例子中，在原型鏈上定義了 Student 類中的 sayHello 方法?？紤]到每次我們創(chuàng)建 Student 類的實例時，都會將 sayHello 屬性設(shè)置為該實例，使其成為返回字符串 Hello 的 function，因此我們永遠(yuǎn)不會使用原型鏈上定義的函數(shù)，也就永遠(yuǎn)不會看到消息 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: 正如我們在上一節(jié)中所了解的，我們試圖重新分配不允許使用的 const 變量，所以將會得到類型錯誤。
控制臺中的結(jié)果將顯示以下文本：
- Uncaught TypeError: Assignment to constant variable
Situation 2: 在這種情況下，即使我們改用關(guān)鍵字 const 聲明的變量，也會有不同的行為。不同之處在于我們正在修改對象屬性而不是其引用，這在 const 對象變量中是允許的。
控制臺中的結(jié)果應(yīng)為單詞 Mike。
Situation 3: 通過將 user 分配給 anotherUser 變量，可以在它們之間共享引用或存儲位置(如果你愿意)。換句話說，它們兩個都會指向內(nèi)存中的同一個對象，因所以更改一個對象的屬性將反映另一個對象的更改。
控制臺中的結(jié)果應(yīng)為 Mike。
Situation 4: 在這里，我們使用 Object.freeze 方法來提供先前場景(Situation 3)所缺乏的功能。通過這個方法，我們可以“凍結(jié)”對象，從而不允許修改它的屬性值。但是有一個問題!它只會進(jìn)行淺凍結(jié)，這意味著它不會保護(hù)深層屬性的更新。這就是為什么我們能夠?qū)?street 屬性進(jìn)行更改，而 name 屬性保持不變的原因。
控制臺中的輸出依次為 John 和 My Different Street 。
4.箭頭函數(shù)
運行以下代碼段后，將會輸出什么以及原因：
- 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 變量視為父作用域，該作用域可用于在其中創(chuàng)建的每個嵌套函數(shù)。
當(dāng)使用箭頭函數(shù)時，這會自動完成，我們不再需要存儲 this 引用來訪問代碼中更深的地方。箭頭函數(shù)不綁定自己，而是從父作用域繼承一個箭頭函數(shù)，這就是為什么在調(diào)用 printName 函數(shù)后輸出了 undefined 的原因。
5.解構(gòu)
請查看下面的銷毀信息，并回答將要輸出的內(nèi)容。給定的語法是否允許，否則會引發(fā)錯誤?
- 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);
說明
盡管有點開箱即用，但是上面的語法是允許的，并且不會引發(fā)錯誤! 很整潔吧?
上面的語法功能強(qiáng)大，使我們能夠輕松地將任何對象分成兩個更具體的對象，上面的示例在控制臺的輸出為：
- // {name: "John", surname: "Doe"}
- // {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}
6.異步/等待
調(diào)用以下函數(shù)后將輸出什么?
- (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);
- })();
說明
如果你認(rèn)為是兩秒鐘后輸出 Some data retrieved from the server ，那么你是對的!
代碼將會暫停，直到 promise 得到解決。兩秒鐘后，它將繼續(xù)執(zhí)行并輸出給定的文本。這意味著 JavaScript 引擎實際上會等到異步操作完成。可以說 async/await 是用來獲得 promise 結(jié)果的語法糖。也有人認(rèn)為它是比 promise.then 更具可讀性的方式。
7. Return 語句
- const multiplyByTwo = (x) => {
- return
- {
- result: x * 2
- };
- }
- console.log(multiplyByTwo(2));
說明
如果你的答案是 {result: 4}，那你就錯了。輸出是 undefined。但是不要對自己太苛刻，考慮到我也寫 C# 代碼，這也曾經(jīng)困擾著我，這在 C# 那兒不是個問題。
由于自動分號插入的原因，上面的代碼將返回 undefined。 return 關(guān)鍵字和表達(dá)式之間不允許使用行結(jié)束符
解決方案是用以下列方式之一去修復(fù)這個函數(shù)：
- const multiplyByTwo = (x) => {
- return {
- result: x * 2
- };
- }
要么
- const multiplyByTwo = (x) => {
- return (
- {
- result: x * 2
- }
- );
- }
標(biāo)題名稱：7 個常見的 JavaScript 測驗及解答
網(wǎng)頁鏈接：http://m.5511xx.com/article/cojhpgi.html
