├── README.md ├── JavaScript第二次培训提纲.md ├── 技术部最终考核题.md └── JavaScript练习题.md /README.md: -------------------------------------------------------------------------------- 1 | # 官微学习仓库 2 | 3 | 这里是官微的JavaScript仓库！ 4 | 5 | 有啥好东西都可以Pull Request进来哈 6 | 7 | * [JavaScript 练习题](JavaScript练习题.md) 8 | * [JavaScript 第二次培训提纲](JavaScript第二次培训提纲.md) 9 | * [技术部最终考核题](技术部最终考核题.md) 10 | -------------------------------------------------------------------------------- /JavaScript第二次培训提纲.md: -------------------------------------------------------------------------------- 1 | # 10.14 JavaScript 培训纲要 2 | 3 | 0. 前言 4 | * 课后前后端分组 5 | * 今天讲的以概念为主，回去要自己多练 6 | 7 | 1. 基础概念 8 | 1. 表达式（expression） 9 | > **表达式**是由*一个或多个*确定的`值`、`常量`、`变量`、`运算符`或`函数`组成的， 10 | > 并且可以通过编程语言解析、计算后，*产生另一个值* 11 | 12 | * 表达式所产生的值可以是一种语言所支持的任何类型。 13 | * 在JavaScript中可以有`String`, `Number`, `Boolean`, `Object` (`Function`, `RegExp`, `Date`, ...), `null`, `undefined` 14 | * 有使用到值的地方都可以写表达式 15 | 16 | 2. 函数（function/subroutine） 17 | > **函数**是*由一系列的代码组成*， 18 | > 用于*执行某个特定的操作*， 19 | > 并且可以*在其它程序中任意使用*的东西 20 | 21 | 2. 运算符 22 | 1. 赋值运算符 `=` 23 | * 左值表达式必须返回一个**可写入**的东西 24 | 25 | 2. 比较运算符 26 | * `==` 能转换成相等的东西就相等 27 | * `===` 值与类型都相等才相等 28 | 29 | 3. 自增自减 30 | * `++` 31 | * `--` 32 | * `++a`是先加再用，`a++`是先用再加 33 | 34 | 4. 逻辑运算符 35 | * `||` 36 | * `&&` 37 | * 短路 38 | * JavaScript的逻辑运算符不止返回`Boolean`类型，可以利用这一点实现“逻辑判断+求值”二合一的操作 39 | 40 | 5. 三元运算符 41 | * `?:` 42 | 43 | 3. 原始值 44 | 1. 5种原始值：数字、文本、布尔值、`null`、`undefined` 45 | 2. 原始值是不可改动的 46 | 3. 假值 (falsy values) 47 | * `0` 48 | * `''` 49 | * `false` 50 | * `null` 51 | * `undefined` 52 | 4. 直接量 53 | * 直接量用来创建新的对象 54 | * 对象/数组/函数/正则直接量语法 55 | 56 | 4. 函数 57 | 1. 形参与实参 58 | 2. 返回值 59 | 3. 调用函数 60 | 4. 函数表达式/立即执行的函数 61 | 62 | 5. 对象 63 | * 单纯的对象其实就是**键值匹配**的数据结构 64 | * JavaScript中除了原始值就是对象（笼统地说） 65 | * 对象都是引用（内存图解） 66 | * 对象/数组/函数/正则直接量用来创建新的对象引用 67 | * 原始值可以隐式装换为对象 68 | * 遍历对象 69 | * *原型链 70 | * 对象远不止这些！ 71 | 72 | 6. 数组 73 | 1. 运行下面的函数看看效果 74 | * `indexOf` 75 | * `reverse` 76 | * `slice` 77 | * `push`, `pop` 78 | * `splice` 79 | * `concat` 80 | 81 | 2. 搜索数组：传统for循环与indexOf 82 | 3. 将for循环的代码变为函数式 83 | 4. 介绍数组高阶函数 84 | * `forEach` 85 | * `every` 86 | * `some` 87 | * `map` 88 | * `filter` 89 | * `reduce` 积累运算 - 多个数值通过计算变成一个值 90 | * `sort` 91 | 92 | 7. *作用域 93 | 1. 作用域 94 | * 词法作用域 95 | * 块级作用域 96 | 97 | 2. 声明提升 98 | 3. 闭包 99 | 100 | 8. 习题 101 | 9. 前后端分组 102 | 10. 前后端考核题 103 | -------------------------------------------------------------------------------- /技术部最终考核题.md: -------------------------------------------------------------------------------- 1 | # 深大官微技术部 3.0 最终考核题 2 | 3 | 下面的考核题，**前端**和**后端**的是不一样的。 4 | **前端的同学任选一题前端的题，后端的同学任选一题后端的题** 5 | 6 | 对于所有题目，**代码结构**都会作为评判的一个重要标准！ 7 | 尽可能把你的打码写**漂亮**（不只是长的漂亮） 8 | 9 | --- 10 | 11 | ## 前端 12 | 13 | ### 1. TodoList - 实现一个简单的TodoList 14 | 15 | > 不懂啥是TodoList的自行Google 16 | 17 | #### 限制 18 | 1. 界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计 19 | 2. 不能使用任何已有的库（如`jQuery`, `Bootstrap`, `Vue`等） 20 | 3. 增加、删除、修改的操作执行后，页面不能刷新 21 | 22 | #### 基本功能 23 | 1. 增删改查 24 | > **增删改查**是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 25 | > 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。 26 | 27 | 2. 可以储存 **“内容”** 与 **“是否已完成”** 的状态 28 | 3. 使用`localStorage`储存数据 29 | 4. 界面尽可能做的好看 30 | 31 | #### 加分项 32 | 1. 可以只显示“未完成”或“已完成”的条目 33 | > 你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法 34 | 35 | 2. 给每一条todo添加 **“完成日期”** 36 | 3. 在第二点的基础上，已过期的条目有不同的样式 37 | 4. 其它更牛逼的功能 38 | 39 | ### 2. myQuery - 实现一个简易版的`jQuery`框架 40 | 41 | #### 限制 42 | 1. 不能使用任何已有的库（如`lodash`, `underscore`等） 43 | 2. 不能去查`jQuery`源码 44 | 45 | #### 基本功能 46 | 1. 能够通过 `$` 标识符来访问`myQuery` 47 | 2. 能够通过**CSS选择器**来选择特定的元素 48 | 3. 能对选定的元素执行以下操作： 49 | > 如果不知道这些操作是什么的自行Google 50 | 51 | * `addClass(class)`, `hasClass(class)`, `removeClass(class)`, `toggleClass(class)` 52 | * `css(property)`, `css(property, value)` 53 | * `each(func)` 54 | * `find(selector)` 55 | * `hide()`, `show()`, `toggle()` 56 | * `html()`, `html(content)` 57 | * `remove()` 58 | 59 | #### 加分项 60 | 1. 能通过`$(window)`和`$(document)`执行部分操作 61 | 2. 能通过`$(func)`实现当DOM加载完成时，执行`func`函数 62 | 3. 能对选定的元素执行以下操作： 63 | * `attr(name)`, `attr(name, value)` 64 | * `css(cssObject)` 65 | * `on(event, handler)`, `once(event, handler)`, `off(event, handler)` 66 | * `offset()`, `offset(coordinates)` 67 | * `text()`, `text(content)` 68 | 4. 有一份较为详细的使用文档 69 | 70 | --- 71 | 72 | ## 后端 73 | 74 | > 注：后端可以使用任何在npm上已有的库 75 | 76 | ### 1. TodoList - 实现一套RESTful风格的TodoList 77 | 78 | > 不懂啥是TodoList的自行Google 79 | 80 | #### 基本功能 81 | 1. 数据可以在本地储存（文件、数据库都可以），后端服务重启后依然能有数据 82 | 2. 一条todo能够拥有以下属性 83 | * 内容 84 | * 完成日期 85 | * 是否已完成 86 | 3. 实现以下API 87 | * `GET` `/api/todos` 获取所有todo 88 | * `GET` `/api/todos?search=` 根据内容搜索todo 89 | * `POST` `/api/todo/:id` 修改某条todo 90 | * `PUT` `/api/todos` 添加一条todo 91 | * `DELETE` `/api/todo/:id` 删除某条todo 92 | 93 | #### 加分项 94 | 1. 保存每个访问的log 95 | 2. 使用数据库储存数据 96 | 3. 有个简单的登录系统 97 | > 可以使用任意方式实现这个登录系统 98 | 99 | ### 2. koa-lite - 实现一个简单的类似于koa的HTTP服务器库 100 | 101 | #### 基本功能 102 | 1. 实现koa2的以`Promise`为基础的middleware机制 103 | 2. 简单实现koa的`ctx`功能（提示：使用getter和setter） 104 | * `ctx.headers` 105 | * `ctx.method`, `ctx.method=` 106 | * `ctx.path`, `ctx.path=` 107 | * `ctx.query`, `ctx.query=` 108 | * `ctx.querystring` 109 | * `ctx.originalUrl` 110 | * `ctx.body`, `ctx.body=` 111 | * `ctx.status`, `ctx.status=` 112 | 3. 如果没有一个middleware对一个请求产生响应，默认返回404状态码 113 | 114 | #### 加分项 115 | 1. 完整实现`ctx`的功能 116 | -------------------------------------------------------------------------------- /JavaScript练习题.md: -------------------------------------------------------------------------------- 1 | # JavaScript 练习题 2 | 3 | 这份练习题会持续更新！ 4 | 5 | ## 1. 计算两个日期的天数差 6 | 7 | ### 函数模板 8 | ```javascript 9 | function daySpan (date1, date2) { 10 | // your code 11 | } 12 | ``` 13 | 14 | ### 函数参数 15 | * `date1: Date` 第一个日期 16 | * `date2: Date` 第二个日期 17 | 18 | ### 调用样例 19 | ```javascript 20 | daySpan(new Date(2016, 2, 7), new Date(2016, 4, 12)) // 66 21 | daySpan(new Date(2016, 4, 12), new Date(2016, 2, 7)) // 66 22 | ``` 23 | 24 | ## 2. 计算两个日期的天数差 - 高级版 25 | 26 | ### 函数模板 27 | ```javascript 28 | function daySpan (date1, date2) { 29 | // your code 30 | } 31 | ``` 32 | 33 | ### 函数参数 34 | * `date1: String` 第一个日期 35 | * `date2: String` 第二个日期 36 | 37 | 这两个日期字符串都会按照`YYYY-MM-DD`的格式输入，如`2016-10-09` 38 | 39 | ### 调用样例 40 | ```javascript 41 | daySpan('2016-02-07', '2016-04-12') // 65 42 | daySpan('2016-04-12', '2016-02-07') // 65 43 | ``` 44 | 45 | ## 3. 计算数组中元素重复次数 46 | 47 | ### 函数模板 48 | ```javascript 49 | function countRepeat (arr) { 50 | // your code 51 | } 52 | ``` 53 | 54 | ### 函数参数 55 | * `arr: Array` 仅包含数字的数组 56 | 57 | ### 调用样例 58 | ```javascript 59 | countRepeat([2, 9, 8, 4, 5, 3, 4, 8, 9, 9, 1, 0, 2, 1]) 60 | /* 顺序不影响结果 61 | { 62 | '0': 1, 63 | '1': 2, 64 | '2': 2, 65 | '3': 1, 66 | '4': 2, 67 | '5': 1, 68 | '8': 2, 69 | '9': 3 70 | } */ 71 | ``` 72 | 73 | ## 4. 驼峰转换函数 74 | 75 | 在代码的世界里，标识符中不能有空格， 76 | 但有时一个变量必须由两个或更多个单词来表达，如`count repeat`、`get own poperty descriptor`等。 77 | 这时候就必须把他们写成**第一个单词全小写，第二个以及后面的单词，除了首字母全小写**的形式（即**驼峰**）， 78 | 如`countRepeat`、`getOwnPropertyDescriptor` 79 | 80 | 下面你需要编写一个函数来实现这个功能 81 | 82 | ### 函数模板 83 | ```javascript 84 | function camelCase (str) { 85 | // your code 86 | } 87 | ``` 88 | 89 | ### 函数参数 90 | * `str: String` 要转换的字符串，可能的形式看下面的例子 91 | 92 | ### 调用样例 93 | ```javascript 94 | camelCase('hey guys') // 'heyGuys' 95 | camelCase('HELLO-world') // 'helloWorld' 96 | camelCase('oh mY---gOd') // 'ohMyGod' 97 | ``` 98 | 99 | ## 5. 寻找字符串中第一个未重复的字符 100 | 101 | 寻找字符串中第一个未重复的字符，如果没有找到，则返回一个空字符串（`''`） 102 | 103 | ### 函数模板 104 | ```javascript 105 | function firstNonRepeat (str) { 106 | // your code 107 | } 108 | ``` 109 | 110 | ### 函数参数 111 | * `str: String` 要寻找的字符串，可能是任何内容 112 | 113 | ### 调用样例 114 | ```javascript 115 | firstNonRepeat('aaabccc') // 'b' 116 | firstNonRepeat('aabccbd') // 'd' 117 | firstNonRepeat('aabxbcc') // 'x' 118 | firstNonRepeat('6666666') // '' 119 | ``` 120 | 121 | ## 6. 展平数组 122 | 123 | 数组中可以嵌套数组，要嵌套多少层都可以，比如`[1, 2, [[3], 4]]`。 124 | 这样看起来很不爽，所以我们要把它展开，只留下一层数组: `[1, 2, 3, 4]` 125 | 126 | 提示：判断`xxx`是否是数组的方法为 `Array.isArray(xxx)` 127 | 128 | ### 函数模板 129 | ```javascript 130 | function flatten (arr) { 131 | // your code 132 | } 133 | ``` 134 | 135 | ### 函数参数 136 | * `arr: Array` 包含嵌套数组的数组 137 | 138 | ### 调用样例 139 | ```javascript 140 | flatten([1, 2, 3]) // [1, 2, 3] 141 | flatten([1, 2, [3]]) // [1, 2, 3] 142 | flatten([1, 2, [[3], 4]]) // [1, 2, 3, 4] 143 | flatten([1, [2, [[3], [4]]]]) // [1, 2, 3, 4] 144 | ``` 145 | ## 7. 判断空对象 146 | 147 | 在 JavaScript 编程中，经常我们要判断某个变量是否为空对象，而不是 `null` 或者 `undefined`，那么，请实现一个函数判断变量是否为空对象。 148 | 149 | ### 函数模板 150 | 151 | ```javascript 152 | function isEmptyObject (obj) { 153 | // your code 154 | } 155 | ``` 156 | 157 | ### 函数参数 158 | 159 | - `obj: mixed` 可能为空对象的任何类型变量 160 | 161 | ### 调用样例 162 | 163 | ```javascript 164 | isEmptyObject({}) // true 165 | isEmptyObject(null) // false 166 | isEmptyObject(undefined) // false 167 | isEmptyObject('{}') // false 168 | isEmptyObject([]) // false 169 | isEmptyObject(true) // false 170 | ``` 171 | 172 | ## 8. 数组去重 173 | 174 | 返回一个无重复值的数组 175 | 176 | ### 函数模板 177 | 178 | ```javascript 179 | function unique (arr) { 180 | // your code 181 | } 182 | ``` 183 | 184 | ### 函数参数 185 | 186 | - `arr: Array` 反正就是一个数组 187 | 188 | ### 调用示例 189 | 190 | ```javascript 191 | unique([1, 2, 3, 4, 4, 5, 8, 6, 3, 2, 1]) // [1, 2, 3, 4, 5, 8, 6] 192 | ``` 193 | 194 | ## 9. 实现一个 `reduce` 函数 195 | 196 | `reduce` 是函数式编程中十分重要的一个函数，请实现一个 `reduce` 函数，可以参考 `[].reduce` 。 197 | 198 | ### 函数模板 199 | 200 | ```javascript 201 | function reduce (arr, func, initialValue) { 202 | // your code 203 | } 204 | ``` 205 | 206 | ### 函数参数 207 | 208 | - `arr: Array` 调用 `reduce` 的数组 209 | - `func: Function` `reduce` 执行数组中每个值的函数，包含两个参数 210 | - `previousValue` 上一次调用回调返回的值，或者是提供的初始值（`initialValue`） 211 | - `currentValue` 数组中当前被处理的元素 212 | - `initialValue：mixed` 作为第一次调用 `callback` 的第一个参数。 213 | 214 | ### 调用示例 215 | 216 | ```javascript 217 | var total = reduce([0, 1, 2, 3], function (previousValue, currentValue) { 218 | return previousValue + currentValue 219 | }, 0) 220 | // total === 6 221 | ``` 222 | --------------------------------------------------------------------------------