update:数组的其他方法
This commit is contained in:
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 @@
|
||||
|
||||
![](http://img.smyhvae.com/20180124_2008.png)
|
||||
|
||||
|
||||
### forEach() 遍历
|
||||
|
||||
> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8,则不要使用forEach,改为使用for循环来遍历即可。
|
||||
@ -167,7 +195,6 @@ obj:王一,王二,王三
|
||||
----------
|
||||
```
|
||||
|
||||
|
||||
### map()方法
|
||||
|
||||
解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。
|
||||
@ -188,7 +215,6 @@ obj:王一,王二,王三
|
||||
|
||||
![](http://img.smyhvae.com/20180402_0938.png)
|
||||
|
||||
|
||||
举例2:
|
||||
|
||||
```javascript
|
||||
@ -206,12 +232,18 @@ obj:王一,王二,王三
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1425.png)
|
||||
|
||||
|
||||
|
||||
### filter
|
||||
|
||||
语法:
|
||||
|
||||
举例:让找出数组arr1中大于4的元素,返回一个新的数组。代码如下:
|
||||
```javascript
|
||||
Array.prototype.filter(function(item, index){})
|
||||
```
|
||||
|
||||
解释:对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组(返回值就是这个新的数组)。
|
||||
|
||||
|
||||
举例1:找出数组 arr1 中大于4的元素,返回一个新的数组。代码如下:
|
||||
|
||||
|
||||
```javascript
|
||||
@ -224,35 +256,29 @@ obj:王一,王二,王三
|
||||
|
||||
```
|
||||
|
||||
|
||||
打印结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180402_0951.png)
|
||||
|
||||
举例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循环了。下面依次来介绍。
|
||||
结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1410.png)
|
||||
|
||||
### 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);
|
||||
|
||||
```
|
||||
|
||||
结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1410.png)
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<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`实际上是**伪数组**,并不是真实的数组:
|
||||
|
||||
![](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
|
||||
|
@ -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`实际上是**伪数组**,并不是真实的数组:
|
||||
|
||||
![](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)
|
||||
|
||||
### 扩展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