update: 数组的常见方法
This commit is contained in:
qianguyihao
parent
50f5d03d35
commit
0163bcd16f
@ -44,24 +44,24 @@
|
||||
|
||||
### 查找数组的元素
|
||||
|
||||
| 方法 | 描述 | 备注 |
|
||||
| :-------------------- | :---------------------------------------------------- | :--- |
|
||||
| indexOf(value) | 从前往后索引，检索一个数组中是否含有指定的元素 | |
|
||||
| lastIndexOf(value) | 从后往前索引，检索一个数组中是否含有指定的元素 | |
|
||||
| find(function()) | 找出**第一个**满足「指定条件返回 true」的元素 | |
|
||||
| findIndex(function()) | 找出**第一个**满足「指定条件返回 true」的元素的 index | |
|
||||
| 方法 | 描述 | 备注 |
|
||||
| :-------------------- | :------------------------------------------------------------------------------- | :------------------------------------------------------- |
|
||||
| indexOf(value) | 从前往后索引，检索一个数组中是否含有指定的元素 | |
|
||||
| lastIndexOf(value) | 从后往前索引，检索一个数组中是否含有指定的元素 | |
|
||||
| find(function()) | 找出**第一个**满足「指定条件返回 true」的元素 | |
|
||||
| findIndex(function()) | 找出**第一个**满足「指定条件返回 true」的元素的 index | |
|
||||
| every() | 确保数组中的元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true | 全真才为真。要求每一项都返回 true，最终的结果才返回 true |
|
||||
| some() | 数组中只要只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true | 一真即真。只要有一项返回 true，最终的结果就返回 true |
|
||||
|
||||
### 遍历数组
|
||||
|
||||
| 方法 | 描述 | 备注 |
|
||||
| :-------- | :--------------------------------------------------------------------- | :------------------------------------------------------- |
|
||||
| for 循环 | 这个大家都懂 | |
|
||||
| forEach() | 和 for 循环类似，但需要兼容 IE8 以上 | forEach() 没有返回值。也就是说，它的返回值是 undefined |
|
||||
| map() | 对原数组中的每一项进行加工，将组成新的数组 | 不会改变原数组 |
|
||||
| filter() | 过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为**新的数组** | 不会改变原数组 |
|
||||
| every() | 如果有一项返回 false，则停止遍历，此方法返回 false | 一假即假。要求每一项都返回 true，最终的结果才返回 true |
|
||||
| some() | 只要有一项返回 true，则停止遍历，此方法返回 true | 一真即真。要求每一项都返回 false，最终的结果才返回 false |
|
||||
| reduce | 为数组中的每一个元素，依次执行回调函数 | |
|
||||
| 方法 | 描述 | 备注 |
|
||||
| :-------- | :--------------------------------------------------------------------- | :----------------------------------------------------- |
|
||||
| for 循环 | 这个大家都懂 | |
|
||||
| forEach() | 和 for 循环类似，但需要兼容 IE8 以上 | forEach() 没有返回值。也就是说，它的返回值是 undefined |
|
||||
| map() | 对原数组中的每一项进行加工，将组成新的数组 | 不会改变原数组 |
|
||||
| filter() | 过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为**新的数组** | 不会改变原数组 |
|
||||
| reduce | 为数组中的每一个元素，依次执行回调函数 | |
|
||||
|
||||
## isArray()：判断是否为数组
|
||||
|
||||
@ -797,10 +797,9 @@ qianguyihao 排序后的数组：[
|
||||
|
||||
上方代码中，有人可能会问： publishTime 字段已经是 int 类型了，为啥在排序前还要做一次 parseInt() 转换？这是因为，这种数据，一般是后台接口返回给前端的，数据可能是 int 类型、也可能是字符串类型，所以还是统一先做一次 partInt() 比较保险。这是一种良好的工作习惯。
|
||||
|
||||
|
||||
## indexOf() 和 lastIndexOf()：获取数据的索引
|
||||
|
||||
**语法1**：
|
||||
**语法 1**：
|
||||
|
||||
```javascript
|
||||
索引值 = 数组.indexOf(想要查询的元素);
|
||||
@ -820,7 +819,6 @@ qianguyihao 排序后的数组：[
|
||||
|
||||
**注意**：`indexOf()`在检索时，是严格类型约束，类似于`===`。
|
||||
|
||||
|
||||
**举例 1**：
|
||||
|
||||
```javascript
|
||||
@ -837,13 +835,11 @@ console.log(arr.lastIndexOf('d')); //从后往前，找第一个"d"在哪个位
|
||||
5
|
||||
```
|
||||
|
||||
|
||||
**举例2**：
|
||||
**举例 2**：
|
||||
|
||||
```js
|
||||
let arr = ['1', '2', '3', '4', '5'];
|
||||
console.log(arr.indexOf(2));
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
@ -852,7 +848,6 @@ console.log(arr.indexOf(2));
|
||||
-1
|
||||
```
|
||||
|
||||
|
||||
**语法 2**：
|
||||
|
||||
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
|
||||
@ -872,8 +867,6 @@ console.log(result); // 打印结果：9
|
||||
|
||||
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
|
||||
|
||||
|
||||
|
||||
## find()
|
||||
|
||||
**语法**：
|
||||
@ -926,6 +919,48 @@ let result = arr.findIndex(function (item, index) {
|
||||
console.log(result); //打印结果：3
|
||||
```
|
||||
|
||||
## every()
|
||||
|
||||
`every()`：对数组中每一项运行回调函数，如果都返回 true，every 就返回 true；如果有一项返回 false，则停止遍历，此方法返回 false。
|
||||
|
||||
注意：every()方法的返回值是 boolean 值，参数是回调函数。
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var arr1 = ['千古', '宿敌', '南山忆', '素颜'];
|
||||
var bool1 = arr1.every(function (element, index, array) {
|
||||
if (element.length > 2) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log(bool1); //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false
|
||||
|
||||
var arr2 = ['千古', '宿敌', '南山', '素颜'];
|
||||
var bool2 = arr2.every(function (element, index, array) {
|
||||
if (element.length > 2) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log(bool2); //输出结果：true。因为每个元素的长度都是两个字符。
|
||||
```
|
||||
|
||||
## some()
|
||||
|
||||
`some()`：对数组中每一个元素运行回调函数，只要有一个元素返回 true，则停止遍历，此方法返回 true。
|
||||
|
||||
注意：some()方法的返回值是 boolean 值。
|
||||
|
||||
### every() 和 some() 的使用场景
|
||||
|
||||
every() 和 some() 这两个方法，初学者很容易搞混。要怎么区分呢？你可以这样记：
|
||||
|
||||
- every()：全部真，才为真。当你需要让数组中的每一个元素都满足指定条件时，那就使用 every()。
|
||||
|
||||
- some()：一个真，则为真，点到为止。数组中只要有一个元素满足条件时，就停止遍历。那就使用 some()。
|
||||
|
||||
## valueOf()：返回数组本身
|
||||
|
||||
```javascript
|
||||
@ -934,9 +969,6 @@ console.log(result); //打印结果：3
|
||||
|
||||
这个方法的意义不大。因为我们直接写数组对象的名字，就已经是数组本身了。
|
||||
|
||||
|
||||
|
||||
|
||||
## 概念：数组的遍历
|
||||
|
||||
遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。
|
||||
@ -1137,41 +1169,7 @@ console.log(JSON.stringify(arr2));
|
||||
];
|
||||
```
|
||||
|
||||
## every()方法
|
||||
|
||||
`every()`：对数组中每一项运行回调函数，如果都返回 true，every 就返回 true；如果有一项返回 false，则停止遍历，此方法返回 false。
|
||||
|
||||
注意：every()方法的返回值是 boolean 值，参数是回调函数。
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var arr1 = ['千古', '宿敌', '南山忆', '素颜'];
|
||||
var bool1 = arr1.every(function (element, index, array) {
|
||||
if (element.length > 2) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log(bool1); //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false
|
||||
|
||||
var arr2 = ['千古', '宿敌', '南山', '素颜'];
|
||||
var bool2 = arr2.every(function (element, index, array) {
|
||||
if (element.length > 2) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log(bool2); //输出结果：true。因为每个元素的长度都是两个字符。
|
||||
```
|
||||
|
||||
## some()方法
|
||||
|
||||
`some()`：对数组中每一项运行回调函数，只要有一项返回 true，则停止遍历，此方法返回 true。
|
||||
|
||||
注意：some()方法的返回值是 boolean 值。
|
||||
|
||||
### reduce()方法
|
||||
## reduce()方法
|
||||
|
||||
> reduce 的发音：[rɪ'djuːs]。中文含义是减少。
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user