Skip to content

Commit 2daa3d6

Browse files
author
eveningwater.123
committed
feat: 修改了代码段
1 parent 653b75f commit 2daa3d6

6 files changed

Lines changed: 185 additions & 22 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@
371371
- [判断字符是否只包含字母-2022-09-14](codes/javascript/is-alpha.md)
372372
- [判断字符是否只包含字母和数字-2022-09-15](codes/javascript/is-alpha-numeric.md)
373373
- [判断变位词-2022-09-16](codes/javascript/is-anagram.md)
374-
- [是否可迭代-2022-09-17](codes/javascript/isArrayLike.md)
374+
- [是否可迭代-2022-09-17](codes/javascript/is-array-like.md)
375375
- [是否异步函数-2022-09-18](codes/javascript/isAsyncFunction.md)
376376
- [日期比较（之前）-2022-09-19](codes/javascript/isBeforeDate.md)
377377
- [日期比较（范围之间）-2022-09-20](codes/javascript/isBetweenDates.md)

‎codes/javascript/html/is-array-like.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>isArrayLike</title>
8+
</head>
9+
10+
<body>
11+
<div class="container">
12+
<div class="header">
13+
<h1>🔍 类数组检测与分析工具</h1>
14+
<p>基于 isArrayLike 函数的强大类数组检测系统</p>
15+
</div>
16+
17+
<div class="main-content">
18+
<!-- 输入面板 -->
19+
<div class="panel">
20+
<h2>📝 对象输入检测</h2>
21+
22+
<div class="input-group">
23+
<label for="object-type">对象类型:</label>
24+
<select id="object-type">
25+
<option value="array">数组 [1, 2, 3]</option>
26+
<option value="string">字符串 "hello"</option>
27+
<option value="nodelist">NodeList (DOM元素集合)</option>
28+
<option value="arguments">Arguments对象</option>
29+
<option value="set">Set对象</option>
30+
<option value="map">Map对象</option>
31+
<option value="object">普通对象 {a: 1}</option>
32+
<option value="number">数字 42</option>
33+
<option value="boolean">布尔值 true</option>
34+
<option value="null">null</option>
35+
<option value="undefined">undefined</option>
36+
<option value="function">函数 function(){}</option>
37+
<option value="custom">自定义对象</option>
38+
</select>
39+
</div>
40+
41+
<div class="input-group">
42+
<label for="custom-object">自定义对象 (JSON格式):</label>
43+
<textarea id="custom-object" rows="4" placeholder='输入JSON格式的对象，例如:&#10;{"0": "a", "1": "b", "length": 2}&#10;或者:&#10;[1, 2, 3, 4, 5]'></textarea>
44+
</div>
45+
46+
<div class="input-group">
47+
<label for="batch-objects">批量对象检测:</label>
48+
<textarea id="batch-objects" rows="4" placeholder='每行一个对象，用逗号分隔类型和值&#10;例如:&#10;array,[1,2,3]&#10;string,hello&#10;object,{"a":1}&#10;number,42'></textarea>
49+
</div>
50+
51+
<div class="controls">
52+
<button class="btn" id="detect-btn">🔍 检测对象</button>
53+
<button class="btn btn-secondary" id="clear-btn">🗑️ 清空</button>
54+
<button class="btn btn-success" id="batch-detect-btn">📋 批量检测</button>
55+
<button class="btn btn-warning" id="analyze-btn">🔬 深度分析</button>
56+
<button class="btn btn-danger" id="create-btn">⚡ 创建测试对象</button>
57+
</div>
58+
59+
<div class="advanced-options">
60+
<h3>⚙️ 高级选项</h3>
61+
<div id="advanced-options"></div>
62+
</div>
63+
</div>
64+
65+
<!-- 结果面板 -->
66+
<div class="panel">
67+
<h2>📊 检测结果</h2>
68+
69+
<div class="controls">
70+
<button class="btn btn-warning" id="export-btn">📤 导出结果</button>
71+
<button class="btn btn-danger" id="clear-results-btn">🗑️ 清空结果</button>
72+
</div>
73+
74+
<div id="object-preview" class="object-preview" style="display: none;">
75+
<div id="preview-content"></div>
76+
</div>
77+
78+
<div id="result-display" class="result-display">
79+
<div style="text-align: center; color: #718096; padding: 40px;">
80+
<div style="font-size: 3rem; margin-bottom: 10px;">🔍</div>
81+
<div>选择对象类型或输入自定义对象，然后点击检测按钮</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<!-- 统计面板 -->
88+
<div class="stats-panel">
89+
<h2>📈 检测统计</h2>
90+
<div class="stats-grid">
91+
<div class="stat-item">
92+
<div class="stat-number" id="total-detections">0</div>
93+
<div class="stat-label">总检测次数</div>
94+
</div>
95+
<div class="stat-item">
96+
<div class="stat-number" id="array-like-count">0</div>
97+
<div class="stat-label">类数组对象</div>
98+
</div>
99+
<div class="stat-item">
100+
<div class="stat-number" id="not-array-like-count">0</div>
101+
<div class="stat-label">非类数组对象</div>
102+
</div>
103+
<div class="stat-item">
104+
<div class="stat-number" id="error-count">0</div>
105+
<div class="stat-label">错误对象</div>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<!-- 模板面板 -->
111+
<div class="template-panel">
112+
<h2>📋 常用对象模板</h2>
113+
<div class="template-grid">
114+
<div class="template-item" data-template="dom-elements">
115+
<h4>DOM元素集合</h4>
116+
<p>NodeList、HTMLCollection等</p>
117+
</div>
118+
<div class="template-item" data-template="array-like-objects">
119+
<h4>类数组对象</h4>
120+
<p>具有length属性的对象</p>
121+
</div>
122+
<div class="template-item" data-template="iterables">
123+
<h4>可迭代对象</h4>
124+
<p>Set、Map、Generator等</p>
125+
</div>
126+
<div class="template-item" data-template="primitives">
127+
<h4>原始类型</h4>
128+
<p>字符串、数字、布尔值</p>
129+
</div>
130+
<div class="template-item" data-template="functions">
131+
<h4>函数对象</h4>
132+
<p>函数、箭头函数、类</p>
133+
</div>
134+
<div class="template-item" data-template="mixed">
135+
<h4>混合类型</h4>
136+
<p>各种类型的对象</p>
137+
</div>
138+
</div>
139+
</div>
140+
141+
<!-- 历史记录面板 -->
142+
<div class="history-panel">
143+
<h2>📚 检测历史</h2>
144+
<div class="controls">
145+
<button class="btn btn-secondary" id="load-history-btn">📥 加载历史</button>
146+
<span class="clear-history" id="clear-history-btn">清空历史</span>
147+
</div>
148+
<div id="history-list" class="history-list">
149+
<div style="text-align: center; color: #718096; padding: 20px;">
150+
暂无检测历史记录
151+
</div>
152+
</div>
153+
</div>
154+
</div>
155+
156+
<!-- 引入自定义插件 -->
157+
<script src="../../demo/plugins/modal/index.js"></script>
158+
<script src="../../demo/plugins/checkbox/index.js"></script>
159+
<script src="../../demo/plugins/input-number/index.js"></script>
160+
<script src="../../demo/plugins/notification/index.js"></script>
161+
<script src="../../demo/plugins/select/index.js"></script>
162+
163+
<script>
164+
// JavaScript代码将在下一步添加
165+
</script>
166+
</body>
167+
168+
</html>

