webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add:数组的其他方法

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md
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()方法
解释：对数组中每一项运行回调函数，如果都返回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)
## 我的公众号

4
03-JavaScript基础/16-数组的常见方法.md
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`）。

260
03-JavaScript基础/17-数组的其他方法.md
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()方法
解释：对数组中每一项运行回调函数，如果都返回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)
## 清空数组
清空数组，有以下几种方式：

63
11-ES6/02-ES5中的一些扩展.md
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的指向。

35
11-ES6/06-ES6：字符串、数组、对象的扩展.md
View File

@ -85,8 +85,9 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
## 数组的扩展
### 扩展1
> 下面提到的数组的几个方法，更详细的内容，可以看《03-JavaScript基础/17-数组的其他方法.md》。
### 扩展1：Array.from()
```javascript
Array.from(伪数组/可遍历的对象)
@ -131,8 +132,7 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
![](http://img.smyhvae.com/20180402_1125.png)
### 扩展2
### 扩展2：Array.of()
```javascript
Array.of(value1, value2, value3)
@ -149,7 +149,7 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
console.log(arr);
```
### 扩展3
### 扩展3：find() 和 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
```
## 对象的扩展

1
17-推荐连接/01-推荐网站.md
View File

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

20
17-推荐连接/02-推荐文章.md
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)

9
17-推荐连接/推荐链接-互联网相关.md
View File

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