使用Javascript使用技巧 整理

    技术2023-07-29  106

    个人使用Javascript使用技巧 整理

    1.方法参数验证2.格式化JSON代码3.从数组中获取惟一的值4.从数组中删除虚值5.合并多个对象6.排序数字数组7.等待 Promises8.时间戳转时间9.将数据整合为eachart 通用的series格式

    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 中只有六个虚值,它们是:

    underfinednullNaN0“”(空字符)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

    在某些情况下,我们需要等待多个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都完成。

    如果想要等到所有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等插件

    不使用插件 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 使用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 }); }
    Processed: 0.012, SQL: 9