javascript基礎（一） · web前端

### 一：記憶化斐波那契函數（Memoization）題目：斐波那契數列指的是類似于以下的數列： `1, 1, 2, 3, 5, 8, 13, ....` 也就是，第 n 個數由數列的前兩個相加而來：f(n) = f(n - 1) + f(n -2) 請你完成 fibonacci 函數，接受 n 作為參數，可以獲取數列中第 n 個數，例如： ~~~ fibonacci(1) // => 1 fibonacci(2) // => 1 fibonacci(3) // => 2 ~~~ ... 測試程序會從按順序依次獲取斐波那契數列中的數，請注意程序不要超時，也不要添加額外的全局變量。本題來源：《JavaScript 語言精髓》答案： ~~~ const fibonacci = ((memo = [0, 1]) => { const fib = (n) => { let result = memo[n] if (typeof result !== "number") { result = fib(n - 1) + fib(n - 2) memo[n] = result } return result } return fib })() ~~~ ### 二：解析字串題目：完成一個 extractStr 函數，可以把一個字符串中所有的 : 到 . 的子串解析出來并且存放到一個數組當中，例如： `extractStr('My name is:Jerry. My age is:12.') // => ['Jerry', '12']` 注意，: 和 . 之間不包含 : 和 .。也即是說，如果 ::abc..，則返回 ['abc']。（本題來源：《JavaScript Cookbook》）答案： ~~~ const extractStr = (str) => { const ret = str.match(/:([^:\.])*?\./g) || [] return ret.map((subStr) => subStr.replace(/[:\.]/g, '')) } ~~~ ### 三： safeGet 題目：有時候我們需要訪問一個對象較深的層次，但是如果這個對象某個屬性不存在的話就會報錯，例如： ~~~ var data = { a: { b: { c: 'ScriptOJ' } } } data.a.b.c // => scriptoj data.a.b.c.d // => 報錯，代碼停止執行 console.log('ScriptOJ') // => 不會被執行 ~~~ 請你完成一個 safeGet 函數，可以安全的獲取無限多層次的數據，一旦數據不存在不會報錯，會返回 undefined，例如： ~~~ var data = { a: { b: { c: 'ScriptOJ' } } } safeGet(data, 'a.b.c') // => scriptoj safeGet(data, 'a.b.c.d') // => 返回 undefined safeGet(data, 'a.b.c.d.e.f.g') // => 返回 undefined console.log('ScriptOJ') // => 打印 ScriptOJ ~~~ 答案： ~~~ const safeGet = (o, path) => { try { return path.split('.').reduce((o, k) => o[k], o) } catch (e) { return void 666 } } ~~~ ### 四：判斷兩個矩形是否重疊題目：用一個對象的數據來表示一個矩形的位置和大小： ~~~ { x: 100, y: 100, width: 150, height: 250 } ~~~ 它表示一個寬為 150 高為 250 的矩形在頁面上的 (100, 100) 的位置。請你完成一個函數 isOverlap 可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如： ~~~ const rect1 = { x: 100, y: 100, width: 100, height: 100 } const rect2 = { x: 150, y: 150, width: 100, height: 100 } isOverlap(rect1, rect2) // => true ~~~ 答案： ~~~ // 原理：http://www.geeksforgeeks.org/find-two-rectangles-overlap/ const isOverlap = (rect1, rect2) => { const l1 = { x: rect1.x, y: rect1.y } const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height } const l2 = { x: rect2.x, y: rect2.y } const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height } if ( l1.x > r2.x || l2.x > r1.x || l1.y > r2.y || l2.y > r1.y ) return false return true } ~~~ ### 五： spacify 題目：請你給字符串都添加上原型方法 spacify，可以讓一個字符串的每個字母都多出一個空格的間隔： `"ScriptOJ".spacify() // => "S c r i p t O J"` （本題來源：http://blog.sourcing.io/interview-questions）答案： ~~~ String.prototype.spacify = function () { return this.split('').join(' ') } ~~~ ### 六：按下標插入題目：現在有一個數組存放字符串數據： `['item1', 'item2', 'item3', 'item4', 'item5']` 有另外一個數組存放一組對象： ~~~ [ { content: 'section1', index: 0 }, { content: 'section2', index: 2 } ] ~~~ 它每個對象表示的是會往原來的數組的 index 坐標插入 content 數據（index 不會重復）： 0 1 2 3 4 item1 itme2 item3 item4 item5 ^ ^ | | section1 section2 最后結果是：['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5'] 請你完成 injectSections 函數，可以達到上述的功能： ~~~ injectSections( ['item1', 'item2', 'item3', 'item4', 'item5'], [ { content: 'section1', index: 0 }, { content: 'section2', index: 2 } ] ) // => ['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5'] ~~~ 答案： ~~~ const injectSections = (items, sections) => { /* 需要插入坐標對應數據存放到 map 里面 */ const sectionsMap = new Map(sections.map(({ index, content }) => [index, content])) /* 新建一個數組，然后往里面 push 原來數組的數據 */ return items.reduce((ret, item, index) => { /* push 的時候先檢查 map 里面有沒有，有的話先 push map 里面的數據 */ if (sectionsMap.has(index)) ret.push(sectionsMap.get(index)) /* 再 push 原來的數據 */ ret.push(item) return ret }, []) } ~~~ ### 七：數組拍平（二）題目：編寫一個 JavaScript generator 函數，接受一個僅包含數字的多維數組，返回一個迭代器，可以遍歷得到它拍平以后的結果。例如： ~~~ const numbers = flatten2([1, [[2], 3, 4], 5]) numbers.next().value // => 1 numbers.next().value // => 2 numbers.next().value // => 3 numbers.next().value // => 4 numbers.next().value // => 5 ~~~ 答案： ~~~ function *flatten2(arr) { for (let i = 0; i < arr.length; i++) { const item = arr[i] /* yield* 的使用可以大大簡化程序編寫 */ Array.isArray(item) ? yield* flatten2(item) : yield item; } } /* 用 flatten2 來完成 flatten 也是很方便的 */ // const flatten = (arr) => [...flatten2(arr)] ~~~ ### 八：判斷兩個 Set 是否相同題目：完成 isSameSet 函數，它接受了兩個 Set 對象作為參數，請你返回 true/false 來表明這兩個 set 的內容是否完全一致，例如： ~~~ const a = {} const b = 1 const c = 'ScriptOJ' const set1 = new Set([a, b, c]) const set2 = new Set([a, c, b]) isSameSet(set1, set2) // => true ~~~ 答案： ~~~ /* 這道題不能簡單地使用 sort，使用 sort 并不靠譜。因為 Set 里面的內容可能有很多種類 * 字符串、對象、數字，不同類型之間是不可對比的，所以排序結果并不會一致 * * 最好的方式是按照數學上集合相等的定義： * A = B 當且僅當 A 是 B 的子集并且 B 是 A 的子集。 * * 這種判斷方式還可以用在對象、map 等其他數據類型的判斷當中。 */ const isSameSet = (s1, s2) => { /* 獲取一個集合所有的值，判斷另外一個集合是否全部包含該這些值 */ const isSame = (a, b) => { const values = [...a] for (let val of values) { /* 及時跳出循環，可以降低算法復雜度 */ if (!b.has(val)) return false } return true } /* a 包含 b，b 包含 a，那么兩個集合相同 */ return isSame(s1, s2) && isSame(s2, s1) } /* By 陳小俊 */ // const isSameSet = (set1, set2) => // [...set1].every((o) => set2.has(o)) && // [...set2].every((o) => set1.has(o)) ~~~ ### 九：數組去重題目：編寫一個函數 unique(arr)，返回一個去除數組內重復的元素的數組。例如： ~~~ unique([0, 1, 2, 2, 3, 3, 4]) // => [0, 1, 2, 3, 4] unique([0, 1, '1', '1', 2]) // => [0, 1, '1', 2] ~~~ 答案： `const unique = (arr) => [...new Set(arr)]` ### 十：字體高亮函數題目：請你完成 highlight 函數，可以把模版字符串中的插入內容替換掉，并且插入文檔以后顯示紅色。例如： ~~~ const yourName = 'ScriptOJ' const myName = 'Jerry' document.body.innerHTML = highlight`Hello, ${yourName}. I am ${myName}.` ~~~ 上面例子的頁面顯示如下： `0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5` 請你完成 highlight 函數的編寫。答案： css: ~~~ .highlight { color: red; } ~~~ js: ~~~ // 考察的是 Tagged template literals 的使用 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals const highlight = (strings, ...args) => { return strings.reduce((str, cur, i) => { return `${str}${cur}${args[i] ? `<span class="highlight">${args[i]}</span>` : '' }` }, '') } ~~~