20180930_ARTS_week14
第十四周，演算法題 Valid Parentheses，看了一篇介紹 chrome dev tools 的文章，其中關於程式碼使用率的檢測工具十分實用，記錄 JavaScript 陣列操作的小 tip，分享對於記錄解決問題思路的看法。
Algorithm
/**
* Valid Parentheses
* https://leetcode.com/problems/valid-parentheses/description/
*
* @param {string} s
* @return {boolean}
*/
var isValid = function (s) {
if (s == "") {
return true;
}
var stack = [];
var dict = {
')' : '(',
']' : '[',
'}' : '{'
}
for (var i=0; i<s.length; i+=1) {
if( dict[s[i]] ) { // find right silde, try to match
var beforeItem = stack.pop();
if ( dict[s[i]] === beforeItem) {
continue
}
return false;
} else {
stack.push(s[i])
}
}
return stack.length == 0;
};
console.log(isValid("()"))
console.log(isValid("()[]{}"))
console.log(isValid("(]"))
console.log(isValid("([)]"))
console.log(isValid("{[]}"))
這個演算法就是利用了棧。
想到這個的思路是因為解的過程中，發現如果遇到左邊的，需要存起來，後面可能有用（類似入棧），遇到右邊的，需要比對前一個值，並且比完如果匹配就沒用了（這類似出棧）。這整個就是棧的工作模式，突然就恍然大悟，用棧就好了。
中間發現有不匹配的就直接返回 false 了，最後再檢查一下棧裡面是否為空，空就是都匹配完了，返回 true，不然就是沒匹配完，返回 false。
Review
Mastering Chrome Developer Tools: Next Level Front-End Development Techniques
ofollow,noindex" target="_blank">https://medium.freecodecamp.org/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3ac0b6fe8a3
作者介紹了 Chrome Developer Tools 中幾個功能。
-
Dark Theme，暗黑主題，你懂的，酷酷的。
-
Store as global variable，可以把 console.log 打出來的變數右鍵存為全域性變數，方便檢視。
-
Animation Tools，這個工具應該很多都熟悉，可以調節動畫各種引數，以及暫停動畫。
-
Simulate Element Pseudo State，這個很熟悉了，就是各種 :hover :active 等。
-
Prettify CSS and JavaScript，對於壓縮過的 js 和 css 特別好用，方便檢視。
-
Code Coverage，這個功能我覺得最讚了，可以檢視頁面上 js 檔案和 css 檔案的使用率，對用來清理積攢的不用程式碼特別有參考價值。使用的時候需要 Chrome 59 版本以上，dev tools 中選擇 Coverage tab，沒有就調出來，和 console 在同一行的，之後單擊 record 然後開始用網頁，用完點完成就能看到分析結果了。
大致介紹了這幾個功能，其中 Code Coverage 是我覺得最實用的，推薦你也試試。
Tip
JavaScript 中對陣列做操作可以說是家常便飯，插在末尾用 push，插在開頭用 unshift，插在中間用 splice。
然而這些系統提供的方法效能是不是就是最好呢？並不全是。
比如插在末尾：
var arr = [1,2,3,4,5]; var arr2 = []; arr[arr.length] = 6;// with an average of 5 632 856 ops/sec arr.push(6);// 35.64 % slower arr2 = arr.concat([6]);// 62.67 % slower
arr[arr.length] = 6 的方式會更快。
比如插在開頭：
var arr = [1,2,3,4,5]; [0].concat(arr);// with an average of 4 972 622 ops/sec arr.unshift(0);// 64.70 % slower
[0].concat(arr) 的方式會更快。
不過插在中間使用 splice 是效能最好的。
var items = ['one', 'two', 'three', 'four']; items.splice(items.length / 2, 0, 'hello');
以上來源 http://www.jstips.co/en/javascript/insert-item-inside-an-array/
這裡重點看下 unshift 方法，比較中可以看到 unshift 相比 [0].concat(arr) 的方式要慢上不少，
其原因是使用 unshift 每次新增一個元素都要在原有的陣列上把已有的元素往下移一個位置，而用 concat 並不會動原來的陣列，而是返回一個新的陣列，計算開銷小了很多，所以比較快。
Share
這次的演算法題和前面有些不同，我多記錄了一些我是怎麼想到這個思路的，因為最近看《暗時間》一書，裡面說到記錄並說清楚解題思路往往比最後的解題結果更為重要，於是我就嘗試了記錄思路。
不過這個思路記錄的還是比較簡單，因為真的梳理了一下這個流程，然後恍然大悟這裡是棧的工作模式。
最近也的確體會到解題思路的重要性，常常看一本書，作者說可以怎麼怎麼樣做，ok，我知道可以這樣做，但是我更想知道是怎麼找到可以這樣做的。
解題思路才是線條，把一個個獨立的點串聯起來。
碎碎念
記錄一些所思所想，寫寫科技與人文，寫寫生活狀態，寫寫讀書心得，主要是扯淡和感悟。 歡迎關注，交流。
公眾號ID : MonkeyCoder-Life
