[译]学习5个实用的JavaScript来提升你的效率

💡 这个系列文章主要是用于练习英文文档的读写能力，期待半年后能脱离工具写出通畅的英文文档。原文地址

前言

作为一个前端开发者，我通过这些 JavaScript 库极大的提高了我的效率，比如：日期格式化、URL 解析、H5 Debugger。我想把这些工具分享给大家，让更多的人知道。

1. 使用 dayjs 格式化日期

我已经厌倦了直接使用 JavaScript 来操作日期，因为它太麻烦了。

比如当我们想打输出当前的日期和时间时，我们必须写一大段代码才能实现这个功能：

const getDate = () => {
  const fillZero = (t) => {
    return t < 10 ? `0${t}` : t
  }
  const d = new Date()
  const year = d.getFullYear()
  const month = fillZero(d.getMonth() + 1)
  const day = fillZero(d.getDate())
  const hour = fillZero(d.getHours())
  const minute = fillZero(d.getMinutes())
  const second = fillZero(d.getSeconds())
 
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
console.log(getDate())

但是如果使用 dayjs 来实现仅仅只需要一行代码：

dayjs().format('YYYY-MM-DD HH:mm:ss')

dayjs 是一个在浏览器中用于解析、校验、操作、展示日期和时间轻量级的 JavaScript 库，拥有和 moment 一致的 API。如果你使用过 moment ，你就已经会使用 dayjs 了

2. 使用 qs 格式化 URL 查询参数

你是否经常需要去查询 URL 参数？你或许会自己实现一个解析函数：

const formatSearch = () => {
  window.location.search.slice(1).split('&').reduce((res, it) => {
    const [ key, value ] = it.split('=')
    res[ key ] = value
    return res
  }, {})
}
// <https://medium.com?name=fatfish&age=100>
const search = formatSearch() // { name: 'fatfish', age: 100 }

// use qs.js to format
const search2 = qs.parse(window.location.search.slice(1)) // { name: 'fatfish', age: 100 }

已经实现了对 URL 查询参数的解析。现在出现了新的需求：需要在 “medium.com” 上新增两个 URL 查询参数。

const splitSearch = (url, params) => {
  const search = Object.entries(params).map((it) => it.join('=')).join('&')
  return `${url}?${search}`
}
const url = '<https://medium.com>'
const params = { name: 'fatfish', age: 100 }
console.log(splitSearch(url, params)) 
// <https://medium.com?name=fatfish&age=100>

// use qs.js to stringify url
console.log(`${url}?${qs.stringify(params)}`)
// <https://medium.com?name=fatfish&age=100>

3. 使用 js-cookie 读写 cookie

众所周知，在 JavaScript 中操作 cookie 不是一件简单的事情。我强烈推荐使用 js-cookie 来提升效率，因为它提供了易用、轻量级的操作 cookie 的 API。

Cookies.set('name', 'fatfish', { expires: 10 })
Cookies.get('name') // fatfish

4. loadsh

lodash 通过简化处理数组、数字、对象和字符串的过程，使 JavaScript 变得更加简单。lodash 模块化的方法非常适合以下情况：

1. 迭代数组、对象、字符串
2. 管理和测试数据
3. 创建组合函数

// 1. Flatten the array
_.flattenDeep([ 1, [ 2, [ 3, [  4, [ 5 ]] ] ] ]) // [1, 2, 3, 4, 5]

// 2. More convenient object traversal
_.each({ name: 'fatfish', age: 100 }, (val, key) => {
  console.log(val, key) 
  // fatfish name
  // 100 'age'
})

5. 使用 vconsole 在移动端终端调试页面

在移动端调试页面往往是非常困难的，但是使用 vconsole 后这一切都变得很简单。你可以通过扫描下面的二维码或点击这个链接来体验其功能。

vconsole 提供了类似于 Chrome 浏览器的开发者工具来调试页面。该工具提供以下功能：

1. Log：日志类型（log｜info｜error）
2. Network：查看网络请求
3. Element：查看页面 DOM 树
4. Storage：管理 Cookie、LocalStorage、SessionStorage
5. 控制台：在终端执行 JavaScript
6. 自定义插件