用js中数组Array的reduce方法制作一个简单的计算机

最新推荐文章于 2023-02-01 16:01:45 发布
最新推荐文章于 2023-02-01 16:01:45 发布
阅读量78 收藏 1
点赞数
文章标签： html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCprogramme/article/details/120565673
版权

这是css部分，当时写的有点仓促代码没有格式化，当然这不是本文的重点（哈哈）

 <style>
        *{margin: 0px;padding:0px;box-sizing: border-box;}
        ul li{list-style:none;}
        div.box{width: 300px;height:400px;padding:10px;border:1px solid #123456;}
        div.screen{width:280px;height:50px;border:1px solid gray;text-align: center;
        line-height: 50px;}
        div.key{width:280px;height:300px;margin:12px 0px;border:1px solid gray;}
        div.key div.function{display:flex;justify-content: space-around;align-items: center;}
        div.math ul,div.num{display:flex;justify-content: space-around;align-items: center;}
        div.math{flex:2 1 auto;}
        div.clear,div.get{width:80px;height:40px;}
        div.clear,div.get,div.math ul li{border:1px solid gray;}
        div.math ul li{width:30px;height:30px;}
        div.math ul li:nth-child(odd){margin:10px;}
        div.num{margin-top:15px;}
        div.key,div.clear,div.get{margin-top:10px;}
        div.clear,div.get{font-size: 24px;text-align: center;line-height: 40px;}
        div.get{font-size:45px;line-height: 35px;}
        div.num .math ul li{font-size:24px;text-align: center;line-height: 30px;}
        div.screen p{font-size: 18px;}
        div.clear,.get,.math ul li{cursor:pointer;}
    </style>

这是结构部分

<body>
    <div class="box">
        <div class="screen">
            <p id="content">内容</p>
        </div>
        <div class="key">
            <div class="function">
                <div class="clear">清除</div>
                <div class="get">=</div>
            </div>
            <div class="num">
                <div class="math">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>+</li>
                    </ul>
                    <ul>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>-</li>
                    </ul>
                    <ul>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>*</li>
                    </ul>
                    <ul>
                        <li>*</li>
                        <li>0</li>
                        <li>#</li>
                        <li>/</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

下面是这篇文章的重点，js部分用到了Array的reduce、slice和join方法；当然这只是自己随便练习的有些的不好的地方请大家多多指正。

<script>
   let liNode = document.querySelectorAll("div.math ul li");
   let conNode = document.getElementById("content");
   let getNode = document.querySelector("div.get");
   let clearNode = document.querySelector("div.clear")
   let contentNode = document.querySelector("#content");
    let [...liArray] = liNode;
    [...liArray].map(function(value,index,array){
            value.addEventListener("click",()=>{
                //调用函数
                set(value.innerHTML);
            });
    });
    //将结果渲染到页面
    getNode.addEventListener("click",()=>{
        contentNode.innerHTML = get();
    });
    //回到初始状态
    clearNode.addEventListener("click",()=>{
        obj.arr=[];
        contentNode.innerHTML = "";
    });
    //存放数据
    let obj = {
        arr:[]
    };
    //得到结果
    let result=0;
    function get(){
        obj.arr.reduce((per,value,index,arr)=>{
            if(typeof value !="number"){
                let newarr = arr.slice(0,index).join("")*1;
                let lastNode = arr.slice(index+1).join("")*1;
                switch (value) {
                    case "+":
                        result = newarr + lastNode;
                        console.log(result);
                        break;
                    case "-":
                        result = newarr - lastNode;
                        console.log(result);
                        break;
                    case "*":
                        result = newarr * lastNode;
                        console.log(result);
                        break;
                    case "/":
                        result = newarr / lastNode;
                        console.log(result);
                        break;
                };
            };
        });
        return result;
    };
    // get();
    //传入值
    function set(val){
        obj.arr.push(val);
    };
</script>

本来想用js对象的属性访问器来做的，奈何自己还不太明白。如果有会的希望可以教教我，在这先感谢各位了，对了我对模块还是不太理解，真心希望有人能教教我。

COW码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS数组方法reduce的用法实例分析
11-20
数组方法 reduce 用来迭代一个数组，并且把它累积到一个值中。 使用 reduce 方法时，你要传入一个回调函数，这个回调函数的参数是一个 累加器 （比如例子中的 previousVal) 和当前值 (currentVal）。 reduce 方法有...
解析JavaScript数组方法reduce
11-29
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 语法 arr.reduce(callback[, initialValue]) {} 参数 回调函数中可以传递四个参数。 previousValue：上...
JS中 reduce() 的用法
weixin_30633949的博客
08-19 460
过去有很长一段时间，我一直很难理解 reduce() 这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce() 的用法。 一、语法 arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中， arr 表...
js Array reduce
change_fate的博客
09-17 195
reduce()是一个数组方法，平时不怎么用到，所以每次使用就忘了具体怎么用，总结一下，加深印象 1 语法 arr.reduce(function(prev,cur,index,arr){ … }, init); 其中， arr 表示原数组； prev 表示上一次调用回调时的返回值，或者初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； init 表示初始值。 看起来很复杂，其实常用的参数只有两个：prev
javaScript--数组(Array)的reduce方法解析
往前的娘娘
06-03 1097
概述：javaScript中Array中不止reduce方法，还包含foreach,map,filter等等，这里主要介绍是reduce方法。 reduce()从左到右累计数据，直到最后为一个值（也就是最终的结果）,听起来还是比较抽象的，累计注意可以是数据，也是字符串编辑 1.语法： arr.reduce(callback, [initialValue])   参数解析：   arr
javascript Array.reduce()
jsjxxx的博客
02-22 527
MDN解释的清楚， https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce 定义： reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值。 语法： array.reduce(function(accumulator, curre...
js中Array的reduce()函数
halo1416的博客
01-07 8453
函数定义：         reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。         对空数组是不会执行回调函数的。 语法：          参数：          用法简单实例： 1. 累计和  ==&gt;&gt; 初始值为数字 &lt;script type="text/javascript"&gt; ...
JS数组reduce()方法原理及使用技巧解析
10-15
JavaScript中的数组方法`reduce()`是一种强大的工具，它允许开发者对数组中的所有元素进行累积操作，最终得到一个单一的结果。在本文中，我们将深入探讨`reduce()`的原理和使用技巧。 ### 1. `reduce()`方法的基本...
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
09-03
`reduce()` 方法对数组中的每个元素执行一个由您提供的 `reducer` 函数（升序执行），将其结果汇总为单个返回值。例如，计算数组元素的总和： ```javascript var numbers = [1, 2, 3, 4, 5]; var sum = numbers....
js数组Array.reduce方法运用
weixin_41991424的博客
05-14 402
**基础用法，接受两个参数，Array.reduce(function(prev, cur, inde, arr){},initialValue) ** 可以通过初始值传入适当的值，来得到自己想要的结果(比较巧) 直接煮栗子_ 数字数组求和 var arr = [1,2,3,4,5] var sum = arr.reduce((prev, cur, index, arr) => { ...
js——Array中reduce方法
leilei7407的博客
05-28 4083
reduce方法 reduce() 方法接收一个回调函数作为参数，reduce 为数组中的每一个元素依次执行回调函数，回调函数接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。 reduce方法的返回值为回调函数最后的返回值 代码示例1：(回调函数中不写return，并且没有initialValue) 代码示例2：(回调函数中写return，但没有initialValue) 代码示例3：(回调函数中:写return，并且有initialValue.
JS 数组中的 reduce 方法
a15220216758的博客
05-29 2707
1、定义 reduce() 可以作为一个高阶函数，用于函数的 compose。 2、语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 3、参数说明 返回值 4、用法 reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 5、注意事项 注意:reduce() 对于空数组是不会执行回调函数的。 6、初级应用使用实.
js_reduce()方法，Array数据累计
qq_39822451的博客
04-17 932
var arr = [1, 2, 3, 4, 5]; console.log(eval(arr.join("+"))); let sum = [1, 2, 3, 4, 5, 6].reduce((prev, item) => { return prev + item }, 1); ...
Javascript Array Reduce 用法解读
luokingfly的博客
10-11 1061
Javascript Array Reduce 用法解读
js中数组(Array)最常用的API方法,reduce介绍
卷发头的鲁智深的博客
09-14 864
原生数组中有很多dom方法,以下我们来列举一些: 1.find :用处查找首次满足条件的值,并返回,没有则返回undefined let arr = [2, 4, 6, 9, 7, 8].find(function (item, index, o) { // console.log( item, index, o ); return item > 3; }); console.log(arr) 打印结果: 2.map :用于遍历数组的每个元素执行.
JS reduce 用法
fw19940314的博客
06-02 5651
    定义： reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。  语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数参数描述function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数...
JS 中 reduce()方法及使用详解
热门推荐
前端菜菜DayDayUp的博客
02-01 6万+
JS 中 reduce()方法及使用详解
【小白从小学Python、C、Java】【Python-计算机等级考试二级】【Python中的reduce()函数】
liujingwei8610的专栏
10-21 124
知识精讲 1.描述：reduce()函数会对按照数据集合中的多个元素，按照先后顺序进行迭代运算，即把前面参与运算的元素的运算结果作为新元素，再与后面的元素进行运算，以此类推，一直运算到最后一个元素。 2.reduce()语法和参数: 2.0语法：reduce(function, sequence[,initial]) 2.1参数function：每次迭代计算依据的函数，注意：function有且只有2个参数； 2.2参数sequence：表示数据集合，集合中的元素从前向后依次参与迭代计算； 2.3参数ini
js【详解】arr.reduce() 数组缩减
朝阳39的博客
05-11 8158
reduce中文释义为“缩减”，arr.reduce() 即将数组中的每个值（从左到右）开始缩减，最终计算为一个值。若arr为空数组，当initialValue没有值时，会报错，但当initialValue有值时，不会报错。arr.reduce()的基础功能便是实现累积调用，所以常用于数组求和，数组求乘积。
js数组的reduce方法
最新发布
06-09
`reduce()` 是 JavaScript 数组的一个方法，它可以用来对数组中的所有元素进行累加计算，最终返回一个值。 `reduce()` 方法接受一个回调函数作为参数，回调函数可以接受四个参数： - 累加器（accumulator）：累加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值