使用Javascript使用技巧 整理

1.方法参数验证

ES6 中可以为函数的参数设置默认值，有了这个，我们可以实现一个验证方法参数不能为空的巧妙技巧：

const isRequired = () => { 
 throw new Error('param is required')
}

const print = (num = isRequired()) => { 
 console.log(`printing ${num}`) 
}

print(2) //printing 2
print() // error
print(null) //printing null

2.格式化JSON代码

我们都非常熟悉JSON.stringify，但比较少知道的是它还可以进行格式化的输出。

stringify 方法有三个参数：value，replacer和space。其中，后两个是可选参数，这也是我们很少知道它的原因。要缩进JSON，必须使用space参数。

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>> 
{
"name": "John",
"Age": 23
}

3.从数组中获取惟一的值

要从数组中获得唯一的值，需要使用filter方法过滤掉重复的值。但是有了新的Set原生对象，事情就变得非常简单了。

let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];

>>> [1, 2, 3, "school", "ball", false, true]

4.从数组中删除虚值

在某些情况下， 我们想从数组中删除虚值。虚值是 JavaScript 中的值为FALSE的值。JavaScript 中只有六个虚值，它们是：

1. underfined
2. null
3. NaN
4. 0
5. “”(空字符)
6. false

过滤这些虚值的最简单方法是使用下面的函数：

myArray.filter(Boolean)

如果要对数组进行一些修改，然后过滤新数组，则可以尝试这样的操作。请记住，原始myArray保持不变。

myArray.map(item => {
        // Do your changes and return the new item
    }).filter(Boolean);

5.合并多个对象

实际需求中，我们经常需要合并多个对照，快速的做法可以像下面这么做：

const user = { 
name: 'John Ludwig', 
gender: 'Male' 
}

const college = { 
primary: 'Mani Primary School', 
secondary: 'Lass Secondary School' 
}
const skills = { 
programming: 'Extreme', 
swimming: 'Average', 
sleeping: 'Pro' 
}

const summary = {...user, ...college, ...skills}

6.排序数字数组

JavaScript 数组带有内置的sort方法。默认情况下，此sort方法将数组元素转换为字符串，并对其进行字典排序。但这在对数字数组进行排序时，会有问题，解决方法就是手写一个排序方法。

[0,10,4,9,123,54,1].sort((a,b) => a-b)

>>> [0, 1, 4, 9, 10, 54, 123]

7.等待 Promises

1. 在某些情况下，我们需要等待多个Promise结束，这里，我们使用Promise.all。

const PromiseArray = [
   Promise.resolve(100),
   Promise.reject(null),
   Promise.resolve("Data release"),
   Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
 .then(data => console.log('all resolved! here are the resolve values:', data))
 .catch(err => console.log('got rejected! reason:', err))

关于Promise.all需要注意的一件事是，当一个Promise拒绝时，该方法将引发错误。这意味着我们的代码将不会等到所有的Promise都完成。

2. 如果想要等到所有Promise都完成后，无论它们被拒绝还是成功，可以使用Promise.allSettled。此方法在ES2020的最终版本中。

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

8.时间戳转时间

有些时候需要将时间戳转化为时间格式但是你也可以使用moment.js等插件

1. 不使用插件

export function timestampToTime(cjsj) {
           var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
           var Y = date.getFullYear() + '-';
           var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
           var D = (date.getDate() + 1 < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
           return Y + M + D
       }
>>> timestampToTime("Fri Jul 03 2020 13:52:08 GMT+0800 (中国标准时间)") --2020-07-03 

2. 使用moment.js

//获取当前时间的时间格式
let data = moment().format('YYYY-MM-DD')
//console.log(data)-------2020-07-03 

9.将数据整合为eachart 通用的series格式

/** 创建图表实例*/
   renderChart(res) {
      //把之前的数据清空
      this.chart.xAxisData = [];
      this.chart.yAxisData = [];
      this.chart.servernamedata = [];
       res.forEach(element => {
        if (this.chooseWhichData == 1) {
          this.chart.xAxisData.push(element.months);
        } else {
          this.chart.xAxisData.push(element.years);
        }
        element.value.forEach((item, j) => {
          this.chart.servernamedata.push(item);
        });
      });
      var newData = this.chart.servernamedata.reduce((all, next) => {
        var a = all.filter(res => res.name == next.name);
        return a.length > 0
          ? (a[0].data.push(`${next.count}`), all)
          : [
              ...all,
              {
                name: next.name,
                data: [`${next.count}`],
                type: "bar",
                itemStyle: {
                  normal: {
                    barBorderRadius: 6
                  }
                }
              }
            ];
      }, []);
      this.chart.dom = this.$echarts.init(this.$refs.chartaa);
      this.chart.dom.setOption(columchart);
      this.chart.dom.setOption({
        title: {
          text: "抢修人数",
          top: "5%",
          x: "center",
          textStyle: {
            align: "center",
            color: "#303133",
            fontSize: 20
          }
        },
        legend: {
          right: "2%",
          y: "center",
          orient: "vertical",
          icon: "circle",
          data: this.chart.legend
        },
        dataZoom: [{ end: (20 / 19) * 100 }],

        xAxis: {
          data: this.chart.xAxisData
        },
        series: newData
      });
    }