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 && tempInCelsius <p style="text-align: left;"><strong>5. await multiple async functions</strong></p><p style="text-align: left;">When using async/await, you can use Promise.all to await multiple async functions. </p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;"> The second way of writing has several advantages: <br>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. </p><p> 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! </p><p>Recommended reading: </p><p><a href="http://www.php.cn/js-tutorial-402740.html" target="_blank">Summary of cross-domain usage of local environment operation node server</a><br></p><p><a href="http://www.php.cn/js-tutorial-402744.html" target="_blank" style="font-size: 14px;">How to obtain all data in the DOM document tree </a><br></p>

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!