css中的filter滤镜和js中的filter方法

「爱情、让人受尽委屈。」 2022-04-15 03:46 353阅读 0赞

filter是滤镜，就是将某些东西过滤出来。

▍css中的filter

运用于对图像进行相关处理（就像P图一样，改变图片的颜色、饱和度等属性），详细解析可参考[菜鸟教程][Link 1]。

▍js中的filter

`filter()函数是Array对象的一个方法`。和`map()`不同的是，`filter()`把传入的函数依次作用于每个元素，然后根据返回值是`true`还是`false`决定保留还是丢弃该元素（返回值为true时保留，返回值为false时丢弃）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70][]

示例1：

var arr = ['a', 'b', '', 'c'];
    var r = arr.filter(element => element && element.trim());
    console.log(r.toString()); // a, b, c

示例2：

var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) {
        console.log(element); // 依次打印 'A', 'B', 'C'
        console.log(index); // 依次打印 0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });

具体使用方法可以参考：[javascript中filter的用法][javascript_filter]。

[Link 1]: http://www.runoob.com/cssref/css3-pr-filter.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220415/b578e6f8fb354b7baa062316df2d74d0.png
[javascript_filter]: https://www.cnblogs.com/cjx-work/p/8052865.html

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS滤镜filter，让页面加上滤镜效果

1、概念 filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会

小鱼儿/ 2023年10月07日 20:12/ 0 赞/ 67 阅读

相关 CSS3中强大的filter(滤镜)属性使用详细解说

![format_png][] -------------------- 在CSS3新增加的属性中有一个属性较为特殊，那就是filter属性，该属性一般来说是用于元素本身的

╰半橙微兮°/ 2023年02月22日 10:48/ 0 赞/ 35 阅读

相关 css filter 滤镜

filter 注：filter 属性目前已经完全可以在实际项目中应用，只要你的项目不需要兼容IE和Edge，例如中后台和内部系统，移动端项目等，可以放心使用。 ![C

川长思鸟来/ 2023年02月14日 05:59/ 0 赞/ 271 阅读

相关 FFmpeg中的滤镜(filter)知识点记录

FFmpeg支持多种滤镜，查看全部滤镜 $ ffmpeg -filters 1、滤镜图、滤镜链、滤镜之间关系滤镜图

迷南。/ 2022年07月14日 02:11/ 0 赞/ 383 阅读

相关 CSSgram：使用CSS Filters和CSS Blend Modes实现Instagram风格滤镜

![CSSgram][] ![图片描述][20151026142127682] ![图片描述][20151026142141404] ![图片描述][2015102

末蓝、/ 2022年05月26日 08:40/ 0 赞/ 153 阅读

相关 IE中CSS-filter滤镜小知识大全

前段时间在做一个专题的时候用到了`opacity`不透明度属性，因为设计图上是半透明背景，白色文字所以在IE用到了其支持的filter属性，听说这个属性还有不同的效果，不单

待我称王封你为后i/ 2022年05月24日 11:38/ 0 赞/ 425 阅读

相关 css中的filter滤镜和js中的filter方法

filter是滤镜，就是将某些东西过滤出来。 ▍css中的filter 运用于对图像进行相关处理（就像P图一样，改变图片的颜色、饱和度等属性），详细解析可参考[菜鸟教

「爱情、让人受尽委屈。」/ 2022年04月15日 03:46/ 0 赞/ 354 阅读

相关 CSS3中强大的filter(滤镜)属性

1定义　　　　　　filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；举个栗子： !

Dear 丶/ 2021年11月13日 22:36/ 0 赞/ 368 阅读

相关 css3filter(滤镜)属性和jquery过滤器.filter()

一.css3filter(滤镜)属性 (1).语法 filter: none | blur() | brightness() | contrast() | drop

た入场券/ 2021年09月14日 16:38/ 0 赞/ 411 阅读

相关 Python: PS 滤镜特效 -- Marble Filter

本文用 Python 实现 PS 滤镜特效，Marble Filter, 这种滤镜使图像产生不规则的扭曲，看起来像某种玻璃条纹，具体的代码如下: import num...

小灰灰/ 2021年01月12日 03:32/ 0 赞/ 580 阅读