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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: ⑤. 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>
相关文章
|
24天前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
59 0
|
24天前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
49 0
|
12天前
|
存储 Java API
详细解析HashMap、TreeMap、LinkedHashMap等实现类,帮助您更好地理解和应用Java Map。
【10月更文挑战第19天】深入剖析Java Map:不仅是高效存储键值对的数据结构,更是展现设计艺术的典范。本文从基本概念、设计艺术和使用技巧三个方面,详细解析HashMap、TreeMap、LinkedHashMap等实现类,帮助您更好地理解和应用Java Map。
32 3
|
2月前
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
30 1
ES6中map对象的使用,确实比Object好使哈
|
2月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
24天前
|
算法 Java 程序员
Map - TreeSet & TreeMap 源码解析
Map - TreeSet & TreeMap 源码解析
30 0
|
3月前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
4月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
50 1
|
4月前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
86 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
35 0

热门文章

最新文章

推荐镜像

更多