[Перевод] 5 минут на изучение JS, несколько советов

внешний интерфейс JavaScript

Оригинал -Learn these neat JavaScript tricks in less than 5 minutes

Некоторые навыки ежедневного развития, перефразируя.

Пустые и усеченные массивы

Самый простой способ очистить и усечь массив — изменитьlengthАтрибуты:

const arr = [11, 22, 33, 44, 55, 66];

// 截取
arr.length = 3;
console.log(arr); //=> [11, 22, 33];

// 清空
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

Эмулируйте именованные параметры, используя структуру объекта

Раньше, когда мы хотели передать функции несколько аргументов, мы могли использовать配置对象Режим:

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

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

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

если тебе это нужно配置对象Параметр становится необязательным, и это очень просто:

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

Объектная деструктуризация массивов

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

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

Примечание. В этом примере2дляsplitПосле индекса массиваcountryуказанная переменная, значение равноUS

switchиспользовать диапазон в заявлении

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

function getWaterState(tempInCelsius) {
  let state;
  
  switch (true) {
    case (tempInCelsius <= 0): 
      state = 'Solid';
      break;
    case (tempInCelsius > 0 && tempInCelsius < 100): 
      state = 'Liquid';
      break;
    default: 
      state = 'Gas';
  }
  return state;
}

awaitнесколькоasyncфункция

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

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

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

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

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

форматJSONкод

JSON.stringifyне только может字符串объект, он также может форматировать вашJSONвыход:

const obj = { 
  foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};

// 第三个参数为格式化需要的空格数目
JSON.stringify(obj, null, 4); 
// =>"{
// =>    "foo": {
// =>        "bar": [
// =>            11,
// =>            22,
// =>            33,
// =>            44
// =>        ],
// =>        "baz": {
// =>            "bing": true,
// =>            "boom": "Hello"
// =>        }
// =>    }
// =>}"

удалить дубликаты массива

использоватьES2015и оператор распространения, вы можете легко удалить дубликаты в массиве:

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

Примечание: применяется только к массивам, содержимое которых基本数据类型

сгладить многомерный массив

Массивы можно быстро сгладить с помощью оператора распространения:

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

К сожалению, описанный выше трюк работает только二维数组, но с помощью рекурсии мы можем сгладить массив произвольных широт:

function 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]

Вот и все, надеюсь, эти элегантные приемы помогут вам писать красивее.JavaScript.

Категории