Web/03-JavaScript基础/16-数组的常见方法.md
2019-06-15 21:00:07 +08:00

418 lines
11 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 前言
数组的常见方法如下:
| 方法 | 描述 | 备注 |
|:-------------|:-------------|:-------------|
| slice() | 从数组中**提取**指定的一个或多个元素,返回结果为**新的数组**| 不会改变原数组|
| splice() | 从数组中**删除**指定的一个或多个元素,返回结果为**新的数组**| 会改变原数组|
| concat() | 连接两个或多个数组,返回结果为**新的数组**| 不会改变原数组|
| join() | 将数组转换为字符串,返回结果为**转换后的字符串**| 不会改变原数组|
| reverse() | 反转数组,返回结果为**反转后的数组**| 会改变原数组|
| sort() | 对数组的元素,默认按照**Unicode编码**,从小到大进行排序| 会改变原数组|
## 数组的常见方法
### slice()
`slice()`:从数组中提取指定的一个或者多个元素,返回结果为**新的数组**(不会改变原来的数组)。
备注:该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回。
**语法**
```javascript
新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意:包含开始索引,不包含结束索引
```
举例:
```javascript
var arr = ["a", "b", "c", "d", "e", "f"];
var result1 = arr.slice(2); //从第二个值开始提取
var result2 = arr.slice(-2); //提取最后两个元素
var result3 = arr.slice(2, 4); //提取从第二个到第四个之间的值(不包括第四个值)
var result4 = arr.slice(4, 2); //空
console.log("arr:" + JSON.stringify(arr));
console.log("result1:" + JSON.stringify(result1));
console.log("result2:" + JSON.stringify(result2));
console.log("result3:" + JSON.stringify(result3));
console.log("result4:" + JSON.stringify(result4));
```
打印结果:
```javascript
arr:["a","b","c","d","e","f"]
result1:["c","d","e","f"]
result2:["e","f"]
result3:["c","d"]
result4:[]
```
**补充**
很多前端开发人员会用 slice()将伪数组,转化为真数组。写法如下:
```javascript
array = Array.prototye.slice.call(arrayLike)
或者
array = [].slice.call(arrayLike)
```
ES6 看不下去这种蹩脚的转化方法,于是出了一个新的 API专门用来将伪数组转化成真数组
```javascript
array = Array.from(arrayLike)
```
### splice()
`splice()`:从数组中**删除**指定的一个或多个元素,返回结果为**新的数组**(会改变原来的数组,会将指定元素从原数组中删除)。
语法:
```javascript
新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);
```
上方语法中,第三个及之后的参数,表示:向原数组中添加新的元素,这些元素将会自动插入到开始位置索引的前面。
举例1
```javascript
var arr1 = ["a", "b", "c", "d", "e", "f"];
var result1 = arr1.splice(1); //从第index为1的位置开始删除元素
console.log("arr1" + JSON.stringify(arr1));
console.log("result1" + JSON.stringify(result1));
console.log("-----------------------");
var arr2 = ["a", "b", "c", "d", "e", "f"];
var result2 = arr2.splice(-2); //从第一个位置开始,删除元素
console.log("arr2" + JSON.stringify(arr2));
console.log("result2" + JSON.stringify(result2));
console.log("-----------------------");
var arr3 = ["a", "b", "c", "d", "e", "f"];
var result3 = arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
console.log("arr3" + JSON.stringify(arr3));
console.log("result3" + JSON.stringify(result3));
console.log("-----------------------");
```
打印结果:
```javascript
arr1["a"]
result1["b","c","d","e","f"]
-----------------------
arr2["a","b","c","d"]
result2["e","f"]
-----------------------
arr3["a","e","f"]
result3["b","c","d"]
-----------------------
```
举例2我们来看看**第三个参数**的用法)
```javascript
var arr4 = ["a", "b", "c", "d", "e", "f"];
//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素
var result4 = arr4.splice(1, 3, "千古壹号", "vae");
console.log("arr4" + JSON.stringify(arr4));
console.log("result4" + JSON.stringify(result4));
```
打印结果:
```javascript
arr4["a","千古壹号","vae","e","f"]
result4["b","c","d"]
```
### concat()
`concat()`:连接两个或多个数组,返回结果为**新的数组**。(不会改变原数组)
语法:
```javascript
新数组 = 数组1.concat(数组2, 数组3 ...);
```
举例:
```javascript
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["千古壹号", "vae"];
var result1 = arr1.concat(arr2);
var result2 = arr2.concat(arr1, arr3);
console.log("arr1 =" + JSON.stringify(arr1));
console.log("arr2 =" + JSON.stringify(arr2));
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));
```
打印结果:
```javascript
arr1 =[1,2,3]
arr2 =["a","b","c"]
arr3 =["千古壹号","vae"]
result1 =[1,2,3,"a","b","c"]
result2 =["a","b","c",1,2,3,"千古壹号","vae"]
```
从打印结果中可以看到,原数组并没有被修改。
### join()
`join()`:将数组转换为字符串,返回结果为**转换后的字符串**(不会改变原来的数组)。
补充:`join()`方法可以指定一个**字符串**作为参数,这个字符串将会成为数组中元素的**连接符**;如果不指定连接符,则默认使用 `,` 作为连接符,此时和 `toString()的效果是一致的`
语法:
```javascript
新的字符串 = 原数组.join(参数); // 参数选填
```
代码举例:
```javascript
var arr = ["a", "b", "c"];
var result1 = arr.join(); // 这里没有指定连接符,所以默认使用 , 作为连接符
var result2 = arr.join("-"); // 使用指定的字符串作为连接符
console.log(typeof arr); // 打印结果object
console.log(typeof result1); // 打印结果string
console.log("arr =" + JSON.stringify(arr));
console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));
```
上方代码中,最后三行的打印结果是:
```javascript
arr =["a","b","c"]
result1 =a,b,c
result2 =a-b-c
```
### reverse()
`reverse()`:反转数组,返回结果为**反转后的数组**(会改变原来的数组)。
语法:
```
反转后的数组 = 数组.reverse();
```
举例:
```javascript
var arr = ["a", "b", "c", "d", "e", "f"];
var result = arr.reverse(); // 将数组 arr 进行反转
console.log("arr =" + JSON.stringify(arr));
console.log("result =" + JSON.stringify(result));
```
打印结果:
```javascript
arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]
```
从打印结果可以看出,原来的数组已经被改变了。
## sort()方法
> sort()方法要好好理解。所以,我们单独用一大段来讲。
`sort()`:对数组的元素进行从小到大来排序(会改变原来的数组)。
### sort()方法举例:无参时
如果在使用 sort() 方法时不带参,则默认按照**Unicode编码**,从小到大进行排序。
**举例1**:(当数组中的元素为字符串时)
```javascript
var arr1 = ["e", "b", "d", "a", "f", "c"];
var result = arr1.sort(); // 将数组 arr1 进行排序
console.log("arr1 =" + JSON.stringify(arr1));
console.log("result =" + JSON.stringify(result));
```
打印结果:
```javascript
arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]
```
**举例2**:(当数组中的元素为数字时)
```javascript
var arr2 = [5, 2, 11, 3, 4, 1];
var result = arr2s.sort(); // 将数组 arr2 进行排序
console.log("arr2 =" + JSON.stringify(arr2));
console.log("result =" + JSON.stringify(result));
```
打印结果:
```javascript
arr2 =[1,11,2,3,4,5]
result =[1,11,2,3,4,5]
```
上方的打印结果中,你会发现,使用 sort() 排序后,数字`11`竟然在数字`2`的前面。这是为啥呢?因为上面讲到了,`sort()`方法是按照**Unicode编码**进行排序的。
那如果我想让 arr2 里的数字,完全按照从小到大排序,怎么操作呢?继续往下看。
### sort()方法举例:带参时
如果在 sort()方法中带参,我们就可以**自定义**排序规则。具体做法如下:
我们可以在sort()添加一个回调函数,来指定排序规则。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器根据回调函数的返回值来决定元素的排序:(重要)
- 如果返回一个大于0的值则元素会交换位置
- 如果返回一个小于0的值则元素位置不变
- 如果返回一个0则认为两个元素相等则不交换位置
**代码举例**
```javascript
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
if (a > b) { // 如果 a 大于 b则交换 a 和 b 的位置
return 1;
} else if (a < b) { // 如果 a 小于 b则位置不变
return -1;
} else { // 如果 a 等于 b则位置不变
return 0;
}
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
```
打印结果:
```javascript
arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]
```
上方代码的写法太啰嗦了,其实也可以简化为如下写法:
**代码优化**:(冒泡排序)
```javascript
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
```
打印结果:
```javascript
arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]
```
## 练习
### splice()练习:数组去重
代码实现:
```javascript
//创建一个数组
var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];
//去除数组中重复的数字
//获取数组中的每一个元素
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i]);
/*获取当前元素后的所有元素*/
for (var j = i + 1; j < arr.length; j++) {
//console.log("---->"+arr[j]);
//判断两个元素的值是否相等
if (arr[i] == arr[j]) {
//如果相等则证明出现了重复的元素则删除j对应的元素
arr.splice(j, 1);
//当删除了当前j所在的元素以后后边的元素会自动补位
//此时将不会在比较这个元素吧我需要在比较一次j所在位置的元素
//使j自减
j--;
}
}
}
console.log(arr);
```
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/20190101.png)