├── .idea
    ├── javavscript代码段.iml
    ├── misc.xml
    ├── modules.xml
    ├── vcs.xml
    └── workspace.xml
├── README.md
├── debounce.js
├── deepCopy.js
├── flatten.js
├── images
    └── 1.png
├── shallowCopy.js
└── type.js


/.idea/javavscript代码段.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="ES6" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/javavscript代码段.iml" filepath="$PROJECT_DIR$/.idea/javavscript代码段.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="f3accd2f-68a5-44ec-a874-6eccee20b808" name="Default Changelist" comment="">
  5 |       <change afterPath="$PROJECT_DIR$/debounce.js" afterDir="false" />
  6 |       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
  7 |     </list>
  8 |     <ignored path="$PROJECT_DIR$/.tmp/" />
  9 |     <ignored path="$PROJECT_DIR$/temp/" />
 10 |     <ignored path="$PROJECT_DIR$/tmp/" />
 11 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
 12 |     <option name="SHOW_DIALOG" value="false" />
 13 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 14 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 15 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 16 |   </component>
 17 |   <component name="FileEditorManager">
 18 |     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
 19 |       <file pinned="false" current-in-tab="false">
 20 |         <entry file="file://$PROJECT_DIR$/type.js">
 21 |           <provider selected="true" editor-type-id="text-editor">
 22 |             <state relative-caret-position="484">
 23 |               <caret line="24" selection-start-line="24" selection-end-line="24" />
 24 |               <folding>
 25 |                 <element signature="n#!!doc" expanded="true" />
 26 |               </folding>
 27 |             </state>
 28 |           </provider>
 29 |         </entry>
 30 |       </file>
 31 |       <file pinned="false" current-in-tab="false">
 32 |         <entry file="file://$PROJECT_DIR$/shallowCopy.js">
 33 |           <provider selected="true" editor-type-id="text-editor">
 34 |             <state relative-caret-position="308">
 35 |               <caret line="14" selection-start-line="14" selection-end-line="14" />
 36 |             </state>
 37 |           </provider>
 38 |         </entry>
 39 |       </file>
 40 |       <file pinned="false" current-in-tab="false">
 41 |         <entry file="file://$PROJECT_DIR$/deepCopy.js">
 42 |           <provider selected="true" editor-type-id="text-editor">
 43 |             <state relative-caret-position="242">
 44 |               <caret line="11" selection-start-line="11" selection-end-line="11" />
 45 |             </state>
 46 |           </provider>
 47 |         </entry>
 48 |       </file>
 49 |       <file pinned="false" current-in-tab="false">
 50 |         <entry file="file://$PROJECT_DIR$/flatten.js">
 51 |           <provider selected="true" editor-type-id="text-editor">
 52 |             <state relative-caret-position="330">
 53 |               <caret line="15" selection-start-line="15" selection-end-line="15" />
 54 |             </state>
 55 |           </provider>
 56 |         </entry>
 57 |       </file>
 58 |       <file pinned="false" current-in-tab="true">
 59 |         <entry file="file://$PROJECT_DIR$/debounce.js">
 60 |           <provider selected="true" editor-type-id="text-editor">
 61 |             <state relative-caret-position="42">
 62 |               <caret line="15" column="58" selection-start-line="15" selection-start-column="58" selection-end-line="15" selection-end-column="58" />
 63 |             </state>
 64 |           </provider>
 65 |         </entry>
 66 |       </file>
 67 |     </leaf>
 68 |   </component>
 69 |   <component name="Git.Settings">
 70 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 71 |   </component>
 72 |   <component name="IdeDocumentHistory">
 73 |     <option name="CHANGED_PATHS">
 74 |       <list>
 75 |         <option value="$PROJECT_DIR$/type.js" />
 76 |         <option value="$PROJECT_DIR$/shallowCopy.js" />
 77 |         <option value="$PROJECT_DIR$/deepCopy.js" />
 78 |         <option value="$PROJECT_DIR$/flatten.js" />
 79 |         <option value="$PROJECT_DIR$/debounce.js" />
 80 |       </list>
 81 |     </option>
 82 |   </component>
 83 |   <component name="ProjectFrameBounds" extendedState="6">
 84 |     <option name="x" value="240" />
 85 |     <option name="y" value="127" />
 86 |     <option name="width" value="1440" />
 87 |     <option name="height" value="765" />
 88 |   </component>
 89 |   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
 90 |   <component name="ProjectView">
 91 |     <navigator proportions="" version="1">
 92 |       <foldersAlwaysOnTop value="true" />
 93 |     </navigator>
 94 |     <panes>
 95 |       <pane id="Scope" />
 96 |       <pane id="ProjectPane">
 97 |         <subPane>
 98 |           <expand>
 99 |             <path>
