Это краткий обзор:

• [ ] Используйте конкатенацию строк или инициализацию объекта, чтобы сделать его console.log()более информативным.
• [ ] Используйте необязательную цепочку с ?оператором, чтобы предотвратить ошибки при доступе к неопределенным свойствам объекта.
• [ ] Используйте деструкцию объекта в параметрах для написания более лаконичного кода
• [ ] Используйте синтаксис расширения для добавления элементов в массив или строку
• [ ] Используйте методы массива вместо циклов для более лаконичного кода, но обратите внимание на то, мутирует ли метод массив или нет

console.log()пожалуй, одна из первых вещей, которую усвоил каждый разработчик JavaScript. Это отличный способ увидеть, что происходит в коде, и он пригодится при отладке кода. Помимо основного console.log(something), есть несколько способов сделать вашу информацию console.log()более информативной.

Как показано в приведенных выше примерах, мы могли бы использовать литералы шаблонов для регистрации информации, это полезно, когда у вас их несколько console.log()и вы можете запутаться в том, что есть что.

Более эффективный, чем этот метод, вы также можете инициализировать объект, заключив переменную в фигурные скобки { }и передав ее в console.log(). Это зарегистрирует как имя переменной, так и значение.

Это особенно удобно, когда мы хотим регистрировать несколько переменных одновременно.

Объект consoleимеет несколько методов для вывода текстов в консоль. Помимо console.log(), я использую console.error()для регистрации сообщений об ошибках в коде. Он работает так же , как console.log()и , но подсвечивается в консоли, как вы можете видеть в первом примере.

Другой способ вывода более сложных данных — использовать console.table(), он берет массив и отображает данные в массиве в виде таблицы, как показано в примере ниже.

consoleтакже позволяет вам стилизовать вывод, и есть несколько других полезных методов, таких как console.time(), console.group(). Вы можете найти больше на этой странице .

2. Дополнительная цепочка с ? оператором

Надеюсь, вы уже знакомы с тернарным оператором — одним из моих любимых синтаксисов в языках программирования. Если нет, пожалуйста, посмотрите его. Однако есть и другой способ использования ?оператора, который я считаю чрезвычайно полезным.

В приведенном выше примере у нас есть объект person с именем и свойством страны, но у него нет свойства job. Без использования ?оператора мы получили распространенную ошибку JavaScript, которая сломала код. Чтобы этого не произошло, мы могли бы использовать ?оператор для объекта, в котором мы не уверены, определен ли он. В последнем случае JavaScript возвращает undefinedвместо того, чтобы выдать ошибку.

Это глупый пример, но в реальных проектах часто используется необязательная цепочка.

3. Использовать деструкцию объекта в параметрах

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

data:{
  "count": 1281,
  "next": "<https://pokeapi.co/api/v2/pokemon/?offset=4&limit=2>",
  "previous": "<https://pokeapi.co/api/v2/pokemon/?offset=0&limit=2>",
  "results": [
    {
      "name": "venusaur",
      "url": "<https://pokeapi.co/api/v2/pokemon/3/>"
    },
    {
      "name": "charmander",
      "url": "<https://pokeapi.co/api/v2/pokemon/4/>"
    }
  ]
}

const DisplayPokemon=(data)=>{
	const count=data.count
	const results=data.results
	results.map(// do some cool things with it)
}

const DisplayPokemon=({count,results})=>{
	results.map(// do some cool things with it)
}

Синтаксис расширения можно использовать с итерируемыми объектами, такими как массив или строка. Давайте посмотрим на быстрый пример:

У нас есть массив дней недели, и мы хотим добавить еще два элемента. Мы могли бы просто сделать это в одной строке с синтаксисом распространения.

Преимущество этого синтаксиса в том, что вы можете выбирать, где размещать элементы. Например, если мы хотим, чтобы неделя начиналась с воскресенья, мы могли бы просто сделать это:

5. Используйте методы массива вместо циклов

Я не призываю никогда не использовать циклы, но в большинстве случаев методы массива дают более лаконичный код. Допустим, у нас есть множество альпинистов, и нам нужны альпинисты старше 50 лет.

const climbers=[
	{name:"Ben Moon",age:56},
	{name:"Jerry Moffatt",age:59},
	{name:"Alex Megos",age:29},
	{name:"Adam Ondra",age:30}
]
// Use a for loop
const ageOver50=(climbers)=>{
	const result=[] 
	for (let i=0, i<climbers.length;i++){
		if(climbers[i].age>50){
			result.push(climbers[i])
		}
	}
	return result
}

Одна вещь, на которую вы должны обратить внимание при использовании метода массива, это то, изменяет ли метод массив или нет. Например, при работе с состоянием React рекомендуется обновлять состояние без мутации. Ниже приведена таблица из документации React для выбора правильного метода массива.

Посетите эту страницу , чтобы узнать больше.

Заключение

Это пять советов по JavaScript, которые я считаю полезными и, возможно, малоизвестными среди новых разработчиков. Что вы считаете полезным? Поделитесь своими советами в комментариях ниже.