From adc06caa3fa07055b62221e5b4113acebf27df88 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 14 Jun 2020 22:29:29 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E6=95=B0=E7=BB=84=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/16-数组简介.md | 2 +- ...常见方法&数组的遍历.md => 18-数组的常见方法.md} | 180 +++++++++++------- 2 files changed, 115 insertions(+), 67 deletions(-) rename 04-JavaScript基础/{18-数组的常见方法&数组的遍历.md => 18-数组的常见方法.md} (88%) diff --git a/04-JavaScript基础/16-数组简介.md b/04-JavaScript基础/16-数组简介.md index 9f28930..2a9b863 100644 --- a/04-JavaScript基础/16-数组简介.md +++ b/04-JavaScript基础/16-数组简介.md @@ -2,7 +2,7 @@ ## 数组简介 -数组（Array）是属于**内置对象**，我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询各种方法。 +数组（Array）是属于**内置对象**，我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询它的各种方法。 数组和普通对象的功能类似，也是用来存储一些值的。不同的是： diff --git a/04-JavaScript基础/18-数组的常见方法&数组的遍历.md b/04-JavaScript基础/18-数组的常见方法.md similarity index 88% rename from 04-JavaScript基础/18-数组的常见方法&数组的遍历.md rename to 04-JavaScript基础/18-数组的常见方法.md index e9b65aa..2857c9e 100644 --- a/04-JavaScript基础/18-数组的常见方法&数组的遍历.md +++ b/04-JavaScript基础/18-数组的常见方法.md @@ -2,28 +2,28 @@ **数组的类型相关**： -| 方法 | 描述 | 备注 | -| :------------------------------- | :----------------------------------- | :--- | -| Array.isArray() | 判断是否为数组 | | -| toString() | 将数组转换为字符串 | | -| Array.from(arrayLike) | 将**伪数组**转化为**真数组** | | +| 方法 | 描述 | 备注 | +| :------------------------------- | :--------------------------------- | :--- | +| Array.isArray() | 判断是否为数组 | | +| toString() | 将数组转换为字符串 | | +| Array.from(arrayLike) | 将**伪数组**转化为**真数组** | | | Array.of(value1, value2, value3) | 创建数组：将**一系列值**转换成数组 | | 注意，获取数组的长度是用`length`属性，不是方法。关于 `length`属性，详见上一篇文章。 **数组元素的添加和删除**： -| 方法 | 描述 | 备注 | -| :-------- | :--------------------------------------------------------------- | :------------- | -| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | -| pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 | -| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | -| shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 | -| | | | -| slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 | -| splice() | 从数组中**删除**指定的一个或多个元素，返回结果为**被删除元素组成的新数组** | 会改变原数组 | -| | | | -| fill() | 填充数组：用固定的值填充数组，返回结果为**新的数组** | 不会改变原数组 | +| 方法 | 描述 | 备注 | +| :-------- | :------------------------------------------------------------------------- | :------------- | +| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | +| pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 | +| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | +| shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 | +| | | | +| slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 | +| splice() | 从数组中**删除**指定的一个或多个元素，返回结果为**被删除元素组成的新数组** | 会改变原数组 | +| | | | +| fill() | 填充数组：用固定的值填充数组，返回结果为**新的数组** | 不会改变原数组 | **数组的合并和拆分**： @@ -36,10 +36,11 @@ 注意，`split()`是字符串的方法，不是数组的方法。 **数组排序**： -| 方法 | 描述 | 备注 | -| :-------- | :----------------------------------------------------------------- | :------------- | -| reverse() | 反转数组，返回结果为**反转后的数组** | 会改变原数组 | -| sort() | 对数组的元素,默认按照**Unicode 编码**，从小到大进行排序 | 会改变原数组 | + +| 方法 | 描述 | 备注 | +| :-------- | :------------------------------------------------------ | :----------- | +| reverse() | 反转数组，返回结果为**反转后的数组** | 会改变原数组 | +| sort() | 对数组的元素,默认按照**Unicode 编码**，从小到大进行排序 | 会改变原数组 | **遍历数组**： @@ -303,13 +304,12 @@ console.log('result5:' + JSON.stringify(result5)); 打印结果： ```javascript - -arr:["a","b","c","d","e","f"] -result1:["a","b","c","d","e","f"] -result2:["c","d","e","f"] -result3:["e","f"] -result4:["c","d"] -result5:[] +arr: ['a', 'b', 'c', 'd', 'e', 'f']; +result1: ['a', 'b', 'c', 'd', 'e', 'f']; +result2: ['c', 'd', 'e', 'f']; +result3: ['e', 'f']; +result4: ['c', 'd']; +result5: []; ``` **补充**： @@ -419,7 +419,6 @@ arr4：["a","千古壹号","vae","e","f"] result4：["b","c","d"] ``` - ### fill() `fill()`：用一个固定值填充数组，返回结果为**新的数组**。不会改变原数组。 @@ -437,7 +436,6 @@ result4：["b","c","d"] 新数组 = 数组.fill(固定值, startIndex, endIndex); ``` - 举例： ```js @@ -451,8 +449,9 @@ console.log(['a', 'b', 'c', 'd'].fill('f')); // ['f', 'f', 'f,' 'f'] console.log(['a', 'b', 'c', 'd'].fill('f', 1, 3)); // ["a", "f", "f", "d"] ``` +## 素组的合并和拆分 -## concat() +### concat() `concat()`：连接两个或多个数组，返回结果为**新的数组**。不会改变原数组。`concat()`方法的作用是**数组合并**。 @@ -494,7 +493,7 @@ result2 = ['a', 'b', 'c', 1, 2, 3, '千古壹号', 'vae']; 从打印结果中可以看到，原数组并没有被修改。 -### 数组合并的另一种方式 +**数组合并的另一种方式**： 我们可以使用`...`这种展开语法，将两个数组进行合并。举例如下： @@ -505,7 +504,7 @@ const result = ['a', 'b', 'c', ...arr1]; console.log(JSON.stringify(result)); // 打印结果：["a","b","c",1,2,3] ``` -## join() +### join() `join()`：将数组转换为字符串，返回结果为**转换后的字符串**（不会改变原来的数组）。 @@ -536,20 +535,34 @@ console.log('result2 =' + JSON.stringify(result2)); 上方代码中，最后三行的打印结果是： -``` +```bash arr =["a","b","c"] result1 =a,b,c result2 =a-b-c ``` +### split() + +> 注意，`split()`是字符串的方法，不是数组的方法。 + +语法： + +```javascript +新的数组 = str.split(分隔符); +``` + +解释：通过指定的分隔符，将一个字符串拆分成一个**数组**。不会改变原字符串。 + +备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的 json 数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就派上用场了。 + ## reverse() `reverse()`：反转数组，返回结果为**反转后的数组**（会改变原来的数组）。 语法： -``` - 反转后的数组 = 数组.reverse(); +```js +反转后的数组 = 数组.reverse(); ``` 举例： @@ -574,20 +587,20 @@ result =["f","e","d","c","b","a"] ## sort()方法 -> sort()方法要好好理解。所以，我们单独用一大段来讲。 +> sort()方法需要好好理解。 `sort()`：对数组的元素进行从小到大来排序（会改变原来的数组）。 -### sort()方法举例：无参时 +### sort()方法：无参时 如果在使用 sort() 方法时不带参，则默认按照**Unicode 编码**，从小到大进行排序。 **举例 1**：（当数组中的元素为字符串时） ```javascript -var arr1 = ['e', 'b', 'd', 'a', 'f', 'c']; +let arr1 = ['e', 'b', 'd', 'a', 'f', 'c']; -var result = arr1.sort(); // 将数组 arr1 进行排序 +let result = arr1.sort(); // 将数组 arr1 进行排序 console.log('arr1 =' + JSON.stringify(arr1)); console.log('result =' + JSON.stringify(result)); @@ -605,9 +618,9 @@ console.log('result =' + JSON.stringify(result)); **举例 2**：（当数组中的元素为数字时） ```javascript -var arr2 = [5, 2, 11, 3, 4, 1]; +let arr2 = [5, 2, 11, 3, 4, 1]; -var result = arr2.sort(); // 将数组 arr2 进行排序 +let result = arr2.sort(); // 将数组 arr2 进行排序 console.log('arr2 =' + JSON.stringify(arr2)); console.log('result =' + JSON.stringify(result)); @@ -616,35 +629,39 @@ console.log('result =' + JSON.stringify(result)); 打印结果： ``` - arr2 =[1,11,2,3,4,5] - result =[1,11,2,3,4,5] +arr2 =[1,11,2,3,4,5] +result =[1,11,2,3,4,5] ``` 上方的打印结果中，你会发现，使用 sort() 排序后，数字`11`竟然在数字`2`的前面。这是为啥呢？因为上面讲到了，`sort()`方法是按照**Unicode 编码**进行排序的。 那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。 -### sort()方法举例：带参时 +### sort()方法：带参时，自定义排序规则 如果在 sort()方法中带参，我们就可以**自定义**排序规则。具体做法如下： -我们可以在 sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数 +我们可以在 sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数。 浏览器根据回调函数的返回值来决定元素的排序：（重要） - 如果返回一个大于 0 的值，则元素会交换位置 -- 如果返回一个小于 0 的值，则元素位置不变 +- **如果返回一个小于 0 的值，则元素位置不变** -- 如果返回一个 0，则认为两个元素相等，则不交换位置 +- 如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置 -**代码举例**： +如果只是看上面的文字，可能不太好理解，我们来看看下面的例子，你肯定就能明白。 + +### 举例：将数组中的数字按照从小到大排序 + +**写法 1**： ```javascript -var arr3 = [5, 2, 11, 3, 4, 1]; +var arr = [5, 2, 11, 3, 4, 1]; // 自定义排序规则 -var result = arr3.sort(function (a, b) { +var result = arr.sort(function (a, b) { if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置 return 1; @@ -657,44 +674,73 @@ var result = arr3.sort(function (a, b) { } }); -console.log('arr3 =' + JSON.stringify(arr3)); +console.log('arr =' + JSON.stringify(arr)); console.log('result =' + JSON.stringify(result)); ``` 打印结果： ```javascript -arr3 = [1, 2, 3, 4, 5, 11]; +arr = [1, 2, 3, 4, 5, 11]; result = [1, 2, 3, 4, 5, 11]; ``` 上方代码的写法太啰嗦了，其实也可以简化为如下写法： -**代码优化**：（冒泡排序） +**写法 2**：（冒泡排序） ```javascript -var arr3 = [5, 2, 11, 3, 4, 1]; +let arr = [5, 2, 11, 3, 4, 1]; // 自定义排序规则 -var result = arr3.sort(function (a, b) { +let result = arr.sort(function (a, b) { return a - b; // 升序排列 // return b - a; // 降序排列 }); -console.log('arr3 =' + JSON.stringify(arr3)); +console.log('arr =' + JSON.stringify(arr)); console.log('result =' + JSON.stringify(result)); ``` -打印结果： +打印结果不变。 -```javascript -arr3 = [1, 2, 3, 4, 5, 11]; -result = [1, 2, 3, 4, 5, 11]; +上方代码还可以写成 ES6 的形式，也就是将 function 改为箭头函数，其写法如下。 + +**写法 3**：（箭头函数） + +```js +let arr = [5, 2, 11, 3, 4, 1]; + +// 自定义排序规则 +let result = arr.sort((a, b) => { + return a - b; // 升序排列 +}); + +console.log('arr =' + JSON.stringify(arr)); +console.log('result =' + JSON.stringify(result)); ``` +上方代码，因为函数体内只有一句话，所以可以去掉 return 语句，继续简化为如下写法。 + +**写法 4**：（推荐） + +```js +let arr = [5, 2, 11, 3, 4, 1]; + +// 自定义排序规则：升序排列 +let result = arr.sort((a, b) => a - b); + +console.log('arr =' + JSON.stringify(arr)); +console.log('result =' + JSON.stringify(result)); +``` + +上面的各种写法中，写法 4 是我们在实战开发中用得最多的。 + +为了确保代码的简洁优雅，接下来的代码中，凡是涉及到函数，我们将统一采用 ES6 中的箭头函数来写。 + ### sort 方法举例：将数组从小到大排序 -将数组从小到大排序，这个例子很常见。 +将数组从小到大排序，这个例子很常见。但在实际开发中，总会有一些花样。 下面这段代码，在实际开发中，经常用到，一定要掌握。完整代码如下： @@ -726,9 +772,7 @@ result = [1, 2, 3, 4, 5, 11]; console.log('qianguyihao 排序前的数组：' + JSON.stringify(dataList)); // 将dataList 数组，按照 publishTime 字段，从小到大排序。（会改变原数组） - dataList.sort(function (a, b) { - return parseInt(a.publishTime) - parseInt(b.publishTime); - }); + dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime)); console.log('qianguyihao 排序后的数组：' + JSON.stringify(dataList)); @@ -742,14 +786,18 @@ result = [1, 2, 3, 4, 5, 11]; qianguyihao 排序前的数组：[ {"title":"品牌鞋子，高品质低价入手","publishTime":200}, {"title":"不是很贵，但是很暖","publishTime":100}, - {"title":"无法拒绝的美食，跟我一起吃吃","publishTime":300}] + {"title":"无法拒绝的美食，跟我一起吃吃","publishTime":300} +] qianguyihao 排序后的数组：[ {"title":"不是很贵，但是很暖","publishTime":100}, {"title":"品牌鞋子，高品质低价入手","publishTime":200}, - {"title":"无法拒绝的美食，跟我一起吃吃","publishTime":300}] + {"title":"无法拒绝的美食，跟我一起吃吃","publishTime":300} +] ``` +上方代码中，有人可能会问： publishTime 字段已经是 int 类型了，为啥在排序前还要做一次 parseInt() 转换？这是因为，这种数据，一般是后台接口返回给前端的，数据可能是 int 类型、也可能是字符串类型，所以还是统一先做一次 partInt() 比较保险。这是一种良好的工作习惯。 + ## 概念：数组的遍历 遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。