100 |               <item name="javavscript代码段" type="b2602c69:ProjectViewProjectNode" />
101 |               <item name="javavscript代码段" type="462c0819:PsiDirectoryNode" />
102 |             </path>
103 |           </expand>
104 |           <select />
105 |         </subPane>
106 |       </pane>
107 |     </panes>
108 |   </component>
109 |   <component name="PropertiesComponent">
110 |     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
111 |     <property name="WebServerToolWindowFactoryState" value="false" />
112 |     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
113 |     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
114 |     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
115 |     <property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
116 |   </component>
117 |   <component name="RunDashboard">
118 |     <option name="ruleStates">
119 |       <list>
120 |         <RuleState>
121 |           <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
122 |         </RuleState>
123 |         <RuleState>
124 |           <option name="name" value="StatusDashboardGroupingRule" />
125 |         </RuleState>
126 |       </list>
127 |     </option>
128 |   </component>
129 |   <component name="SvnConfiguration">
130 |     <configuration />
131 |   </component>
132 |   <component name="TaskManager">
133 |     <task active="true" id="Default" summary="Default task">
134 |       <changelist id="f3accd2f-68a5-44ec-a874-6eccee20b808" name="Default Changelist" comment="" />
135 |       <created>1558078165783</created>
136 |       <option name="number" value="Default" />
137 |       <option name="presentableId" value="Default" />
138 |       <updated>1558078165783</updated>
139 |       <workItem from="1558078167108" duration="2392000" />
140 |       <workItem from="1558089573184" duration="99000" />
141 |       <workItem from="1558089692687" duration="73000" />
142 |       <workItem from="1558089786485" duration="7000" />
143 |       <workItem from="1558163626712" duration="1664000" />
144 |       <workItem from="1558691629613" duration="239000" />
145 |     </task>
146 |     <servers />
147 |   </component>
148 |   <component name="TimeTrackingManager">
149 |     <option name="totallyTimeSpent" value="4235000" />
150 |   </component>
151 |   <component name="ToolWindowManager">
152 |     <frame x="-7" y="-7" width="1295" height="695" extended-state="6" />
153 |     <layout>
154 |       <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.24980111" />
155 |       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
156 |       <window_info id="Favorites" order="2" side_tool="true" />
157 |       <window_info anchor="bottom" id="Message" order="0" />
158 |       <window_info anchor="bottom" id="Find" order="1" />
159 |       <window_info anchor="bottom" id="Run" order="2" />
160 |       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
161 |       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
162 |       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
163 |       <window_info anchor="bottom" id="TODO" order="6" />
164 |       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
165 |       <window_info anchor="bottom" id="Version Control" order="8" />
166 |       <window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.6792115" />
167 |       <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
168 |       <window_info anchor="bottom" id="Tail" order="11" />
169 |       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
170 |       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
171 |       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
172 |     </layout>
173 |   </component>
174 |   <component name="TypeScriptGeneratedFilesManager">
175 |     <option name="version" value="1" />
176 |   </component>
177 |   <component name="editorHistoryManager">
178 |     <entry file="file://$PROJECT_DIR$/type.js">
179 |       <provider selected="true" editor-type-id="text-editor">
180 |         <state relative-caret-position="484">
181 |           <caret line="24" selection-start-line="24" selection-end-line="24" />
182 |           <folding>
183 |             <element signature="n#!!doc" expanded="true" />
184 |           </folding>
185 |         </state>
186 |       </provider>
187 |     </entry>
188 |     <entry file="file://$PROJECT_DIR$/shallowCopy.js">
189 |       <provider selected="true" editor-type-id="text-editor">
190 |         <state relative-caret-position="308">
191 |           <caret line="14" selection-start-line="14" selection-end-line="14" />
192 |         </state>
193 |       </provider>
194 |     </entry>
195 |     <entry file="file://$PROJECT_DIR$/deepCopy.js">
196 |       <provider selected="true" editor-type-id="text-editor">
197 |         <state relative-caret-position="242">
198 |           <caret line="11" selection-start-line="11" selection-end-line="11" />
199 |         </state>
200 |       </provider>
201 |     </entry>
202 |     <entry file="file://$PROJECT_DIR$/flatten.js">
203 |       <provider selected="true" editor-type-id="text-editor">
204 |         <state relative-caret-position="330">
205 |           <caret line="15" selection-start-line="15" selection-end-line="15" />
206 |         </state>
207 |       </provider>
208 |     </entry>
209 |     <entry file="file://$PROJECT_DIR$/debounce.js">
210 |       <provider selected="true" editor-type-id="text-editor">
211 |         <state relative-caret-position="42">
212 |           <caret line="15" column="58" selection-start-line="15" selection-start-column="58" selection-end-line="15" selection-end-column="58" />
213 |         </state>
214 |       </provider>
215 |     </entry>
216 |   </component>
217 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | # javascript-code-segment
   2 | 
   3 | 
   4 | 本系列会从面试的角度出发围绕JavaScript，Node.js(npm包)以及框架三个方面来对常见的模拟实现进行总结，具体源代码放在github项目上，长期更新和维护
   5 | ![前端面试常见手写](./images/1.png)
   6 | # 数组去重
   7 | 
   8 | （一维)数组去重最原始的方法就是使用双层循环，分别循环原始数组和新建数组；或者我们可以使用`indexOf`来简化内层的循环；或者可以将原始数组排序完再来去重，这样会减少一个循环，只需要比较前后两个数即可；当然我们可以使用`ES5`,`ES6`的方法来简化去重的写法，比如我们可以使用`filter`来简化内层循环，或者使用`Set`、`Map`、扩展运算符这些用起来更简单的方法，但是效率上应该不会比原始方法好。二维数组的去重可以在上面方法的基础上再判断元素是不是数组，如果是的话，就进行递归处理。
   9 | 
  10 | ### 双层循环
  11 | 
  12 | ```javascript
  13 | var array = [1, 1, '1', '1'];
  14 | 
  15 | function unique(array) {
  16 |     var res = [];
  17 |     for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
  18 |         for (var j = 0, resLen = res.length; j < resLen; j++ ) {
  19 |             if (array[i] === res[j]) {
  20 |                 break;
  21 |             }
  22 |         }
  23 |         if (j === resLen) {
  24 |             res.push(array[i])
  25 |         }
  26 |     }
  27 |     return res;
  28 | }
  29 | 
  30 | console.log(unique(array)); // [1, "1"]
  31 | ```
  32 | 
  33 | ### 利用indexOf
  34 | 
  35 | ```javascript
  36 | var array = [1, 1, '1'];
  37 | 
  38 | function unique(array) {
  39 |     var res = [];
  40 |     for (var i = 0, len = array.length; i < len; i++) {
  41 |         var current = array[i];
  42 |         if (res.indexOf(current) === -1) {
  43 |             res.push(current)
  44 |         }
  45 |     }
  46 |     return res;
  47 | }
  48 | 
  49 | console.log(unique(array));
  50 | ```
  51 | 
  52 | ### 排序后去重
  53 | 
  54 | ```javascript
  55 | var array = [1, 1, '1'];
  56 | 
  57 | function unique(array) {
  58 |     var res = [];
  59 |     var sortedArray = array.concat().sort();
  60 |     var seen;
  61 |     for (var i = 0, len = sortedArray.length; i < len; i++) {
  62 |         // 如果是第一个元素或者相邻的元素不相同
  63 |         if (!i || seen !== sortedArray[i]) {
  64 |             res.push(sortedArray[i])
  65 |         }
  66 |         seen = sortedArray[i];
  67 |     }
  68 |     return res;
  69 | }
  70 | 
  71 | console.log(unique(array));
  72 | ```
  73 | 
  74 | ### filter
  75 | 
  76 | `filter`可以用来简化外层循环
  77 | 
  78 | **使用indexOf：**
  79 | 
  80 | ```javascript
  81 | var array = [1, 2, 1, 1, '1'];
  82 | 
  83 | function unique(array) {
  84 |     var res = array.filter(function(item, index, array){
  85 |         return array.indexOf(item) === index;
  86 |     })
  87 |     return res;
  88 | }
  89 | 
  90 | console.log(unique(array));
  91 | ```
  92 | 
  93 | **排序去重：**
  94 | 
  95 | ```javascript
  96 | var array = [1, 2, 1, 1, '1'];
  97 | 
  98 | function unique(array) {
  99 |     return array.concat().sort().filter(function(item, index, array){
 100 |         return !index || item !== array[index - 1]
 101 |     })
 102 | }
 103 | 
 104 | console.log(unique(array));
 105 | ```
 106 | 
 107 | ### ES6方法
 108 | 
 109 | **Set：**
 110 | 
 111 | ```javascript
 112 | var array = [1, 2, 1, 1, '1'];
 113 | 
 114 | function unique(array) {
 115 |    return Array.from(new Set(array));
 116 | }
 117 | 
 118 | console.log(unique(array)); // [1, 2, "1"]
 119 | ```
 120 | 
 121 | 再简化下
 122 | 
 123 | ```javascript
 124 | function unique(array) {
 125 |     return [...new Set(array)];
 126 | }
 127 | 
 128 | //或者
 129 | var unique = (a) => [...new Set(a)]
 130 | ```
 131 | 
 132 | **Map：**
 133 | 
 134 | ```javascript
 135 | function unique (arr) {
 136 |     const seen = new Map()
 137 |     return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
 138 | }
 139 | ```
 140 | 
 141 | # 类型判断
 142 | 
 143 | 类型判断需要注意以下几点
 144 | 
 145 | - `typeof`对六个基本数据类型`Undefined`、`Null`、`Boolean`、`Number`、`String`、`Object`（大写）返回的结果是
 146 | 
 147 |   `undefined`、`object`、`boolean`、`number`、`string`、`object`（小写），可以看到`Null`和`Object` 类型都返回了 `object` 字符串；`typeof`却能检测出函数类型；**综上，`typeof`能检测出六种类型，但是不能检测出`null`类型和`Object`下细分的类型，如`Array`，`Function`，`Date`，`RegExp`,`Error`等**。
 148 | 
 149 | - `Object.prototype.toString`的作用非常强大，它能检测出基本数据类型以及`Object`下的细分类型，甚至像
 150 |   `Math`,`JSON`,`arguments`它都能检测出它们的具体类型，它返回结果形式例如`[object Number] `(注意最后的数据类型是大写).**所以，`Object.prototype.toString`基本上能检测出所有的类型了，只不过有时需要考虑到兼容性低版本浏览器的问题。**
 151 | 
 152 | ### 通用API
 153 | 
 154 | ```javascript
 155 |     
 156 | // 该类型判断函数可以判断六种基本数据类型以及Boolean Number String Function Array Date RegExp Object Error，
 157 | // 其他类型因为遇到类型判断的情况较少所以都会返回object,不在进行详细的判断
 158 | //  比如ES6新增的Symbol，Map，Set等类型
 159 | var classtype = {};
 160 | 
 161 | 
 162 | "Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item) {
 163 |     classtype["[object " + item + "]"] = item.toLowerCase();
 164 | })
 165 | 
 166 | 
 167 | function type(obj) {
 168 |     // 解决IE6中null和undefined会被Object.prototype.toString识别成[object Object]
 169 |     if (obj == null) {
 170 |         return obj + "";
 171 |     }
 172 | 
 173 |     //如果是typeof后类型为object下的细分类型(Array,Function,Date,RegExp,Error)或者是Object类型，则要利用Object.prototype.toString
 174 |     //由于ES6新增的Symbol，Map，Set等类型不在classtype列表中，所以使用type函数，返回的结果会是object
 175 |     return typeof obj === "object" || typeof obj === "function" ?
 176 |         classtype[Object.prototype.toString.call(obj)] || "object" :
 177 |         typeof obj;
 178 | }
 179 | ```
 180 | 
 181 | ### 判断空对象
 182 | 
 183 | 判断是否有属性，`for`循环一旦执行，就说明有属性，此时返回`false`
 184 | 
 185 | ```javascript
 186 | function isEmptyObject( obj ) {
 187 |         var name;
 188 |         for ( name in obj ) {
 189 |             return false;
 190 |         }
 191 |         return true;
 192 | }
 193 | 
 194 | console.log(isEmptyObject({})); // true
 195 | console.log(isEmptyObject([])); // true
 196 | console.log(isEmptyObject(null)); // true
 197 | console.log(isEmptyObject(undefined)); // true
 198 | console.log(isEmptyObject(1)); // true
 199 | console.log(isEmptyObject('')); // true
 200 | console.log(isEmptyObject(true)); // true
 201 | ```
 202 | 
 203 | 我们可以看出`isEmptyObject`实际上判断的并不仅仅是空对象。但是既然` jQuery `是这样写，可能是因为考虑到实际开发中 `isEmptyObject `用来判断 {} 和 {a: 1} 是足够的吧。如果真的是只判断 {}，完全可以结合上篇写的 `type `函数筛选掉不适合的情况。
 204 | 
 205 | ### 判断Window对象
 206 | 
 207 | `Window`对象有一个`window`属性指向自身，可以利用这个特性来判断是否是`Window`对象
 208 | 
 209 | ```javascript
 210 | function isWindow( obj ) {
 211 |     return obj != null && obj === obj.window;
 212 | }
 213 | ```
 214 | 
 215 | ### 判断数组
 216 | 
 217 | `isArray`是数组类型内置的数据类型判断函数，但是会有兼容性问题，一个`polyfill`如下
 218 | 
 219 | ```javascript
 220 | isArray = Array.isArray || function(array){
 221 |   return Object.prototype.toString.call(array) === '[object Array]';
 222 | }
 223 | ```
 224 | 
 225 | ### 判断类数组
 226 | 
 227 | `jquery`实现的`isArrayLike`,数组和类数组都会返回`true`。所如果` isArrayLike `返回`true`，至少要满足三个条件之一：
 228 | 
 229 | 1. 是数组
 230 | 
 231 | 2. 长度为 0
 232 |    比如下面情况,如果我们去掉length === 0 这个判断，就会打印 `false`，然而我们都知道 `arguments` 是一个类数组对象，这里是应该返回 `true` 的
 233 | 
 234 |    ```javascript
 235 |    function a(){
 236 |        console.log(isArrayLike(arguments))
 237 |    }
 238 |    a();
 239 |    ```
 240 | 
 241 | 3. `lengths` 属性是大于 0 的数字类型，并且`obj[length - 1]`必须存在(考虑到arr = [,,3]的情况)
 242 | 
 243 | ```javascript
 244 | function isArrayLike(obj) {
 245 | 
 246 |     // obj 必须有 length属性
 247 |     var length = !!obj && "length" in obj && obj.length;
 248 |     var typeRes = type(obj);
 249 | 
 250 |     // 排除掉函数和 Window 对象
 251 |     if (typeRes === "function" || isWindow(obj)) {
 252 |         return false;
 253 |     }
 254 | 
 255 |     return typeRes === "array" || length === 0 ||
 256 |         typeof length === "number" && length > 0 && (length - 1) in obj;
 257 | }
 258 | ```
 259 | 
 260 | ### 判断NaN
 261 | 
 262 | 判断一个数是不是` NaN `不能单纯地使用 === 这样来判断, 因为` NaN `不与任何数相等, 包括自身,注意在`ES6`的`isNaN`中只有值为数字类型使用`NaN`才会返回`true`
 263 | 
 264 | ```javascript
 265 | isNaN: function(value){
 266 |   return isNumber(value) && isNaN(value);
 267 | }
 268 | ```
 269 | 
 270 | ### 判断DOM元素
 271 | 
 272 | 利用`DOM`对象特有的`nodeType`属性（
 273 | 
 274 | ```javascript
 275 | isElement: function(obj){
 276 |   return !!(obj && obj.nodeType === 1);
 277 |     // 两次感叹号将值转化为布尔值
 278 | }
 279 | ```
 280 | 
 281 | ### 判断arguments对象
 282 | 
 283 | 低版本的浏览器中`argument`对象通过`Object.prototype.toString`判断后返回的是`[object Object]`,所以需要兼容
 284 | 
 285 | ```javascript
 286 | isArguments: function(obj){
 287 |   return Object.prototype.toString.call(obj) === '[object Arguments]' || (obj != null && Object.hasOwnProperty.call(obj, 'callee'));
 288 | }
 289 | ```
 290 | 
 291 | # 深浅拷贝
 292 | 
 293 | 如果是数组，实现浅拷贝，比可以`slice`，`concat`返回一个新数组的特性来实现；实现深拷贝，可以利用`JSON.parse`和`JSON.stringify`来实现，但是有一个问题，不能拷贝函数（此时拷贝后返回的数组为`null`）。上面的方法都属于技巧，下面考虑怎么实现一个对象或者数组的深浅拷贝
 294 | 
 295 | ### 浅拷贝
 296 | 
 297 | 思路很简单，遍历对象，然后把属性和属性值都放在一个新的对象就OK了
 298 | 
 299 | ```javascript
 300 | var shallowCopy = function(obj) {
 301 |     // 只拷贝对象
 302 |     if (typeof obj !== 'object') return;
 303 |     // 根据obj的类型判断是新建一个数组还是对象
 304 |     var newObj = obj instanceof Array ? [] : {};
 305 |     // 遍历obj，并且判断是obj的属性才拷贝
 306 |     for (var key in obj) {
 307 |         if (obj.hasOwnProperty(key)) {
 308 |             newObj[key] = obj[key];
 309 |         }
 310 |     }
 311 |     return newObj;
 312 | }
 313 | ```
 314 | 
 315 | ### 深拷贝
 316 | 
 317 | 思路也很简单，就是在拷贝的时候判断一下属性值的类型，如果是对象，就递归调用深浅拷贝函数就ok了
 318 | 
 319 | ```javascript
 320 | var deepCopy = function(obj) {
 321 |     if (typeof obj !== 'object') return;
 322 |     var newObj = obj instanceof Array ? [] : {};
 323 |     for (var key in obj) {
 324 |         if (obj.hasOwnProperty(key)) {
 325 |             newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
 326 |         }
 327 |     }
 328 |     return newObj;
 329 | }
 330 | ```
 331 | 
 332 | # 扁平化
 333 | 
 334 | ### 递归
 335 | 
 336 | 循环数组元素，如果还是一个数组，就递归调用该方法
 337 | 
 338 | ```javascript
 339 | // 方法 1
 340 | var arr = [1, [2, [3, 4]]];
 341 | 
 342 | function flatten(arr) {
 343 |     var result = [];
 344 |     for (var i = 0, len = arr.length; i < len; i++) {
 345 |         if (Array.isArray(arr[i])) {
 346 |             result = result.concat(flatten(arr[i]))
 347 |         }
 348 |         else {
 349 |             result.push(arr[i])
 350 |         }
 351 |     }
 352 |     return result;
 353 | }
 354 | 
 355 | 
 356 | console.log(flatten(arr))
 357 | ```
 358 | 
 359 | ### toString()
 360 | 
 361 | 如果数组的元素都是数字，可以使用该方法
 362 | 
 363 | ```javascript
 364 | // 方法2
 365 | var arr = [1, [2, [3, 4]]];
 366 | 
 367 | function flatten(arr) {
 368 |     return arr.toString().split(',').map(function(item){
 369 |         return +item // +会使字符串发生类型转换
 370 |     })
 371 | }
 372 | 
 373 | console.log(flatten(arr))
 374 | ```
 375 | 
 376 | ### reduce()
 377 | 
 378 | ```javascript
 379 | // 方法3
 380 | var arr = [1, [2, [3, 4]]];
 381 | 
 382 | function flatten(arr) {
 383 |     return arr.reduce(function(prev, next){
 384 |         return prev.concat(Array.isArray(next) ? flatten(next) : next)
 385 |     }, [])
 386 | }
 387 | 
 388 | console.log(flatten(arr))
 389 | ```
 390 | 
 391 | ### ...
 392 | 
 393 | ```javascript
 394 | // 扁平化一维数组
 395 | var arr = [1, [2, [3, 4]]];
 396 | console.log([].concat(...arr)); // [1, 2, [3, 4]]
 397 | 
 398 | // 可以扁平化多维数组
 399 | var arr = [1, [2, [3, 4]]];
 400 | 
 401 | function flatten(arr) {
 402 | 
 403 |     while (arr.some(item => Array.isArray(item))) {
 404 |         arr = [].concat(...arr);
 405 |     }
 406 | 
 407 |     return arr;
 408 | }
 409 | 
 410 | console.log(flatten(arr))
 411 | ```
 412 | 
 413 | # 柯里化
 414 | 
 415 | ### 通用版
 416 | 
 417 | ```javascript
 418 | function curry(fn, args) {
 419 |     var length = fn.length;
 420 |     var args = args || [];
 421 |     return function(){
 422 |         newArgs = args.concat(Array.prototype.slice.call(arguments));
 423 |         if (newArgs.length < length) {
 424 |             return curry.call(this,fn,newArgs);
 425 |         }else{
 426 |             return fn.apply(this,newArgs);
 427 |         }
 428 |     }
 429 | }
 430 | 
 431 | function multiFn(a, b, c) {
 432 |     return a * b * c;
 433 | }
 434 | 
 435 | var multi = curry(multiFn);
 436 | 
 437 | multi(2)(3)(4);
 438 | multi(2,3,4);
 439 | multi(2)(3,4);
 440 | multi(2,3)(4);
 441 | 
 442 | ```
 443 | 
 444 | ### ES6版
 445 | 
 446 | ```javascript
 447 | const curry = (fn, arr = []) => (...args) => (
 448 |   arg => arg.length === fn.length
 449 |     ? fn(...arg)
 450 |     : curry(fn, arg)
 451 | )([...arr, ...args])
 452 | 
 453 | let curryTest=curry((a,b,c,d)=>a+b+c+d)
 454 | curryTest(1,2,3)(4) //返回10
 455 | curryTest(1,2)(4)(3) //返回10
 456 | curryTest(1,2)(3,4) //返回10
 457 | ```
 458 | 
 459 | # 防抖与节流
 460 | 
 461 | ### 防抖
 462 | 
 463 | ```javascript
 464 | function debounce(fn, wait) {
 465 |     var timeout = null;
 466 |     return function() {
 467 |         if(timeout !== null) 
 468 |         {
 469 |                 clearTimeout(timeout);
 470 |         }
 471 |         timeout = setTimeout(fn, wait);
 472 |     }
 473 | }
 474 | // 处理函数
 475 | function handle() {
 476 |     console.log(Math.random()); 
 477 | }
 478 | // 滚动事件
 479 | window.addEventListener('scroll', debounce(handle, 1000));
 480 | ```
 481 | 
 482 | ### 节流
 483 | 
 484 | #### 利用时间戳实现
 485 | 
 486 | ```javascript
 487 |    var throttle = function(func, delay) {
 488 |             var prev = Date.now();
 489 |             return function() {
 490 |                 var context = this;
 491 |                 var args = arguments;
 492 |                 var now = Date.now();
 493 |                 if (now - prev >= delay) {
 494 |                     func.apply(context, args);
 495 |                     prev = Date.now();
 496 |                 }
 497 |             }
 498 |         }
 499 |         function handle() {
 500 |             console.log(Math.random());
 501 |         }
 502 |         window.addEventListener('scroll', throttle(handle, 1000));
 503 | ```
 504 | 
 505 | #### 利用定时器实现
 506 | 
 507 | ```javascript
 508 |    var throttle = function(func, delay) {
 509 |             var timer = null;
 510 |             return function() {
 511 |                 var context = this;
 512 |                 var args = arguments;
 513 |                 if (!timer) {
 514 |                     timer = setTimeout(function() {
 515 |                         func.apply(context, args);
 516 |                         timer = null;
 517 |                     }, delay);
 518 |                 }
 519 |             }
 520 |         }
 521 |         function handle() {
 522 |             console.log(Math.random());
 523 |         }
 524 |         window.addEventListener('scroll', throttle(handle, 1000));
 525 | ```
 526 | 
 527 | # 模拟new
 528 | 
 529 | - `new`产生的实例可以访问`Constructor`里的属性，也可以访问到`Constructor.prototype`中的属性，前者可以通过`apply`来实现，后者可以通过将实例的`proto`属性指向构造函数的`prototype`来实现
 530 | - 我们还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么
 531 | 
 532 | ```javascript
 533 | function New(){
 534 |     var obj=new Object();
 535 |     //取出第一个参数，就是我们要传入的构造函数；此外因为shift会修改原数组，所以arguments会被去除第一个参数
 536 |     Constructor=[].shift.call(arguments);
 537 |     //将obj的原型指向构造函数，这样obj就可以访问到构造函数原型中的属性
 538 |     obj._proto_=Constructor.prototype;
 539 |     //使用apply改变构造函数this的指向到新建的对象，这样obj就可以访问到构造函数中的属性
 540 |     var ret=Constructor.apply(obj,arguments);
 541 |     //要返回obj
 542 |     return typeof ret === 'object' ? ret:obj;
 543 | }
 544 | ```
 545 | 
 546 | ```javascript
 547 | function Otaku(name,age){
 548 | 	this.name=name;
 549 | 	this.age=age;
 550 | 	this.habit='Games'
 551 | }
 552 | 
 553 | Otaku.prototype.sayYourName=function(){
 554 |     console.log("I am" + this.name);
 555 | }
 556 | 
 557 | var person=objectFactory(Otaku,'Kevin','18')
 558 | 
 559 | console.log(person.name)//Kevin
 560 | console.log(person.habit)//Games
 561 | console.log(person.strength)//60
 562 | ```
 563 | 
 564 | # 模拟call
 565 | 
 566 | - `call()`方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法
 567 | - 模拟的步骤是：将函数设为对象的属性—>执行该函数—>删除该函数
 568 | - `this`参数可以传`null`，当为`null`的时候，视为指向`window`
 569 | - 函数是可以有返回值的
 570 | 
 571 | ### 简单版
 572 | 
 573 | ```javascript
 574 | var foo = {
 575 |     value: 1,
 576 |     bar: function() {
 577 |         console.log(this.value)
 578 |     }
 579 | }
 580 | foo.bar() // 1
 581 | ```
 582 | 
 583 | ### 完善版
 584 | 
 585 | ```javascript
 586 | Function.prototype.call2 = function(context) {
 587 |     var context=context||window
 588 |     context.fn = this;
 589 |     let args = [...arguments].slice(1);
 590 |     let result = context.fn(...args);
 591 |     delete context.fn;
 592 |     return result;
 593 | }
 594 | let foo = {
 595 |     value: 1
 596 | }
 597 | function bar(name, age) {
 598 |     console.log(name)
 599 |     console.log(age)
 600 |     console.log(this.value);
 601 | }
 602 | //表示bar函数的执行环境是foo，即bar函数里面的this代表foo,this.value相当于foo.value,然后给bar函数传递两个参数
 603 | bar.call2(foo, 'black', '18') // black 18 1
 604 | ```
 605 | 
 606 | # 模拟apply
 607 | 
 608 | - `apply()`的实现和`call()`类似，只是参数形式不同
 609 | 
 610 | ```javascript
 611 | Function.prototype.apply2 = function(context = window) {
 612 |     context.fn = this
 613 |     let result;
 614 |     // 判断是否有第二个参数
 615 |     if(arguments[1]) {
 616 |         result = context.fn(...arguments[1])
 617 |     } else {
 618 |         result = context.fn()
 619 |     }
 620 |     delete context.fn
 621 |     return result
 622 | }
 623 | ```
 624 | 
 625 | # 模拟bind
 626 | 
 627 | ```javascript
 628 | Function.prototype.bind2=function(context){
 629 |     var self=thisl
 630 |     var args=Array.prototype.slice.call(arguments,1);
 631 |     
 632 |     var fNOP=function(){};
 633 |     var fBound=function(){
 634 |         var bindArgs=Array.prototype.slice.call(arguments);
 635 |         return self.apply(this instanceof fNOP ? this : context, args.concat(bindAt))
 636 |     }
 637 | }
 638 | ```
 639 | 
 640 | # 模拟instanceof
 641 | 
 642 | ```javascript
 643 | function instanceOf(left,right) {
 644 | 
 645 |     let proto = left.__proto__;
 646 |     let prototype = right.prototype
 647 |     while(true) {
 648 |         if(proto === null) return false
 649 |         if(proto === prototype) return true
 650 |         proto = proto.__proto__;
 651 |     }
 652 | }
 653 | ```
 654 | 
 655 | # 模拟JSON.stringify
 656 | 
 657 | > JSON.stringify(value[, replacer [, space]])
 658 | 
 659 | - `Boolean | Number| String` 类型会自动转换成对应的原始值。
 660 | - `undefined`、任意函数以及`symbol`，会被忽略（出现在非数组对象的属性值中时），或者被转换成 `null`（出现在数组中时）。
 661 | - 不可枚举的属性会被忽略
 662 | - 如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。
 663 | 
 664 | ```javascript
 665 | function jsonStringify(obj) {
 666 |     let type = typeof obj;
 667 |     if (type !== "object") {
 668 |         if (/string|undefined|function/.test(type)) {
 669 |             obj = '"' + obj + '"';
 670 |         }
 671 |         return String(obj);
 672 |     } else {
 673 |         let json = []
 674 |         let arr = Array.isArray(obj)
 675 |         for (let k in obj) {
 676 |             let v = obj[k];
 677 |             let type = typeof v;
 678 |             if (/string|undefined|function/.test(type)) {
 679 |                 v = '"' + v + '"';
 680 |             } else if (type === "object") {
 681 |                 v = jsonStringify(v);
 682 |             }
 683 |             json.push((arr ? "" : '"' + k + '":') + String(v));
 684 |         }
 685 |         return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
 686 |     }
 687 | }
 688 | jsonStringify({x : 5}) // "{"x":5}"
 689 | jsonStringify([1, "false", false]) // "[1,"false",false]"
 690 | jsonStringify({b: undefined}) // "{"b":"undefined"}"
 691 | ```
 692 | 
 693 | # 模拟JSON.parse
 694 | 
 695 | > JSON.parse(text[, reviver])
 696 | 
 697 | 用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
 698 | 
 699 | ### 利用eval
 700 | 
 701 | ```javascript
 702 | function jsonParse(opt) {
 703 |     return eval('(' + opt + ')');
 704 | }
 705 | jsonParse(jsonStringify({x : 5}))
 706 | // Object { x: 5}
 707 | jsonParse(jsonStringify([1, "false", false]))
 708 | // [1, "false", falsr]
 709 | jsonParse(jsonStringify({b: undefined}))
 710 | // Object { b: "undefined"}
 711 | ```
 712 | 
 713 | > 避免在不必要的情况下使用 `eval`，eval() 是一个危险的函数， 他执行的代码拥有着执行者的权利。如果你用 eval()运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码
 714 | 
 715 | ### 利用new Function()
 716 | 
 717 | `Function`与`eval`有相同的字符串参数特性,`eval` 与 `Function` 都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。
 718 | 
 719 | > var func = new Function(arg1, arg2, ..., functionBody)
 720 | 
 721 | ```javascript
 722 | var jsonStr = '{ "age": 20, "name": "jack" }'
 723 | var json = (new Function('return ' + jsonStr))();
 724 | ```
 725 | 
 726 | # 创建对象
 727 | 
 728 | 创建自定义对象最简单的方式就是创建一个`Object`的实例，然后再为它添加属性和方法，早期的开发人员经常使用这种模式来创建对象，后来对象字面量的方法成了创建对象的首选模式。虽然`object构造函数`或者`对象字面量`的方法都可以用来创建对象，但是这些方法使用同一个接口创建很多对象，会产生大量的重复代码。为了解决这个问题，人们开始使用各种模式来创建对象，在这些模式中，一般推荐使用四种方式，包括`构造函数模式`、`原型模式`、`构造函数和原型组合模式`，`动态原型模式`，其他的方式，包括`工厂模式`、`寄生构造函数模式`、`稳妥构造函数模式`平时使用的较少。而这些方式中，用的最多最推荐的应是**组合模式和动态原型模式**
 729 | 
 730 | ### 构造函数和原型组合模式
 731 | 
 732 | **优点：**
 733 | 
 734 | 1. 解决了原型模式对于引用对象的缺点
 735 | 2. 解决了原型模式没有办法传递参数的缺点
 736 | 3. 解决了构造函数模式不能共享方法的缺点
 737 | 
 738 | ```javascript
 739 | function Person(name) {
 740 |   this.name = name
 741 |   this.friends = ['lilei']
 742 | }
 743 | Person.prototype.say = function() {
 744 |   console.log(this.name)
 745 | }
 746 | 
 747 | var person1 = new Person('hanmeimei')
 748 | person1.say() //hanmeimei
 749 | ```
 750 | 
 751 | ### 动态原型模式
 752 | 
 753 | **优点：**
 754 | 
 755 | 1. 可以在初次调用构造函数的时候就完成原型对象的修改
 756 | 2. 修改能体现在所有的实例中
 757 | 
 758 | ```javascript
 759 | function Person(name) {
 760 |   this.name = name
 761 |     // 检测say 是不是一个函数
 762 |     // 实际上只在当前第一次时候没有创建的时候在原型上添加sayName方法
 763 |     //因为构造函数执行时，里面的代码都会执行一遍，而原型有一个就行，不用每次都重复，所以仅在第一执行时生成一个原型，后面执行就不必在生成，所以就不会执行if包裹的函数，
 764 | //其次为什么不能再使用字面量的写法，我们都知道，使用构造函数其实是把new出来的对象作用域绑定在构造函数上，而字面量的写法，会重新生成一个新对象，就切断了两者的联系！
 765 |   if(typeof this.say != 'function') {
 766 |     Person.prototype.say = function(
 767 |     alert(this.name)
 768 |   }
 769 | }
 770 | ```
 771 | # 继承
 772 | 
 773 | `原型链继承`不仅会带来引用缺陷，而且我们也无法为不同的实例初始化继承来的属性；`构造函数继承`方式可以避免类式继承的缺陷，但是我们无法获取到父类的共有方法，也就是通过原型prototype绑定的方法；`组合继承`解决了上面两种方式的存在的问题，但是它调用了两次父类的构造函数；`寄生组合式继承`强化的部分就是在组合继承的基础上减少一次多余的调用父类的构造函数。**推荐使用组合继承方式、寄生组合方式和ES6 extends继承，建议在实际生产中直接使用ES6的继承方式。**
 774 | 
 775 | ### 组合继承
 776 | 
 777 | ```javascript
 778 | // 声明父类   
 779 | function Animal(color) {    
 780 |   this.name = 'animal';    
 781 |   this.type = ['pig','cat'];    
 782 |   this.color = color;   
 783 | }     
 784 | 
 785 | // 添加共有方法  
 786 | Animal.prototype.greet = function(sound) {    
 787 |   console.log(sound);   
 788 | }     
 789 | 
 790 | // 声明子类   
 791 | function Dog(color) { 
 792 |   // 构造函数继承    
 793 |   Animal.apply(this, arguments);   
 794 | }   
 795 | 
 796 | // 类式继承
 797 | Dog.prototype = new Animal();   
 798 | 
 799 | var dog = new Dog('白色');   
 800 | var dog2 = new Dog('黑色');     
 801 | 
 802 | dog.type.push('dog');   
 803 | console.log(dog.color); // "白色"
 804 | console.log(dog.type);  // ["pig", "cat", "dog"]
 805 | 
 806 | console.log(dog2.type); // ["pig", "cat"]
 807 | console.log(dog2.color);  // "黑色"
 808 | dog.greet('汪汪');  // "汪汪"
 809 | ```
 810 | 
 811 | 注：组合继承利用上面的方式会使得两次调用父类构造函数，其实我们可以通过Dog.prototype = Animal.prototype; Dog.prototype.constructor = Dog来优化组合继承，当然终极优化方式就是下面的寄生组合方式。想要了解组合继承具体优化的可以参考 [深入理解JavaScript原型链与继承](https://juejin.im/post/5c08ba1ff265da612577e862)
 812 | 
 813 | ### 寄生组合继承
 814 | 
 815 | ```javascript
 816 | function Animal(color) {
 817 |   this.color = color;
 818 |   this.name = 'animal';
 819 |   this.type = ['pig', 'cat'];
 820 | }
 821 | 
 822 | Animal.prototype.greet = function(sound) {
 823 |   console.log(sound);
 824 | }
 825 | 
 826 | 
 827 | function Dog(color) {
 828 |   Animal.apply(this, arguments);
 829 |   this.name = 'dog';
 830 | }
 831 | /* 注意下面两行 */
 832 | Dog.prototype = Object.create(Animal.prototype);
 833 | Dog.prototype.constructor = Dog;
 834 | 
 835 | Dog.prototype.getName = function() {
 836 |   console.log(this.name);
 837 | }
 838 | 
 839 | 
 840 | var dog = new Dog('白色');   
 841 | var dog2 = new Dog('黑色');     
 842 | 
 843 | dog.type.push('dog');   
 844 | console.log(dog.color);   // "白色"
 845 | console.log(dog.type);   // ["pig", "cat", "dog"]
 846 | 
 847 | console.log(dog2.type);  // ["pig", "cat"]
 848 | console.log(dog2.color);  // "黑色"
 849 | dog.greet('汪汪');  //  "汪汪"
 850 | ```
 851 | 
 852 | Object.create()的浅拷贝的作用类式下面的函数：
 853 | 
 854 | ```javascript
 855 | function create(obj) {
 856 |   function F() {};
 857 |   F.prototype = obj;
 858 |   return new F();
 859 | }
 860 | ```
 861 | 
 862 | 需注意一点，由于对Animal的原型进行了拷贝后赋给Dog.prototype，因此Dog.prototype上的`constructor`属性也被重写了，所以我们要修复这一个问题：
 863 | 
 864 | ```javascript
 865 | Dog.prototype.constructor = Dog;
 866 | ```
 867 | 
 868 | ### extends继承
 869 | 
 870 | ```javascript
 871 | class Animal {   
 872 |   constructor(color) {   
 873 |     this.color = color;   
 874 |   }   
 875 |   greet(sound) {   
 876 |     console.log(sound);   
 877 |   }  
 878 | }   
 879 | 
 880 | class Dog extends Animal {   
 881 |   constructor(color) {   
 882 |     super(color);   
 883 |     this.color = color;   
 884 |   }  
 885 | }   
 886 | 
 887 | let dog = new Dog('黑色');  
 888 | dog.greet('汪汪');  // "汪汪"
 889 | console.log(dog.color); // "黑色"
 890 | ```
 891 | 
 892 | # 模拟ajax
 893 | 
 894 | - `ajax`请求过程：创建`XMLHttpRequest`对象、连接服务器、发送请求、接收响应数据
 895 | - 创建后的`XMLHttpRequest`对象实例拥有很多方法和属性
 896 |   - `open`方法类似于初始化，并不会发起真正的请求；`send`方发送请求，并接受一个可选参数
 897 |   - 当请求方式为`post`时，可以将请求体的参数传入；当请求方式为`get`时，可以不传或传入`null`;
 898 |   - 不管是`get`和`post`，参数都需要通过`encodeURIComponent`编码后拼接
 899 | 
 900 | ### 通用版
 901 | 
 902 | ```javascript
 903 | //对请求data进行格式化处理
 904 | function formateData(data) {
 905 |     let arr = [];
 906 |     for (let key in data) {
 907 |         //避免有&,=,?字符，对这些字符进行序列化
 908 |         arr.push(encodeURIComponent(key) + '=' + data[key])
 909 |     }
 910 |     return arr.join('&');
 911 | }
 912 | 
 913 | function ajax(params) {
 914 |     //先对params进行处理，防止为空
 915 |     params = params || {};
 916 |     params.data = params.data || {};
 917 | 
 918 |     //普通GET,POST请求
 919 |     params.type = (params.type || 'GET').toUpperCase();
 920 |     params.data = formateData(params.data);
 921 |     //如果是在ie6浏览器，那么XMLHttoRequest是不存在的，应该调用ActiveXObject；
 922 |     let xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
 923 |     if (params.type === 'GET') {
 924 |         xhr.open(params.type, params.url + '?' + params.data, true);
 925 |         xhr.send();
 926 |     } else {
 927 |         xhr.open(params.type, params.url, true);
 928 |         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
 929 |         xhr.send(params.data);
 930 |     }
 931 |     // 这里有两种写法，第一种写法：当xhr.readyState===4的时候，会触发onload事件，直接通过onload事件 进行回调函数处理
 932 |     xhr.onload = function () {
 933 |         if (xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
 934 |             var res;
 935 | 
 936 |             if (params.success && params.success instanceof Function) {
 937 |                 res = JSON.parse(xhr.responseText);
 938 |                 params.success.call(xhr, res);
 939 |             }
 940 |         } else {
 941 |             if (params.error && params.error instanceof Function) {
 942 |                 res = xhr.responseText;
 943 |                 params.error.call(xhr, res);
 944 |             }
 945 |         }
 946 | 
 947 |     }
 948 |     //第二种写法，当xhr.readyState===4时候，说明请求成功返回了，进行成功回调
 949 |     xhr.onreadystatechange = function () {
 950 |         if (xhr.readyState === 4) {
 951 |             // 进行onload里面的处理函数
 952 |         }
 953 |     }
 954 | 
 955 | }
 956 | ```
 957 | 
 958 | ### promise版
 959 | 
 960 | ```javascript
 961 | // 使用promise实现一个简单的ajax
 962 | 
 963 | /**
 964 |  * 首先，可能会使用到的xhr方法或者说属性
 965 |  * onloadstart // 开始发送时触发
 966 |  * onloadend   // 发送结束时触发，无论成功不成功
 967 |  * onload      // 得到响应
 968 |  * onprogress  // 从服务器上下载数据，每50ms触发一次
 969 |  * onuploadprogress // 上传到服务器的回调
 970 |  * onerror     // 请求错误时触发
 971 |  * onabort     // 调用abort时候触发
 972 |  * status      // 返回状态码
 973 |  * setRequestHeader // 设置请求头
 974 |  * responseType // 请求传入的数据
 975 |  */
 976 | 
 977 | // 默认的ajax参数
 978 | let ajaxDefaultOptions = {
 979 |   url: '#', // 请求地址，默认为空
 980 |   method: 'GET', // 请求方式，默认为GET请求
 981 |   async: true, // 请求同步还是异步，默认异步
 982 |   timeout: 0, // 请求的超时时间
 983 |   dataType: 'text', // 请求的数据格式，默认为text
 984 |   data: null, // 请求的参数，默认为空
 985 |   headers: {}, // 请求头，默认为空
 986 |   onprogress: function () {}, // 从服务器下载数据的回调
 987 |   onuploadprogress: function () {}, // 处理上传文件到服务器的回调
 988 |   xhr: null // 允许函数外部创建xhr传入，但是必须不能是使用过的
 989 | };
 990 | 
 991 | function _ajax(paramOptions) {
 992 |   let options = {};
 993 |   for (const key in ajaxDefaultOptions) {
 994 |     options[key] = ajaxDefaultOptions[key];
 995 |   }
 996 |   // 如果传入的是否异步与默认值相同，就使用默认值，否则使用传入的参数
 997 |   options.async = paramOptions.async === ajaxDefaultOptions.async ? ajaxDefaultOptions.async : paramOptions.async;
 998 |   // 判断传入的method是否为GET或者POST,否则传入GET 或者可将判断写在promise内部，reject出去
 999 |   options.method = paramOptions.method ? ("GET" || "POST") : "GET";
1000 |   // 如果外部传入xhr，否则创建一个
1001 |   let xhr = options.xhr || new XMLHttpRequest();
1002 |   // return promise对象
1003 |   return new Promise(function (resolve, reject) {
1004 |     xhr.open(options.method, options.url, options.async);
1005 |     xhr.timeout = options.timeout;
1006 |     // 设置请求头
1007 |     for (const key in options.headers) {
1008 |       xhr.setRequestHeader(key, options.headers[key]);
1009 |     }
1010 |     // 注册xhr对象事件
1011 |     xhr.responseType = options.dataType;
1012 |     xhr.onprogress = options.onprogress;
1013 |     xhr.onuploadprogress = options.onuploadprogress;
1014 |     // 开始注册事件
1015 |     // 请求成功
1016 |     xhr.onloadend = function () {
1017 |       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
1018 |         resolve(xhr);
1019 |       } else {
1020 |         reject({
1021 |           errorType: "status_error",
1022 |           xhr: xhr
1023 |         });
1024 |       }
1025 |     };
1026 |     // 请求超时
1027 |     xhr.ontimeout = function () {
1028 |       reject({
1029 |         errorType: "timeout_error",
1030 |         xhr: xhr
1031 |       });
1032 |     }
1033 |     // 请求错误
1034 |     xhr.onerror = function () {
1035 |       reject({
1036 |         errorType: "onerror",
1037 |         xhr: xhr
1038 |       });
1039 |     }
1040 |     // abort错误(未明白，只知道是三种异常中的一种)
1041 |     xhr.onabort = function () {
1042 |       reject({
1043 |         errorType: "onabort",
1044 |         xhr: xhr
1045 |       });
1046 |     }
1047 |     // 捕获异常
1048 |     try {
1049 |       xhr.send(options.data);
1050 |     } catch (error) {
1051 |       reject({
1052 |         errorType: "send_error",
1053 |         error: error
1054 |       });
1055 |     }
1056 |   });
1057 | }
1058 | 
1059 | 
1060 | // 调用示例
1061 | _ajax({
1062 |   url: 'http://localhost:3000/suc',
1063 |   async: true,
1064 |   onprogress: function (evt) {
1065 |     console.log(evt.position / evt.total);
1066 |   },
1067 |   dataType: 'text/json'
1068 | }).then(
1069 |   function (xhr) {
1070 |     console.log(xhr.response);
1071 |   },
1072 |   function (e) {
1073 |     console.log(JSON.stringify(e))
1074 |   });
1075 | ```
1076 | 
1077 | # 模拟jsonp
1078 | ```
1079 | // foo 函数将会被调用 传入后台返回的数据
1080 | function foo(data) {
1081 |     console.log('通过jsonp获取后台数据:', data);
1082 |     document.getElementById('data').innerHTML = data;
1083 | }
1084 | /**
1085 |  * 通过手动创建一个 script 标签发送一个 get 请求
1086 |  * 并利用浏览器对 <script> 不进行跨域限制的特性绕过跨域问题
1087 |  */
1088 | (function jsonp() {
1089 |     let head = document.getElementsByTagName('head')[0]; // 获取head元素 把js放里面
1090 |     let js = document.createElement('script');
1091 |     js.src = 'http://domain:port/testJSONP?a=1&b=2&callback=foo'; // 设置请求地址
1092 |     head.appendChild(js); // 这一步会发送请求
1093 | })();
1094 | 
1095 | // 后台代码
1096 | // 因为是通过 script 标签调用的 后台返回的相当于一个 js 文件
1097 | // 根据前端传入的 callback 的函数名直接调用该函数
1098 | // 返回的是 'foo(3)'
1099 | function testJSONP(callback, a, b) {
1100 |   return `${callback}(${a + b})`;
1101 | }
1102 | 
1103 | ```
1104 | 
1105 | # 模拟发布订阅模式
1106 | ```
1107 | class Pubsub {
1108 |     constructor() {
1109 |         this.handles = {}
1110 |     }
1111 |     subscribe(type, handle) {
1112 |         if (!this.handles[type]) {
1113 |             this.handles[type] = []
1114 |         }
1115 |         this.handles[type].push(handle)
1116 |     }
1117 |     unsubscribe(type, handle) {
1118 |         let pos = this.handles[type].indexOf(handle)
1119 |         if (!handle) {
1120 |             this.handles.length = 0
1121 |         } else {
1122 |             ~pos && this.handles[type].splice(pos, 1)
1123 |         }
1124 |     }
1125 |     publish() {
1126 |         let type = Array.prototype.shift.call(arguments)
1127 |         this.handles[type].forEach(handle => {
1128 |             handle.apply(this, arguments)
1129 |         })
1130 |     }
1131 | }
1132 | 
1133 | const pub = new Pubsub()
1134 | pub.subscribe('a', function() {console.log('a', ...arguments)})
1135 | pub.publish('a', 1, 2, 3)
1136 | // a 1 2 3
1137 | ```
1138 | # 利用setTimeout模拟setInterval
1139 | 在`setTimeout`的方法里面又调用了一次`setTimeout`，就可以达到间歇调用的目的。
1140 | 那为什么建议使用`setTimeout`代替`setInterval`呢？`setTimeout`式的间歇调用和传统的`setInterval`间歇调用有什么区别呢？
1141 | 
1142 | 区别在于，`setInterval`间歇调用，是在前一个方法执行前，就开始计时，比如间歇时间是500ms，那么不管那时候前一个方法是否已经执行完毕，都会把后一个方法放入执行的序列中。这时候就会发生一个问题，假如前一个方法的执行时间超过500ms，加入是1000ms，那么就意味着，前一个方法执行结束后，后一个方法马上就会执行，因为此时间歇时间已经超过500ms了。
1143 | > “在开发环境下，很少使用间歇调用（setInterval），原因是后一个间歇调用很可能在前一个间歇调用结束前启动”
1144 | ### 简单版
1145 | 递归调用setTimeout函数即可
1146 | > 警告：在严格模式下，第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。当一个函数必须调用自身的时候, 避免使用 arguments.callee(), 通过要么给函数表达式一个名字,要么使用一个函数声明.
1147 | 
1148 | ```
1149 | var executeTimes = 0;
1150 | var intervalTime = 500;
1151 | //var intervalId = null;
1152 | 
1153 | 
1154 | setTimeout(timeOutFun,intervalTime);
1155 | 
1156 | function timeOutFun(){
1157 |     executeTimes++;
1158 |     console.log("doTimeOutFun——"+executeTimes);
1159 |     if(executeTimes<5){
1160 |         setTimeout(arguments.callee,intervalTime);
1161 |     }
1162 | }
1163 | 
1164 | 
1165 | <!--// 放开下面的注释运行setInterval的Demo-->
1166 | <!--intervalId = setInterval(intervalFun,intervalTime);-->
1167 | <!--function intervalFun(){-->
1168 | <!--    executeTimes++;-->
1169 | <!--    console.log("doIntervalFun——"+executeTimes);-->
1170 | <!--    if(executeTimes==5){-->
1171 | <!--        clearInterval(intervalId);-->
1172 | <!--    }-->
1173 | <!--}-->
1174 | 
1175 | ```
1176 | ### 增强版
1177 | ```
1178 | let timeMap = {}
1179 | let id = 0 // 简单实现id唯一
1180 | const mySetInterval = (cb, time) => {
1181 |   let timeId = id // 将timeId赋予id
1182 |   id++ // id 自增实现唯一id
1183 |   let fn = () => {
1184 |     cb()
1185 |     timeMap[timeId] = setTimeout(() => {
1186 |       fn()
1187 |     }, time)
1188 |   }
1189 |   timeMap[timeId] = setTimeout(fn, time)
1190 |   return timeId // 返回timeId
1191 | }
1192 | 
1193 | 
1194 | const myClearInterval = (id) => {
1195 |   clearTimeout(timeMap[id]) // 通过timeMap[id]获取真正的id
1196 |   delete timeMap[id]
1197 | }
1198 | ```
1199 | # Promise的模拟实现
1200 | ### Promise的实现
1201 | - **对于实现`then`方法，我们需要考虑到异步的情况**，即当`resolve`在`setTimeout`内执行，`then`时`state`还是`pending`状态，我们就需要在`then`调用的时候，将成功和失败存到各自的数组，一旦`reject`或`resolve`，就调用它们
1202 | - **另外一个要注意的地方是如何实现`then`方法的链式调用**，我们默认在第一个`then`方法里返回一个`promise`，源码中规定了一种方法，就是在`then`方法里面返回一个新的`promise`，称为`promise2：promise2=new Promise((resolve,reject)=>{})`
1203 |     - 将这个`promise2`返回的值传递到下一个`then`中
1204 |     - 如果返回一个普通的值，则将普通的值传递给下一个`then`中
1205 | - **`resolvePromise`函数的实现是一个关键点；`promise`规范中规定`onFullfilled()`或`onRejected()`的值，即第一个`then`返回的值，叫做`x`,判断`x`的函数叫做`resolvePromise`**。具体地， 首先，要看x是不是`promise`。如果是`promise`，则取它的结果，作为新的`promise2`成功的结果如果是普通值，直接作为`promise2`成功的结果所以要比较x和`promise2`，`resolvePromise`的参数有`promise2`（默认返回的`promise`）、`x`（我们自己`return`的对象）、`resolve`、`reject`；`resolve`和`reject`是`promise2`的
1206 | ```
1207 | class Promise{
1208 |   constructor(executor){
1209 |     this.state = 'pending';
1210 |     this.value = undefined;
1211 |     this.reason = undefined;
1212 |     this.onResolvedCallbacks = [];
1213 |     this.onRejectedCallbacks = [];
1214 |     let resolve = value => {
1215 |       if (this.state === 'pending') {
1216 |         this.state = 'fulfilled';
1217 |         this.value = value;
1218 |         this.onResolvedCallbacks.forEach(fn=>fn());
1219 |       }
1220 |     };
1221 |     let reject = reason => {
1222 |       if (this.state === 'pending') {
1223 |         this.state = 'rejected';
1224 |         this.reason = reason;
1225 |         this.onRejectedCallbacks.forEach(fn=>fn());
1226 |       }
1227 |     };
1228 |     try{
1229 |       executor(resolve, reject);
1230 |     } catch (err) {
1231 |       reject(err);
1232 |     }
1233 |   }
1234 |   then(onFulfilled,onRejected) {
1235 |     // onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
1236 |     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
1237 |     // onRejected如果不是函数，就忽略onRejected，直接扔出错误
1238 |     onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
1239 |     let promise2 = new Promise((resolve, reject) => {
1240 |       if (this.state === 'fulfilled') {
1241 |         // 异步
1242 |         setTimeout(() => {
1243 |           try {
1244 |             let x = onFulfilled(this.value);
1245 |             resolvePromise(promise2, x, resolve, reject);
1246 |           } catch (e) {
1247 |             reject(e);
1248 |           }
1249 |         }, 0);
1250 |       };
1251 |       if (this.state === 'rejected') {
1252 |         // 异步
1253 |         setTimeout(() => {
1254 |           // 如果报错
1255 |           try {
1256 |             let x = onRejected(this.reason);
1257 |             resolvePromise(promise2, x, resolve, reject);
1258 |           } catch (e) {
1259 |             reject(e);
1260 |           }
1261 |         }, 0);
1262 |       };
1263 |       if (this.state === 'pending') {
1264 |         this.onResolvedCallbacks.push(() => {
1265 |           // 异步
1266 |           setTimeout(() => {
1267 |             try {
1268 |               let x = onFulfilled(this.value);
1269 |               resolvePromise(promise2, x, resolve, reject);
1270 |             } catch (e) {
1271 |               reject(e);
1272 |             }
1273 |           }, 0);
1274 |         });
1275 |         this.onRejectedCallbacks.push(() => {
1276 |           // 异步
1277 |           setTimeout(() => {
1278 |             try {
1279 |               let x = onRejected(this.reason);
1280 |               resolvePromise(promise2, x, resolve, reject);
1281 |             } catch (e) {
1282 |               reject(e);
1283 |             }
1284 |           }, 0)
1285 |         });
1286 |       };
1287 |     });
1288 |     // 返回promise，完成链式
1289 |     return promise2;
1290 |   }
1291 | }
1292 | 
1293 | 
1294 | 
1295 | function resolvePromise(promise2, x, resolve, reject){
1296 |   // 循环引用报错
1297 |   if(x === promise2){
1298 |     // reject报错
1299 |     return reject(new TypeError('Chaining cycle detected for promise'));
1300 |   }
1301 |   // 防止多次调用
1302 |   let called;
1303 |   // x不是null 且x是对象或者函数
1304 |   if (x != null && (typeof x === 'object' || typeof x === 'function')) {
1305 |     try {
1306 |       // A+规定，声明then = x的then方法
1307 |       let then = x.then;
1308 |       // 如果then是函数，就默认是promise了
1309 |       if (typeof then === 'function') { 
1310 |         // 就让then执行 第一个参数是this   后面是成功的回调 和 失败的回调
1311 |         then.call(x, y => {
1312 |           // 成功和失败只能调用一个
1313 |           if (called) return;
1314 |           called = true;
1315 |           // resolve的结果依旧是promise 那就继续解析
1316 |           resolvePromise(promise2, y, resolve, reject);
1317 |         }, err => {
1318 |           // 成功和失败只能调用一个
1319 |           if (called) return;
1320 |           called = true;
1321 |           reject(err);// 失败了就失败了
1322 |         })
1323 |       } else {
1324 |         resolve(x); // 直接成功即可
1325 |       }
1326 |     } catch (e) {
1327 |       // 也属于失败
1328 |       if (called) return;
1329 |       called = true;
1330 |       // 取then出错了那就不要在继续执行了
1331 |       reject(e); 
1332 |     }
1333 |   } else {
1334 |     resolve(x);
1335 |   }
1336 | }
1337 | ```
1338 | 
1339 | ### resolve、reject、race与race方法的实现
1340 | ```
1341 | //reject方法
1342 | Promise.reject = function(val){
1343 |   return new Promise((resolve,reject)=>{
1344 |     reject(val)
1345 |   });
1346 | }
1347 | //race方法 
1348 | Promise.race = function(promises){
1349 |   return new Promise((resolve,reject)=>{
1350 |     for(let i=0;i<promises.length;i++){
1351 |       promises[i].then(resolve,reject)
1352 |     };
1353 |   })
1354 | }
1355 | //all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
1356 | Promise.all = function(promises){
1357 |   let arr = [];
1358 |   let i = 0;
1359 |   function processData(index,data){
1360 |     arr[index] = data;
1361 |     i++;
1362 |     if(i == promises.length){
1363 |       resolve(arr);
1364 |     };
1365 |   };
1366 |   return new Promise((resolve,reject)=>{
1367 |     for(let i=0;i<promises.length;i++){
1368 |       promises[i].then(data=>{
1369 |         processData(i,data);
1370 |       },reject);
1371 |     };
1372 |   });
1373 | }
1374 | ```
1375 | 
1376 | # github源码地址
1377 | 
1378 | 具体的一些代码实现请前往[github项目主页](https://github.com/GIScyw/javascript-code-segment)，如果大家觉得对你有帮助的话，请fork一下[这个项目](https://github.com/GIScyw/javascript-code-segment)，搬砖不易，后期的关于JavaScript，node和框架的源代码实现都会在[github](https://github.com/GIScyw/javascript-code-segment)上更新，感谢你的阅读。
1379 | 
1380 | 
1381 | 
1382 | 
1383 | 
1384 | 
1385 | 
1386 | **参考资料：**
1387 | 
1388 | - [冴羽的JavaScript专题系列](https://github.com/GIScyw/Blog-1)
1389 | - [「中高级前端面试」JavaScript手写代码无敌秘籍](https://juejin.im/post/5c9c3989e51d454e3a3902b6#heading-1)
1390 | - [前端笔试之手写代码(一)](https://juejin.im/post/5c71434a6fb9a049fa10633c#heading-2)
1391 | 


--------------------------------------------------------------------------------
/debounce.js:
--------------------------------------------------------------------------------
 1 | function debounce(fn, wait) {
 2 |     var timeout = null;
 3 |     return function() {
 4 |         if(timeout !== null)
 5 |         {
 6 |             clearTimeout(timeout);
 7 |         }
 8 |         timeout = setTimeout(fn, wait);
 9 |     }
10 | }
11 | // 处理函数
12 | function handle() {
13 |     console.log(Math.random());
14 | }
15 | // 滚动事件
16 | window.addEventListener('scroll', debounce(handle, 1000));
17 | 


--------------------------------------------------------------------------------
/deepCopy.js:
--------------------------------------------------------------------------------
 1 | //深拷贝只需要在拷贝的时候判断一下属性值得类型，如果是对象，就递归调用深拷贝函数就行了
 2 | var deepCopy = function(obj) {
 3 |     if (typeof obj !== 'object') return;
 4 |     var newObj = obj instanceof Array ? [] : {};
 5 |     for (var key in obj) {
 6 |         if (obj.hasOwnProperty(key)) {
 7 |             newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
 8 |         }
 9 |     }
10 |     return newObj;
11 | }
12 | 


--------------------------------------------------------------------------------
/flatten.js:
--------------------------------------------------------------------------------
 1 | //数组的扁平化
 2 | function flatten(arr) {
 3 |     var result = [];
 4 |     for (var i = 0, len = arr.length; i < len; i++) {
 5 |         if (Array.isArray(arr[i])) {
 6 |             result = result.concat(flatten(arr[i]))
 7 |         }
 8 |         else {
 9 |             result.push(arr[i])
10 |         }
11 |     }
12 |     return result;
13 | }
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GIScyw/javascript-code-segment/a5d469b56a531fff90b0694ed2ea3dad9d346465/images/1.png


--------------------------------------------------------------------------------
/shallowCopy.js:
--------------------------------------------------------------------------------
 1 | //该拷贝函数只拷贝对象或者数组,浅拷贝就是遍历对象，然后把属性和属性值都放在一个新的对象就行了
 2 | var shallowCopy = function(obj) {
 3 |     // 只拷贝对象
 4 |     if (typeof obj !== 'object') return;
 5 |     // 根据obj的类型判断是新建一个数组还是对象
 6 |     var newObj = obj instanceof Array ? [] : {};
 7 |     // 遍历obj，并且判断是obj的属性才拷贝
 8 |     for (var key in obj) {
 9 |         if (obj.hasOwnProperty(key)) {
10 |             newObj[key] = obj[key];
11 |         }
12 |     }
13 |     return newObj;
14 | }
15 | 


--------------------------------------------------------------------------------
/type.js:
--------------------------------------------------------------------------------
 1 | // 该类型判断函数可以判断六中基本数据类型以及Boolean Number String Function Array Date RegExp Object Error，
 2 | // 其他类型因为遇到类型判断的情况较少所以都会返回object,不在进行详细的判断
 3 | //  比如ES6新增的Symbol，Map，Set等类型
 4 | var classtype = {};
 5 | 
 6 | 
 7 | "Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item) {
 8 |     classtype["[object " + item + "]"] = item.toLowerCase();
 9 | })
10 | 
11 | 
12 | function type(obj) {
13 |     // 解决IE6中null和undefined会被Object.prototype.toString识别成[object Object]
14 |     if (obj == null) {
15 |         return obj + "";
16 |     }
17 | 
18 |     //如果是typeof后类型为object下的细分类型(Array,Function,Date,RegExp,Error)或者是Object类型，则要利用Object.prototype.toString
19 |     //由于ES6新增的Symbol，Map，Set等类型不在classtype列表中，所以使用type函数，返回的结果会是object
20 |     return typeof obj === "object" || typeof obj === "function" ?
21 |         classtype[Object.prototype.toString.call(obj)] || "object" :
22 |         typeof obj;
23 | }
24 | 
25 | 


--------------------------------------------------------------------------------