From 10c2db509da27aa2a13602b5035d819bb03c5845 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Sun, 18 Aug 2024 23:01:15 +0800
Subject: [PATCH] =?UTF-8?q?add(=E6=95=B0=E7=BB=84):=20filter=20=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E7=9A=84=E4=B8=A4=E4=B8=AA=E4=BE=8B=E5=AD=90=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 04-JavaScript基础/19-数组的常见方法.md | 73 ++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/04-JavaScript基础/19-数组的常见方法.md b/04-JavaScript基础/19-数组的常见方法.md
index e438b3d..8a8f46f 100644
--- a/04-JavaScript基础/19-数组的常见方法.md
+++ b/04-JavaScript基础/19-数组的常见方法.md
@@ -1476,7 +1476,9 @@ console.log(arr2);
 
 ## filter()
 
-语法：
+### 语法
+
+
 
 ```js
 const newArr = arr.filter((currentItem, currentIndex, currentArray) => {
@@ -1488,6 +1490,8 @@ const newArr = arr.filter((currentItem, currentIndex, currentArray) => {
 
 作用：对数组进行过滤。
 
+### 举例
+
 **举例 1**：找出数组 arr1 中大于 4 的元素，返回一个新的数组。代码如下：
 
 ```javascript
@@ -1521,12 +1525,12 @@ console.log(JSON.stringify(arr2)); // 打印结果：[6,5,6]
 
 ```javascript
 const arr1 = [
-    { name: '许嵩', type: '一线' },
-    { name: '周杰伦', type: '退居二线' },
-    { name: '邓紫棋', type: '一线' },
+  { name: '许嵩', type: '一线' },
+  { name: '周杰伦', type: '退居二线' },
+  { name: '邓紫棋', type: '一线' },
 ];
 
-const arr2 = arr1.filter((item) => item.type == '一线'); // 筛选出一线歌手
+const arr2 = arr1.filter(item => item.type == '一线'); // 筛选出一线歌手
 
 console.log(JSON.stringify(arr2));
 ```
@@ -1540,6 +1544,65 @@ console.log(JSON.stringify(arr2));
 ];
 ```
 
+### 两端代码对比
+
+仔细看看下面这两段代码，有什么区别。数组 arr2的打印结果是不一样的。
+
+第一段代码：
+
+```js
+const arr1 = [
+  {
+    name: 'a',
+    num: 1,
+  },
+  {
+    name: 'b',
+    num: 2,
+  },
+];
+
+const arr2 = [];
+
+const arr3 = dataList.filter(item => {
+  return item.num === 1;
+  arr2.push(item);
+});
+
+console.log(arr2);
+```
+
+第二段代码：
+
+```js
+const arr1 = [
+  {
+    name: 'a',
+    num: 1,
+  },
+  {
+    name: 'b',
+    num: 2,
+  },
+];
+
+const arr2 = [];
+
+const arr3 = dataList.filter(item => {
+  if (item.num === 1) return item;
+  arr2.push(item);
+});
+
+console.log('smyhvae arr2:', arr2);
+```
+
+分析：
+
+- 第一段代码的打印结果是 空数组 `[]`。因为`return` 语句位于回调函数的第一行，所以一旦执行就直接返回，导致后面的 `arr2.push(item);` 永远不会被执行，因此 `arr2` 始终为空。
+- 第二段代码的打印结果是` [{ name: 'b', num: 2 }]`。由于 `return` 语句位于 `if` 语句内部，只有在特定条件下（`item.num === 1`）才会终止回调函数，否则 `arr2.push(item);` 仍然会被执行，因此 `arr2` 中会有值。
+
+
+
 ## reduce()
 
 ### reduce() 语法