• filter()方法

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

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

    • 1

    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;
})

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    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  不输出

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述
    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) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述
    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 Birthdayspan>
      div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    2）电影效果

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    .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;
            }
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
  • 相关阅读:
    2023年中国羽绒制品需求现状、市场规模及细分产品规模分析[图]
    魔兽世界地图插件制作代码
    新准则金融资产三分类：AMC、FVOCI和FVTPL
    uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile
    使用xmlrpc连接操作odoo
    简直不能相信！这款IDE仅插件10秒写出飞机大战游戏，太神奇了！
    1024——HelloWorld
    【Godot】项目结构设计
    stl案例二——员工分组
    如何通过阅读文档，构建概念模型？
  • 原文地址：https://blog.csdn.net/qq_53280805/article/details/127828806