8 практических советов по JavaScript

внешний интерфейс JavaScript Программа перевода самородков

представлять

В каждом языке программирования есть свои уникальные приемы. Многие из них хорошо известны разработчикам, но некоторые из них довольно хакерские. В этой статье я покажу вам несколько советов, которые я считаю полезными. Некоторые из них я использовал на практике, а другие являются новыми решениями старых проблем. Наслаждаться!

1. Убедитесь, что длина массива

Я не знаю, сталкивались ли вы с такой ситуацией.При работе со структурой сетки, если длина каждой строки исходных данных не равна, вам необходимо воссоздать данные. Ну вот я и столкнулся! Чтобы убедиться, что длина данных каждой строки одинакова, вы можете использоватьArray.fillметод.

let array = Array(5).fill('');
console.log(array); // 输出（5）["", "", "", "", ""]

2. Дедупликация массива

ES6 предоставляет несколько очень удобных способов дедупликации массивов. Но, к сожалению, они не подходят для работы с массивами непримитивных типов. позже ты сможешьхитрая дедупликация массиваПодробнее об этом читайте в этой статье. Здесь мы сосредоточимся только на дедупликации массивов примитивных типов.

const cars = [
    'Mazda', 
    'Ford', 
    'Renault', 
    'Opel', 
    'Mazda'
]
const uniqueWithArrayFrom = Array.from(new Set(cars));
console.log(uniqueWithArrayFrom); // 输出 ["Mazda", "Ford", "Renault", "Opel"]

const uniqueWithSpreadOperator = [...new Set(cars)];
console.log(uniqueWithSpreadOperator);// 输出 ["Mazda", "Ford", "Renault", "Opel"]

3. Объединяйте объекты и массивы объектов оператором распространения

Слияние объектов — нередкая проблема, есть большая вероятность, что вы уже сталкивались с этой проблемой и столкнетесь с ней снова в недалеком будущем. Разница в том, что раньше вы выполняли большую часть работы вручную, а теперь будете использовать новые возможности ES6.

// 合并对象
const product = { name: 'Milk', packaging: 'Plastic', price: '5$' }
const manufacturer = { name: 'Company Name', address: 'The Company Address' }

const productManufacturer = { ...product, ...manufacturer };
console.log(productManufacturer); 
// 输出 { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" }

// 将对象数组合并成一个对象
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);
/* 输出
Berlin: "no"
Genoa: "yes"
Hamburg: "yes"
Lyon: "no"
Marseille: "yes"
Milan: "no"
New York: "yes"
Palermo: "yes"
Paris: "no"
Rome: "yes"
*/

4. Mapping Array (не используется)Array.map)

Вы знаете, что есть другой способ реализовать отображение массива без использованияArray.map? Если вы не знаете, продолжайте читать.

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);
// 输出 ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

5. Добавьте свойства объекта на основе условий

Теперь вам больше не нужно создавать два разных объекта на основе условий, чтобы они имели определенные свойства. Оператор спреда был бы идеальным выбором.

const getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...(emailIncluded ? { email : 'john@doe.com' } : null)
  }
}

const user = getUser(true);
console.log(user); // 输出 { name: "John", surname: "Doe", email: "john@doe.com" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // 输出 { name: "John", surname: "Doe" }

6. Деконструировать необработанные данные

Вы когда-нибудь имели дело с объектами с очень многими свойствами? Я считаю, что вы должны иметь. Вероятно, наиболее распространенным случаем является то, что у нас есть пользовательский объект, который содержит все данные и детали. Здесь мы можем вызвать новый метод деструктуризации ES, чтобы справиться с этой большой проблемой. Давайте посмотрим на пример ниже.

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: 'john@doe.com',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
   ...
}

Разделив вышеприведенный объект на два, мы можем представить этот объект таким образом, чтобы его контекстуальное значение было более переносимым, следующим образом:

let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user); // 输出 { name: "John", surname: "Doe" }
console.log(userDetails); // 输出 { email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }

7. Динамически задайте имя свойства объекта

В прошлом, если нам нужно было динамически установить имя свойства объекта, мы должны были сначала объявить объект, а затем присвоить ему свойство. Этого нельзя добиться чисто декларативным путем. Сегодня все по-другому, и теперь мы можем добиться этого благодаря возможностям ES6.

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: 'john@doe.com'
}
console.log(user); // 输出 { name: "John", email: "john@doe.com" }

8. Интерполяция строк

И последнее, но не менее важное — это новый способ объединения строк. Это полезно, если вы хотите создать строки шаблона во вспомогательной программе. Это значительно упрощает динамические шаблоны строк подключения.

const user = {
  name: 'John',
  surname: 'Doe',
  details: {
    email: 'john@doe.com',
    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);
// 输出 'The user is John Doe. Email: john@doe.com. Display Name: SuperCoolJohn. John has 45 followers.'

Суммировать

Мир JavaScript быстро расширяется. Здесь есть много интересных функций, которые можно использовать в любое время. Хитрые и трудоемкие проблемы исчезают, а с новыми функциями ES6 у нас есть множество новых готовых решений.

Это все, чем я хочу поделиться сегодня. Если вам также понравилась эта статья, пожалуйста, сделайте репост или лайк.

Спасибо за чтение и увидимся в следующий раз.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории