Home > Web Front-end > JS Tutorial > body text

9 very important usage tips (with code)

php中世界最好的语言
Release: 2018-06-12 09:40:45
Original
1167 people have browsed it

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
Copy after login

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;
 	// ...
}
Copy after login

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 }) {
 // ...
}
Copy after login

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

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

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(',');
Copy after login

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;
}
Copy after login

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()])
Copy after login

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
Copy after login

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"
// =>    }
// =>  }
// =>}"
Copy after login

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]
Copy after login

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]
Copy after login

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]
Copy after login

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';
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template