---
# System prepended metadata

title: GSS FED 前端小測驗
tags: [徵才, ' BizForm']

---

---
robots: noindex, nofollow
tags: 徵才, BizForm
---

# GSS FED 前端小測驗

## 綜合技能

1. 請展示一下您的作品。
2. 您怎麼開始一個專案？
3. 有聽過 CMS 嗎？（像是 Joomla! ）
4. git 的 `rebase`, `reset`, `revert` 指令差異是什麼？

## JavaScript 篇

1. JavaScript `forEach`, `map`, `reduce` 的差異是什麼？
2. React 元件的 `key` 是做什麼的？
3. 介紹一下您對 Redux 的了解。
    * 如果要加一個新的非同步 Redux action ，大概要改哪些檔案？
    * 介紹一下 Redux middleware 是做什麼的？
6. 用過 React Hooks 嗎？下面兩個 `setState` 的差異是什麼？
    ```javascript=
    const [s, setState] = useState();

    setState((s)=>({...s, a: '123'}));
    setState({...s, a: '123'});
    ```
6. 下面程式碼的輸出為何？
    ```javascript=
    function foo(){
        setTimeout(() =>
            {console.log('foo')};
        ,0);
    }

    function bar(){
        console.log('bar')
    }

    function baz(){
        console.log('baz')
    }

    foo();
    bar();
    baz();
    ```
7. 下面程式碼的輸出為何？
    ```javascript=
    function foobar(data){
        if(data==={test:655})
            console.log('great');
        }
        else if(data=={test:655}){
            console.log('good');
        }
        else{
            console.log('error');
        }
    }

    foobar({test:655});
    ```

## CSS 篇

1. CSS 中， id 和 class 的差別是什麼？
2. CSS 中的 `:before` 和 `:after` 是什麼？有什麼用途？
3. 如果要實現「游標指到一個元素上，觸發漸變動畫」，會使用什麼 CSS 語法？
4. 舉出原生為 inline 與 block 的元素，並解釋 inline 與 block 元素的差異。
5. 解釋一下什麼是 BFC(block formatting context) ？
6. 是否使用過 SASS/SCSS 的 `map-get` ?
7. 有沒有用過 SASS/SCSS 中的 `&` 運算子？解釋一下這邊的 `&` 是做什麼的？
    ```sass
    .btn {
        color: white;

        .actived & {
            color: red;
        }
    }
    ```

## 上機測驗

* [React 前端測驗](https://codesandbox.io/s/gss-react-interview-wu9bb)
