JavaScript运算符:递增和递减

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

JavaScript中的递增和递减运算符都是一元操作符,言外之意就是只能操作一个值的操作符。递增和递减操作符直接借鉴自C语言,各有两种版本:前置型(递增++i,递减--i)和后置型(递增i++,递减i--)。

在JavaScript中,递增(递减)的前置和后置运算符对于初学者都非常容易混淆。我就属于这一类型,这次下定决心把这两者的使用和不同之处了解清楚。如果你和我一样,不仿一起来了解一二。

前置型递增(递减)

前置型递增也称之为前增量(pre-increment)运算符,它对操作数进行增量计算,并返回其计算后的值。这样或许不太好理解,换过一种方式来理解:前增量指的先计算,后赋值

如果文字不好理解,直接上示例,因为代码也是一种好的阐述方式。假设有一个变量i,其值为1。那么前置递增为++i

var i = 1;
console.log(i); // => 1
++i;
console.log(i); // => 2

这个示例,前置递增++i操作符把i的值变成了2(也就是1+1)。实际上,执行前置递增++i和执行下面的表达式效果相同:

var i = 1;
i = i + 1;
console.log(i); // => 2

简单点讲,前置型递增就是先自身计算,再赋值给变量:

var i = 1;
var a = ++i;  // var i = 1; i = i + 1; a = i;
console.log(a); // => 2
console.log(i); // => 2

其中var a = ++i,实际上做了下面这几个操作:

i = 1;
a = i + 1;
i = i + 1;
a = i;

上面的可能有点简单,来看一个复杂一点的:

var i = 1;
a = (++i) + (++i) + (++i);

最终a的值是多少?把上面的简化为:

(function () {
    var i = 1;

    var foo = function () {
        var j;
        j = i + 1;
        i = i + 1; // =>2
        return j; // => 2
    };

    var bar = function () {
        var m;
        m = i + 1; // => 3
        i = i + 1; // => 3
        return m; // => 3
    };

    var baz = function () {
        var n;
        n = i + 1; // => 4
        i = i + 1; // => 4
        return n; // => 4
    };

    var a = foo() + bar() + baz(); // 2 + 3 + 4 = 9
    return a; // 9
})();

最终a的值是9

前置递减--i和前置递增++i类似,不同的是先做减法(减1),再赋值。比如:

var i = 6;
a = --i;
console.log(a); // => 5
console.log(i); // => 5

代码中的--i相当于:

var i =  6;
i = i - 1;
a = i - 1;
a = i;

执行前置递增和递减时,变量的值都是在语句被求值以前改变的(返回它递增(减)之后的值)。在计算机科学领域中,这种情况通常被称之为副效应。来看个例子:

var age = 29;
var anotherAge = --age + 2;
console.log(age) // => 28 (age = age - 1)
console.log(anotherAge); // 30 (anotherAge = age - 1 + 2)

这个示列中变量anotherAge的初始值等于变量age的值前置递减(age = age - 1)再加上2。也就是前置--age先做减法操作,age的值变成了28,所以再加上2,其值就是30

另外在JavaScript运算符中,前置递增(++i)和递减(

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/javascript-increment-and-decrement-operatorssass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部