JavaScript高级04-ES6语法与数组遍历

最新推荐文章于 2023-11-15 10:58:37 发布
最新推荐文章于 2023-11-15 10:58:37 发布
阅读量518 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vip77778888/article/details/122203625
版权

目录

Var特点

lat与const的特点

解构对象

函数的参数解构

箭头函数

展开运算符

数据类型Set

数组map遍历

数组filter遍历

数组forEach遍历

数组some遍历

数组every遍历

数组findIndex方法

reduce方法

Var特点

<script>
    // 预解析 js代码从上玩下解析之前,会对变量声明进行提升,(预解析)
    // 2. 没有块级作用域 if 和for 语句的大括号声明的变量也是局部的
    // 2.1 没有块级.if 和for大括号声明的变量不是局部的,是全局的
    console.log(num)
    var num = 1
    console.log(num)
    for(var i=1 ;i<= 5 ;i++){
      console.log(`循环内`);
    }
  </script>

lat与const的特点

  /**1.ES5中声明变量var关键字的特点

    1.1 预解析:变量声明提升

    1.2 没有块级作用域:if和for大括号里面声明的变量也是全局的

    2.ES6中声明let与const特点:

    1.1么有预解析:变量必须先声明,才能使用

    1.2块级作用域:if和for大括号里面的变量是局部的

    3.let与const区别:

      3.1 let: 变量.可以修改变量中的数据

      3.2 const:常量.只能声明的时候赋值一次,不可以修改

    */

解构对象

 /**

     * 解构赋值 : 变量赋值简写语法

     * 1重点掌握

     *    1.1 取出对象的属性  赋值给变量

     *    1.2 取出变量的值    赋值给 对象的属性

     */

  // 1.取出对象的属性  赋值给变量
    // let obj = {
    //   name: '聪明蛋',
    //   age: 22,
    //   gender: '女'
    // }
    // ES5
    // let name = obj.name
    // let age  = obj.age
    //let gender = obj.gender
    // 

    // ES6 简写形式 可以直接省略
    // let {
    //   name,  //name :'聪明蛋'  简写形式
    //   age,
    //   gender,
    //   hobby
    //   // let hobby  = obj.hobby
    // } = obj
    // console.log(name, age, gender, hobby)


    //2. 取出变量的值 赋值给对象的属性
    let name = '聪明蛋'
    let age = 18
    let gender = '女'

    // ES6写法
    let obj = {
      name, //等同于ES5写法中的 name:name  简写
      age,
      gender,
      eat() { //等价于ES5中的eat:function(){}   简写
        console.log('吃东西')
      }
    }
    console.log(obj)

函数的参数解构

<script>
    /**
     * 解构赋值 : 变量赋值简写语法
     * 1重点掌握
     *    1.1 取出对象的属性  赋值给变量
     *    let {name,age,sex} = 对向名
     *    1.2 取出变量的值    赋值给 对象的属性
     */

    function fn({uname,pword}) { //{ uname,pword} = {uname:'聪明蛋',pword:'123456'}
      console.log(uname,pword)
    }
    fn({
      uname: '聪明蛋',
      pword: '123456'
    })
  </script>

箭头函数

 <script>
    /**
     * 1. 箭头函数的语法:就是function的简写
          1.1 把function单词替换成 箭头 =>
          1.2 把形参()移动到  箭头的 左边
     * 2.箭头函数的其他用法:
          2,1 如果只有一个形参,则可以省略形参小括号
           a=>(return a*2)
          2.2 如果函数体只有一行 ,则可以省略大括号,此时必须要省略return
           a=>a*2
    * 3.箭头函数this指向:箭头函数没有this
        箭头函数中使用this,会访问上级作用域this
          愿意:箭头函数没有this,就往上级作用域找
    */
    // 1.箭头函数
    let fn = () => {} // ===   let fn = function(){}  ES6简写形式 

    // 2.如果只有一个形参 那么可以省略形参的小括号()
    let fn1 = a => {
      return a * 12
    }
    let res1 = fn1(20)
    console.log(res1)

    //3.如果函数体只有一行 那么可以省略大括号{}
    let fn2 = a => a * 22
    let res2 = fn2(123)
    console.log(res2)
    let obj = {
      eat: function () {
        let fn1 = function () {
          console.log(this)
        }
        fn1()
        let fn2 = () => {
          console.log(this)
        }
        fn2()
      },
      learn: () => {
        let fn1 = function () {
          console.log(this)
        }
        fn1()
        let fn2 = () => {
          console.log(this)
        }
        fn2()
      }
    }

    console.log(obj)
    obj.eat()
    obj.learn()
    
  </script>

展开运算符

 <script>
    /**
     * 1.展开运算符 :...
     * 2.作用 相当于遍历数组
     * 3.应用场景:
        3.1 连接数组(上拉加载下一页) : arr1.push(...arr2)
        3.2 求数组最大值 :   Math.max(..arr)
     */
    // 1.连接数组  :页面加载下一页的时候,就需要连接数组
    let arr1 = [10, 20, 30, 40]
    let arr2 = [20, 30, 40, 50]
    //ES5:arr.push.apply(arr1,arr2)
1
    // ES6 arr1.push(...arr2)
    arr1.push(...arr2)
    console.log(arr1)


    //2,求数组的最大值
    let arr = [10, 20, 30, 324, 234, 453, 645, 677, 56, 7567, 567567, 567, 5675671, ]
    // ES5.Math.max.apply(Math,arr)
    // ES6.Math.max(...arr)
    let max = Math.max(...arr)
    console.log(max)
  </script>

数据类型Set

<script>
    let arr = [123, 12, 32, 423, 534, 545, 756, 23, 5, 3, 678, 567, 23, 4346, 45, 679, 123, 12, 423, 5, 346, 4, 745623,
      4, 23, 534, 673, 5, 2135, 34, 756, 34637, 56, 856, 789, 35345, 3, 645, 7, 568, 67, 45, 345, 3453456, 856, 5453,
      4
    ]
    let newArr = Array.from(new Set(arr))
    console.log(newArr)
  </script>

数组map遍历

 <script>
    /*
    1.map场景:映射数组.对数组每一个元素进行映射处理,得到一个全新数组
          映射关系: 每一个元素 *0.8
          映射关系: 每一个元素*2
    2.map方法特点
          (1)回调执行次数  === 数组长度
          (2)本身返回值: 映射之后的新数组
          (3)回调函数内部return
            return 新数组元素值
            如果不写return, 新数组的每一个元素都会变成undefined
    */
    let arr = [10, 423, 3456, 6, 234, 111]
    let newArr = arr.map((value, index) /*元素,下标*/ => {
      return value * 2 * 0.8
    })
    console.log(newArr)
  </script>

数组filter遍历

  <script>
    /*
    1.filter场景: 筛选数组
      举例:找出数组中符合条件的元素
          找到数组中所有的偶数
          找到对象数组中符合条件的元素
    2.filter方法特点
          (1)回调执行次数  === 数组长度
          (2)本身返回值: 映射之后的新数组
          (3)回调函数内部return
            return 新数组元素值
            return true:满足筛选条件,当前元素放入新数组中
            return false:不满足筛选条件,当前元素放入新数组中
    */
    let arr = [12, 312, 3, 123, 12, 3, 123, 12, 4, 23, 53, 46, 45, 87, 67, 978, 90, 780, 89089, 56, 45]
    let src = arr.filter(value => value % 2 == 0)
    let src1 = arr.filter((value, index) => {
      if (value % 2 == 0) {
        return true
      } else {
        return false
      }
    })
    console.log(src)
    let arr1 = [{
        name: 'Gtx960',
        price: 1500
      },
      {
        name: 'Rtx2060',
        price: 4000
      },
      {
        name: 'Rtx3060',
        price: 2499
      },
      {
        name: 'Rtx3060Ti',
        price: 2999
      },
      {
        name: 'Rtx3070',
        price: 4999
      },
      {
        name: 'Rtx3070Ti',
        price: 5999
      },
      {
        name: 'Rtx3080',
        price: 7999
      },
      {
        name: 'Rtx3080Ti',
        price: 8500
      },
      {
        name: 'Rtx3090',
        price: 9999
      },
      {
        name: 'Rtx3090Ti',
        price: 11999
      }
    ]
    let res2 = arr1.filter(value => value.price > 4000 && value.price < 10000)
    console.log(res2)
  </script>

数组forEach遍历

 <script>
    /*
    1.function场景:遍历数组

    2.forEach 方法特点
        (1)遍历次数 === 数组长度
        (2)本身返回值
              无
        (3)回调函数内部return
              无
     
    */
    let arr = [12, 312, 3, 123, 12, 3, 123, 12, 4, 23, 53, 46, 45, 87, 67, 978, 90, 780, 89089, 56, 45]
    let crs = arr.forEach(value => {
      console.log(value)
    })
    
  </script>

数组some遍历

 <script>
    /*
    1. some场景:判断数组中是否有满足条件的元素
          例子:判断数组中有没有负数
    
    2.some方法特点
          (1)回调执行次数 != 数组长度
          (2)本身返回值
              true:有满足条件的尿素
              false:没有满足的条件
          (3)回调函数内部return
              true:循环立即结束.并且some方法本身返回true
              false:循环继续执行.如果全部遍历结束还是false,则some方法默认返回false
    */
    let arr = [1, 23, 123, 12, 321, 3, 123, 1, 4, 234, 3, 56, 3467, 45]
    let res = arr.some(value => value < 0)
    console.log(res)
  </script>

数组every遍历

<script>
    /**1.every场景:判断数组中是否所有元素都满足条件
       经典场景:开关法
       2.every方法特点
        (1)遍历次数 ! = 数组长度
        (2)本身返回值
          true:全部满足条件
          false:有元素不满足条件
        (3)回调函数内部return
          true:循环继续.如果全部遍历结束还是true,则every方法默认返回就是true
          false:循环结束.并且every方法本身返回值是false
    */
    let arr = [123, 235, 345677, 567, 234, 1235, 56489234, 345897345]
    let res = arr.every(value => value >= 2222)
    console.log(res)
  </script>

数组findIndex方法

<script>
    /*
    1.findIndex场景:  获取某个元素下标
        应用场景:与 indexOf()类似.但是findIndex一般用于对象数组
    2.findIndex方法特点
        (1)遍历次数   !=  数组长度
        (2)本身返回值
            有元素:元素下标
            没有元素:固定值-1
        (3)回调函数内部return
            return true : 找到了,循环立即结束.并且findIndex方法本身返回当前index
            return false: 没找到,循环继续. 如果全部遍历完成还是没有找到 则得到返回值-1
    */
    let arr1 = [{
        name: 'Gtx960',
        price: 1500
      },
      {
        name: 'Rtx2060',
        price: 4000
      },
      {
        name: 'Rtx3060',
        price: 2499
      },
      {
        name: 'Rtx3060Ti',
        price: 2999
      },
      {
        name: 'Rtx3070',
        price: 4999
      },
      {
        name: 'Rtx3070Ti',
        price: 5999
      },
      {
        name: 'Rtx3080',
        price: 7999
      },
      {
        name: 'Rtx3080Ti',
        price: 8500
      },
      {
        name: 'Rtx3090',
        price: 9999
      },
      {
        name: 'Rtx3090Ti',
        price: 11999
      }
    ]
    let res = arr1.findIndex(value => value.name == 'Rtx3090Ti')
    console.log(res)
  </script>

reduce方法

 <script>
    /*
    1.数组reduce方法: 给每一个元素执行一次回调
    2.应用场景:数组求和,求数组最大值
    3.语法:
        let res = arr.reduce((sum,value,index)=>{return sum+value},0)
            *res返回值是最后一次sum的结果
    4.注意点: 一定要给初始值,否则reduce遇到空数组就会报错
    */
    let arr = [123, 324, 5435, 4654, 7, 32423534, 23423, 423, 5346, 34636]
    let sum = arr.reduce((sum, value) => sum + value, 0)
    console.log(sum)
    /**
     * @description:
     * @param {callbackfn}回调函数
            (sum,value,index)=>{sum:上一次的返回值 value:当前元素值 index:当前下标}
            sum初始值: 一般给0,否则空数组reduce报错     
     * @return: 最后一次回调的结果
     */
    let max = arr.reduce((max, value) => max > value ? max : value, 0)
    console.log(max)
  </script>

我的Y轴是反的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS数组遍历（包含最新ES6语法）
一如年少丶的博客
03-20 783
经典for let data = [{ Name: 'zzc', Id: 1 }, { Name: 'ora', Id: 2 }, { Name: 'gkd', Id: 3 }]; let newArry = []; for (let i = 0; i < data.length; i++) { newArry.push({ name: data[i].N...
ES6-遍历数组
热门推荐
张致豪
03-10 3万+
数组是一种很重要的数据结构。那么我们如何遍历数组呢？ 我们如何遍历数组中的元素？20年前JavaScript刚萌生时，你可能这样实现数组遍历： for (var index = 0; index &lt; myArray.length; index++) { console.log(myArray[index]); } 自ES5正式发布后，你可以使用内建的forEach方法来遍历数组...
es6 repeat()指定字符串重量次数
周家大小姐
06-06 449
let data='出现次数---' console.log(data.repeat(3));
findindex遍历 js_详解ES6数组方法find()、findIndex()的总结
weixin_42515302的博客
12-24 2167
本文主要讲解ES6数组方法find()与findIndex()，关于JS的更多数组方法，可参考以下：1. find()该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试(函数内判断)的数组的第一个元素的值。它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素，之后的值不会再调用执行函数。如果没有符合条件的元...
es6（八：数组遍历方法总结）
qq_41558265的博客
09-16 383
数组遍历是必不可少的最常用的东西，总结es6数组的遍历方法,如下： 1：老方法，通过for循环 //遍历数组元素 for(let i=0;i<arr.length;i++){ console.log('key:'+i) console.log('value'+i) } 2：通过for in方法 //通过for in 遍历数组 log('for in 遍历数组...
javascript数组遍历for与for in区别详解
10-25
2. 如果需要扩展JavaScript的原生类，尽量避免使用`prototype`，而是考虑使用类的实例方法或者使用ES6的类语法，这样可以避免对全局对象造成污染，提高代码的隔离性和可预测性。 总的来说，理解和正确使用`for`循环...
JavaScript-ES6-JSONParsing-Example-:JavaScript-ES6-JSONParsing-Example
04-29
在JavaScript的世界里，ES6（ECMAScript 2015）是一次重大更新，引入了许多新特性，极大地提升了开发者的生产力。其中，JSON（JavaScript Object Notation）解析是日常工作中常见的一种数据交换格式，而ES6为我们...
javascript-completo-es6:Curso完成JavaScript ES6 da Origamid
03-26
JavaScript ES6是JavaScript语言的一个重要更新，引入了许多新特性，旨在提高开发效率并增强语言的现代性。这个"javascript-completo-es6: Curso完成JavaScript ES6 da Origamid"很可能是由Origamid提供的一个在线...
sprint4-javascript-ES6-itacademy
03-05
标题 "sprint4-javascript-ES6-itacademy" 暗示这是一个关于JavaScript ES6的训练课程或者项目，可能属于某个编程学习机构，如"itacademy"。"Sprint"通常在敏捷开发中指的是一个短期的开发周期，可能在这里代表一个...
JS常用的几种数组遍历方式以及性能分析对比实例详解
11-28
在JavaScript中，数组遍历是常见的操作，有多种方法可供选择。本文主要分析了JS中常用的7种数组遍历方式，并进行了性能对比。以下是这些遍历方式的详细说明： 1. **普通for循环**： ```javascript for (j = 0; j ...
如何判断一个对象为空，一个数组为空，如何区分是数据还是字符串
m0_50125215的博客
09-11 381
判断一个对象是否为空{} 1、根据 for…in 遍历对象，如果存在返回 true，否则返回 false for ( let i in obj) { return true; } return false 2、利用JSON 自带的 JSON.stringify() 方法来判断。（大概意思就是专为字符串‘{}’，来判断） if (JSON.stringify(obj) === '{}') { return true; } return false; 3、利用ES6中Object.keys(
对象数组循环的方法总结（js）
qq_53120043的博客
08-22 4594
js 对象数组循环方法
使用JS 判断数组对象 里面的每一个字段，字段为空，就返回true, 所有字段不为空，返回 false
最新发布
H5爱好者
11-15 1276
使用JS 判断数组对象 里面的每一个字段，字段为空，就返回true, 所有字段不为空，返回 false
JS中的apply，call
七十多岁的人了、
10-04 221
一句代码（[].slice.apply(obj)）引起了一篇博客。 在JavaScript中，call和apply作用是一样的，都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。 function test(){ console.log(this); } let obj = { name:"Ghui", age:24, } 这里先定义了一个方法和一个对象。我们直接运行方法时，结果是这样的：
es6 forEach 循环遍历数组增删改查
leleshuo
08-25 2816
es6 forEach 循环遍历数组增删改查
ES6常见的数组遍历方法(6种)
LaoYangSaid的博客
07-08 1万+
ES5常见的数组遍历(迭代)方法 forEach map filter some every reduce
ES6 常见的数组遍历方法
qq_36702286的博客
09-29 3273
es6 vue js
2.0 es6中forEach以及数组操作
weixin_30733003的博客
08-03 309
前言： 　　小白的js之路...... 1. 遍历数组/集合 forEach usernameArray = []; //遍历 users.forEach((user, index) => { let username = user.name; //取出用户名添加到数组 usernameArray[index] = username...
ES6新特性(部分语法)
qq_52166656的博客
08-06 188
ES6新特性

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值