ES6语法_var、let 、 const、解析表达式、模板字符串、箭头函数、map 、reduce、Object优化(三)

简介: ⑤. map和reduce⑥. 对象(Object)优化

⑤. map和reduce


①. map接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回


②. reduce接收两个参数:


带两个参数的一个函数(必须):从头开始每次用两个数组元素执行 第一个元素和第二个元素先执行执行完后返回一个结果又和第三个数组元素执行以此类推


起始参数(非必须):即有该参数的话 将用该参数和数组第一个元素执行 返回结果再和第二个元素执行 以此类推


    <script>
        //map接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
        //举例:有一个字符串数组,希望转为int数组
        let arr = ['1','20','-5','3'];
        console.log("处理前数组的是:"+typeof arr[0]);//处理前数组的是:string
        /*使用map对数组进行处理*/
        arr=arr.map(s=>parseInt(s));
        console.log("处理后数组是:"+typeof arr[0]);//处理后数组是:number
    </script>


②. reduce()为数组中每一元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素


       //reduce
        let arr2=[1,3,5,7]
        //1.没有初始值的情况下
        /*
        a:上一次调用函数的值或者初始值,如果没有指定初始值,默认从数组第一个元素开始
        b:数组中当前被处理的元素
        */
        let sum=arr2.reduce((a,b)=>{
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a+b
        })
        /*
        上一次处理后:1 
        当前正在处理:3 
        上一次处理后:4 
        当前正在处理:5 
        上一次处理后:9 
        当前正在处理:7 
        当前计算结果是:16
        */
        console.log(`当前计算结果是:${sum}`)
        //2. 指定初始值
        /*
        上一次处理后:100 
        当前正在处理:1 
        上一次处理后:101 
        当前正在处理:3 
        上一次处理后:104 
        当前正在处理:5 
        上一次处理后:109 
        当前正在处理:7
        */
        let sum2=arr2.reduce((a,b)=>{
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a+b
        },100)


⑥. 对象(Object)优化


①. Object.keys(obj):获取对象的所有key形成的数组


②. Object.values(obj):获取对象的所有value形成的数组


③. Object.entries(obj):获取对象的所有key和value形成的二维数组。格式:[[k1,v1],[k2,v2],…]


④. Object.assign 方法的第一个参数是目标对象,后面的参数都是源对象


    <script>
     let obj={name:"tangzhi",age:24};
     //1.获取对象的所有key形成的数组
     console.log(Object.keys(obj));//Array [ "name", "age" ]
     //2.获取对象的所有value形成的数组
     console.log(Object.values(obj));//Array [ "tangzhi", 24 ]
     //3.获取对象的所有key和value形成的二维数组。格式:[[k1,v1],[k2,v2],…]
     console.log(Object.entries(obj));//Array [ [ "name", "tangzhi" ],[ "age", 24 ] ]
     let a = { name: "TANGZHI" };
     let b = { age: 25 };
     let c = { gender: "男" };
     //Object { name: "TANGZHI", age: 25, gender: "男" }
     console.log(Object.assign(a, b, c));
    </script>
相关文章
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
420 4
|
11月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
299 0
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
333 1
|
编译器 C++
【C++】模板进阶:深入解析模板特化
【C++】模板进阶:深入解析模板特化
313 0
|
JavaScript 前端开发 开发者
JavaScript中的const关键字解析
JavaScript中的const关键字解析
245 2
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
142 2
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
114 2
|
中间件 数据库 开发者
解析Python Web框架的四大支柱:模板、ORM、中间件与路由
【7月更文挑战第20天】Python Web框架如Django、Flask、FastAPI的核心包括模板(如Django的DTL和Flask的Jinja2)、ORM(Django的内置ORM与Flask的SQLAlchemy)、中间件(Django的全局中间件与Flask的装饰器实现)和路由(Django的urls.py配置与Flask的@app.route()装饰器)。这些组件提升了代码组织和数据库操作的便捷性,确保了Web应用的稳定性和可扩展性。
167 0
|
7月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
717 29
|
7月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
212 4

热门文章

最新文章

推荐镜像

更多
  • DNS