做有态度的前端团队

网易FEG前端团队

JavaScript逗号运算符知多少

前不久看到一道挺有意思的题目,这次就围绕这个来写点东西~

首先来看下这个东西~

var a = (1,2,3);
console.log(a)

答案是什么?为什么?答对了么?第一次看到这个,会以为是报错,因为一直没见过这种写法,而且实际项目中几乎也没人这样写吧,也看不出有啥实际用途。结果这个出乎意料输出了一个数字 3。心想这就奇怪了,于是多试了几个例子,比如 a = (1,2,3,"s",5,"4"),初步得到结论是:这种写法是合法的,而且总会返回最后一个操作数的值。

然后,网上查资料,得知了一个关键词 —— “逗号运算符”。

先来看个小例子:

var a = 10;
function test() {
    return a++, 10
}
console.log(test()) //10
console.log(a) //11

知道这个之后,就不难理解上面例子得出的结果了。逗号运算符,会对它的每个操作对象求值(从左至右),然后返回最后一个操作对象的值。所以,test函数返回值是10,变量a的值加1。

继续看例子

var a = 10,b;
b = (a++,a);

console.log(a) //11
console.log(b) //11

去掉括号再试试

var a = 10,b;
b = a++,a;

console.log(a) //11
console.log(b) //10

为什么去掉括号之后会不一样呢,这里涉及到一个优先级问题,在JS中,,的优先级是最低的,这里的 =优先级比它高,所以b = a++b的值是++a做递增之前的值10

这里既然提到了递增运算符++,不妨也复习一下...++在前面和在后面有啥不同,这也是比较容易混淆的,还是举个小例子:

var a = 10;

console.log(a++) //10
console.log(a) //11

console.log(++a) //12
console.log(a) //12

这里的a++首先返回变量的当前值,然后再将a的值加1++a是直接返回a递增1的结果。

了解逗号运算符,对实际写代码还有其他帮助吗?还是有点作用的。比如,一般我们交换两个变量的值,可能会借助第三个变量作为一个"中介"的角色,达到交换值的目的。而运用逗号运算符不用第三个变量可以达到同样的目的。(当然还有其它方法~)再次不厌其烦地举例说明一下:

var a = 1 , b = 2 , c;

c = a;
a = b;
b = c;

console.log(a) //2
console.log(b) //1

运用逗号运算符,可以写成这样,不必借助第三个变量了。

var a = 1 , b = 2;

a = [b][b = a , 0];
// a = [b, b = a][0]; //或者这样写,不过这个写法貌似和这里所说的逗号运算符没啥关系

console.log(a) //2
console.log(b) //1

突然想起了上一篇博客写过数组排序,里面就涉及到交换值这个操作,不妨也顺便试试,这里以冒泡排序为例:

原写法:

function bubbleSort(arr) {
    var len = arr.length,
        temp;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
    }

    return arr;
}

也可以这么写

function bubbleSort(arr) {

    var len = arr.length;

    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
               
                arr[ j + 1] = [arr[j]][arr[j] = arr[j + 1] , 0]
                //arr[j + 1] = [arr[j], arr[j] = arr[j + 1]][0] //或者这样
            }
        }
    }
    return arr;
}

以上暂时了解到这么多~

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif