闭包 箭头函数 数组常用方法

已于 2022-09-05 00:01:23 修改
阅读量147 收藏
点赞数
文章标签： javascript 前端
于 2022-09-04 23:43:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namewh/article/details/126695334
版权

什么是闭包：一个函数嵌套另一个函数，里层的函数调用外层的函数的变量 这种现象称作闭包

 <script>
    //闭包:一个函数嵌套另一个函数，里层的函数调用外层的函数的变量 称作闭包
    function fn() {
      let n = 10
      function f() {
        console.log(n)
      }
      f()
    }
    fn()
  </script>

箭头函数：

  1. 函数表达式：将一个函数赋值给一个变量 
    <script>

const fn = function(形参1,形参2){}

</script>

  2. 基本语法：将函数function省略 在小括号和或括号之间添加 => 
    
<script>

const fn = function(){}

const fn = () => {}
 
</script>

 3.如果函数里面只有一个形参 则可以省略小括号


<script>

const fn = function(pat){}  注释：parameter参数的意思

const fn = pat => {}
    
</script>

4.如果函数里面体里面只有一行代码可以省略 {} 

<script>

const fn = function(pat){  
    console.log(1)
} 

const fn = pat => console.log(1)

</script>

5.函数体里面只有一行代码 return关键字可以省略 {} 可以省略

<script>

const fn= function(pat){  
    return pat
} 

const fn = pat => pat
 
</script>

数组常用方法 :

  • 数组.map(function(数组元素，数组索引，) {}) 

  • map方法主要是可以用来遍历数组对象 把数组对象属性写入到html标签里面 并返回一个新数组 
  • <!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>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

   
  </style>
</head>

<body>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      }
    ]
    //1定义一个函数渲染数据
    function render(arr) {
      //1.1通过map方法对数组进行加工
      // const newArr = arr.map(function (item) {
      const newArr = arr.map(item => {
        //1.2通过对象解构获取对象里面的数据
        const { name, price, picture } = item
        // console.log(name);
        return `
       <div class="item">
          <img src="${picture}" alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
        </div>
       `
      })
      //1.3通过数组.join方法把新数组newArr变成一个html可以解析的字符串写入到html标签里面
      document.querySelector('.list').innerHTML = newArr.join('')

    }
    render(goodsList)

 
  </script>
</body>

</html>

  • 数组.join(function(pst) {} )   主要结合map方法使用

  • 指定一个字符串来分隔数组的每对相邻元素。如有必要，分隔符将转换为字符串。如果省略，数组元素用逗号 （“，”） 分隔。如果 为空字符串，则连接所有元素时，它们之间没有任何字符

  • 数组.forEach(function (数组元素, 数组索引, 数组本身) { })

  •  <script>

const arr = ['a', 'b', 'c', 'd']

     // 数组.forEach(function (数组元素, 数组索引, 数组本身) { })

     arr.forEach(function (item) {

       console.log(item);

     })

     arr.forEach(item => console.log(item))

</script>

  • 数组.filter(function(数组元素，数组索引，){})

  • 主要用来筛选数组元素
 <script>
    //从数组中筛选出大于20的元素

    const arr = [10, 20, 30, 40, 50]

    // const newArr = arr.filter(function (item) {

    const newArr = arr.filter(item => {

      if (item > 20) {

        return item

      }

    })

    console.log(newArr);
  </script>

综合案例：通过商品价格筛选商品

<!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>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]
    //1定义一个函数渲染数据
    function render(arr) {
      //1.1通过map方法对数组进行加工
      // const newArr = arr.map(function (item) {
      const newArr = arr.map(item => {
        //1.2通过对象解构获取对象里面的数据
        const { name, price, picture } = item
        // console.log(name);
        return `
       <div class="item">
          <img src="${picture}" alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
        </div>
       `
      })
      //1.3通过数组.join方法把新数组newArr变成一个html可以解析的字符串写入到html标签里面
      document.querySelector('.list').innerHTML = newArr.join('')

    }
    render(goodsList)

    // 2点击价格筛选商品

    //2.1 获取所有的a元素
    const as = document.querySelectorAll('.filter a')
    // 2.2 通过数组.forEach方法遍历数组 给每一个对象添加点击事件
    as.forEach(item => {
      // 给每一个对象添加点击事件
      item.addEventListener('click', function () {
        // console.log(1);
        //2.3获取自定义属性值来判断点击的是哪一个价格区间
        const i = this.dataset.index
        // console.log(this);
        // console.log(i);
        //2.4通过自定义属性值判断点击的是哪一个区间
        let arr = []
        if (i === '1') {
          // 2.5通过数组.filter对价格进行筛选
          //  <100
          // goodsList.filter(function (item) {
          //   if (item.price > 0 && item.price <= 100) { return item }
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
        } else if (i === '2') {
          //100-300
          arr = goodsList.filter(item => item.price > 100 && item.price <= 300)

        } else if (i === '3') {
          //  >300
          arr = goodsList.filter(item => item.price > 300)

        } else {
          //所有
          arr = goodsList
        }
        render(arr)
      })
    })
  </script>
</body>

</html>

