Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Look at Ant Design source and see onCancel? (e) It is necessary to judge the existence of a computer. But where did that come from? Go to the group to ask that it is a new feature in 2020! 😮 also has a?? , are new features added for scenarios where the value is undefined or NULL. These are very practical. I need to Mark them.

ES: chain judgment operator? .(New ES2020 features)

For nested object properties, we often need to use short-circuit logic to determine whether it exists or not, and then we get aa && aa.bb && aa.bb. Cc. Chain judgment operator? .is to solve this scenario.

conststreet = user? .address? .street;/ / equivalent to the
const street = user && user.address && user.address.street;
Copy the code

? . The same applies to method calls, such as onCancel mentioned in the introduction? (e) usage.

ES: non-null, non-undefined judgment??(New ES2020 features)

For the example above, return user.address.street if it exists; Returns undefined when it does not exist. What if I want to give it a default value? ES2020 has noticed this, of course, by using the void merge operator?? Provide default values.

conststreet = user? .address? .street ??'4 Lower Street West';
/ / equivalent to the
const street = user && user.address && user.address.street || '4 Lower Street West';
Copy the code

CSS: inset

This, I originally used the second way to write, to the browser to see the effect, found chrome automatic processing for inset to write 😝

.box{
	position:absolute;
	inset:0px
}
/* is equivalent to */
.box{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px
}
Copy the code

Refer to the link

ES11 here, still learn to move?

tc39.es/ecma262

Record the daily work, learning process encountered small new knowledge