update: 数组排序

04-JavaScript基础/16-数组简介.md

@@ -2,7 +2,7 @@
 
 ## 数组简介
 
-数组（Array）是属于**内置对象**，我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询各种方法。
+数组（Array）是属于**内置对象**，我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询它的各种方法。
 
 数组和普通对象的功能类似，也是用来存储一些值的。不同的是：
 

04-JavaScript基础/18-数组的常见方法.md

@@ -3,7 +3,7 @@
 **数组的类型相关**：
 
 | 方法                             | 描述                               | 备注 |
-| :------------------------------- | :----------------------------------- | :--- |
+| :------------------------------- | :--------------------------------- | :--- |
 | Array.isArray()                  | 判断是否为数组                     |      |
 | toString()                       | 将数组转换为字符串                 |      |
 | Array.from(arrayLike)            | 将**伪数组**转化为**真数组**       |      |
@@ -14,7 +14,7 @@
 **数组元素的添加和删除**：
 
 | 方法      | 描述                                                                       | 备注           |
-| :-------- | :--------------------------------------------------------------- | :------------- |
+| :-------- | :------------------------------------------------------------------------- | :------------- |
 | push()    | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度**           | 会改变原数组   |
 | pop()     | 删除数组中的**最后一个**元素，返回结果为**被删除的元素**                   | 会改变原数组   |
 | unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度**             | 会改变原数组   |
@@ -36,8 +36,9 @@
 注意，`split()`是字符串的方法，不是数组的方法。
 
 **数组排序**：
+
 | 方法      | 描述                                                    | 备注         |
-| :-------- | :----------------------------------------------------------------- | :------------- |
+| :-------- | :------------------------------------------------------ | :----------- |
 | reverse() | 反转数组，返回结果为**反转后的数组**                    | 会改变原数组 |
 | sort()    | 对数组的元素,默认按照**Unicode 编码**，从小到大进行排序 | 会改变原数组 |
 
@@ -303,13 +304,12 @@ console.log('result5:' + JSON.stringify(result5));
 打印结果：
 
 ```javascript
-
+arr: ['a', 'b', 'c', 'd', 'e', 'f'];
-arr:["a","b","c","d","e","f"]
+result1: ['a', 'b', 'c', 'd', 'e', 'f'];
-result1:["a","b","c","d","e","f"]
+result2: ['c', 'd', 'e', 'f'];
-result2:["c","d","e","f"]
+result3: ['e', 'f'];
-result3:["e","f"]
+result4: ['c', 'd'];
-result4:["c","d"]
+result5: [];
-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,19 +535,33 @@ 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()`：反转数组，返回结果为**反转后的数组**（会改变原来的数组）。
 
 语法：
 
-```
+```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));
@@ -624,27 +637,31 @@ console.log('result =' + JSON.stringify(result));
 
 那如果我想让 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
+上方代码还可以写成 ES6 的形式，也就是将 function 改为箭头函数，其写法如下。
-arr3 = [1, 2, 3, 4, 5, 11];
+
-result = [1, 2, 3, 4, 5, 11];
+**写法 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) {
+            dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime));
-                return parseInt(a.publishTime) - parseInt(b.publishTime);
-            });
 
             console.log('qianguyihao 排序后的数组：' + JSON.stringify(dataList));
         </script>
@@ -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() 比较保险。这是一种良好的工作习惯。
+
 ## 概念：数组的遍历
 
 遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。