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

This article mainly introduces the tips that JavaScript needs to know. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Magical extension operator

The extension operator (spread) is three dots (...), which is arguably my favorite operator in JavaScript. I mainly use it in the following three situations:

1. Copy array

Const arr = [1,2,3,4] const newArr = [... arr] console.log (newArr) / / [1,2,3,4] 2. Merge array

Const numArr = [1,2,3,4] const alphaArr = ['numArr,' baked,'c'] const newArr = [. NumArr,... alphaArr] console.log (newArr) / / [1,2,3,4, 'ajar,' baked,'c'] 3. Expand object

Const rectangle = {width: 10, height: 10} const cube = {... rectangle, length: 7} console.log (cube) / / {width: 10, height: 10, length: 7} II. The best method for null checking

Do you remember the first empty check code you wrote? When JavaScript wasn't as perfect as it is now, I wrote this in my old code:

If (foo! = = null & & foo! = = undefined) {}

Later, my life was saved by a simple if!

If (foo) {}

As long as the conditional value foo is not the following values, it will be true. "

Null

Undefined

NaN

Empty string (")

False

In addition to simple if, the optional chain operator for modern JavaScript?. Merge operator with null value? Can make our code more concise.

1. Optional chain operator

The optional chain operator is a secure way to access properties of nested objects. This means that we don't have to do multiple null checks when accessing a long list of object properties. When trying to access object properties that may not exist, the optional chain operator will make the expression shorter and more concise

The following example checks whether the zip code of the customer address is null:

Const client = {name: 'Liu Xing', address: {zipcode:' 1234'}} / / the old value method if (client & & client.address & & client.address.zipcode) {} / / the more modern alternative chain operator method if (client?.address?.zipcode) {} 2. Null merge operator

The null merge operator is a logical operator that returns its right Operand when the left Operand is null or undefined, otherwise it returns the left Operand.

Const defaultMessage = 'Zen of Hello JavaScript' const msg = defaultMessage? 'Hello Liu Xing';console.log (msg); / / Zen of Hello JavaScript'

If defaultMessage is null or undefined, Hello Liu Xing will be printed out.

When we use it sequentially, it becomes more powerful:

Console.log (firstName?? LastName?? 'anonymous')

In this example, if firstName is not null/undefined, it will display firstName, otherwise, if lastName is not null/undefined, it will show lastName. Finally, if they are all null/undefined, it will display "anonymous".

Third, use .map (), .reduce () and .filter ()

Next, talk about the powerful techniques of functional and reactive programming! When I first used it a few years ago, it really opened a new door for me. Now every time I see this concise code, I am still shocked by its beauty.

Today I'll give examples of the three most commonly used methods: map, reduce, and filter.

Before COVID-19 's epidemic, we went to Paris for a holiday. So they went to the supermarket to buy some things. They bought food and groceries. But all the items are in euros, and they want to know the price of each item and the total cost of their food in RMB.

Since 1 euro is equal to 7.18 yen.

In the traditional way, we will use a classic loop to do this:

Const items = [{name: 'pineapple', price: 2, type:' food'}, {name: 'beef', price: 20, type:' food'}, {name: 'advocate', price: 1, type:' food'}, {name: 'shampoo', price: 5, type:' other'}] let sum = 0const itemsInYuan = [] for (let I = 0; I

< items.length; i++) { const item = items[i] item.price *= 7.18 itemsInYuan.push(item) if (item.type === 'food') { sum += item.price }}console.log(itemsInYuan)/*[ { name: 'pineapple', price: 14.36, type: 'food' }, { name: 'beef', price: 143.6, type: 'food' }, { name: 'advocate', price: 7.18, type: 'food' }, { name: 'shampoo', price: 35.9, type: 'other' }]*/console.log(sum) // 165.14现在我们来使用现在 JavaScript 提供的函数式编程方法来实现这个计算。const itemsInYuan = items.map(item =>

{const itemInYuan = {... item} itemInYuan.price * = 7.18return itemInYuan}) const sum = itemsInYuan.filter (item = > item.type = 'food'). Reduce ((total, item) = > total + item.price, 0)

The above example uses the map method to convert euros to yen, uses filter to filter out non-food items, and uses reduce to calculate the price sum.

These are all the contents of the article "what are the tips JavaScript needs to know?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.