add:数组的其他方法

This commit is contained in:
qianguyihao 2019-02-03 19:50:42 +08:00
parent 89f865611a
commit be3cd9b7cf
8 changed files with 261 additions and 271 deletions

View File

@ -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()方法
解释对数组中每一项运行回调函数如果都返回trueevery就返回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)
## 我的公众号

View File

@ -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`)。

View File

@ -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()方法
解释对数组中每一项运行回调函数如果都返回trueevery就返回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)
## 清空数组
清空数组,有以下几种方式:

View File

@ -168,6 +168,8 @@ set 属性名(){} 用来监视当前属性值变化的回调函数
> 下面讲的这几个方法,都是给数组的实例用的。
> 下面提到的数组的这五个方法更详细的内容可以看《03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md》、《03-JavaScript基础/17-数组的其他方法.md》。
**方法1**
@ -175,7 +177,7 @@ set 属性名(){} 用来监视当前属性值变化的回调函数
Array.prototype.indexOf(value)
```
作用:获取在数组中的第一个下标。
作用:获取 value 在数组中的第一个下标。
**方法2**
@ -184,15 +186,7 @@ set 属性名(){} 用来监视当前属性值变化的回调函数
Array.prototype.lastIndexOf(value)
```
作用:获取值在数组中的最后一个下标。
举例:
```javascript
var arr = [1, 3, 6, 2, 5, 6];
console.log(arr.indexOf(6));//2
console.log(arr.lastIndexOf(6));//5
```
作用:获取 value 在数组中的最后一个下标。
**方法3**:遍历数组
@ -201,20 +195,6 @@ set 属性名(){} 用来监视当前属性值变化的回调函数
Array.prototype.forEach(function(item, index){})
```
举例:
```javascript
var arr = [1, 3, 6, 2, 5, 6];
arr.forEach(function (item, index) {
console.log(item, index);
});
```
打印结果:
![](http://img.smyhvae.com/20180402_0929.png)
**方法4**
@ -224,50 +204,15 @@ set 属性名(){} 用来监视当前属性值变化的回调函数
作用:遍历数组返回一个新的数组,返回的是**加工之后**的新数组。
比如说有一个已知的数组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)
**方法5**
```javascript
Array.prototype.filter(function(item, index){})
```
作用遍历过滤出一个新的子数组返回条件为true的值。
举例让找出数组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)
## 函数function的扩展bind()
> ES5中新增了`bind()`函数来改变this的指向。

View File

@ -85,8 +85,9 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
## 数组的扩展
### 扩展1
> 下面提到的数组的几个方法更详细的内容可以看《03-JavaScript基础/17-数组的其他方法.md》。
### 扩展1Array.from()
```javascript
Array.from(伪数组/可遍历的对象)
@ -131,8 +132,7 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
![](http://img.smyhvae.com/20180402_1125.png)
### 扩展2
### 扩展2Array.of()
```javascript
Array.of(value1, value2, value3)
@ -149,7 +149,7 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
console.log(arr);
```
### 扩展3
### 扩展3find() 和 findIndex()
**方法1**
@ -158,19 +158,7 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
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
```
**作用**:找出**第一个**满足「指定条件返回true」的元素。
**方法2**
@ -180,19 +168,6 @@ ES6中的字符串扩展用得少而且逻辑相对简单。如下
**作用**找出第一个满足「指定条件返回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
```
## 对象的扩展

View File

@ -26,4 +26,3 @@ css的各种效果实现尤其是动画效果关键时刻能救命。
- github排行<http://githubrank.com/>
s

View File

@ -18,11 +18,6 @@
伟明的推荐,说是对前端开发的价值观形成有良好的影响。
### 2017-07-13
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
@ -31,9 +26,6 @@
### 2017-07-31
- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1)
@ -45,8 +37,6 @@
- 画图:[processon免费在线作图](https://www.processon.com/)
### 2017-08-01
- [资深Web技术专家曹刘阳2016年前端技术观察](http://geek.csdn.net/news/detail/128912)
@ -64,8 +54,6 @@
hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀比如说网站、链接、书籍等。可否分享给我如果内容较多欢迎发表成博客。谢啦
### 2017-08-17
- [面试分享:一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
@ -74,8 +62,7 @@ hello。我看你拿了不少实习offer。有没有推荐的前端学习资料
- [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4)
作者搜集了几百篇在掘金上看到的好文章,让人惊叹。
作者搜集了几百篇在掘金上看到的好文章,让人惊叹。
### 2017-09-15
@ -138,8 +125,6 @@ hello。我看你拿了不少实习offer。有没有推荐的前端学习资料
- [前端程序员容易忽视的一些基础知识](https://www.cnblogs.com/fsyz/p/8327451.html)
### 2018-01-23
- [2018 前端趋势:更一致,更简单](https://mp.weixin.qq.com/s/HdNQv6eRchBXpNUVRuLZpQ)
@ -171,7 +156,6 @@ hello。我看你拿了不少实习offer。有没有推荐的前端学习资料
- [WEB前端工作五年了我来告诉你如何系统的学习现在的JAVASCRIPT](http://www.cnblogs.com/gongyue/p/8073235.html)
### 2018-01-29
- [最棒的 JavaScript 学习指南2018版](https://www.cnblogs.com/lhb25/p/8361799.html)
@ -214,7 +198,6 @@ hello。我看你拿了不少实习offer。有没有推荐的前端学习资料
- [不谈面试题,谈谈招聘时我喜欢见到的特质](https://www.cnblogs.com/dino623/p/8583514.html)
### 2018-04-16
- [Jerry和您聊聊Chrome开发者工具](https://mp.weixin.qq.com/s/CPnbx8ZfszPEcI3Y8RittA)
@ -230,7 +213,6 @@ hello。我看你拿了不少实习offer。有没有推荐的前端学习资料
- [一个bit一个bit的进行 Base64 白话科普,看不懂算你输](https://mp.weixin.qq.com/s/TcJUQbqjBditRvRIHuXX-Q)
### 2018-06-23
- [技术的热门度曲线](http://www.ruanyifeng.com/blog/2017/03/gartner-hype-cycle.html)

View File

@ -1,9 +0,0 @@
### 2018-06-23
- [王兴:今年移动互联网会非常惨烈,很多想象不到的公司都会死掉](http://www.ctoutiao.com/136601.html?from=timeline&isappinstalled=0)