add:数组的其他方法

2019-02-03 19:50:42 +08:00
parent 89f865611a
commit be3cd9b7cf
8 changed files with 261 additions and 271 deletions
--- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md
+++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md
@@ -168,6 +168,146 @@ obj:王一,王二,王三
 ```


+### map()方法
+
+解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。
+
+比如说，有一个已知的数组arr1，我要求让arr1中的每个素加10，这里就可以用到map方法。举例：
+
+```javascript
+    var arr1 = [1, 3, 6, 2, 5, 6];
+
+    var arr2 = arr1.map(function (item, index) {
+        return item + 10;  //让arr1中的每个元素加10
+
+    })
+    console.log(arr2);
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180402_0938.png)
+
+
+举例2：
+
+```javascript
+    var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
+
+    var arr2 = arr1.map(function (element, index, array) {
+        return element + "vae";  //给arr1中所有的元素增加字符串"vae"，放到arr2中。
+    });
+
+    console.log(arr1);
+    console.log(arr2);
+```
+
+结果：
+
+![](http://img.smyhvae.com/20180126_1425.png)
+
+
+
+### filter
+
+
+举例：让找出数组arr1中大于4的元素，返回一个新的数组。代码如下：
+
+
+```javascript
+    var arr1 = [1, 3, 6, 2, 5, 6];
+
+    var arr2 = arr1.filter(function (item, index) {
+        return item > 4; //将arr1中大于4的元素返回
+    })
+    console.log(arr2);
+
+```
+
+
+打印结果：
+
+![](http://img.smyhvae.com/20180402_0951.png)
+
+
+```javascript
+	Array.prototype.filter(function(item, index){})
+```
+
+
+作用：遍历过滤出一个新的子数组，返回条件为true的值。
+
+
+## 数组迭代方法
+
+数组迭代方法包括：every()、filter()、forEach()、map()、some()
+
+PS：这几个方法**不会修改原数组**。
+
+语法格式：
+
+```
+数组/boolean/无 = 数组.every/filter/forEach/map/some(
+                            function(element,index,arr){
+                                            程序和返回值；
+```
+
+有了这几种方法，就可以替代一些for循环了。下面依次来介绍。
+
+### 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()方法
+
+解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。
+
+### filter()方法
+
+解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。
+
+```javascript
+    var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
+
+    var arr2 = arr1.filter(function (element, index, array) {
+        if (element.length > 2) { //arr1中的元素，如果是长度超过2个字符的，我就把它放到arr2中去
+            return true;
+        }
+        return false;
+    });
+    console.log(arr1);
+    console.log(arr2);
+
+```
+
+结果：
+
+![](http://img.smyhvae.com/20180126_1410.png)
+


 ## 我的公众号
--- a/03-JavaScript基础/16-数组的常见方法.md
+++ b/03-JavaScript基础/16-数组的常见方法.md
@@ -9,6 +9,8 @@
 |  splice() | 从数组中**删除**指定的一个或多个元素，返回结果为**新的数组**| 会改变原数组|
 |  concat() | 连接两个或多个数组，返回结果为**新的数组**| 不会改变原数组|
 |  join() | 将数组转换为字符串，返回结果为**转换后的字符串**| 不会改变原数组|
+|  reverse() | 反转数组，返回结果为**反转后的数组**| 会改变原数组|
+|  sort() | 对数组的元素,默认按照**Unicode编码**，从小到大进行排序| 会改变原数组|


 ## 数组的常见方法
@@ -355,7 +357,6 @@ result =["f","e","d","c","b","a"]
 	result =[1,2,3,4,5,11]
 ```

-
 ## 练习

 ### splice()练习：数组去重
@@ -388,7 +389,6 @@ result =["f","e","d","c","b","a"]
      console.log(arr);
 ```

-
 ## 我的公众号

 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
--- a/03-JavaScript基础/17-数组的其他方法.md
+++ b/03-JavaScript基础/17-数组的其他方法.md
@@ -1,10 +1,111 @@

+## 前言
+
+数组的其他方法如下：
+
+| 方法 | 描述 | 备注 |
+|:-------------|:-------------|:-------------|
+|  indexOf(value) | 从前往后索引，获取 value 在数组中的第一个下标 | |
+|  lastIndexOf(value) | 从后往前索引，获取 value 在数组中的最后一个下标 | |
+|  find(function()) | 找出**第一个**满足「指定条件返回true」的元素。 | |
+|  findIndex(function()) | 找出**第一个**满足「指定条件返回true」的元素的index | |
+
+## 数组的其他方法
+
+### 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的常用方法
-
-Array有各种api接口（Application Programming Interface，应用程序编程接口），下面分别介绍。
-
-（1）判断是否为数组：instanceof
+### instanceof：判断是否为数组

 ```javascript
    布尔类型值 = A instanceof B;
@@ -14,7 +115,7 @@ Array有各种api接口（Application Programming Interface，应用程序编程

 在数组里，这种方法已经用的不多了，因为有下面这种方法。

-（2）判断是否为数组：isArray()
+### isArray()：判断是否为数组

 ```javascript
    布尔类型值 = Array.isArray(被检测的值) ;
@@ -22,7 +123,7 @@ Array有各种api接口（Application Programming Interface，应用程序编程

 PS：属于HTML5中新增的方法。

-（3）转换数组：toString()
+### toString()：转换数组

 ```javascript
    字符串 = 数组.toString();
@@ -30,7 +131,7 @@ PS：属于HTML5中新增的方法。

 解释：把数组转换成字符串，每一项用`,`分割。

-（4）返回数组本身：valueOf()
+### valueOf()：返回数组本身

 ```javascript
    数组本身 = 数组.valueOf();
@@ -38,7 +139,6 @@ PS：属于HTML5中新增的方法。

 这个方法的意义不大。因为我们指直接写数组对象的名字，就已经是数组本身了。

-
 ## 伪数组：arguments

 arguments代表的是实参。有个讲究的地方是：arguments**只在函数中使用**。
@@ -84,148 +184,6 @@ arguments代表的是实参。有个讲究的地方是：arguments**只在函数
 ```


-
-## 数组的一些其他方法
-
-### 数组的indexOf()
-
-获取数据的索引：indexOf()、lastIndexOf()
-
- indexOf()：从前往后索引
-
- lastIndexOf() ：从后往前索引
-
-```javascript
-	索引值 = 数组.indexOf/lastIndexOf(数组中的元素内容);
-```
-
- PS：如果没找到返回-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)
-
-
-**举例**：判断某个值是否在数组中
-
-```
-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));
-})
-
-```
-
-
-## 数组迭代方法
-
-数组迭代方法包括：every()、filter()、forEach()、map()、some()
-
-PS：这几个方法**不会修改原数组**。
-
-语法格式：
-
-```
-数组/boolean/无 = 数组.every/filter/forEach/map/some(
-                            function(element,index,arr){
-                                            程序和返回值；
-```
-
-有了这几种方法，就可以替代一些for循环了。下面依次来介绍。
-
-### 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()方法
-
-解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。
-
-### filter()方法
-
-解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。
-
-```javascript
-    var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
-
-    var arr2 = arr1.filter(function (element, index, array) {
-        if (element.length > 2) { //arr1中的元素，如果是长度超过2个字符的，我就把它放到arr2中去
-            return true;
-        }
-        return false;
-    });
-    console.log(arr1);
-    console.log(arr2);
-
-```
-
-结果：
-
-![](http://img.smyhvae.com/20180126_1410.png)
-
-
-
-### map()方法
-
-解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回值就是这个新的数组）。
-
-举例：
-
-```javascript
-    var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
-
-    var arr2 = arr1.map(function (element, index, array) {
-        return element + "vae";  //给arr1中所有的元素增加字符串"vae"，放到arr2中。
-    });
-
-    console.log(arr1);
-    console.log(arr2);
-```
-
-结果：
-
-![](http://img.smyhvae.com/20180126_1425.png)
-
 ## 清空数组

 清空数组，有以下几种方式：