Translator: Front-end wisdom

Original text: devinduct.com/blogpost/26…

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

These skills may be most of you have used, if used as a point to deepen the image, if not encountered, as a learned a few skills.

1. Ensure the array values

With grid, you need to recreate the original data, and the column lengths of each row may not match. To ensure that the lengths of the mismatched rows are equal, use the array.fill method.

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]
Copy the code

2. Get the unique value of the array

ES6 provides two very concise ways to extract unique values from arrays. Unfortunately, they don’t handle arrays of non-basic types very well. In this article, I focus on the basic data types.

const cars = [ 'Mazda', 'Ford', 'Renault', 'Opel', 'Mazda' ] const uniqueWithArrayFrom = Array.from(new Set(cars)); console.log(uniqueWithArrayFrom); // outputs ["Mazda", "Ford", "Renault", "Opel"] const uniqueWithSpreadOperator = [...new Set(cars)]; console.log(uniqueWithSpreadOperator); // outputs ["Mazda", "Ford", "Renault", "Opel"]Copy the code

3. Match union objects and arrays of objects using expansion operations

Object merging is a common occurrence, and we can use the new ES6 features to make merging a much better and cleaner process.

// merging objects const product = { name: 'Milk', packaging: 'Plastic', price: '5$' } const manufacturer = { name: 'Company Name', address: 'The Company Address' } const productManufacturer = { ... product, ... manufacturer }; console.log(productManufacturer); // outputs { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" } // merging an array of objects into one const cities = [ { name: 'Paris', visited: 'no' }, { name: 'Lyon', visited: 'no' }, { name: 'Marseille', visited: 'yes' }, { name: 'Rome', visited: 'yes' }, { name: 'Milan', visited: 'no' }, { name: 'Palermo', visited: 'yes' }, { name: 'Genoa', visited: 'yes' }, { name: 'Berlin', visited: 'no' }, { name: 'Hamburg', visited: 'yes' }, { name: 'New York', visited: 'yes' } ]; const result = cities.reduce((accumulator, item) => { return { ... accumulator, [item.name]: item.visited } }, {}); console.log(result); /* outputs Berlin: "no" Genoa: "yes" Hamburg: "yes" Lyon: "no" Marseille: "yes" Milan: "no" New York: "yes" Palermo: "yes" Paris: "no" Rome: "yes" */Copy the code

4. Array map method (without array.map)

Another way to implement Array maps is not array.map.

Array.from can also take a second argument, similar to the map method of arrays, that is used to process each element and place the value in the returned Array. As follows:

const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
// outputs ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]
Copy the code

5. Conditional object properties

Instead of creating two different objects based on a condition, you can use the expansion notation to handle it.

nst getUser = (emailIncluded) => { return { name: 'John', surname: 'Doe', ... emailIncluded && { email : '[email protected]' } } } const user = getUser(true); console.log(user); // outputs { name: "John", surname: "Doe", email: "[email protected]" } const userWithoutEmail = getUser(false); console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }Copy the code

Deconstruct the raw data

Sometimes an object has many attributes and we only need a few of them. Here we can use deconstruction to extract the attributes we need. For example, a user object has the following contents:

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: '[email protected]',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
   ...
}
Copy the code

We need to extract two parts, the user and the user information, in this case we can do:

let user = {}, userDetails = {}; ({ name: user.name, surname: user.surname, ... userDetails } = rawUser); console.log(user); // outputs { name: "John", surname: "Doe" } console.log(userDetails); // outputs { email: "[email protected]", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }Copy the code

7. Dynamic attribute names

In the early days, if the attribute name needed to be dynamic, we first had to declare an object and then assign an attribute. Those days are over, and with ES6 features, we can do just that.

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: '[email protected]'
}
console.log(user); // outputs { name: "John", email: "[email protected]" }
Copy the code

8. String interpolation

In a use case, this will stand out if you are building a template-based helper, which makes dynamic template wiring much easier.

const user = {
  name: 'John',
  surname: 'Doe',
  details: {
    email: '[email protected]',
    displayName: 'SuperCoolJohn',
    joined: '2016-05-05',
    image: 'path-to-the-image',
    followers: 45
  }
}

const printUserInfo = (user) => { 
  const text = `The user is ${user.name} ${user.surname}. Email: ${user.details.email}. Display Name: ${user.details.displayName}. ${user.name} has ${user.details.followers} followers.`
  console.log(text);
}

printUserInfo(user);
// outputs 'The user is John Doe. Email: [email protected]. Display Name: SuperCoolJohn. John has 45 followers.'
Copy the code

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.