diff --git a/04-JavaScript基础/18-数组的常见方法.md b/04-JavaScript基础/17-数组的常见方法.md similarity index 90% rename from 04-JavaScript基础/18-数组的常见方法.md rename to 04-JavaScript基础/17-数组的常见方法.md index a0e961d..f422801 100644 --- a/04-JavaScript基础/18-数组的常见方法.md +++ b/04-JavaScript基础/17-数组的常见方法.md @@ -735,7 +735,7 @@ console.log('result =' + JSON.stringify(result)); 上面的各种写法中,写法 4 是我们在实战开发中用得最多的。 -为了确保代码的简洁优雅,接下来的代码中,凡是涉及到函数,我们将统一采用 ES6 中的箭头函数来写。 +为了确保代码的简洁优雅,接下来的代码中,凡是涉及到函数,我们将尽量采用 ES6 中的箭头函数来写。 ### sort 方法举例:将数组从小到大排序 @@ -988,22 +988,28 @@ PS:这几个方法**不会修改原数组**。 有了这几种方法,就可以替代一些 for 循环了。下面依次来介绍。 -## for 循环 遍历 +## for 循环遍历 举例: ```javascript -var arr = ['生命壹号', '许嵩', '永不止步']; -for (var i = 0; i < arr.length; i++) { +const arr = ['生命壹号', '许嵩', '永不止步']; +for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // arr[i]代表的是数组中的每一个元素i } -console.log(arr); +console.log(JSON.stringify(arr)); ``` 打印结果: -![](http://img.smyhvae.com/20180124_2008.png) +``` +生命壹号 +许嵩 +永不止步 + +["生命壹号","许嵩","永不止步"] +``` ## forEach() 遍历 @@ -1011,7 +1017,7 @@ console.log(arr); forEach()方法需要一个函数作为参数。这种函数,是由我们创建但是不由我们调用的,我们称为回调函数。 -数组中有几个元素,该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素。 +数组中有几个元素,该回调函数就会执行几次。 回调函数中传递三个参数: @@ -1024,12 +1030,12 @@ forEach()方法需要一个函数作为参数。这种函数,是由我们创 代码举例: ```javascript -var arr = ['王一', '王二', '王三']; +let myArr = ['王一', '王二', '王三']; -arr.forEach(function (item, index, obj) { +myArr.forEach((item, index, arr) => { console.log('item:' + item); console.log('index:' + index); - console.log('obj:' + obj); + console.log('arr:' + JSON.stringify(arr)); console.log('----------'); }); ``` @@ -1039,25 +1045,120 @@ arr.forEach(function (item, index, obj) { ```javascript item:王一 index:0 -obj:王一,王二,王三 +arr:["王一","王二","王三"] ---------- - item:王二 index:1 -obj:王一,王二,王三 +arr:["王一","王二","王三"] ---------- - item:王三 index:2 -obj:王一,王二,王三 +arr:["王一","王二","王三"] ---------- ``` -注意,forEach() 的返回值是 undefined。也就是说,它没有返回值。如果你尝试 `tempArry = arr.forEach()`这种方式来接收,是达不到效果的。 +注意,forEach() 没有返回值。也可以理解成:forEach() 的返回值是 undefined。如果你尝试 `tempArry = myArr.forEach()`这种方式来接收,是达不到效果的。 + +### forEach() 能不能改变原数组? + +forEach() 能不能改变原数组?关于这个问题,大部分人会搞错。我们来看看下面的代码。 + +**1、数组的元素是基本数据类型**:(无法改变原数组) + +```js +let numArr = [1, 2, 3]; + +numArr.forEach((item) => { + item = item * 2; +}); +console.log(JSON.stringify(numArr)); // 打印结果:[1, 2, 3] +``` + +上面这段代码,你可要看仔细了,打印结果是 `[1, 2, 3]`,不是 `[2, 4, 6]`。 + +**2、数组的元素是引用数据类型**:(直接修改整个对象时,无法改变原数组) + +```js +let objArr = [ + { name: '千古壹号', age: 20 }, + { name: '许嵩', age: 30 }, +]; + +objArr.forEach((item) => { + item = { + name: '邓紫棋', + age: '29', + }; +}); +console.log(JSON.stringify(objArr)); // 打印结果:[{"name":"千古壹号","age":20},{"name":"许嵩","age":30}] +``` + + +**3、数组的元素是引用数据类型**:(修改对象里的某个属性时,可以改变原数组) + +```js +let objArr = [ + { name: '千古壹号', age: 28 }, + { name: '许嵩', age: 30 }, +]; + +objArr.forEach((item) => { + item.name = '邓紫棋'; +}); +console.log(JSON.stringify(objArr)); // 打印结果:[{"name":"邓紫棋","age":28},{"name":"邓紫棋","age":30}] +``` + +如果你需要通过 forEach 修改原数组,建议用 forEach里面的参数2和参数3来做,具体请看下面的标准做法。 + +**4、forEach() 通过参数2、参数3修改原数组**:(标准做法) + +```js +// 1、数组的元素是基本数据类型 +let numArr = [1, 2, 3]; + +numArr.forEach((item, index, arr) => { + arr[index] = arr[index] * 2; +}); +console.log(JSON.stringify(numArr)); // 打印结果:[2,4,6] + +// 2、数组的元素是引用数据类型时,直接修改对象 +let objArr = [ + { name: '千古壹号', age: 28 }, + { name: '许嵩', age: 34 }, +]; + +objArr.forEach((item, index, arr) => { + arr[index] = { + name: '小明', + age: '10', + }; +}); +console.log(JSON.stringify(objArr)); // 打印结果:[{"name":"小明","age":"10"},{"name":"小明","age":"10"}] + +// 3、数组的元素是引用数据类型时,修改对象的某个属性 +let objArr2 = [ + { name: '千古壹号', age: 28 }, + { name: '许嵩', age: 34 }, +]; + +objArr2.forEach((item, index, arr) => { + arr[index].name = '小明'; +}); +console.log(JSON.stringify(objArr2)); // 打印结果:[{"name":"小明","age":28},{"name":"小明","age":34}] +``` + +参考链接: + +- [forEach到底可以改变原数组吗?](https://juejin.im/post/5d526a4ae51d4557dc774e7d) + +- [forEach 会改变原数组值吗](https://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html) + ## map()方法 -解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。 +解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。不会改变原数组。 + +作用:对数组中的每一项进行加工。 **举例 1**:(拷贝的过程中改变数组元素的值) @@ -1115,33 +1216,35 @@ map 的应用场景,主要就是以上两种。 ## filter() -解释:对数组中的**每一项**运行回调函数,该函数返回结果是 true 的项,将组成新的数组(返回值就是这个新的数组)。 +解释:对数组中的**每一项**运行回调函数,该函数返回结果是 true 的项,将组成新的数组(返回值就是这个新的数组)。不会改变原数组。 + +作用:对数组进行过滤。 **举例 1**:找出数组 arr1 中大于 4 的元素,返回一个新的数组。代码如下: ```javascript -var arr1 = [1, 3, 6, 2, 5, 6]; +let arr1 = [1, 3, 6, 2, 5, 6]; -var arr2 = arr1.filter(function (item, index) { - return item > 4; //将arr1中大于4的元素返回,组成新的数组 +let arr2 = arr1.filter((item) => { + if (item > 4) { + return true; // 将arr1中大于4的元素返回,组成新的数组 + } + return false; }); -console.log(JSON.stringify(arr2)); + +console.log(JSON.stringify(arr1)); // 打印结果:[1,3,6,2,5,6] +console.log(JSON.stringify(arr2)); // 打印结果:[6,5,6] ``` -打印结果: - -``` - [6,5,6] -``` - -上方代码的 ES6 写法: +上方代码更简洁的写法如下: ```javascript -const arr1 = [1, 3, 6, 2, 5, 6]; +let arr1 = [1, 3, 6, 2, 5, 6]; -const arr2 = arr1.filter((item) => item > 4); //将arr1中大于4的元素返回,组成新的数组 +let arr2 = arr1.filter((item) => item > 4); // 将arr1中大于4的元素返回,组成新的数组 -console.log(JSON.stringify(arr2)); +console.log(JSON.stringify(arr1)); // 打印结果:[1,3,6,2,5,6] +console.log(JSON.stringify(arr2)); // 打印结果:[6,5,6] ``` **举例 2**: @@ -1253,7 +1356,7 @@ array.length = 0; //方式2:length属性可以赋值,在其它语言中lengt array = []; //方式3:推荐 ``` -### 练习 1 +### join() 练习 **问题**:将一个字符串数组输出为`|`分割的形式,比如“千古|宿敌|素颜”。使用两种方式实现。 @@ -1290,7 +1393,7 @@ console.log(arr.join('|')); ![](http://img.smyhvae.com/20180126_1339.png) -### 练习 2 +### reverse() 练习 题目:将一个字符串数组的元素的顺序进行反转,使用两种种方式实现。提示:第 i 个和第 length-i-1 个进行交换。 @@ -1325,30 +1428,7 @@ function reverse(array) { 现在我们学习了数组自带的 api,我们就可以直接使用 reverse()方法。 -### 练习 3 - -问题:针对工资的数组[1500,1200,2000,2100,1800],把工资超过 2000 的删除。 - -答案: - -```javascript -var arr1 = [1500, 1200, 2000, 2100, 1800]; - -var arr2 = arr1.filter(function (ele, index, array) { - if (ele < 2000) { - return true; - } - return false; -}); -console.log(arr1); -console.log(arr2); -``` - -结果: - -![](http://img.smyhvae.com/20180126_1435.png) - -### 练习 4 +### 练习 问题:找到数组["c","a","z","a","x","a"]中每一个元素出现的次数。 @@ -1358,7 +1438,7 @@ console.log(arr2); 略难,答案暂略。 -### 练习 5:数组去重 +### 练习:数组去重 问题:编写一个方法去掉一个数组中的重复元素。 diff --git a/04-JavaScript基础/19-函数.md b/04-JavaScript基础/18-函数.md similarity index 100% rename from 04-JavaScript基础/19-函数.md rename to 04-JavaScript基础/18-函数.md diff --git a/04-JavaScript基础/20-作用域和变量提升.md b/04-JavaScript基础/19-作用域和变量提升.md similarity index 100% rename from 04-JavaScript基础/20-作用域和变量提升.md rename to 04-JavaScript基础/19-作用域和变量提升.md diff --git a/04-JavaScript基础/21-预编译.md b/04-JavaScript基础/20-预编译.md similarity index 100% rename from 04-JavaScript基础/21-预编译.md rename to 04-JavaScript基础/20-预编译.md diff --git a/04-JavaScript基础/22-执行期上下文.md b/04-JavaScript基础/21-执行期上下文.md similarity index 100% rename from 04-JavaScript基础/22-执行期上下文.md rename to 04-JavaScript基础/21-执行期上下文.md