小王onrush
关注
scala方法与函数、闭包、字符串
Candriy的博客
09-16 523
一、scla方法与函数 Scala 有方法与函数，二者在语义上的区别很小。 Scala 方法是类的一部分，而函数是一个对象，可以赋值给一个变量。换句话来说在类中定义的函数即是方法。 Scala 中的方法跟 Java 的类似，方法是组成类的一部分。 Scala 中的函数则是一个完整的对象，Scala 中的函数其实就是继承了 Trait 的类的对象。 Scala 中使用 val 语句可以定义函...
闭包和回调函数
Mr_115的博客
11-16 1006
闭包和回调函数
十、函数、闭包
coderxsj
12-14 3353
函数是对象，函数名是指向函数对象的指针。 实现一个函数有函数声明、函数表达式和new Function() New Function()接受任意多个字符串作为参数，最后一个字符串作为函数体。这段代码会被解释两次，一次是普通的JS代码，一次是解释传给构造函数的字符串。 一、箭头函数 1.只有一个参数，可以不写括号；多个参数必须有括号 2.只有一行代码的函数体可以省略{}，省略时默认返回这行代码的返回值 3.箭头函数不能使用arguments、super和new.target，也没...
ES6-7【箭头函数的实质、箭头函数的使用场景】
小管打天下的博客
04-10 1005
一、箭头函数的实质 this由外层的函数作用域来决定(箭头函数的作用域是父级的作用域，不是父级) =>不能作为构造函数来使用（因为没有this） call、apply、bind无效（因为没有this） 没有arguments对象，用rest（拓展运算符）替代（因为与function不是同一种） yield 命令不能生效，在generator函数中（因为没有this） function foo(){ console.log(this) return (a) =>{
Dart学习笔记（2）-- 集合类型 List Set Map 函数定义 箭头函数 匿名函数 闭包
wjswangjinsheng的博客
05-28 234
01、List，Set，Map里面常用的属性和方法 List里面常用的属性和方法： 常用属性： length 长度 reversed 翻转 isEmpty 是否为空 isNotEmpty 是否不为空 常用方法： add 增加 addAll 拼接数组 indexOf 查找 传入具体值
闭包-回调函数
学无止境
11-15 286
闭包-回调函数
【Vue】1 - 数据驱动之 数据类型，数组常用方法
充电五分钟...
02-01 1391
vue相关js 数据类型forEachfor infor offilter(过滤)map(映射) vue特点：数据驱动（主要操作的是数据）； 之前js、jq频繁的操作dom(元素加样式，改大小，移动等) 会导致页面回流和重绘，高性能； js 数据类型 js数据类型分基本 和引用两种： 基本数据类型：number、string、boolean、null、undefined； 引用数据类型：Obje...
箭头函数，匿名函数，为什么用？怎么用？有什么不一样？使用场景是什么？
热门推荐
githubcurry
05-28 1万+
箭头函数的使用和一些特性 JS中的箭头函数用=>来标识。箭头函数有两个主要的优点: 更简短的函数； 更直观的作用域和this的绑定(不绑定this) 因为这些优点，箭头函数比起其他形式的函数声明更受欢迎。比如，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。 1.　即它允许使用箭头（=>）来定义函数。 如 　　var f = v =>v; 这个箭头函数就等同于: 　　var f = function (v) { 　　
数组对象常用的操作方法汇总
weixin_33991727的博客
07-12 400
前言 曾看到过网上很多文章，一分钟了解ES6，30分钟掌握ES6，里面都是会讲到let,const解决闭包，箭头函数等等基础的API用法。实际上在ES6的使用过程中，我们除了要掌握基础的API外，更需要会灵活运用或者组合这些API来封装一些方法，解决我们项目中遇到的各种问题。下面我将用30-seconds-code中的ES6代码，替换lodash中数组对象常用的几种方法，一起来学习一下ES6的正...
2023前端面试题总结：JavaScript篇完整版_箭头函数的this指向
m0_61331573的博客
04-20 1042
JavaScript 中的原型（prototype）和原型链（prototype chain）是理解对象和继承机制的关键概念。每个 JavaScript 对象都有一个关联的原型对象，它是一个普通对象，包含一些共享的属性和方法。当你访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着对象的原型链去查找。对象可以通过 prototype 属性来访问它的原型对象。原型链是由一系列连接的原型对象组成的链。
JavaScript常用函数数、常用正则表达式收集___下载.zip
04-18
2. **箭头函数**：自ES6引入，箭头函数提供了更简洁的语法，如 `(args) => { statements }`。 3. **Array方法**：如`map()`, `filter()`, `reduce()`等，用于数组操作，它们都是高阶函数，可以接受一个回调函数。 ...
JS常见面试试题总结【去重、遍历、闭包、继承等】
10-16
ES6（ECMAScript 2015）是JavaScript的一个重要版本，它引入了许多新特性，如let和const关键字、箭头函数、模板字符串、解构赋值、默认参数等。这些新特性在现代JavaScript开发中被广泛使用。在面试中，了解ES6的新...
JavaScript中的常用函数和闭包
JavaScript中的常用函数 ## 1.1 函数的定义和基本用法 在JavaScript中，函数是一种可重复使用的代码块，可以接受输入参数并返回值。函数的定义通常使用`function`关键字，例如： ```javascript // 定义一个简单...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 285
关于react hooks的一些知识与应用
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 130
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 225
遍历echarst多个图表，并添加独立的缩放函数
JavaScript的第十一天
全栈学习ing
10-31 734
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 237
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
JavaScript语法速查与常用函数方法详解
"JavaScript语法速查表" JavaScript是一种广泛应用于网页和...同时，随着ES6（ECMAScript 2015）及后续版本的引入，更多的特性如模板字符串、解构赋值、箭头函数、模块导入等也成为了现代JavaScript开发的重要部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值