你不知道的JavaScript运算符

运算符关于人人来讲并不生疏,只需日常平凡写代码就会频仍用的到。能够日常平凡人人只关注它们的运用层还停留在只知其用法的外表,然则运算符有一些不为人知妙技,邃晓以后会让你控制运算符的道理和运算符的奇技淫巧以及处置惩罚一些口试题

先来看一些口试题,请小伙伴本着不去试的准绳写出下而四道题的运转效果

//1
console.log('kaivon' && (2+1));
console.log(![] || '你好,siri');

//2
{
    let a=10,b=20;
    const fn=()=>(a++,b++,10);
    console.log(a,b,fn());
    
    let c=fn();    
    console.log(a,b,c);
}

//3
for(var i=0,j=0,k;i<6,j<10;i++,j++){
    k=i+j;
}
console.log(k);

//4
{
    let a=1;
    let b=a++;
    console.log(a,b);
    
    let c=1;
    let d=++c;
    console.log(c,d);
}

关于口试题,我一最先是谢绝的,心田是崩溃的。老是会想这些题没有意义啊,真正在开辟的时刻谁会去做题呀,更不会碰到这么无聊的东西,为何会用这类东西来口试?难道说口试官是过来装逼的么?看到我们回复不上来,一脸不屑地蔑视我们么?反过来想一想,口试官跟我们无冤无仇,前端何必尴尬前端?但是这些东西实际上是有意义的,从你对这些题的回复能够看出你的基础知识全面性,而且能推断出你的手艺才。

以上口试题包括三种运算符,逻辑运算符、逗号运算符、递增递减运算符,我就分别来引见这三种运算符

逻辑运算符

且运算符:&&

  • 而且的意义,最少须要两个数据(也能够为表达式)标记摆布各一个。而且会把双方的效果转成布尔值
  • 假如左侧的值为真,返回右侧的值。假如左侧的值为假,返回左侧的值(不会盘算右侧的效果)
  • 只有当摆布双方的效果都为真的时刻,全部效果才为真(用于推断)
  • 且运算符能够涌现多个,会顺次按从左到右的递次,碰到假的效果便返回。假如都为真则返回末了一个效果
console.log('kaivon' && (2+1)); //3

碰到&&运算符,先去盘算左侧的效果并转成布尔值,左侧为字符串kaivon,它转为布尔值的效果为true,所以会返回&&运算符右侧的效果。右侧为一个表达式,盘算后的效果为3,所以全部效果为3

console.log(![] && '你好,siri');    //false

左侧的表达式是把一个空数组转成布尔值(对象转基础数据范例的算法私信我要视频)并取反的效果。空数组转成布尔值效果为true,取反后效果为false。当左侧的效果为false时会直接返回,并不会去剖析右侧的内容,所以直接返回左侧的效果false

let n=1;
n-1 && (n+=5);
console.log(n);        //1    左侧为假,所以不会实行右侧的效果,n不会加5

const fn=()=>console.log('函数被挪用了');
n==1 && fn();

第一个console.log的效果为1,申明n+=5这个表达式并没有实行。由于&&运算符左侧的表达式运算效果为0转成布尔值为false,所以直接返回左侧的效果,不会去管右侧的表达式,所以n的值并不会变。
第二个console.log会打印出内容,申明&&运算符的右侧表达式被实行了,由于n的值并没有转变照样1,所以左侧的表达式运转效果为true,依据划定规矩会返回右侧的效果,所以实行挪用函数fn

console.log(true && 'kaivon' && (2-2) && 4 && '陈学辉' && true);    //0    返回2-2的效果
console.log(true && 'kaivon' && [] && 4 && '陈学辉');   //陈学辉

依据上面末了一条划定规矩能够很轻易得出上面的运算效果。运算会按从左到右的递次实行,一旦碰到表达式的效果为false的话就会住手实行,而且全部表达式会返回这个运算效果。假如一切表达式的效果都为true,那全部效果为末了谁人表达式的效果

或运算符:||

  • 或许的意义,最少须要两个数据(也能够为表达式)标记摆布各一个。而且会把双方的效果转成布尔值
  • 假如左侧的值为真,返回左侧的值(不会盘算右侧的效果)。假如左侧的值为假,返回右侧的值
  • 假如有一边的效果为真的话,全部效果就为真(用于推断)
  • 或运算符能够涌现多个,会顺次按从左到右的递次,碰到真的效果便返回。假如都为假则返回末了一个效果
let n=1;
n-1 || (n+=5);
console.log(n);     //6

||运算符左侧表达运算效果为0转布尔值为false,依据上面列出的划定规矩会返回右侧表达式实行的效果,所以会实行n+=5,终究n的效果为6

console.log(false || '' || (2-2) || 4 || '陈学辉' || true);    //4
console.log(false || '' || ![] || 0 || undefined);        //undefined

依据上面的划定规矩也很轻易晓得运转效果,||运算符的左侧 运转效果为false的话就会实行右侧的表达式,直到碰到盘算效果为true的表达式才会停下来,并返回这个值。假如一切表达式都没有返回true,则取末了表达式的效果

或运算符的用处:

function fn(text){
    text=text || 'kaivon';  //用户给了参数,取用户给的值;用户没有给参数,取默许值
    console.log(text);
}
fn();            //kaivon    用户没有传参数,就会用默许的'kaivon'
fn('陈学辉');    //陈学辉    用户有传参数,就会用传的参数

上面代码的这类情势是ES5写面向对象的主要情势,用于对参数举行处置惩罚。假如用户传了参数,那会取用户所传的参数;假如用户没有传参,那取默许的参数。保证函数一直有参数,不会报错

