Web/03-JavaScript基础/17-数组的其他方法.md
2019-06-15 21:00:07 +08:00

375 lines
9.0 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.

## 前言
数组的其他方法如下:
| 方法 | 描述 | 备注 |
|:-------------|:-------------|:-------------|
| indexOf(value) | 从前往后索引,获取 value 在数组中的第一个下标 | |
| lastIndexOf(value) | 从后往前索引,获取 value 在数组中的最后一个下标 | |
| find(function()) | 找出**第一个**满足「指定条件返回true」的元素。 | |
| findIndex(function()) | 找出**第一个**满足「指定条件返回true」的元素的index | |
| Array.from(arrayLike) | 将**伪数组**转化为**真数组**| |
| Array.of(value1, value2, value3) | 将**一系列值**转换成数组。| |
## 数组的其他方法
### indexOf() 和 lastIndexOf():获取数据的索引
**语法**
```javascript
索引值 = 数组.indexOf(value);
索引值 = 数组.lastIndexOf(value);
```
**解释**
- indexOf(value):从前往后索引,获取 value 在数组中的第一个下标。
- lastIndexOf(value) :从后往前索引,获取 value 在数组中的最后一个下标。
**作用**
利用这个方法,我们可以判断某个值是否在指定的数组中。**如果没找到则返回`-1`**。
**举例1**
```javascript
var arr = ["a","b","c","d","e","d","c"];
console.log(arr.indexOf("c")); //从前往后,找第一个"c"在哪个位置
console.log(arr.lastIndexOf("d")); //从后往前,找第一个"d"在哪个位置
```
打印结果:
![](http://img.smyhvae.com/20180126_1125.png)
**举例2**:判断某个值是否在数组中
```javascript
var arr = ["29926392220", "29965620629", "28003663436", " ", "28818504366"];
var str = [
{name:"smyh", id: "12334"},
{name:"vae", id: "28818504366"}
];
str.filter(item => {
console.log(arr.indexOf(item.id));
})
```
### find()
**语法**
```javascript
find(function(item, index, arr){return true})
```
**作用**:找出**第一个**满足「指定条件返回true」的元素。
举例:
```javascript
let arr = [2, 3, 2, 5, 7, 6];
let result = arr.find(function (item, index) {
return item > 4; //遍历数组arr一旦发现有第一个元素大于4就把这个元素返回
});
console.log(result); //打印结果5
```
### findIndex()
**语法**
```javascript
findIndex(function(item, index, arr){return true})
```
**作用**:找出**第一个**满足「指定条件返回true」的元素的index。
举例:
> 我们直接把上面的代码中的find方法改成findIndex来看看效果。
```javascript
let arr = [2, 3, 2, 5, 7, 6];
let result = arr.findIndex(function (item, index) {
return item > 4; //遍历数组arr一旦发现有第一个元素大于4就把这个元素的index返回
});
console.log(result); //打印结果3
```
### Array.from()
**语法**
```javascript
array = Array.from(arrayLike)
```
**作用**:将**伪数组**或可遍历对象转换为**真数组**。
**举例:**
```html
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
let btnArray = document.getElementsByTagName('button');
console.log(btnArray);
console.log(btnArray[0]);
</script>
</body>
```
上面的布局中有三个button标签我们通过`getElementsByTagName`获取到的`btnArray`实际上是**伪数组**,并不是真实的数组:
![](http://img.smyhvae.com/20180402_1116.png)
既然`btnArray`是伪数组,它就不能使用数组的一般方法,否则会报错:
![](http://img.smyhvae.com/20180402_1121.png)
解决办法:采用`Array.from`方法将`btnArray`这个伪数组转换为真数组即可:
```javascript
Array.from(btnArray);
```
然后就可以使用数组的一般方法了:
![](http://img.smyhvae.com/20180402_1125.png)
**伪数组与真数组的区别**
伪数组的原型链中没有 Array.prototype而真数组的原型链中有 Array.prototype。因此伪数组没有 pop、join等属性。
### Array.of()
**语法**
```javascript
Array.of(value1, value2, value3)
```
**作用**:将一系列值转换成数组。
**举例**
```javascript
//Array.of(value1, value2, value3) : 将一系列值转换成数组
let arr = Array.of(1, 'abc', true);
console.log(arr);
```
## 其他
### isArray():判断是否为数组
```javascript
布尔值 = Array.isArray(被检测的值) ;
```
以前,我们会通过 `A instanceof B`来判断 A 是否属于 B 类型。但是在数组里,这种 instanceof 方法已经用的不多了因为有下面isArray()方法。
### toString():转换数组
```javascript
字符串 = 数组.toString();
```
解释:把数组转换成字符串,每一项用`,`分割。
### valueOf():返回数组本身
```javascript
数组本身 = 数组.valueOf();
```
这个方法的意义不大。因为我们指直接写数组对象的名字,就已经是数组本身了。
## 清空数组
清空数组,有以下几种方式:
```javascript
var array = [1,2,3,4,5,6];
array.splice(0); //方式1删除数组中所有项目
array.length = 0; //方式2length属性可以赋值在其它语言中length是只读
array = []; //方式3推荐
```
## 数组练习
### 练习1
**问题**:将一个字符串数组输出为`|`分割的形式,比如“千古|宿敌|素颜”。使用两种方式实现。
答案:
方式1不推荐
```javascript
var arr = ["千古","宿敌","素颜"];
var str = arr[0];
var separator = "|";
for(var i = 1;i< arr.length;i++) {
str += separator+arr[i]; //从第1个数组元素开始每个元素前面加上符号"|"
}
console.log(str);
```
输出结果:
![](http://img.smyhvae.com/20180126_1336.png)
不推荐这种方式因为由于字符串的不变性str拼接过多的话容易导致内存溢出很多个str都堆放在栈里
方式2推荐。通过array数组自带的api来实现
```javascript
var arr = ["千古","宿敌","素颜"];
console.log(arr.join("|"));
```
结果:
![](http://img.smyhvae.com/20180126_1339.png)
### 练习2
题目将一个字符串数组的元素的顺序进行反转使用两种种方式实现。提示第i个和第length-i-1个进行交换。
答案:
方式1
```javascript
function reverse(array) {
var newArr = [];
for (var i = array.length - 1; i >= 0; i--) {
newArr[newArr.length] = array[i];
}
return newArr;
}
```
方式2算法里比较常见的方式
```javascript
function reverse(array){
for(var i=0;i<array.length/2;i++){
var temp = array[i];
array[i] = array[array.length-1-i];
array[array.length-1-i] = temp;
}
return array;
}
```
方式3数组自带的reverse方法
现在我们学习了数组自带的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"]中每一个元素出现的次数。
分析这道题建议用json数据来做因为我们想知道a出现了几次c出现了几次x出现了几次。恰好`k:v .. k:v`这种键值对的形式就比数组方便很多了。
键值对的形式用key代表数组中的元素用value代表元素出现的次数。
略难,答案暂略。
### 练习5数组去重
问题:编写一个方法去掉一个数组中的重复元素。
分析:创建一个新数组,循环遍历,只要新数组中有老数组的值,就不用再添加了。
答案:
```javascript
// 编写一个方法 去掉一个数组的重复元素
var arr = [1,2,3,4,5,2,3,4];
console.log(arr);
var aaa = fn(arr);
console.log(aaa);
//思路:创建一个新数组,循环遍历,只要新数组中有老数组的值,就不用再添加了。
function fn(array){
var newArr = [];
for(var i=0;i<array.length;i++){
//开闭原则
var bool = true;
//每次都要判断新数组中是否有旧数组中的值。
for(var j=0;j<newArr.length;j++){
if(array[i] === newArr[j]){
bool = false;
}
}
if(bool){
newArr[newArr.length] = array[i];
}
}
return newArr;
}
```
## 我的公众号
想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/20190101.png)