update: 数组排序
This commit is contained in:
parent
6cb4f316de
commit
adc06caa3f
@ -2,7 +2,7 @@
|
||||
|
||||
## 数组简介
|
||||
|
||||
数组(Array)是属于**内置对象**,我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询各种方法。
|
||||
数组(Array)是属于**内置对象**,我们可以在[MDN](https://developer.mozilla.org/zh-CN/)网站上查询它的各种方法。
|
||||
|
||||
数组和普通对象的功能类似,也是用来存储一些值的。不同的是:
|
||||
|
||||
|
@ -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"]
|
||||
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,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
|
||||
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));
|
||||
</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() 比较保险。这是一种良好的工作习惯。
|
||||
|
||||
## 概念:数组的遍历
|
||||
|
||||
遍历数组即:获取并操作数组中的每一个元素。在我们的实战开发中,使用得非常频繁。
|
Loading…
Reference in New Issue
Block a user