### Q1
Ans:

let data = [
  {firstName: 'Dora', lastName: 'Li', customerID:001, note: '',profession: 'student'},
  {firstName: 'Tommy', lastName: 'Chen', customerID: 002, note: '',profession: 'freelancer'},
  {firstName: 'Allen', lastName: 'Cheung', customerID: '003', note: '',profession: 'productOwner'},
  {firstName: 'Vivian', lastName: 'Wang', customerID: 004, note: '',profession: 'engineer'},
  {firstName: 'Ben', lastName: 'Chen', customerID: 005, note: 'note',profession: 'systemAnalytics'},
   {firstName: '', lastName: 'Chao', customerID: 006, note: 'Hello',profession: 'systemAnalytics'},
  {firstName: 'Jill', lastName: '', customerID: '', note: 'note',profession: 'systemAnalytics'}
]



const getFormat = (data) => {
  const comparison = ["engineer", "productOwner", "freelancer", "systemAnalytics","student"];  
  const isNumberType = (val) => (typeof val === 'number'&& !Number.isNaN(val));
  const hasLastName = (val) => (typeof val === 'string'&& val!=='');
  let result = data.filter(user => {
       return isNumberType(user.customerID) && hasLastName(user.firstName)&&comparison.includes(user.profession)
  })
     return result;
}



function sortUserName(user) {
    const formatDta = getFormat(user);
  return formatDta.sort((a, b) => a.firstName.toLowerCase() > b.firstName.toLowerCase() ? 1 : -1).map(member => (`FirstName :${member.firstName}, LastName: ${member.lastName},CustomerID:${member.customerID}`));
}

console.log(sortUserName(data))

// ans2

const sortOrders = {
    "systemAnalytics": 1,
    "engineer": 2,
    "productOwner": 3,
    "freelancer":4,
    "student":5
};

function sortByType(user) {
  const formatDta = getFormat(user);
  return formatDta.sort(( a, b) => sortOrders[a.profession] - sortOrders[b.profession]);
}

### Q2
CSS 權重分為5個Level + 特殊權重 important

// Level 5 為全局樣式（通配符 *）由於通配符的目的在於匹配任何元素，所以權重需要比任何樣式都低
權重 =>  0   0   0   0


// Level 4 元素選擇器&偽元素(::pseudo-element)

權重 =>  0   0   0   1


// Level 3 分別為class 選擇器(.className)
屬性選擇器([attr="value"])
偽類(:pseudo-class)

權重 =>  0   0   1   0


// Level 2 ID選擇器(#idName)

權重 =>  0   1   0   0


// Level 1 內聯樣式(inline)(style="...")

權重 =>  1   0   0   0


// 最高的優先級 !important 

權重 =>  1   0   0   0   0

就題目而言

.container .shop-list li.item {
 color: green;
}

權重 =>  0   0   3   1 

.container .shop-list .item {
 color: blue;
}

權重 =>  0   0   3   0

0   0   3   1  權重是大於  0   0   3   0

Ans:

1.移除li 或加上 li 都可達到後蓋前（但應該先確認為後 item color 要green 還是 blue 避免重覆程式碼維護）

2.添加 even background color

.container .shop-list .item {
     color: green; //or blue
}

.container .shop-list .item:nth-child(even){
	background-color:#ccc;
}

### Q3
Ans:

let items = [1, 1, 1, 5, 2, 3, 4, 3, 3, 3, 3, 3, 3, 7, 8, 5, 4, 9, 0, 1,
3, 2, 6, 7, 5, 4, 4, 7, 8, 8, 0, 1, 2, 3, 1];

let uniqValue = [...new Set(items)];

console.log(uniqValue) 
// [1,5,2,3,4,7,8,9,0,6]

### Q4
Ans:

framework website：
有已將組建元件化重覆使用,有效管理資料流,前後端分離各司其職
normal website:
較為不彈性長時間下提升維護成本

### Q5
Ans:
路由中的路由守衛,有多個方法可以調整路由請求問題

CanActivate: 處理導航到某路由的情況。
CanDeactivate: 處理從當前路由離開的情況。
Resolve:
http請求資料返回有延遲，導致模版無法立刻顯示。resolve解決辦法：在進入路由之前去伺服器讀資料，把需要的資料都讀好以後，帶著這些資料進到路由裡，立刻就把資料顯示出來。

### Q6
Ans:
1.Interface可以藉由 extends 去達成擴展,如果資料被重複多方利用時使用 interface

2.Enum 是列舉常用它來管理多個同系列的常數不常變動的值

export enum DayEnum {
  Mon = 1,
  Tue = 2,
  Wed = 3,
  Thu = 4,
  Fri = 5,
  Sat = 6,
  Sun = 7
}

export interface Props {
  day: DayEnum;
  weather: string;
  date: Date;
}

### Q7
Ans:
forEach,map,reduce都可以處理陣列會依據當下情境斟酌使用
1.forEach()會修改原本的陣列,並不會回傳任何東西
2.map()會透過函式內所回傳的值組合成一個新的陣列,並不會改變原陣列
3.reduce()可以與前一個回傳的值再次作運算

// forEach
var items= [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
items.forEach((value, index, array)=> {
array[index] = value*2;
});
console.log(items) //[2,4,6,8,10,12,14,16,18,20]

// map()
let initData = [100, 200, 300, 400];
let multipData = initData.map(item => item*2);
console.log(initData) // [100, 200, 300, 400]
console.log(multipData) // [200, 400, 600, 800]


// reduce()
let data = [
  {name:"A",age:20},
  {name:"B",age:23},
  {name:"C",age:21}
]
let result = data.reduce((acc,curr)=>{
  return acc + curr.age;
})

console.log(result) // "[object Object]2321"

### Q8
Ans:

import { filter, map, withLatestFrom } from 'rxjs';
import {
  pluckFirst,
  useObservable,
  useObservableCallback,
  useObservableState,
  useSubscription,
} from 'observable-hooks';
import { userLoginCheck } from ‘../loginGrard’;
import { userAuthorization } from ‘../userIdentity’

profile = {};
canGoPage: boolean;

const LoginCheck$$ = useObservable(pluckFirst, [userLoginCheck]);
const profile$ = useObservable(pluckFirst, [profile]);
const Authorization$$ = useObservable(() => new Subject())

useSubscription(
    useObservable(() =>
      LoginCheck$$.pipe(
         tap((v) => this.profile = v;),
      )
    ),
  );
  
  useSubscription(
    useObservable(() =>
      Authorization$$.pipe(
        withLatestFrom(profile$),
        distinctUntilChanged(),
        tap(authPassed) =>
          this.canGoPage = authPassed
        )
        map(v=>{
        this.canGoPage ?? return this._router.navigateByUrl(‘/main);
        this._router.navigateByUrl(‘/login)
        })
      )
    ),