# 微軟面試 2021/03/24

###### tags: `面試經驗`、`前端`

去萬寶華填資料，跟人資聊天，聊技術與經驗還有預期薪水，之後給你一台Window電腦加滑鼠，Code打在Word裡面，沒有網路可以查，考時限時1.5hr

Please try answer the following questions as detailed as possible. You are given 90minutes to finish the test.

#### Q1: Please implement below mutiply functiion to make it work.

Output

multiply(2)(5); // 10

完成下面程式

function multiply(num) {
    
}

我的解答:

const multiply = num1 => num2 => num1 * num2;

#### Q2: Given an array with N + 1 integers, with each int in the range from 1 to N, there is at least one number with duplucates, please find the duplicate number, and try to optimize time/space complexity as much as possible. Please note that there may be more than one duplicate.

Example:
Input:

[1,3,3,3,2]

Output: 3

完成下面程式

/**
 * @param {number[]} nums
 * @return {number}
 */
 
 var findDepulicated = function(nums) {

 }

我的解答:
time complexity: O(n)
space complexity: O(n)

const nums = [1,3,3,3,2];
 var findDepulicated = function(nums) {
     let ans = [];
     let hashMap = {};
     nums.forEach(num => {
         if(hashMap[num]) {
             hashMap[num]++;
         } else {
             hashMap[num] = 1;
         }
     })
     
     ans = Object.keys(hashMap).filter(key => hashMap[key] > 1)
     return ans;
 }
     

#### Q3. What is an example of an immutable object in javascript ?

When we use react and redux develop website, we met a situation from that:

**reducer/user.js**

const FETCH_USER = 'FETCH_USER';
const initialState = {
    user: [],
}

const user = (state=initialState, action) => {
    switch(action.type) {
        case FETCH_USER:
            return { ...state, user: state.payload }
        default: 
            return state;
    }
}

immutable example

const foo = {
    a: 1,
    b: 2,
}

const foo2 = {
    ...foo,
    a: 3
}

mutable example

const foo = {
    a: 1,
    b: 2,
}
foo.a = 3

#### Q4. What are the pros and cons of immutable ?

We should use spread operater to copy old user array and put new data into new array. So, immutable can avoid change old array data that help us make an application more clean and safety. But the cons is that if each data have a new copy, it may cause performance issue in big application.

#### Q5. What is event loop ?

If there are async events or web api events, rowser will put them into Web API, callback into quene, after all of stack finish task, even loop put 'cb' into stack and work.

#### Q6. What are layout, paint, and compositiong ? Please explain their differences.

* layout: the way in which the parts of something are arranged or laid out.

* painting: its the action of using paint, to create a graphic. Yes, painting is a graphic and so is a photograph and a typeface.

* Composition: combining two or more images/elements to make a single graphic is composition.

Although There is not much difference between layout and composition; suppose if Quora changes its composition to black background with white text instead of black text on white. Then it will be the be the same layout(arrangement of text, graphics and operation), but a different composition(juxtaposition of different elements, here colour, it could be typeface also). Composition can be restricted upto graphic elements only, but layout can extend upto deciding the size of the Canvas and number of pages

#### Q7. Please implement below Sign In React Component as below picture shown. Implement this component at detailed as possible, and feel free to create subcomponent if necessary

* While clicking on "Log in" , the form content will be sent to **'./api/login**' with HTTP POST.
* While clicking on "Twitter", , "facebook", "Google+", user will be redirected to third-party signin page.
* Twitter => './sso/twitter'
* facebook => './sso/facebook'
* Google+ => './sso/googleplus'
* While clicking on "REGISTER", user will be redirected to redirected to register page './signin/register'
* While "Remeber Me" is checked, we will store user name in locally


class SignIn extends React.Component {
    constructor(props) {
        super(props) {
            this.state = {username: "", password: ''}
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }
    }
    handleChange(event) {
    
    }
    
    handleSubmit(event) {
        // put your handler logic 
    }
    
     // put more helper/handler here if necessary
     render() {
         return (
            <form onSubmit={this.handleSubmit}>
                <h1>Login</h1>
                
            </form> 
        )
     }
}