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+=value
            return 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+=value
            return value
        },obj)
        arr1[arr.length-1].push(2)
        console.log(obj)
        console.log(arr)

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

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

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