‎codes/javascript/html/isArrayLike.html‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

codes/javascript/isArrayLike.md renamed to codes/javascript/is-array-like.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ const isArrayLike = obj =>
1111
obj !== null && typeof obj[Symbol.iterator] === 'function';
1212
```
1313

14+
ts 代码如下:
15+
16+
<div class="code-editor" data-url="codes/javascript/ts/is-array-like.ts" data-language="typescript"></div>
17+
1418
> 调用方式:
1519
1620
```js
@@ -22,8 +26,10 @@ isArrayLike(null); // false
2226

2327
> 应用场景
2428
25-
<div class="code-editor" data-url="codes/javascript/html/isArrayLike.html" data-language="html"></div>
29+
以下是一个实战<a href="codes/javascript/html/is-array-like.html" target="_blank" rel="noopener noreferrer">示例</a>:
30+
31+
<div class="code-editor" data-url="codes/javascript/html/is-array-like.html" data-language="html"></div>
2632

2733
结果如下:
2834

29-
<iframe src="codes/javascript/html/isArrayLike.html"></iframe>
35+
<iframe src="codes/javascript/html/is-array-like.html"></iframe>

‎codes/javascript/ts/is-array-like.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const isArrayLike = <T>(obj:T) =>
2+
obj !== null && typeof obj![Symbol.iterator] === 'function';
3+
4+
isArrayLike([1, 2, 3]); // true
5+
isArrayLike(document.querySelectorAll('.className')); // true
6+
isArrayLike('abc'); // true
7+
isArrayLike(null); // false

‎pages/sidebar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@
360360
- [判断字符是否只包含字母-2022-09-14](codes/javascript/is-alpha.md)
361361
- [判断字符是否只包含字母和数字-2022-09-15](codes/javascript/is-alpha-numeric.md)
362362
- [判断变位词-2022-09-16](codes/javascript/is-anagram.md)
363-
- [是否可迭代-2022-09-17](codes/javascript/isArrayLike.md)
363+
- [是否可迭代-2022-09-17](codes/javascript/is-array-like.md)
364364
- [是否异步函数-2022-09-18](codes/javascript/isAsyncFunction.md)
365365
- [日期比较（之前）-2022-09-19](codes/javascript/isBeforeDate.md)
366366
- [日期比较（范围之间）-2022-09-20](codes/javascript/isBetweenDates.md)

0 commit comments

Comments
 (0)