webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 数组的常见方法

Browse Source
This commit is contained in:
qianguyihao 2020-06-14 23:32:57 +08:00
parent 50f5d03d35
commit 0163bcd16f
1 changed files with 60 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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