# 前端面試考題

#### 1. 請解釋 Angular 的 Route Guard 及 Route Resolver 的功能，及你曾在什麼場景使用過，或是舉幾個例子。

#### 2. 下列程式碼執行後 console 會出現什麼？

(function() {
    interval(1000).pipe(
      switchMap(() => timer(0, 1000))
    ).subscribe(data => {
      console.log(data);
    });
})()
// A: 每秒印出一個 0

(function() {
    interval(3000).pipe(
      concatMap(() => timer(0, 1000))
    ).subscribe(data => {
      console.log(data);
    });
})()
// A: 每秒依序印出 0 1 2 3 ....

#### 3. 請優化下列程式碼

this.userLoginCheck(accountCode).subscribe(data => {
    const name = data.name;
    const age = data.age;
    this.userAuthorization(name, age).subscribe(passed => {
        if (passed) {
            this._router.navigateByUrl('/main');
        } else {
            this._router.navigateByUrl('/login');
        }
    })
})

A: (開放性問題，沒有標準答案)

this.userLoginCheck(accountCode).pipe(
    mergeMap(({name, age}) => this.userAuthorization(name, age))
).subscribe(passed => {
    const url = passed ? '/main' : '/login';
    this._router.navigateByUrl(url);
})

#### 4. 下列 angular 元件，畫面上會出現什麼？

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let item of list" *ngIf="item % 2 === 0">
      {{item}}
    </div>
  `,
})
export class App {
  list = [0, 1, 2, 3, 4, 5, 6, 7];
}

#### 5. 請實作下列函式

(function fn(list) {
    // do something 
}(['12','32','89','12','12','78','12','32']));
// 印出 12,32,89,78

#### 6. 請試著解釋下列兩種 enum 的差異？

enum Gender {
  Male,
  Female,
  Other
}

const enum Gender {
  Male,
  Female,
  Other
}

#### 7. 下列 TypeScript 程式碼出了什麼問題？怎麼修正？

interface RGB {
  red: number;
  green: number;
  blue: number;
}

interface HSV {
  hue: number;
  saturation: number;
  value: number;
}
function setColor(color: RGB | HSV) {
        console.log(color.hue);
}

A: 

// 加上 type guard
function setColor(color: RGB | HSV) {
    if ('hue' in color) {
        console.log(color.hue);
    }
}