9 very important usage tips (with code)

This time I bring you 9 very important usage skills (with code). What are the precautions for using JS? The following is a practical case, let’s take a look.

1. Delete the tail elements of the array

A simple way to clear or delete the tail elements of the array is to change the length of the array attribute value.

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Use object destructuring to simulate named parameters

If you need to pass a series of optional options into a function as parameters, then you may tend to use a Object to define the configuration (Config).

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

This is an old, but very effective method, which simulates named parameters in JavaScript. However, the way to handle config in doSomething is a bit cumbersome. In ES2015, you can use object destructuring directly.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

If you want this parameter to be optional, that's easy too.

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. Use object destructuring to process arrays

You can use the syntax of object destructuring to get the elements of the array:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4 . Use range values ​​in switch statements

You can use the following techniques to write switch statements that satisfy range values:

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = &#39;Solid&#39;;
   break;
  case (tempInCelsius > 0 && tempInCelsius < 100): 
   state = &#39;Liquid&#39;;
   break;
  default: 
   state = &#39;Gas&#39;;
 }
 return state;
}

5. await multiple async functions

When using async/await, you can use Promise.all to await multiple async functions.

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Create a pure object

You can create a 100% pure object, which does not inherit any properties or methods from Object ( For example, constructor, toString(), etc.).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. Format JSON code

JSON.stringify can not only characterize an object, but also format and output JSON objects.

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. Remove duplicate elements from an array

In ES2015, there is a set syntax. By using set syntax and the Spread operation, it is easy to remove duplicate elements:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. Tiling multi-dimensional arrays

Using the Spread operation, it is easy To flatten nested multi-dimensional arrays:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Unfortunately, the above method only applies to two-dimensional arrays. However, with recursion, we can flatten nested arrays of arbitrary dimensions.

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

That’s it! I hope these tips can help you write more beautiful JS code! If that's not enough, you might as well use Fundebug as your assistant!

Featured Comments

Ethan B Martin: The writing of this switch is very clever, but I don’t recommend it. Please do not encourage developers to write JS code in this way. We once had an engineer write this, which later caused a lot of reading trouble during code review. Fortunately, we refactored it into more readable code in time. Let’s compare the difference between using switch and if:

function getWaterState1(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}
function getWaterState2(tempInCelsius) {
 if (tempInCelsius <= 0) {
  return 'Solid';
 }
 if (tempInCelsius < 100) {
  return 'Liquid';
 }
 return 'Gas';
}

The second way of writing has several advantages:
A) The amount of code is smaller and more readable; B) You don’t need to declare a local variable, Readers won't have to keep track of how you changed this variable; C) switch(true) can be really confusing.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of cross-domain usage of local environment operation node server

How to obtain all data in the DOM document tree

The above is the detailed content of 9 very important usage tips (with code). For more information, please follow other related articles on the PHP Chinese website!