谈谈为什么你的 JavaScript 代码如此冗长

async function getData() {
  const result = await axios.get('https://dube.io/service/ping')
  const data = result.data

  console.log('data', data)

  return data
}

getData()

import axios from 'axios'

let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]

async function fetchData(dataSet) {
  for(entry of dataSet) {
    const result = await axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
    const newData = result.data
    updateData(newData)

    console.log(myData)
  }
}

function updateData(newData) {
  myData = myData.map(el => {
    if(el.id === newData.id) return newData
    return el
  })
}

fetchData(myData)

import axios from 'axios' 

let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]

async function fetchData(dataSet) {
  const pokemonPromises = dataSet.map(entry => {
    return axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
  })

  const results = await Promise.all(pokemonPromises)

  results.forEach(result => {
    updateData(result.data)
  })

  console.log(myData) 
}

function updateData(newData) {
  myData = myData.map(el => {
    if(el.id === newData.id) return newData
    return el
  })
}

fetchData(myData)

const result = axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
const data = result.data

const { data } = await axios.get(...)

const { data: newData } = await axios.get(...)

const { id = 5 } = {}
console.log(id) // 5

function calculate({operands = [1, 2], type = 'addition'} = {}) {
  return operands.reduce((acc, val) => {
    switch(type) {
      case 'addition':
        return acc + val
      case 'subtraction':
        return acc - val
      case 'multiplication':
        return acc * val
      case 'division':
        return acc / val
    }
  }, ['addition', 'subtraction'].includes(type) "color: #ff0000">4. 真值和假值

在使用默认值时，经常需要检查存在的值。但是，你还可以直接使用真值和假值。这样能改善代码并节省好多字符，使代码更加流畅。我经常看到人们这样写：


if(myBool === true) {
 console.log(...)
}
// OR
if(myString.length > 0) {
 console.log(...)
}
// OR
if(isNaN(myNumber)) {
 console.log(...)
}



这些代码可以缩写成：


if(myBool) {
 console.log(...)
}
// OR
if(myString) {
 console.log(...)
}
// OR
if(!myNumber) {
 console.log(...)
}



要真正理解这些语句的好处，你必须要理解真值和假值都是什么。下面是部分摘要：
假值

  
长度为0的字符串
  
数字0
  
false
  
undefined
  
null
  
NaN

真值

  
空数组
  
空对象
  
任何其他东西

当检查真值或假值时，不需要明确写出比较，这相当于使用双等号 == 而不是三等号 ===。一般来说，这种用法的行为与预想是一致的，但有可能会遇到bug。比如，我最常遇到但就是有关数字0的bug。
5. 逻辑运算符和三元运算符
这些运算符也是用来缩减代码的，节省下宝贵的代码行数。经常有许多工具可以保持代码干净整洁，但这些工具也会造成混乱，特别是在改变它们时。
逻辑运算符
逻辑运算符可以组合两个表达式，并返回true或false，或者匹配的值。常用的有&&，意思是“与”，还有 || 意思是“或”。我们来看看：


console.log(true && true) // true
console.log(false && true) // false
console.log(true && false) // false
console.log(false && false) // false
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false


根据上一部分关于真值和假值的知识，我们可以将逻辑运算符组合起来。在使用逻辑运算符时，会使用以下规则：

  
&& ：返回第一个值为假的表达式的值。如果不存在，则返回最后一个值为真的值。
  
|| ：返回第一个值为假的表达式的值。如果不存在，则返回最后一个值为假的值。



console.log(0 && {a: 1}) // 0
console.log(false && 'a') // false
console.log('2' && 5) // 5
console.log([] || false) // []
console.log(NaN || null) // null
console.log(true || 'a') // true


三元运算符
三元运算符很像逻辑表达式，但它由三个部分组成：

  
比较部分，返回假值或真值；
  
第一个值，如果比较为真；
  
第二个值，如果比较为假。

下面是例子：


const lang = 'German'
console.log(lang === 'German' "color: #ff0000">6. 链式操作

你遇到过这个问题吗？在访问嵌套对象的属性时，无法事先确定对象的属性是否存在？可能不得不写这样的代码：


let data
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData


这段代码很荒谬，我们还有更好的办法，至少是在建议中的办法（下面说了怎样启用该办法）。这个办法称为optional chaining，用法如下：


const data = myObj"color: #ff0000">7. 类属性和绑定

JavaScript中的函数绑定是个非常常见的任务。由于ES6标准引入了箭头函数，我们现在可以自动地用定义的形式绑定函数——这方法非常好用，现在的JavaScript开发者都在用它。之前类刚刚出现时是没办法使用箭头函数的，因为类需要用某种特殊的方式来定义。我们需要在某个地方进行绑定，例如在构造函数里（在React.js中最好这样做）。
我很讨厌需要先定义类方法再绑定方法的流程，不过现在可以通过箭头函数进行自动绑定。箭头函数现在可以直接在类中使用。
下面是个例子，其中的_increaseCount被绑定了：


class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    return(
      <div>
        <h1>{this.state.count}</h1> 
        <button onClick={this._increaseCount}>Increase Count</button>
      </div>
    )
  }

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 })
  }
}



目前，类属性不是官方标准的一部分，但是个stage-3的实验性功能。必须在babelrc中添加@babel/plugin-proposal-class-properties才能使用它。
8. 使用parcel
作为前端开发者，你肯定会遇到打包和编译代码的问题。
长时间以来，实践中的标准是webpack。我最初用的是webpack版本1，当时用起来很痛苦，需要不断修改尝试各种配置选项，我在上面花了无数个小时想办法让它工作。一旦弄好我就绝不会再碰它，以免不小心破坏什么。几个月之后我遇到了parcel，总算松了口气。它几乎可以不加任何配置拿来即用，但你依然可以在需要的时候进行改变。它还支持插件，类似于webpack和babel，但非常快。
如果你不知道parcel，我建议你一定要试试。
9. 自己写更多代码
这一条很有意思，这个话题我已经讨论过很多次了。
即使是CSS，许多人也喜欢用现成的库，比如bootstrap。至于JavaScript，现在还有很多人在用jQuery以及各种小型库进行表单验证、跑马灯等等。虽然使用库天经地义，但我强烈建议你自己写更多的代码，而不是依赖于安装各种npm包。当然，大型的库（甚至框架）需要整个团队去构建，如moment.js或react-dateicker，自己写是不现实的。
但是，其他的大部分东西都可以自己写。这样能带来三个好处：
你清楚地知道代码的内容；
在某个点上你开始真正理解编程，知道内部的工作原理；
可以防止代码膨胀。
最初直接使用npm包很方便。自己实现一些功能会花很多时间。但是，如果安装的包并不能正常工作，而需要换别的方法，就得花更多的时间去阅读其API。而在自己实现时，你可以为项目100%地量身定做。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：JS实现的新闻列表自动滚动效果示例
            
下一篇：JS实现头条新闻的经典轮播图效果示例