filter()方法|青训营笔记filter()创建一个新的数组，新数组中的元素是通过检查指定叔祖中符合条件的所有元素。

这是我参与**「第五届青训营」**伴读笔记创作活动的第5天

1.定义

filter()创建一个新的数组，新数组中的元素是通过检查指定叔祖中符合条件的所有元素。

2.语法

array.filter(function(currentValue,index,arr), thisValue);

3.注意事项

1）filter()不会对空数组进行检测；

2）filter()不会改变原始数组。

4.例子

1）用来返回一个数组，满足特定条件的数组元素

var arr = [1,2,3,4,5,7,6]
arr.filter(function(currentVale){
    var result = currentVale%2==0;
    return result;
})

2）去重

var arr = [1,3,4,5,6,7,4,5,1]
arr.filter(function(current,index,self){
    // self.indexOf(current)表示该元素第一次出现的索引值
    var newIndex = self.indexOf(current);
    return newIndex == index;
})

// current => newIndex=>index
//       1=>    0    =>   0  输出
//       3=>    1    =>   1  输出
//       4=>    2    =>   2  输出
//       5=>    3    =>   3  输出
//       6=>    4    =>   4  输出
//       7=>    5    =>   5  输出
//       4=>    2    !=>   6  不输出
//       5=>    3    !=>   7  不输出
//       1=>    9    !=>   8  不输出

3）过滤素数值

var isPrime = function(number){
    if(number === 2){
        return true;
    }
    var square = Math.sqrt(number);
    for(let i = 2;i<=square;i++){
    if(number % i === 0){
        return false;
    }
    }
    return true;
};

var arr = [];
for(var j=2;j<=100;j++){
    arr.push(j);
}
arr.filter(isPrime)

5.css中的filter

在css中，也有一个filter属性，可以用css代码为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移。

1）酷炫文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter实现炫酷效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
            
        }
        .container{
            height: 100%;
            text-align: center;
            background-color: #000;
            filter: contrast(30);
        }
        .text{
            font-size: 100px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            letter-spacing: -40px;
            color: #fff;
            animation: move-letter 4s linear forwards; 
            line-height: 600px;
        }
        @keyframes move-letter{
            0% {
                opacity: 0;
                letter-spacing: -40px;
                filter: blur(10px);
            }
            25% {
                opacity: 1;
            }
            50% {
                filter: blur(5px);
            }
            100% {
                letter-spacing: 20px;
                filter: blur(2px);
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <span class="text">Happy Birthday</span>
      </div>
</body>
</html>

2）电影效果


<div class="container">
        <div class="pic"></div>
        <div class="text">
          <p>如果生活中有什么使你感到快乐，那就去做吧</p>
          <br>
          <p>不要管别人说什么</p>
        </div>
</div>


.pic{
            height: 100%;
            width: 100%;
            position: absolute;
            background: url('./img/1.jpg') no-repeat;
            background-size: cover;
            animation: fade-away 3s linear forwards;  
        }
        .text{
            position: absolute;
            line-height: 55px;
            color: #fff;
            font-size: 36px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            opacity: 0;
            animation: show 3s cubic-bezier(.74,-0.1,.86,.83) forwards;
        }
            
        @keyframes fade-away {   
            30%{
                filter: brightness(1);
            }
            100%{
                filter: brightness(0.3);
            }
        }
        @keyframes show{     
            20%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }