Home  >  Article  >  Web Front-end  >  Is there an ampersand in es6?

Is there an ampersand in es6?

青灯夜游
青灯夜游Original
2022-11-01 19:24:251298browse

has an ampersand. In es6, "&&" is a logical AND operator, which is an AND Boolean operation. The syntax is "operand 1 && operand 2"; only when both operands are true, it returns true, otherwise it returns false. Logical AND is a kind of short-circuit logic. If the expression on the left is false, the result is directly short-circuited and returned, and the expression on the right is no longer evaluated.

Is there an ampersand in es6?

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

There is an & symbol in es6, and "&&" is the logical AND operator.

Logical AND Operation&&

Logical AND operation (&&) is an AND Boolean operation. Returns true only if both operands are true, otherwise returns false. The detailed description is shown in the table.

Logical AND operation
First operand Second operand Operation result
true true true
true false false
false true false
false false false

Logical AND is a kind of short-circuit logic. If the expression on the left is false, the result will be short-circuited and returned directly, and the expression on the right will no longer be evaluated. . The operation logic is as follows:

  • Step 1: Calculate the value of the first operand (expression on the left).

  • Step 2: Detect the value of the first operand. If the value of the expression on the left is convertible to false (such as null, undefined, NaN, 0, "", false), then the operation will end and the value of the first operand will be returned directly.

  • Step 3: If the first operand can be converted to true, evaluate the second operand (the expression on the right).

  • Step 4: Return the value of the second operand.

Example 1

The following code uses logical AND operations to detect variables and initialize them.

var user;  //定义变量
(! user && console.log("没有赋值"));  //返回提示信息“没有赋值”

Equivalent to:

var user;  //定义变量
if (! user){  //条件判断
    console.log("变量没有赋值");
}

If the value of variable user is 0 or a false value such as an empty string is converted to a Boolean value, it will be false. Then when the variable is assigned a value, it will still prompt The variable has no value assigned. Therefore, when designing, you must ensure that the return value of the expression on the left side of the logical AND is a predictable value.

var user = 0;  //定义并初始化变量
(! user && console.log("变量没有赋值"));  //返回提示信息“变量没有赋值”

The expression on the right side should not contain valid operations such as assignment, increment, decrement, and function call, because when the expression on the left side is false, the expression on the right side is skipped directly, which will affect the subsequent operations. bring potential impact.

Example 2

Using logical AND operators can replace the design of multiple branch structures.

var n = 3;
(n == 1) && console.log(1);
(n == 2) && console.log(2);
(n == 3) && console.log(3);
( ! n ) && console.log("null");

The above code is equivalent to the following multi-branch structure.

var n = 3;
switch(n){
    case1:
        console.log(1);
        break;
    case2:
        console.log(2);
        break;
    case3:
        console.log(3);
        break;
    default:
        console.log("null");

The operand of the logical AND operation can be any type of value and returns the value of the original expression instead of converting the operand to a Boolean value and then returning it.

1) True when the object is converted to a Boolean value. For example, an empty object is logically ANDed with a Boolean value.

console.log(typeof ({} && true));  //返回第二个操作数的值  true的类型:布尔型
console.log(typeof (true && {}));  //返回第二个操作数的值  {}的类型:对象

2) If the operand contains null, the return value is always null. For example, the logical AND operation of the string "null" with a value of type null always returns null regardless of position.

console.log(typeof ("null" && null));  //返回null的类型:对象
console.log(typeof (null && "null"));  //返回null的类型:对象

3) If the operand contains NaN, the return value is always NaN. For example, the logical AND operation of the string "NaN" with a value of type NaN always returns NaN regardless of position.

console.log(typeof ("NaN" && NaN));  //返回NaN的类型:数值
console.log(typeof (NaN && "NaN"));  //返回NaN的类型:数值

4) For Infinity, it will be converted to true and participate in logical AND operations like ordinary values.

console.log(typeof ("Infinity" && Infinity));  //返回第二个操作数Infinity的类型:数值
console.log(typeof (Infinity && "Infinity"));  //返回第二个操作数"Infinity"的类型:字符串

5) If the operand contains undefined, undefined is returned. For example, the logical AND operation of the string "undefined" with a value of type undefined always returns undefined regardless of position.

console.log(typeof ("undefined" && undefined));  //返回undefined
console.log(typeof (undefined && "undefined"));  //返回undefined

Extended knowledge: Little-known operations of && and __ in ES6

As we all know, in es6, the logical operator && Represents and conditions, ||Represents or condition

let info = {
  name:"long",
  age:null
};

//&&
//info的name与age同时为真,则结果为真
if(info.name && info.age){
  console.log("与条件"); //与条件
}else{
  console.log("失败");
}

//||
//info的name或age,只要有一个为真,则结果为真
if(info.name || info.age){
  console.log("或条件"); //或条件
}else{
  console.log("失败");
}

instead of if/else

However, they can also be simplified by representing if/else

let info = {name:"long"};

let name = info && info.name; //long

let isVip = false;
let vipPrice = isVip || 19;//19
decide() && true();

//如果decide()执行后为true,则执行true(),并输出true()的值;如果decide()执行后为false,则输出decide()执行后的结果,且不执行true()


//预计使用场景,有一个mongo查询条件where,当name存在时,匹配name数据
where= {age:19};
name && where.name = name;
decide() || false();

//如果decide()执行后为true,则执行decide(),并输出decide()的值,fasle()不执行;如果decide()执行后为false,则执行fasle(),且输出false()的结果
decide() && true() || fasle();

//如果decide()执行后为true,则执行true(),并输出true()的值;
//如果decide()执行后为false,则执行false(),并输出false()的值

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of Is there an ampersand in es6?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn