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

「爱情、让人受尽委屈。」 2022-04-15 03:46 310阅读 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 条评论，310人围观）

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

相关阅读

相关 css filter 滤镜

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

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

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

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

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

相关 css3中的滤镜效果

[链接][Link 1] [CSS3 Filter的十种特效][CSS3 Filter] [Link 1]: http://www.r

女爷i/ 2022年07月14日 01:00/ 0 赞/ 185 阅读

相关 css3中的滤镜特效

页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。先放一张原图： ![原图][SouthEast] 1. grayscale滤镜（灰度滤镜） <st

朱雀/ 2022年06月05日 09:46/ 0 赞/ 328 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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