逗号运算符

  • 将多个表达式放在一条语句里,按从左到右的递次实行每一个表达式,返回末了谁人表达式的效果(在一条语句里实行多个运算)
  • 优先级最低,末了才会运算逗号
  • 逗号运算符的双方不能是语句(赋值语句)
console.log(1,2,3);        //1 2 3    
console.log((1,2,3));    //3        

console.log是个函数,它内里的逗号示意参数分开的意义,并非逗号操作符。要变成操作符的话,就加个括号,加个括号后就变成了表达式,而表达式必须请求出一个值,所以内里的逗号就变成了操作符

let a=10,b=(a++,20,30);
console.log(a,b);    //11 30

第一行代码中的第一个逗号的作用是:能够在一行中声明多个变量,削减let关键字。从第二个最先被放到了括号里,而加了括号后就是个表达式。照样那句话,表达式一定会发生一个值,这个时刻逗号就是个运算符了,会把末了一个赋给变量,也就是30。

下面来详细剖析一道口试题,再深度的明白一下逗号运算符

for(var i=0,j=0,k;i<6,j<10;i++,j++){
    k=i+j;
}
console.log(k);    //18

许多小伙伴会说这个k的值不该该是14么?i的值走到5不就停了,j的值走到9不也停了,那加起来应该是14啊!为何是18,这不科学啊!!!

要邃晓这个缘由须要连系for轮回的三条语句以及逗号运算符的作用去才明白
申明:

  1. for轮回的第一个语句var i=0,j=0,k是初始化一些变量,这里的逗号与上个代码块第一条语句的逗号一样,作用为在一行里声明多个变量
  2. for轮回的第二个语句i<6,j<10作用为取一个轮回局限,这里要注重轮回局限只能有一个前提,不能说既小于5又小于8,所以这里的逗号就是真正的逗号运算符,它只能取一个值,取的就是末了谁人j<10
  3. for轮回的第三个语句i++,j++,这条语句的逗号照样个运算符,示意在一行里实行多条语句,然则这个语句不须要有返回值,只用把语句实行了就行
  4. 综上所述,这个for轮回示意:声明三个变量,前提局限为j<10,同时i与j每走一次都要加一次。当j的值为9的时刻就不再加了,此时i的值也一样会加到9它已没有局限限定了会无穷的加,然则j有局限并不会无穷加。所以i的值是随着j在走,得出效果i+j=18

逗号运算符的另一个作用:交流两个变量的值
声明两个变量,请求经由过程某种体式格局让两个变量的值举行交流,你会用什么要领?

let a=10;
let b=20;
//问:怎样让a与b的值举行交流

有一种笨要领是应用一其中心变量能够完成,代码以下:

let a=10;
let b=20;
let c;

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

console.log(a,b);   //20 10

应用逗号运算符,代码以下:

let a=10;
let b=20;

a=[b][b=a,0];
console.log(a,b);    //20 10

能够看到应用逗号运算符却是很轻易实现需求,然则代码浏览起来彷佛很费力,剖析以下:

a=[b][b=a,0];   //这条代码的两其中括号示意,前面为数组,背面为下标。在数组中取某一个数据并赋值给a

a=[20][b=10,0]  //分别把a与b的值套进去,注重第二其中括号里的b=a,这么写是把a的值赋给b,所以只能套a的值

/*
 * 重点看第二其中括号里的代码,此时这其中括号的作用为下标,所以内里必须发生一个值,那内里的逗号就是运算符了
 * 依据逗号运算符的作用,先实行两个表达式,把b的值改成10,再返回末了表达式的值0
 * 所以这其中括号牛比的处所有两个,第一个是把b的值改成了10,第二个是团体返回0。也就变成了下面
*/

a=[20][0]   //这不示意把第0个数据的值(20)赋给a

所以,逗号运算符用巧了就是巧他妈给巧开门,巧抵家了~

递增递减运算符

  • 它俩能够放在操作数的前面,也能够放在操作数的背面
  • 不论它俩放在哪一个位置,都是一个表达式,表达式的话一定返回一个值
  • 它俩具有隐式范例转数字的作用

起首考证表达有值,不论放前面照样放背面都邑有值

let a=3;
console.log(a++);    //3
console.log(++a);    //5

后自增、后自减

  • 表达式效果为数据直接转数字后的值
  • 数据效果为加1或许减1的值
let a=['20'];
console.log(a++);    //20    表达式效果为a转数字后的值
console.log(a);        //21    数据自身变成了+1后的值

let b='20';
console.log(b--);    //20    表达式效果为b转数字后的值
console.log(b);        //19    数据自身变成了-1后的值

前自增、前自减

  • 表达式与数据的效果一样,都为数据加1或许减1的值
let a=['20'];
console.log(++a);    //21    表达式效果为a转数字后并加1的值
console.log(a);        //21    数据自身也为a转数字后并加1的值

let b='20';
console.log(--b);    //19    表达式效果为a转数字后并减1的值
console.log(b);        //19    数据自身也为a转数字后并减1的值

两种写法对照

  • 两种写法的区分在于表达式的效果差别。数据的效果写前面与写背面都一样
  • 假如要用表达式的效果,看谁在前面
  1. 数据在前面,效果为数据的值
  2. 标记在前面,效果为数据+1或许数据-1的值
{
    let a=1;
    let b=a++;
    console.log(a,b);    //2 1
}

{
    let a=1;
    let b=++a;
    console.log(a,b);    //2 2
}

经由过程对照,a的值不论是在前面++照样在背面++,效果都为2(a+1的值)。但b的值(表达式的值)能够看谁在前面,a在前面那就取a的值,++在前面那就取a+1的值

擅长总结!擅长总结!擅长总结!主要的提示打三遍!

    原文作者:kaivon
    原文地址: https://segmentfault.com/a/1190000016258197
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