###### tags: `The Coding God is on the way`
# Interview question
- **localstorage cookie sessionstorage 差別**
```
1. localstorage 暫存且須主動刪除
2. cookie 暫存且須主動刪除同時附有k數限制
3. sessionstorage 暫存關閉伺服器同時會關閉
```
- **[1, 2, 3, 4, 5] 用 reduce 寫總和**
```
const result = [1, 2, 3, 4, 5].reduce((acc, curr) => acc + curr)
```
- **[1, 2, 3, 4, 1, 2, 3, 4] 請去除重複的**
```
const arr = [1, 2, 3, 4, 1, 2, 3, 4];
[...new Set(arr)]
const result = arr.filter((item, index) => arr.indexOf(item) === index)
```
- **修改成正確的碼**
```
// before
const count = (value, fun) => {
fun(value);
return value < 0 ? count (value, fn): value
}
count (10, (value) => console.log(value))
// after
const count = (value, fun) => {
fun(value);
return value > 0 ? count (value - 1, fun): value
}
count (10, (value) => console.log(value))
```
- **解釋redux**
```
redux 為一個 state 的集合容器，修改部分透過 reducer 管理及 dispatch 修改狀態
```
- **react lifecycle**
```
// Mounting
constructor -> getDerivedStateFromProps -> render -> componentDidMount
// Updating
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate -> componentWillUnmount
```
- **const trs = {
result: '...',
print: function() {
setTimeout(function() {
console.log(this.result)
}, 1000)
}
}
trs.print() 求結果**
```
// undefined 因為 this 指向不對
// resolve
const trs = {
result: '…',
print: function() {
(function(self){
setTimeout(function() {
console.log(self.result)
}, 1000)
})(this)
}
}
```
- **null undefined undeclared between diff**
```
null 有定義但賦予空值
undefined 有定義但沒有賦值，跟null相等
undeclared 未定義也沒有賦值
如何 check
var a=null;
var b;
alert(typeof a); //object
alert(typeof b); //undefined
alert(typeof c); //undefined
```
- **explain pure component**
```
實作了 shouldComponentUpdate 方法
透過 shallow compare 方式比較 state 和 props 判斷要不要 render
當然也可以透過 shouldComponentUpdate 自定義 render 時機點
```
- **Explain the difference between synchronous and asynchronous functions.**
```
// sync
console.log(1)
console.log(2)
// 1, 2
// async
setTimeout(() => console.log(1), 1000)
console.log(2)
// 2, 1
```
- **描述 event delegation。**
```
減少事件的監聽次數
<div class="parent">
<div class="child" data-name="a"></div>
<div class="child" data-name="b"></div>
<div class="child" data-name="c"></div>
<div class="subitem" data-name="d"></div>
</div>
$('.parent').on('click', '.child', function(){
console.log($(this).data('name'));
});
```
- **描述 this 如何在 JavaScript 中運作。**
```
this 的參考位置，是決定於你呼叫的function的時機點
```
- **測試 javscript 程式碼**
```
QUnit寫單元測試
```
- **什麼是 closure, 如何/為什麼使用?**
```
closure為一個特殊函示，可儲存當下環境的變數，封裝功能使用
const counter = (function () {
let count = 0;
return {
increa: function() {
count++
},
value: function() {
return count
}
}
})()
counter.increa()
```
- **anonymous functions 典型的使用時機？**
```
1. var counter = (function() {})()
2. function result(callback) {
callback()
}
result(() => console.log(1))
```
- **What’s the difference between host objects and native objects?**
```
host object 指 window document ...
native object 指 Math Date
```
- **function Person(){}
var person = Person() 和 var person = new Person()
之間有何不同？**
```
var person = Person() return 的結果回傳並給person
var person = new Person() 直接給一個實體
```
- **.call 和 .apply有何不同？**
```
差別在於兩個第二參數傳遞差別一個apply傳陣列call傳一個一個參數
都是把一個環境丟到一個方法中
```
- **你是用過 JavaScript templating (樣板) ？
如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等)**
```
EJS
```
- **描述 Function.prototype.bind?**
```
跟call和apply一樣把一個環境丟到方法中
```
- **描述 Ajax**
```
簡單來說 Ajax 是瀏覽器與伺服器溝通的橋樑，等待資料回來做畫面上的炫渲染
```
- **Describe event bubbling.**
```
由外到內再由內到外觸發重疊事件
e.stopPropagation
```
- **“attribute” 和 “property” 的不同？**
```
attribute 是定義在 html 上
property 是定義在 dom 上
```
- **document load event 和 document ready event 有什麼不同？**
```
load 的話會在全部載完才會執行
ready 不會等
```
- **== 和 === 有什麼不同？**
```
==會幫你做型別轉變 ===不會
```
- **Explain the same-origin policy with regards to JavaScript.**
```
限制不同網域資料互動
```
- **Ternary expression 怎麼來的, “Ternary” 的意思是什麼？**
```
三元判斷
```
- **duplicate([1,2,3,4,5]);** // [1,2,3,4,5,1,2,3,4,5]
```
function duplicate(arr) {
return arr.concat(arr)
}
```
- **什麼是 "use strict";? 使用他的優點和缺點是什麼？**
```
強制規範模式 example: 宣告
```
- **Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5**
```
for(let i = 0; i <= 100; i++) {
if(i%3 === 0 && i%5 === 0) {
console.log(i, 'fizzbuzz');
} else {
if(i%3 === 0) console.log(i, 'fizz');
if(i%5 === 0) console.log(i, 'buzz');
}
}
```
- **Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?**
```
因為全域變數容易呼叫及修改，容易造成後續無法預知的錯誤
```
- **single page app**
```
單頁應用網站除了可使使用者體驗變佳之外，也可以減少換頁及等待頁面的不安定感，缺點就是必須犧牲 SEO，但現在前端框架有不錯的解決方法，server-side-render
```
- **Promises 之於 callbacks 的優劣？**
```
有條理地寫出function的執行順序
```
- **What language constructions do you use for iterating over object properties and array items?**
```
forEach map reduce
```
- **Explain how prototypal inheritance works**
```
利用prototype繼承
```
Sign in with Wallet
Connect another wallet