update:数组的其他方法

2019-02-03 20:30:09 +08:00
parent be3cd9b7cf
commit d0841f9a94
4 changed files with 151 additions and 97 deletions
--- a/03-JavaScript基础/17-数组的其他方法.md
+++ b/03-JavaScript基础/17-数组的其他方法.md
@@ -9,6 +9,8 @@
 |  lastIndexOf(value) | 从后往前索引，获取 value 在数组中的最后一个下标 | |
 |  find(function()) | 找出**第一个**满足「指定条件返回true」的元素。 | |
 |  findIndex(function()) | 找出**第一个**满足「指定条件返回true」的元素的index | |
+|  Array.from(arrayLike) | 将**伪数组**转化为**真数组**| |
+|  Array.of(value1, value2, value3) | 将**一系列值**转换成数组。| |

 ## 数组的其他方法

@@ -64,6 +66,9 @@

 ### find()

+**语法**：
+
+
 ```javascript
    find(function(item, index, arr){return true})
 ```
@@ -84,6 +89,8 @@

 ### findIndex()

+**语法**：
+
 ```javascript
    findIndex(function(item, index, arr){return true})
 ```
@@ -105,6 +112,78 @@
 ```


+### 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);
+```
+
+## 其他
+
 ### instanceof：判断是否为数组

 ```javascript