JavaScript Operators and Expressions

Table of contents

One, ===

Two,||

3. ?? and ?.

??

?.

Four,...

five,[] {}

[]

{}

---

One, ===

Strict equality operator, used for logical judgment

1 == 1    	// 返回 true 
1 == '1'	// 返回 true，会先将右侧的字符串转为数字，再做比较
1 === '1'	// 返回 false，类型不等，直接返回 false

typeof checks the type of a value

typeof 1	// 返回 'number'
typeof '1'	// 返回 'string'

Two,||

Requirements, if the parameter n is passed without error, give it a [male]

Recommended practice:

function test(n = '男') {
    console.log(n);
}

What you might do:

function test(n) {
    if(n === undefined) {
        n = '男';
    }
    console.log(n);
}

It could also be:

function test(n) {
    n = (n === undefined) ? '男' : n;
    console.log(n);
}

Possible practices in some old code (not recommended):

function test(n) {
    n = n || '男';
    console.log(n);
}

Its syntax is:

值1 || 值2

If value 1 is Truthy, return value 1, if value 1 is Falsy return value 2

3. ?? and ?.

??

Requirement, if the parameter n is not passed or null, give it a [male]

If you use the traditional method:

function test(n) {
    if(n === undefined || n === null) {
        n = '男';
    }
    console.log(n);
}

use??

function test(n) {
    n = n ?? '男';
    console.log(n);
}

grammar:

值1 ?? 值2

• Value 1 is nullish, return value 2

• Value 1 is not nullish, return value 1

?.

Requirements, the function parameter is an object, which may contain sub-properties

For example, parameters might be:

let stu1 = {
    name:"张三",
    address: {
        city: '北京'
    }
};

let stu2 = {
    name:"李四"
}

let stu3 = {
    name:"李四",
    address: null
}

Now to access subproperties (problems)

function test(stu) {
    console.log(stu.address.city)
}

Now I want to short-circuit and return undefined when a property is nullish, you can use ?.

function test(stu) {
    console.log(stu.address?.city)
}

With the traditional method:

function test(stu) {
    if(stu.address === undefined || stu.address === null) {
        console.log(undefined);
        return;
    }
    console.log(stu.address.city)
}

Four,...

spread operator

Function 1: Break up the array and pass the elements to multiple parameters

let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}

Requirement: Pass the array elements to the function parameters in turn

Traditional writing:

test(arr[0],arr[1],arr[2]);		// 输出 1,2,3

The expansion operator is written as follows:

test(...arr);					// 输出 1,2,3

• Breaking up can be understood as [removing] the square brackets outside the array, leaving only the array elements

Function 2: copy array or object

array:

let arr1 = [1,2,3];
let arr2 = [...arr1];		// 复制数组

object:

let obj1 = {name:'张三', age: 18};

let obj2 = {...obj1};		// 复制对象

Note: The spread operator copy is a shallow copy, for example:

let o1 = {name:'张三', address: {city: '北京'} }

let o2 = {...o1};

Function 3: Merge arrays or objects

Merge arrays:

let a1 = [1,2];
let a2 = [3,4];

let b1 = [...a1,...a2];		// 结果 [1,2,3,4]
let b2 = [...a2,5,...a1]	// 结果 [3,4,5,1,2]

Merge objects:

let o1 = {name:'张三'};
let o2 = {age:18};
let o3 = {name:'李四'};

let n1 = {...o1, ...o2};	// 结果 {name:'张三',age:18}

let n2 = {...o3, ...o2, ...o1}; // 结果{name:'李四',age:18}

• Attributes with the same name appear when copying an object, and the later ones will overwrite the previous ones

five,[] {}

[]

destructuring assignment

Used when declaring variables:

let arr = [1,2,3];

let [a, b, c] = arr;	// 结果 a=1, b=2, c=3

Used when declaring parameters:

let arr = [1,2,3];

function test([a,b,c]) {
    console.log(a,b,c) 	// 结果 a=1, b=2, c=3
}

test(arr);	

{}

Used when declaring variables:

let obj = {name:"张三", age:18};

let {name,age} = obj;	// 结果 name=张三, age=18

Used when declaring parameters:

let obj = {name:"张三", age:18};

function test({name, age}) {
    console.log(name, age); // 结果 name=张三, age=18
}

test(obj)