一些經典的前端面試JavaScript代碼分析題（附答案）--第一回合

1. 下面代碼輸出什麼？

const firstPromise = new Promise((res, rej) => {
    setTimeout(res, 500, 'one');
});
const secondPromist = new Promise((res, rej) => {
    setTimeout(res, 100, 'two');
});

Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
複製代碼

答案：'two'。
解析：

若是setTimeout(cb, time, param)中有三個參數，那麼第三個參數param將被做爲cb的實參傳遞進去。Promise.race只要其中有一個實例率先改變狀態，Promise.race的狀態就跟着改變。那個率先改變的Promise實例的返回值，就傳遞給Promise.race的回調函數。

---

2. 下面代碼輸出什麼？

let person = { name: 'Jack' };
const members = [person];
person = null;

console.log(members);
複製代碼

答案：[{name:"Lydia"}]
解析：

在JavaScript中對象是引用類型，放在堆內存中。執行完const members = [person]以後members[0]和person均指向了同一塊堆內存空間。執行person = null只是將person指向堆內存空間的那個鏈路斷開，並不影響members[0]。

---

3. 下面代碼輸出什麼？

const person = {
    name: 'Jack',
    age: 28
}

for(const item in person) {
    console.log(item);
}
複製代碼

答案："name","age"
解析：

for...in循環只遍歷可枚舉屬性。像 Array和 Object使用內置構造函數所建立的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性，例如 String 的 indexOf()方法或 Object的toString()方法是不可以被遍歷到的。循環將遍歷對象自己的全部可枚舉屬性，以及對象從其構造函數原型中繼承的屬性（更接近原型鏈中對象的屬性覆蓋原型屬性）。該循環不建議用到數組的遍歷，由於順序不能保證且可能訪問到數組繼承的屬性。

---

4. 下面代碼輸出什麼？

console.log(3 + 4 + '5');
複製代碼

答案：75
解析：

當全部運算符的 優先級 相同時，計算表達式須要肯定運算符的結合順序，即從右到左仍是從左往右。在這個例子中，咱們只有一類運算符 +，對於加法來講，結合順序就是從左到右。
3+4首先計算，獲得數字 7。 因爲類型的強制轉換， 7+'5'的結果是 "75"。JavaScript將 7轉換成了字符串。咱們能夠用+號把兩個字符串鏈接起來。"7"+"5" 就獲得了 "75"。

---

5. num的值是什麼?

const num = parseInt('7*6', 10);
複製代碼

答案：7
解析：

parseInt()會檢查字符串中的字符是否合法。一旦遇到一個在指定進制中不合法的字符後，當即中止解析而且忽略後面全部的字符。*就是不合法的數字字符。因此只解析到 "7"，並將其解析爲十進制的 7。num的值即爲7。

---

6. 下面代碼輸出什麼？

[1, 2, 3].map(num => {
    if(typeof num === 'number') {
        return;
        return num*2;
    }
})
複製代碼

答案：[undefined, undefined, undefined]
解析：

當函數沒有返回值時，則默認返回undefined

---

7. 下面代碼輸出什麼？

function setInfo(person, year) {
    person.name = 'Jack';
    year = '1998';
}

const p = { name: 'Tom' };
const birthYear = '1997';

setInfo(p, birthYear);
console.log(p, birthYear);
複製代碼

答案：{ name: 'Jack' }, '1997'
解析：

按值傳遞，不明白的須要好好讀學習學習一下JavaScript基礎

---

8. 下面代碼輸出什麼？

function greeting() {
    throw 'Hello world'
}

function sayHi() {
    try {
        const data = greeting();
        console.log('It worked!', data);
    } catch(e) {
        console.log('get a error!', e);
    }
}
複製代碼

答案：'get a error! Hello world'
解析：

throw能夠拋出自定義異常。異常能夠是一個字符串，一個數字，一個布爾類型 或者是一個對象。在本例中，咱們的異常是字符串 'Hello world'。

---

9-1. 下面代碼輸出什麼？

function Car() {
    this.type = 'benchi';
    return {type: 'aodi'}
}
const myCar = new Car()
console.log(myCar.type);
複製代碼

答案：'aodi'

9-2. 下面代碼輸出什麼？

function Car() {
    this.type = 'benchi';
    return 10
}
const myCar = new Car()
console.log(myCar.type);
複製代碼

答案：'benchi'
解析：

JavaScript中函數和new關鍵詞一塊兒使用時通常狀況下是做爲構造函數。若是做爲構造函數時裏面有return且返回的是一個對象（非基礎類型）,那麼新的對象實例就等於該返回的對象。其餘狀況均按照構造函數中的屬性給新的對象實例賦值。

---

10. 下面代碼輸出什麼？

(() => {
    let x = (y = 10)
})()

console.log(x);
console.log(y);
複製代碼

答案：undefined, 10
解析：

在塊級做用域(y = 10)至關於window.y = 10。若是沒有括號也是同樣的，原理同題4，賦值操做從右邊開始。

---

11. 下面代碼輸出什麼？

class Dog() {
    constructor(name) {
        this.name = name;
    }
}
Dog.prototype.sayHello = function() {
    console.log(`Hello, I am ${this.name}`);
}

const pet = new Dog('Tom');
pet.sayHello();
delete Dog.prototype.sayHello;
pet.sayHello();
複製代碼

答案：'Hello, I am Tom', TypeError
解析：

能夠用 delete關鍵字刪除對象的屬性，對原型也是適用

---

12. 下面代碼輸出什麼？

const set = new Set([1,1,2,3,4]);
console.log(set);
複製代碼

答案：{1, 2, 3, 4}
解析：

set是一個集合，而不是數組