update:数组的其他方法
This commit is contained in:
qianguyihao
parent
be3cd9b7cf
commit
d0841f9a94
@ -1,5 +1,20 @@
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
数组的四个基本方法如下：
|
||||
|
||||
| 方法 | 描述 | 备注 |
|
||||
|:-------------|:-------------|:-------------|
|
||||
| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**该数组新的长度**| 会改变原数组|
|
||||
| pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素**| 会改变原数组|
|
||||
| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**该数组新的长度**| 会改变原数组|
|
||||
| shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素**| 会改变原数组|
|
||||
|
||||
|
||||
遍历数组的方法如下：
|
||||
|
||||
|
||||
## 数组的四个基本方法（数组元素的添加和删除）
|
||||
|
||||
### push()
|
||||
@ -100,6 +115,20 @@
|
||||
|
||||
遍历数组即：获取并操作数组中的每一个元素。
|
||||
|
||||
数组迭代方法包括：every()、filter()、forEach()、map()、some()
|
||||
|
||||
PS：这几个方法**不会修改原数组**。
|
||||
|
||||
语法格式：
|
||||
|
||||
```
|
||||
数组/boolean/无 = 数组.every/filter/forEach/map/some(
|
||||
function(element,index,arr){
|
||||
程序和返回值；
|
||||
```
|
||||
|
||||
有了这几种方法，就可以替代一些for循环了。下面依次来介绍。
|
||||
|
||||
### for循环 遍历
|
||||
|
||||
举例：
|
||||
@ -117,7 +146,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
### forEach() 遍历
|
||||
|
||||
> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可。
|
||||
@ -167,7 +195,6 @@ obj:王一,王二,王三
|
||||
----------
|
||||
```
|
||||
|
||||
|
||||
### map()方法
|
||||
|
||||
解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。
|
||||
@ -188,7 +215,6 @@ obj:王一,王二,王三
|
||||
|
||||
|
||||
|
||||
|
||||
举例2：
|
||||
|
||||
```javascript
|
||||
@ -206,12 +232,18 @@ obj:王一,王二,王三
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### filter
|
||||
|
||||
语法：
|
||||
|
||||
举例：让找出数组arr1中大于4的元素，返回一个新的数组。代码如下：
|
||||
```javascript
|
||||
Array.prototype.filter(function(item, index){})
|
||||
```
|
||||
|
||||
解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。
|
||||
|
||||
|
||||
举例1：找出数组 arr1 中大于4的元素，返回一个新的数组。代码如下：
|
||||
|
||||
|
||||
```javascript
|
||||
@ -224,35 +256,29 @@ obj:王一,王二,王三
|
||||
|
||||
```
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
举例2：
|
||||
|
||||
```javascript
|
||||
Array.prototype.filter(function(item, index){})
|
||||
```
|
||||
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
|
||||
|
||||
|
||||
作用：遍历过滤出一个新的子数组，返回条件为true的值。
|
||||
|
||||
|
||||
## 数组迭代方法
|
||||
|
||||
数组迭代方法包括：every()、filter()、forEach()、map()、some()
|
||||
|
||||
PS：这几个方法**不会修改原数组**。
|
||||
|
||||
语法格式：
|
||||
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);
|
||||
|
||||
```
|
||||
数组/boolean/无 = 数组.every/filter/forEach/map/some(
|
||||
function(element,index,arr){
|
||||
程序和返回值；
|
||||
```
|
||||
|
||||
有了这几种方法，就可以替代一些for循环了。下面依次来介绍。
|
||||
结果：
|
||||
|
||||
|
||||
|
||||
### every()方法
|
||||
|
||||
@ -286,30 +312,6 @@ PS：这几个方法**不会修改原数组**。
|
||||
|
||||
解释：对数组中每一项运行回调函数，只要有一项返回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);
|
||||
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。
|
||||
|
||||
语法：
|
||||
**语法**：
|
||||
|
||||
```javascript
|
||||
新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引
|
||||
@ -55,6 +55,25 @@
|
||||
result4:[]
|
||||
```
|
||||
|
||||
|
||||
**补充**：
|
||||
|
||||
很多前端开发人员会用 slice()将维数组，转化为真数组。写法如下：
|
||||
|
||||
```javascript
|
||||
array = Array.prototye.slice.call(arrayLike)
|
||||
或者
|
||||
array = [].slice.call(arrayLike)
|
||||
```
|
||||
|
||||
|
||||
ES6 看不下去这种蹩脚的转化方法，于是出了一个新的 API：（专门用来将伪数组转化成真数组）
|
||||
|
||||
```javascript
|
||||
array = Array.from(arrayLike)
|
||||
```
|
||||
|
||||
|
||||
### splice()
|
||||
|
||||
`splice()`：从数组中**删除**指定的一个或多个元素，返回结果为**新的数组**（会改变原来的数组，会将指定元素从原数组中删除）。
|
||||
|
||||
@ -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`实际上是**伪数组**，并不是真实的数组：
|
||||
|
||||
|
||||
|
||||
既然`btnArray`是伪数组，它就不能使用数组的一般方法，否则会报错：
|
||||
|
||||
|
||||
|
||||
解决办法：采用`Array.from`方法将`btnArray`这个伪数组转换为真数组即可：
|
||||
|
||||
```javascript
|
||||
Array.from(btnArray);
|
||||
```
|
||||
|
||||
然后就可以使用数组的一般方法了：
|
||||
|
||||
|
||||
|
||||
|
||||
**伪数组与真数组的区别**：
|
||||
|
||||
伪数组的原型链中没有 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
|
||||
|
||||
@ -93,44 +93,8 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
Array.from(伪数组/可遍历的对象)
|
||||
```
|
||||
|
||||
**作用**：将伪数组对象或可遍历对象转换为真数组。
|
||||
**作用**：将**伪数组**或可遍历对象转换为**真数组**。
|
||||
|
||||
**举例：**
|
||||
|
||||
```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`实际上是**伪数组**，并不是真实的数组：
|
||||
|
||||
|
||||
|
||||
既然`btnArray`是伪数组，它就不能使用数组的一般方法，否则会报错：
|
||||
|
||||
|
||||
|
||||
解决办法：采用`Array.from`方法将`btnArray`这个伪数组转换为真数组即可：
|
||||
|
||||
```javascript
|
||||
Array.from(btnArray);
|
||||
```
|
||||
|
||||
然后就可以使用数组的一般方法了：
|
||||
|
||||
|
||||
|
||||
### 扩展2：Array.of()
|
||||
|
||||
@ -140,15 +104,6 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
|
||||
**作用**：将一系列值转换成数组。
|
||||
|
||||
**举例**：
|
||||
|
||||
|
||||
```javascript
|
||||
//Array.of(value1, value2, value3) : 将一系列值转换成数组
|
||||
let arr = Array.of(1, 'abc', true);
|
||||
console.log(arr);
|
||||
```
|
||||
|
||||
### 扩展3：find() 和 findIndex()
|
||||
|
||||
**方法1**：
|
||||
@ -168,7 +123,6 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
|
||||
**作用**：找出第一个满足「指定条件返回true」的元素的index。
|
||||
|
||||
|
||||
## 对象的扩展
|
||||
|
||||
### 扩展1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user