5 минут до мастера 9 кокетчивых и лаконичных навыков JavaScript

JavaScript

1. Очистить или обрезать массив

Мы можем очистить или обрезать массив, просто изменив длину массива:

  1. const arr = [11, 22, 33, 44, 55, 66];
  2. // truncanting
  3. arr.length = 3;
  4. console.log(arr); //=> [11, 22, 33]
  5. // clearing
  6. arr.length = 0;
  7. console.log(arr); //=> []
  8. console.log(arr[2]); //=> undefined

2. Используйте объекты деструктурирования для имитации именованных функций

Когда вам нужно передать набор переменных в качестве параметра функции, велика вероятность использования «объекта конфигурации», например:

  1. doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
  2. function doSomething(config) {
  3. const foo = config.foo !== undefined ? config.foo : 'Hi';
  4. const bar = config.bar !== undefined ? config.bar : 'Yo!';
  5. const baz = config.baz !== undefined ? config.baz : 13;
  6. // ...
  7. }

При использовании функции doSomething{ foo: 'Hello', bar: 'Hey!', baz: 42 }Этот Json передается в качестве параметра в Json, а затем разбирается в функциях, присваивающих значения переменным.

Это старый, но эффективный шаблон, который пытается эмулировать именованные параметры в JavaScript. Это хорошо, но делает код излишне подробным. Благодаря деструктуризации объектов ES2015 вы можете избежать многословия:

  1. function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
  2. // ...
  3. }

Если вам нужно сделать параметр в функции необязательным, это тоже просто:

  1. function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  2. // ...
  3. }

3. Структура параметров массива

Используйте «деструктурирование объекта», чтобы деконструировать строку, содержимое которой является массивом, а затем присвоить переменную:

  1. const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
  2. const { 2: country, 4: state } = csvFileLine.split(',');

Второй элемент «США» в массиве назначается стране, а четвертый элемент «Нью-Йорк» — штату.

4. Оператор switch с условием диапазона

Вот простые приемы использования областей видимости в операторах switch:

  1. function getWaterState(tempInCelsius) {
  2. let state;
  3. switch (true) {
  4. case (tempInCelsius <= 0):
  5. state = 'Solid';
  6. break;
  7. case (tempInCelsius > 0 && tempInCelsius < 100):
  8. state = 'Liquid';
  9. break;
  10. default:
  11. state = 'Gas';
  12. }
  13. return state;
  14. }

5. Механизм асинхронного обратного вызова для нескольких асинхронных функций

Вы можете использовать Promise.all для ожидания завершения нескольких асинхронных функций.

  1. await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Создавайте чистые объекты

Вы можете создать 100% чистый объект, который не наследует никаких методов класса Object (например: конструктор, toString() и т.д.).

  1. const pureObject = Object.create(null);
  2. console.log(pureObject); //=> {}
  3. console.log(pureObject.constructor); //=> undefined
  4. console.log(pureObject.toString); //=> undefined
  5. console.log(pureObject.hasOwnProperty); //=> undefined

7. Код JSON становится форматированной строкой

JSON.stringify может делать больше, чем просто превращать объекты JSON в строки, вы также можете использовать его для украшения вашего вывода JSON:

  1. const obj = {
  2. foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }
  3. };
  4. // The third parameter is the number of spaces used to
  5. // beautify the JSON output.
  6. JSON.stringify(obj, null, 4);
  7. // =>"{
  8. // => "foo": {
  9. // => "bar": [
  10. // => 11,
  11. // => 22,
  12. // => 33,
  13. // => 44
  14. // => ],
  15. // => "baz": {
  16. // => "bing": true,
  17. // => "boom": "Hello"
  18. // => }
  19. // => }
  20. // =>}"

8. Удалить повторяющиеся элементы из массива

С ES2015, который включает в себя оператор Spread, он же последний JS, вы можете легко удалять повторяющиеся элементы из массива.

  1. const removeDuplicateItems = arr => [...new Set(arr)];
  2. removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
  3. //=> [42, "foo", true]

9. Уменьшить размерность многомерного массива

Уменьшить размерность двумерного массива с помощью оператора Spread очень просто:

  1. const arr = [11, [22, 33], [44, 55], 66];
  2. const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

К сожалению, описанный выше трюк работает только для 2D-массивов. Но с помощью рекурсии мы можем уменьшить размерность массивов с более чем двумя измерениями:

  1. function flattenArray(arr) {
  2. const flattened = [].concat(...arr);
  3. return flattened.some(item => Array.isArray(item)) ?
  4. flattenArray(flattened) : flattened;
  5. }
  6. const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
  7. const flatArr = flattenArray(arr);
  8. //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Выше приведены 9 советов, надеюсь, они помогут вам писать более качественный и красивый JS-код!

Станьте высокооплачиваемым фронтенд-инженером с нулевым фундаментом! Подпишитесь на Google и GitHub, чтобы изучить курс [Front-end Development] Силиконовой долины с нуля, бросьте вызов оригинальному проекту Силиконовой долины, получите сертификат Силиконовой долины, нажмите, чтобы испытать его бесплатно

веб-разработка переднего плана разработка переднего плана технологического обучения _ _ вход для обучения инженера переднего плана / продвинутый курс - отличия официального сайта Xuecheng (Udacity) | Udacity
Категории