From ec021f63add595eea728b3cc8b3a030c8e19ffc7 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 18 Jan 2024 21:01:49 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E6=95=B0=E7=BB=84=E9=81=8D=E5=8E=86?= =?UTF-8?q?=E7=9A=84=E5=BC=82=E5=B8=B8=E6=B5=81=E5=9C=BA=E6=99=AF=E8=80=83?= =?UTF-8?q?=E8=99=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/19-数组的常见方法.md | 74 ++++++++++++++++++++++++-- 1 file changed, 71 insertions(+), 3 deletions(-) diff --git a/04-JavaScript基础/19-数组的常见方法.md b/04-JavaScript基础/19-数组的常见方法.md index 453b620..e438b3d 100644 --- a/04-JavaScript基础/19-数组的常见方法.md +++ b/04-JavaScript基础/19-数组的常见方法.md @@ -966,7 +966,8 @@ const itemResult = arr.find((currentItem, currentIndex, currentArray) => { 备注:一旦找到符合条件的第一个元素,将不再继续往下遍历。 -举例: + +举例1: ```javascript let arr = [2, 3, 2, 5, 7, 6]; @@ -979,6 +980,13 @@ let result = arr.find((item, index) => { console.log(result); //打印结果:5 ``` +重要提醒:如果改变了 itemResult 内部的值,则 arr 里的对应元素,它的值也会被改变。举例如下。 + +举例2:todo + + + + ### findIndex() **语法**: @@ -1275,6 +1283,36 @@ console.log(JSON.stringify(objArr2)); // 打印结果:[{"name":"小明","age": - [forEach 会改变原数组值吗](https://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html) +### 空数组调用 forEach() 方法时,会不会报错? + +例1: + +```js +const arr1 = undefined; + +arr.forEach(item => { + console.log(item); + item.name = 'qianguyihao'; +}); +``` + +上面的代码中,数组 arr1 并不存在,所以会报错`Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')` + +例2: + +```js +const arr2 = []; + +arr2.forEach(item => { + console.log(item); + item.name = "qianguyihao"; +}); +``` + +上面的代码中,arr2是空数组,但是在遍历时并不会报错,因为 forEach 是数组的内置方法。arr2作为空数组,是属于特殊的数组,数组在调用内置方法时不会报错。在上面的例2中,forEach 对空数组不会执行回调函数(也就意味着,console.log 那行不会执行),因为没有元素需要遍历。 + +如果把 forEach() 换成 map()方法,也是一样的道理。 + ## for of ES6语法推出了 for of,可用于循环遍历数组。 @@ -1344,10 +1382,15 @@ const arr1 = [ { name: '许嵩', age: '32' }, ]; -// 将数组 arr1 中的 name 属性,存储到 数组 arr2 中 +// 举例2.1、将数组 arr1 中的 name 属性,存储到 数组 arr2 中 const arr2 = arr1.map(item => item.name); -// 将数组 arr1 中的 name、age这两个属性,改一下“键”的名字,存储到 arr3中 +// 上面的代码是简写的方式。完整写法是下面这样:(这两种写法是等价的) +const _arr2 = arr1.map(item => { + return item.name; +}); + +// 举例2.2、将数组 arr1 中的 name、age这两个属性,改一下“键”的名字,存储到 arr3中 const arr3 = arr1.map(item => ({ myName: item.name, myAge: item.age, @@ -1405,6 +1448,31 @@ map 的应用场景,主要就是以上两种。 总结:map方法如果是修改整个item的值,则不会改变原数组。但如果是修改 item 里面的某个属性,那就会改变原数组。 +### map()在遍历时,如果不写 return 会怎么样 + +举例: + +```js +const arr1 = [{ name: 'hehe1' }, { name: 'hehe2' }]; + +const arr2 = arr1.map(item => { + item.name = 'haha'; +}); + +console.log(arr1); +console.log(arr2); +``` + +代码执行完成后: + +- arr1 的结果:[{ name: 'haha' }, { name: 'haha' }] + +- arr2 的结果:[undefined, undefined] + +由此可见,如果 map() 方法中没有 return 语句也是合法的,它会默认返回 `undefined`。 + +所以,针对对象数组,**如果你只是想修改对象中的某个属性值,而不想创建新数组的话,建议使用 forEach() 方法,而不是 map() 方法**。map() 方法的初衷是创建一个新数组。 + ## filter()