### 一： 记忆化斐波那契函数（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>` : '' }`
}, '')
}
~~~
- 前端入门
- 前端入职须知
- 正确看待前端
- 前端自我定位
- pc与手机页面差别
- 前端书单
- 前端技术栈
- 前端资源导航
- 前端切图
- 插件
- 组件、控件和插件的区别
- 技术文档
- layui
- layer弹框在实际项目中的一些应用
- 前端面试题
- bat面试题库
- 中小公司的leader
- 项目相关
- 职业规划如何
- 前端经典笔试题
- javascript基础（一）
- JavaScript基础二
- JavaScript基础面试题（三）
- JavaScript基础面试题（四）
- JavaScript基础面试题（五）
- JavaScript基础面试题（六）
- JavaScript基础面试题（七）
- JavaScript基础面试题（八）
- JavaScript基础面试题（九）
- JavaScript基础面试题（十）
- dom经典面试题
- 正则表达式
- 史上最难面试题
- 简单算法
- 前端idea
- vsc快速上手指南
- 微信开发者工具
- sublime的使用
- hbuilder入门
- 前端那些事
- 前端的注释该怎么写
- 前端架构师是怎么炼成的
- 细数前端的那些技术大牛
- 前端leader的那些事
- ps
- 图片类型及其区别
- 基本概念及其常用工具
- ps操作技巧
- ps站点资源导航
- ui站点导航
- html
- css
- js
- 插件库
- git教程
- web
- web兼容思想
- ui框架
- 小程序
- 微信专题
- 支付宝专题