js过滤器filter的使用

过滤器filter是数组对象的一个方法，该方法不会改变原数组。该数组有两个参数第一个是函数并且数组中每个元素都会执行这个函数，这个函数共有三个参数第一个为必填当前元素的值，第二个为可选，当前元素的索引值。第三个可选，当前元素属于的数组对象。第二个是回调函数对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。

下面通过代码实践一下filter的一些作用。‘

    <script>let arr=[1,2,3,4,5,6,7,8];arr.filter(function(value,index,arr){console.log("当前值"+value)console.log("当前值"+index)console.log("当前所属对象"+arr)})</script>

上面的代码分别打印的是：

当前值1
当前值0
当前所属对象1,2,3,4,5,6,7,8
当前值2
当前值1
当前所属对象1,2,3,4,5,6,7,8
当前值3
当前值2
当前所属对象1,2,3,4,5,6,7,8
当前值4
当前值3
当前所属对象1,2,3,4,5,6,7,8
当前值5
当前值4
当前所属对象1,2,3,4,5,6,7,8
当前值6
当前值5
当前所属对象1,2,3,4,5,6,7,8
当前值7
当前值6
当前所属对象1,2,3,4,5,6,7,8
当前值8
当前值7
当前所属对象1,2,3,4,5,6,7,8

上面分别打印的是值于索引和该索引数组的所有值

我们可以对其修改一下值看一下是否会改变原数组：

        let arr=[1,2,3,4,5,6,7,8];let arr1= arr.filter(function(value,index,arr){arr[index]=value++console.log(arr)return arr[index]})console.log(arr1)console.log(arr)

通过打印出来发现是不会改变原数组arr的。

接下来我们实践一下第二个参数的作用。第二个参数说的是对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

我们可以打印一下this看一下

        let arr=[1,2,3,4,5,6,7,8];let obj={name:'123',age:12,sum:100}let arr1= arr.filter(function(value,index,arr){console.log(this)return arr[index]},obj)

上面这对代码他会打印对应次数的obj对象。

当我们去掉obj看this的话它打印的是window并不是我们说的‘undefined’这是为什么呢？，接下来我们开启严格模式看一下是不是这样的呢？

通过开启严格模式‘use strict’它的打印确实变成的undefined了。

再次总结，省略第二个参数的话在开启严格模式下，他的this指向undefined在不开启严格模式下的值是window，在不省略的下，他的this。指向我们传入的对象。

filter的大致意思我们搞懂了就可以对他进行一些操作赋值什么的了。

看一下代码

        let arr=[1,2,3,4,5,6,7,8];let obj={name:'123',age:12,sum:100}let arr1= arr.filter(function(value,index,arr){obj.sum+=valuereturn value>1},obj)console.log(obj)console.log(arr1)

上面这段代码，我把arr数组的所有值都添加到了obj对象的sum属性上，并且把arr中所有大于1的值赋值给了arr1数组。

那filter是深拷贝还是浅拷贝呢？

打印看一下

        let arr=[1,2,3,4,5,6,7,8,[1,1,1]];let obj={name:'123',age:12,sum:100}let arr1= arr.filter(function(value,index,arr){obj.sum+=valuereturn value},obj)arr1[arr.length-1].push(2)console.log(obj)console.log(arr)

在是一个多维数组的情况下他是一个浅拷贝，在是一个数据类型全部是基本数据类型的话是一个深拷贝。

具体还有什么功能以后用多了在说吧。

有什么缺少的功能可以评论出来，谢谢

js过滤器filter的使用相关推荐

【Vue2】自定义指令 directives 过滤器 filter
自定义指令 directives directives 的简写我们可以通过配置项 directives 来自定义指令自定义指令时直接写指令名 XXX,使用时需要加上前缀为 v-XXX <di ...
Javaweb核心之servlet规范过滤器-----Filter
2 Servlet规范中的过滤器-Filter 2.1 过滤器入门 2.1.1 过滤器概念及作用过滤器--Filter,它是JavaWeb三大组件之一.另外两个是Servlet和Listener. ...
如何在vue上全局使用过滤器filter
如何在vue上全局使用过滤器filter 在src下新建文件夹utils,创建filter.js文件 import Vue from 'vue'Vue.filter("publishdate ...
----------------------过滤器filter简单登录和乱码过滤----
web.xml里面的代码 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...
⑧javaWeb之在例子中学习（过滤器Filter）
前言本系列 Servlet & JSP 学习系列[传送门]逐渐到了中期了,希望大家喜欢我写的,总结的点点滴滴- 今天我们来讲讲过滤器你们的支持是我写博客的动力哦. 最近买了两本书,觉得大二 ...
一场由过滤器Filter引发的血案
一场由过滤器Filter引发的血案事件起因本来应该是下图的登录界面变成了这样 What's the fuck????? 抓狂原因解决方法: 在过滤器中给资源文件开个绿色通道
Java web—Servlet过滤器(Filter)
前言: 过滤器是Servlet中一个非常重要的组成部分,进行WEB开发时无不用到过滤器:因此这篇blog来单独总结下关于过滤器的知识点. 一.首先来了解一下什么是过滤器: 下面这句话引 ...
ITK:过滤器Filter和ParallelizeImageRegion比较
ITK:过滤器Filter和ParallelizeImageRegion比较内容提要输出结果 C++实现代码内容提要本示例演示如何利用MultiThreaderBase :: Parallel ...
ITK:复制过滤器filter
ITK:复制过滤器filter 内容提要输出结果 C++实现代码内容提要复制/复制过滤器输出结果 2 C++实现代码 #include "itkAbsImageFilter.h&qu ...

js过滤器filter的使用

js过滤器filter的使用相关推荐

最新文章

热门文章