From d0841f9a94d207c79a0f4d867262e756053335bb Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 3 Feb 2019 20:30:09 +0800 Subject: [PATCH] =?UTF-8?q?update:=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 | 100 +++++++++--------- 03-JavaScript基础/16-数组的常见方法.md | 21 +++- 03-JavaScript基础/17-数组的其他方法.md | 79 ++++++++++++++ 11-ES6/06-ES6：字符串、数组、对象的扩展.md | 48 +-------- 4 files changed, 151 insertions(+), 97 deletions(-) diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md index 6d97491..ac02000 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md @@ -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) - - - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/03-JavaScript基础/16-数组的常见方法.md b/03-JavaScript基础/16-数组的常见方法.md index e952c7f..34e7aae 100644 --- a/03-JavaScript基础/16-数组的常见方法.md +++ b/03-JavaScript基础/16-数组的常见方法.md @@ -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()`：从数组中**删除**指定的一个或多个元素，返回结果为**新的数组**（会改变原来的数组，会将指定元素从原数组中删除）。 diff --git a/03-JavaScript基础/17-数组的其他方法.md b/03-JavaScript基础/17-数组的其他方法.md index 0add42b..a92d9fd 100644 --- a/03-JavaScript基础/17-数组的其他方法.md +++ b/03-JavaScript基础/17-数组的其他方法.md @@ -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 + + + + + + + + + +``` + +上面的布局中，有三个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 diff --git a/11-ES6/06-ES6：字符串、数组、对象的扩展.md b/11-ES6/06-ES6：字符串、数组、对象的扩展.md index 609298d..b8a6777 100644 --- a/11-ES6/06-ES6：字符串、数组、对象的扩展.md +++ b/11-ES6/06-ES6：字符串、数组、对象的扩展.md @@ -93,44 +93,8 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下： Array.from(伪数组/可遍历的对象) ``` -**作用**：将伪数组对象或可遍历对象转换为真数组。 +**作用**：将**伪数组**或可遍历对象转换为**真数组**。 -**举例：** - -```html - - - - - - - - - -``` - -上面的布局中，有三个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