Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the JavaScript development skills?" in the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Conditionally add attributes to an object

We can use the expansion operation symbol (.) To conditionally quickly add properties to the JS object.

Const condition = true;const person = {id: 1, name: 'John Doe',... (condition & & {age: 16}),}

If the value of each Operand is true, the & & operator returns the last evaluation expression. So return an object {age: 16} and extend it as part of the person object.

If condition were false,JavaScript, it would do something like this:

Const person = {id: 1, name: 'frontend intelligence',... (false),}; / / expanding `false` has no effect on the object console.log (person); / / {id: 1, name: 'John Doe'}

two。 Check whether the property exists in the object

You can use the in keyword to check whether an attribute exists in the JavaScript object.

Const person = {name: 'front-end intelligence', salary: 1000}; console.log ('salary' in person); / / trueconsole.log (' age' in person); / / false

3. The dynamic property name in the object

It is easy to set object properties using dynamic keys. Simply use ['key name'] to add attributes:

Const dynamic = 'flavour';var item = {name:' front-end console.log', [dynamic]: 'chocolate'} console.log (item); / / {name: 'front-end small intelligence', flavour: 'chocolate'}

The same technique can be used to reference object properties using dynamic keys:

Const keyName = 'name';console.log (item [keyName]); / / returns' Front-end Intelligence'

4. Object deconstruction using dynamic keys

We know that when an object is deconstructed, you can use: to rename the deconstructed property. However, did you know that when the key name is dynamic, you can also deconstruct the properties of the object?

Const person = {id: 1, name: 'front-end name'}; const {name: personName} = person;console.log (personName); / / 'front-end small intelligence'

Now, we use dynamic keys to deconstruct attributes:

Const templates = {'hello':' Hello there', 'bye':' Good bye'}; const templateName = 'bye';const {[templateName]: template} = templates;console.log (template); / / Good bye

5. Null value merge? Operator

When we want to check whether a variable is null or undefined,? Operators are useful. When its left Operand is null or undefined, it returns the right Operand, otherwise it returns the left Operand.

Const foo = null? 'Hello';console.log (foo); / /' Hello'const bar = 'Not null'? 'Hello';console.log (bar); / /' Not null'const baz = 0? 'Hello';console.log (baz); / / 0

In the third example, 0 is returned because even though 0 is considered fake in JS, it is not null's or undefined's. You might think we could use the | operator, but there's a difference between the two.

You might think we can use the | operator here, but there is a difference between the two.

Const cannotBeZero = 0 | | 5% console.log (cannotBeZero); / / 5const canBeZero = 0? 5 × console.log (canBeZero); / / 0

6. Optional chain?.

Do we often encounter such an error: TypeError: Cannot read property 'foo' of null. This is an annoying problem for every Yi developer. The introduction of optional chain is to solve this problem. Let's take a look:

Const book = {id:1, title: 'Title', author: null}; / / normally, you would do this: console.log (book.author.age) / / throws errorconsole.log (book.author & & book.author.age); / / null// uses optional chain console.log (book.author?.age); / / undefined// or deep optional chain console.log (book.author?.address?.city); / / undefined

You can also use the following function optional chain:

Const person = {firstName: 'front end', lastName: 'this.lastName', printName: function () {return `${this.firstName} ${this.lastName}`;},}; console.log (person.printName ()); / / 'front end' console.log (persone.doesNotExist?. ()); / / undefined

7. Use! Operator

!! Operators can be used to quickly convert the result of an expression to a Boolean value (true or false):

Const greeting = 'Hello thereabouts console.log (! greeting) / / trueconst noGreeting =''; console.log (!! noGreeting); / / false

8. String and integer conversion

Quickly convert a string to a number using the + operator:

Const stringNumer = '123 destroy console.log (+ stringNumer); / / 123console.log (typeof + stringNumer); / /' number'

To quickly convert a number to a string, you can also use the + operator, followed by an empty string:

Const myString = 25 +'; console.log (myString); / / '25'console.log (typeof myString); / /' string'

These type conversions are very convenient, but their clarity and code readability are poor. Therefore, the actual development needs to be carefully chosen and used.

9. Check for false values in the array

You should all have used array methods: filter, some, every, these methods can be combined with the Boolean method to test true and false values.

Const myArray = [null, false, 'Hello', undefined, 0]; / / filter imaginary values const filtered = myArray.filter (Boolean); console.log (filtered); / / [' Hello'] / / check whether at least one value is true const anyTruthy = myArray.some (Boolean); console.log (anyTruthy); / / true// checks whether all values are true const allTruthy = myArray.every (Boolean); console.log (allTruthy); / / false

Here's how it works. We know that these array methods accept a callback function, so we pass Boolean as the callback function. The Boolean function itself takes a parameter and returns true or false based on the authenticity of the parameter. So:

MyArray.filter (val = > Boolean (val))

Equivalent to:

MyArray.filter (Boolean)

10. Flattened array

There is a method flat on the prototype Array that makes a single array from an array.

Const myArray = [{id: 1}, [{id: 2}], [{id: 3}]; const flattedArray = myArray.flat (); / / [{id: 1}, {id: 2}, {id: 3}]

You can also define a depth level that specifies the depth at which a nested array structure should be flattened. For example:

Const arr = [0,1,2, [3jre 4]; console.log (arr.flat (2)); / / returns [0,1,2, [3jre 4]]

11.Object.entries

Most developers use the Object.keys method to iterate over objects. This method returns only an array of object keys, not a value. We can use Object.entries to get keys and values.

Const person = {name: 'front-end person', age: 20}; Object.keys (person); / / ['name',' age'] Object.entries (data); / / ['name',' front-end name','], ['age', 20]]

To iterate over an object, we can do the following:

Object.keys (person) .forEach ((key) = > {console.log (`${key} is ${personkey}`);}); / / use entries to get the key and value Object.entries (person). ForEach (([key, value]) = > {console.log (`${key} is ${value}`);}); / / name is frontend snap / / age is 20

Both methods return the same result, but it is easier for Object.entries to get the key-value pair.

12.replaceAll method

In JS, to replace all occurrences of a string with another string, we need to use a regular expression like this:

Const str = 'Red-Green-Blue';// only regulates the first occurrence of str.replace (' -',''); / / Red Green-Blue// replaces all matches str.replace (/\-/ g,'') with RegEx; / / Red Green Blue

But in ES12, a new method called replaceAll is added to String.prototype, which replaces all occurrences of strings with another string value.

Str.replaceAll ('-','); / / Red Green Blue

13. Numeric separator

You can use an underscore as a number delimiter so that you can easily calculate the number of zeros in a number.

/ / it is difficult to read const billion = 1000000000X const readableBillion / easy to read const readableBillion = 1000000000X console.log (readableBillion) / / 1000000000

Underscore delimiters can also be used for BigInt numbers, as shown in the following example

Const trillion = 1000, 000.

14.document.designMode

Related to the front-end JavaScript, the design pattern allows you to edit anything on the page. Just open the browser console and enter the following.

Document.designMode = 'on'

15. Logical assignment operator

Logical assignment operators are made up of the logical operators & &, | |,? And the assignment operator =.

Const a = 1x Const b = 2x a & & = bconsole.log (a); / / 2bind / the above is equivalent to a & & (a = b); / / or if (a) {a = b}

Check whether the value of an is true, and if so, update the value of a. You can do the same thing using logic or the | | operator.

Const a = null;const b = 3persa | | = bscape console.log (a); / / 3max / the above is equivalent to a | | (a = b)

Use the null merge operator?:

Const a = null;const b = 3BX a?? = bbot console.log (a); / / 3max / the above is equivalent to if (a = = null | | a = undefined) {a = b;}

Note:? Operator checks only the value of null or undefined.

This is the end of the content of "what are the JavaScript Development skills". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.