es6箭头箭头函数的应用与数组的filter方法

已于 2022-02-14 12:19:18 修改
阅读量940 收藏
点赞数
分类专栏： es6-es11 文章标签： javascript 前端 vue.js
于 2022-02-04 13:02:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46564011/article/details/122782581
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box1{
      width: 500px;
      height: 500px;
      background-color:blueviolet;
    }
  </style>
</head>
<body>
<div id="box1" class="box1"></div>
<script type="text/javascript">
    /*
    箭头函数适合应用的场景是与this无关的场景,定时器(定时器我认为是因为js的执行顺序,他会先初始化代码,
    他后添加计时器,所以如果不使用箭头函数下的this他可能是会指向window,所以可以先用变量存储this然后再引用
    ),数组
    箭头函数最不合适作为回调函数本体,他因为this指向是声明后不可改动的所以,他可能会指向window,而不是事件源,所以也不太适合于作为对象内的方法
     */
    let box1=document.getElementById("box1");
    box1.addEventListener("click",function(){//addEventListener是可以为所有dom元素添加事件且可以添加多个事件,第一个参数是事件行为,
        //第二个参数是回调函数,事件触发后的逻辑
       /// let _this=this;
        setTimeout(//function(){
            //console.log(this);Window {window: Window, self: Window, document: document, name: '', location: Location, …}
            //console.log(_this);box1的dom
       //}
            ()=>{
                this.style.backgroundColor="pink";
            }
       ,2000);
    })
    /数组中的应用
    let myArr=[5,2,7,22,8,9,50];//let最大特性不会变量提升和单一存在和可划分
    //const需要保证变量地址不改变
   const nowArr=myArr.filter((ct)=>ct%2 === 0); //filter应该是一个数组的方法
    // 他会遍历整个数组(每个参数都会以形参的方法传入规则内)以括号内的规则 来判断是否为 true 是true就会整合以数组方式返回
   console.log(nowArr);
</script>
</body>
</html>

2333!!!!!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dataFilter.js:使用数据属性过滤和排序元素
05-09
dataFilter.js 使用数据属性过滤和排序元素 例子 dataFilter.init({ filterclass: 'filter', dataParent: 'dataParent', sortAttr: 'data-sort' }); 文献资料 dataFilter.init(options) 选项 filterClass用于过滤数据的按钮或链接上使用的类 dataParent父元素的ID，其中包含要过滤的数据 sortAttr用于对项目进行排序的数据属性
vue.js基础03--过滤器（filter）
muzidigbig的博客
10-09 438
注意：过滤器函数接收的第一个值是message，依次是传的值。 过滤器是可以叠加的，后面过滤器接收前面过滤器的返回值。 过滤器对前面的那个值进行显示的过滤并不会改变前面的那个值，即并不会改变data的数据。 ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
ES6新特性02：ES6语法重点介绍
Java修炼者的博客
06-26 370
Symbol是由ES6规范引入的一项新特性，它是一种新的基础数据类型，它的功能类似于一种标识唯一性的ID。通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例：ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。Symbol的值是唯一的。用来解决命名冲突的问题Symbol值不能与其他数据进行运算。
JavaScript中的filter()方法详解
最新发布
weixin_50407990的博客
04-11 9214
在JavaScript中，filter()是一个数组方法，用于从数组中过滤出符合特定条件的元素，并返回一个新数组。该方法接受一个回调函数作为参数，这个回调函数会被应用于数组的每个元素。回调函数可以返回true或false，如果返回true，则该元素将被包含在新数组中，否则则不包含。该方法不会改变原始数组，而是返回一个新的数组，其中包含符合条件的元素。
ES6学习笔记（三）箭头函数
zem
01-10 903
接触ES6之前一看到箭头函数，脑子里真的是一堆问号，不知道到底写的什么东西，但是看了一些资料了解之后，觉得也是挺容易使用的，而且在一些场合特别方便，尤其是在使用数组函数的时候，所以就把箭头函数的内容做了份笔记写下来。 箭头函数的使用 //ES5 function fn1(){}; function fn2(a){}; function fn3(a,b,c){}; //ES6 let fn1...
Js语法：filter 你真的会用了吗？
weixin_58340013的博客
09-23 1200
Js语法：filter 你真的会用了吗？
es6函数之箭头函数用法实例详解
10-15
在数组方法如`map`, `filter`, `reduce`等中，箭头函数可以简化回调函数的编写： ```javascript [1, 2, 3].map(x => x * x); ``` 7. **Rest参数**： 箭头函数也可以与rest参数结合，用于获取不定数量的参数： ...
ES6标准 Arrow Function（箭头函数=>）
10-15
ES6中的Arrow Function，也称为箭头函数，是JavaScript语法的一种新特性，它引入了一种更简洁、更直观的方式来定义函数。箭头函数的核心特点在于其简洁的语法和与众不同的`this`绑定规则。 1. **箭头函数的语法**：...
深入理解JavaScript中的箭头函数
10-23
- 作为回调函数：在数组方法如`.map()`、`.filter()`等中，箭头函数使得代码更加简洁。 - 简化单一职责函数：对于简单的函数，箭头函数可以减少代码量，提高可读性。 - 避免`this`的陷阱：在事件处理或闭包中，...
js代码-uniq 函数，实现数组去重
07-14
在实际应用中，我们还可以通过优化和利用各种技巧来提高`uniq`函数的性能，例如使用ES6的箭头函数和展运算符，使代码更加简洁： ```javascript const uniq = arr => Array.from(new Set(arr)); ``` 除了`uniq`函数...
js代码-js数组过滤filter() 方法
07-15
在ES6中，我们可以使用箭头函数来简化回调函数的写法： ```javascript let filteredNumbers = numbers.filter(number => number > 10); ``` 四、`this`关键字 在回调函数内部，`this`关键字的值可以自定义，通过`...
JavaScript之ES6语法
weixin_44827643的博客
07-12 2262
目录1.变量的使用（1）let的使用（2）const的使用2.解构赋值(1) 数组解构（2）对象解构3.箭头函数（1）箭头函数的写法（2）箭头函数的this指向问题本文主要介绍ES6中的一些语法。a.提供块级作用域b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”c.不能重复声明a.定义常量，不可更改，声明时需要初始化b.提供块级作用域c.定义数组或对象时，可修改其中的元素或属性 2.解构赋值 (1) 数组解构 a.基本解构，一一对应b.不需要赋值的变量，可不写，要用逗号空出位置c.一组
数组的.filter(_=＞_)用法解析
m0_46655912的博客
01-25 7433
数组的filter方法，过滤Truthy元素。
【ES6基础】箭头函数（Arrow functions）
前端达人
03-04 825
开篇ES6中，除了let和const新特性，箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特...
js进阶四(map、reduce、filter、sort、箭头函数、class继承、yield)
全干工程师
10-12 4896
文章目录mapreducefiltersort闭包注意点箭头函数 map var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var s = arr.map(String); console.info(s) function pow(x) { return x * x; } var results = arr.map(pow); co...
filter map 用箭头函数可以不用 return
qq_41091678的博客
09-02 869
结果都一样的 <script> var a=[{a:'123',b:'111'},{a:true}] b=a.filter(item=>item.a==true) c=a.filter(function(item){return item.a=='123'}) console.log(b)//0: {a: true} console.log(c)//{a: "123", b: "111"} </script>
Js | 此时不能使用箭头函数
GC怪兽的Blog
02-09 947
1、定义字面量方法 const calculator = { array: [1, 2, 3], sum: () =&gt; { console.log(this === window); // =&gt; true return this.array.reduce((result, item) =&gt; result + item); }...
浅谈 javascript 中 箭头函数（=>） 及 （filter） && （indexOf） && （!!~） 的含义
weixin_43837555的博客
02-18 5340
这段时间在hexo上看见一种 object.filter(event =&gt; !!~array.indexOf(event.item)) 的语法 举个栗子 deleteImage () { const oldPhotos = [] // 原来的照片数组[] const oldAlbums = app.globalData.allData.albums...
几个利用箭头函数实现的关于关于数组的方法
qq_47718360的博客
09-27 1882
数组的方法some 判断数组中的每个值，是不是都满足需求 注：只要有1个满足，就返回true。 都不满足才会返回false state = arr.some(a => a % 2 == 0); console.log(state); //true filter过滤 返回满足条件的值 let arr = [1, 30, 5, 11, 8, 50]; let state = F70.filter(a => a % 2 == 0); console.log(state); //[30,8,50] 数组
JavaScript ES6解构参数示例：箭头函数与forEach
参数解构不仅限于`forEach()`，在其他数组方法（如`map()`, `filter()`, `reduce()`等）以及函数参数中同样适用，使得代码更加简洁和易于理解。这种技术是ES6引入的重要特性之一，极大地提升了JavaScript开发的效率...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值