From be3cd9b7cf597043c9dabc051bda2bc08cde9813 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 3 Feb 2019 19:50:42 +0800 Subject: [PATCH] =?UTF-8?q?add:=E6=95=B0=E7=BB=84=E7=9A=84=E5=85=B6?= =?UTF-8?q?=E4=BB=96=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../15-数组的四个基本方法&数组的遍历.md | 140 ++++++++++ 03-JavaScript基础/16-数组的常见方法.md | 4 +- 03-JavaScript基础/17-数组的其他方法.md | 260 ++++++++---------- 11-ES6/02-ES5中的一些扩展.md | 63 +---- 11-ES6/06-ES6：字符串、数组、对象的扩展.md | 35 +-- 17-推荐连接/01-推荐网站.md | 1 - 17-推荐连接/02-推荐文章.md | 20 +- 17-推荐连接/推荐链接-互联网相关.md | 9 - 8 files changed, 261 insertions(+), 271 deletions(-) delete mode 100644 17-推荐连接/推荐链接-互联网相关.md diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md index 098dbff..6d97491 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md @@ -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) + ## 我的公众号 diff --git a/03-JavaScript基础/16-数组的常见方法.md b/03-JavaScript基础/16-数组的常见方法.md index 50f9d6e..e952c7f 100644 --- a/03-JavaScript基础/16-数组的常见方法.md +++ b/03-JavaScript基础/16-数组的常见方法.md @@ -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); ``` - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/03-JavaScript基础/17-数组的其他方法.md b/03-JavaScript基础/17-数组的其他方法.md index 0617cc1..0add42b 100644 --- a/03-JavaScript基础/17-数组的其他方法.md +++ b/03-JavaScript基础/17-数组的其他方法.md @@ -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) - ## 清空数组 清空数组，有以下几种方式： diff --git a/11-ES6/02-ES5中的一些扩展.md b/11-ES6/02-ES5中的一些扩展.md index 49c3019..ed4d7b2 100644 --- a/11-ES6/02-ES5中的一些扩展.md +++ b/11-ES6/02-ES5中的一些扩展.md @@ -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的指向。 diff --git a/11-ES6/06-ES6：字符串、数组、对象的扩展.md b/11-ES6/06-ES6：字符串、数组、对象的扩展.md index 39cc5b1..609298d 100644 --- a/11-ES6/06-ES6：字符串、数组、对象的扩展.md +++ b/11-ES6/06-ES6：字符串、数组、对象的扩展.md @@ -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 -``` ## 对象的扩展 diff --git a/17-推荐连接/01-推荐网站.md b/17-推荐连接/01-推荐网站.md index 6237f32..ff8cad2 100644 --- a/17-推荐连接/01-推荐网站.md +++ b/17-推荐连接/01-推荐网站.md @@ -26,4 +26,3 @@ css的各种效果实现（尤其是动画效果），关键时刻能救命。 - github排行： -s \ No newline at end of file diff --git a/17-推荐连接/02-推荐文章.md b/17-推荐连接/02-推荐文章.md index 7da5521..b1b8cd9 100644 --- a/17-推荐连接/02-推荐文章.md +++ b/17-推荐连接/02-推荐文章.md @@ -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) diff --git a/17-推荐连接/推荐链接-互联网相关.md b/17-推荐连接/推荐链接-互联网相关.md deleted file mode 100644 index 5d0fe40..0000000 --- a/17-推荐连接/推荐链接-互联网相关.md +++ /dev/null @@ -1,9 +0,0 @@ - - -### 2018-06-23 - - - - -- [王兴：今年移动互联网会非常惨烈，很多想象不到的公司都会死掉](http://www.ctoutiao.com/136601.html?from=timeline&isappinstalled=0) -