From 03bb108bbebfc7bef2fa085fab4260cd34c3658e Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 20 Sep 2019 20:59:32 +0800 Subject: [PATCH] =?UTF-8?q?add:=20filter=20=E6=96=B9=E6=B3=95=E7=9A=84?= =?UTF-8?q?=E4=B8=BE=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...法&数组的遍历.md => 15-数组的常见方法&数组的遍历.md} | 115 ++++++++++-------- 1 file changed, 66 insertions(+), 49 deletions(-) rename 03-JavaScript基础/{15-数组的四个基本方法&数组的遍历.md => 15-数组的常见方法&数组的遍历.md} (95%) diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的常见方法&数组的遍历.md similarity index 95% rename from 03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md rename to 03-JavaScript基础/15-数组的常见方法&数组的遍历.md index 23de224..63359a5 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的常见方法&数组的遍历.md @@ -30,8 +30,8 @@ |:-------------|:-------------|:-------------| | for循环 | 这个大家都懂| | | forEach()|和 for循环类似,但需要兼容IE8以上 |forEach() 没有返回值。也就是说,它的返回值是 undefined| -| filter()| 返回结果是true的项,将组成新的数组。可以起到过滤的作用| 不会改变原数组| | map()| 对原数组中的每一项进行加工,将组成新的数组 | 不会改变原数组 | +| filter()| 对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组,返回结果为**新的数组**。可以起到过滤的作用| 不会改变原数组| | every()| 如果有一项返回false,则停止遍历 | 意思是,要求每一项都返回true,最终的结果才返回true | | some()| 只要有一项返回true,则停止遍历 | | | reduce | | | @@ -595,54 +595,6 @@ obj:王一,王二,王三 注意,forEach() 的返回值是 undefined。也就是说,它没有返回值。如果你尝试 `tempArry = arr.forEach()`这种方式来接收,是达不到效果的。 -### filter() - -语法: - -```javascript - Array.prototype.filter(function(item, index){}) -``` - -解释:对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组(返回值就是这个新的数组)。 - - -举例1:找出数组 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) - -举例2: - -```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()方法 解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。 @@ -690,6 +642,71 @@ obj:王一,王二,王三 map的应用场景,主要就是以上两种。 + +### filter() + +语法: + +```javascript + arr1.filter(function(item, index){}) +``` + +解释:对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组(返回值就是这个新的数组)。 + +**举例1**:找出数组 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(JSON.stringify(arr2)); + +``` + +打印结果: + +``` + [6,5,6] +``` + + +上方代码的ES6写法: + +```javascript + const arr1 = [1, 3, 6, 2, 5, 6]; + + const arr2 = arr1.filter(item=> item > 4); //将arr1中大于4的元素返回,组成新的数组 + + console.log(JSON.stringify(arr2)); + +``` + +**举例2**: + +获取数组A中指定类型的对象,放到数组B中。代码举例如下: + +```javascript + const arr1 = [ + { name: '许嵩', type: '一线' }, + { name: '周杰伦', type: '过气' }, + { name: '邓紫棋', type: '一线' }, + ]; + + const arr2 = arr1.filter(item => item.type == '一线'); // 筛选出一线歌手 + + console.log(JSON.stringify(arr2)); +``` + + +打印结果: + +```javascript + [{"name":"许嵩","type":"一线"},{"name":"邓紫棋","type":"一线"}] +``` + + ### every()方法 解释:对数组中每一项运行回调函数,如果都返回true,every就返回true;如果有一项返回false,则停止遍历,此方法返回false。