js Summary of Uncommon Operation Operators

Directory 2, Comma Operator 3, javaScript Null Value Merge Operator (??) 4. javaScript optional chain operator (? .)

1. Preface

js has many operators, which have been mentioned in previous articles. Examples are as follows:

Operation of js integers:

Use |0 And ~~ Floating point can be converted to integer type and is more efficient than similar parseInt , Math.round Be fast, and it will be useful when dealing with pixel and animation displacement effects. See this for performance comparison.

var foo = (12.4 / 4.13) | 0;// The result is 3
var bar = ~~(12.4 / 4.13);// The result is 3

There is also a small skill, that is, ！！2 You can quickly convert a value to a Boolean value by an exclamation point. You can test 1!

var eee="eee";
alert(!!eee)

These are all operators, please see 4109 javascript small knowledge practical skills, js operator single vertical bar ""

Add a few more today:

2. Comma operator

let x = 1;
x = (x++, x);
console.log(x);
// expected output: 2
x = (2, 3);
console.log(x);
// expected output: 3

Comma operator, which evaluates the parameter on the left first, and then evaluates the value of the parameter on the right. Then return the value of the rightmost parameter.

var a = 10, b = 20;

function CommaTest(){
    return a++, b++, 10;
}

var c = CommaTest();

alert(a); //  Return 11
alert(b); //  Return 21
alert(c); //  Return 10

Now that we know how to call function operators, let's give an example of how to deal with their conflicts.

alert(2*5, 2*4); //  Output 10

The above code outputs 10, but if interpreted according to the comma operator, it should output 8. Why?

Because the comma operator is in the JavaScript It is very useful to remember that the priority in is the lowest. So the function call operator will run before the comma operator. The resulting alert function outputs the value of the first parameter. Modify the above code to look like this.

alert((2*5, 2*4)); //  Return 8

3. javaScript null value merge operator (??)

Only if the left side is null And undefined Will return the right-hand null value merge operator (??) Is a logical operator when the operand on the left is null or undefined Returns its right-hand operand, otherwise returns its left-hand operand.

Unlike the logical OR operator (), the logical OR operator returns the right-hand operand when the left-hand operand is false. That is, if you use it to set default values for certain variables, you may encounter unexpected behavior. For example, when it is a false value (for example, ''or 0). See the following example.

let str = null||undefined
let result = str??'haorooms Blog '
console.log(result)//haorooms Blog 

const nullValue = null;
const emptyText = ""; //  Empty string, yes 1 A false value, Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA  Default value of ";
const valB = emptyText ?? "valB  Default value of ";
const valC = someNumber ?? 0;

console.log(valA); // "valA  Default value of "
console.log(valB); // "" Although an empty string is a false value, it is not  null  Or  undefined ) 
console.log(valC); // 42

4. javaScript optional chain operator (? .)

Optional chain operator ( ?. ) Allows you to read the values of properties located deep in the chain of join objects without explicitly verifying that each reference in the chain is valid. ? The. operator functions similar to the. chain operator except that it does not cause an error if the reference is null (nullish) (null or undefined), and the expression shorts the return value

Use the optional chain operator (? The browser will not report an error!

const demo = {
    name: 'haorooms',
    cat: {
        name: 'haorooms cat'
    }
};
console.log(demo.dog?.name); 
// expected output: undefined
console.log(demo.what?.());
// expected output: undefined

Function call:

let result = someOne.customMethod?.();

If you wish to allow ~~0 Also for null Or undefined Then you need to write like this someOne?.customMethod?.()

Optional chains and expressions:

let nestedProp = obj?.['prop' + 'Name'];

Optional chain access array:

var eee="eee";
alert(!!eee)

0

Short circuit calculation:

var eee="eee";
alert(!!eee)

1