javascript精雕细琢（二）：++、--那点事

引言
++和--在数学运算中的计算规则
++和--在变量引用时的计算规则
++和--的数据转换应用

引言

　　对于接触JS时间不长的前端来说，刚开始要实现诸如轮播图，选项卡等小模块时，肯定会用到index索引来实现。而这其中很大一部分又会使用++（自加）、--（自减），所以清楚的知道++（自加）、--（自减）的计算模式，可以在运用时减少错误。本文将从数学运算、变量引用、数据转换3个方面，对++（自加）、--（自减）进行一个详细的说明，力求达到一个在通读全文后，明确++（自加）、--（自减）应用方式的效果。

一、++和--在数学运算中的计算规则

老规矩，先上代码

 　　　　let a = 1,b = 1;let num1 = a++ + b++, //num1执行前a=1,b=1，num1执行后a=2,b=2num2 = a++ + ++b, //num2执行前a=2,b=2，num2执行完后a=3,b=3num3 = ++a + b++, //num3执行前a=3,b=3，num3执行完后a=4,b=4num4 = ++a + ++b; //num4执行前a=4,b=4，num4执行完后a=5,b=5
        console.log(num1);    //结果为2，步骤分解: a + b（1 + 1）=> a++(2) => b++(2) => a=2,b=2;
        console.log(num2);　　//结果为5，步骤分解: a + (++b)（2 + 3） => a++(3) => a=3,b=3;
        console.log(num3);　　//结果为7，步骤分解: (++a) + b（4 + 3） => b++(4) => a=4,b=4;
        console.log(num4);　　//结果为10，步骤分解: (++a) + (++b)（5 + 5） => a=5,b=5;

　　通过以上代码，可以总结出++和--在数学运算出的计算规则如下（加减乘除没区别）：

　　　　1）当++、--写在变量前时，数学计算时，引用的是++、--未执行的变量值；

　　　　2）当++、--写在变量后时，数学计算时，引用的是++、--执行后的变量值；

　　通过以上的理解，就不难看出，num1得到的求和结果实际上就是a + b，而num2实际上是a + (++b)，num3是(++a) + b，num4是(++a) + (++b)，但是求和归求和，++、--只是没在求和结果中执行，实际上变量的++、--都是执行了的，这一点要明确。

二、++和--在变量引用时的计算规则

上代码

　　　　 let num1 = 0,num2 = 0;let arr = [0, 1, 2, 3, 4, 5, 6];console.log(arr[num1++]); // 0  num1=1console.log(arr[++num2])  // 1  num2=1

　　通过以上代码，不难看出，当在变量引用时执行++、--，与数学运算有相似的规律。总结起来就是一句话——++、--在变量前，引用++、--执行后的变量值；++、--在变量后，引用当前变量值（即执行++、--前的值）。

三、++和--的数据转换应用

上代码

　　　　 let a = true;let b = false;let c = "a";console.log(++a); //2console.log(b++); //0console.log(c++); //NaN

　　一句话总结——对非Number类型的数据，应用++、--，相当于执行了Number()方法。如果转换后是number类型，则按上边的规则执行++和--，如果转换后不是number类型，则不执行++和--。输出NaN。不能直接进行类似++true的操作，必须通过声明变量值为true或false，然后再++、--。

转载于:https://www.cnblogs.com/keepStudying/p/9743457.html

javascript精雕细琢（二）：++、--那点事相关推荐

Javascript 对象二（Number、String、Boolean、Array、Date、Math、RegExp）
Javascript 对象二(Number.String.Boolean.Array.Date.Math.RegExp) Number 数字对象 String 字符串对象 Boolean 布尔对 ...
Javascript面向对象二
Javascript面向对象二可以通过指定原型属性来对所有的对象指定属性, Object.prototype.name="zhangsan"; Object.prototype. ...
使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码依赖jquery 需要使用到的库 https://github.com/davidshimj... DIV <div id="qrcode" ...
javaScript高级[二]
javaScript高级[二] 函数函数的定义和调用函数的定义方式函数的调用方式 this 函数内this指向改变函数内部this指向 call()方法 apply()方法 bind()方法 ...
彻底掌握 Javascript（二十一）async 函数-曾亮-专题视频课程
彻底掌握 Javascript(二十一)async 函数-433人已学习课程介绍 async 函数已经被所有现代浏览器和 node.js 8.x 原生支持了,从而让我们彻底脱离了,异 ...
JavaScript进阶(二)
JavaScript进阶(二) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
Ubuntu16.04 装机之后要做的二十件事
Ubuntu装机之后要做的二十件事用ubuntu做东西很久了,总结了一些教程,一直想整理一下,确实是没有时间,这下简单的整理了一下,大家可以看看,具体的软件安装包已经推到了本人的百度云帐号下面了,需 ...
【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时，其上下元素也受到影响
JavaScript修改二维数组的某个元素时,其上下元素也受到影响发布:2021年8月15日18:54:56 前言在研究背包问题时,一开始往往会用二维数组的形式来描述,这样会便于理解.但是,我在操 ...
Javascript 实现二维码生成
javascript生成二维码需要用到一个js库:qrcanvas. QRCanvas 能用来做什么 QRCanvas 的使用非常简单,无论是使用 vue 开发还是传统的 cdn 引入,都能快速地集成 ...
javascript生成二维码
http://www.w3dev.cn/article/20140617/javascript-create-QR-code.aspx jquery.qrcode.js 是居于jquery类库的绘制二 ...

javascript精雕细琢（二）：++、--那点事

javascript精雕细琢（二）：++、--那点事相关推荐

最新文章

热门文章