JS 6个实用小知识（第二更）代码量越少，会使人更加易读～让我们一起努力！等待多个异步函数-格式化显示JSON代码-类

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前言

代码量越少，会使人更加易读～让我们一起努力！

正文

等待多个异步函数

日常开发过程中，你有没有遇到需要调用多个接口去获取选择项，正常我们的写法是：

async fun1() {
    const res = await http(url1, query2)
}

async fun2() {
    const res = await http(url2, query2)
}

fun1()
fun2()

其实我们可以用promise.all去await多个async函数，例如：

async fun() {
    await promise.all([fun1, fun2])
}

格式化显示JSON代码

是不是有很多同学只知道JSON.stringify可以将Javascript值转为JSON字符串，但是不知道其还有其他参数呢？如果是的话，看看下面的介绍，反之可以跳过了～

JSON.stringify的语法为：

JSON.stringify(value[, replacer[, space]])

// 参数介绍
// @param value 需要转换的内容
// @param replacer 用于转换结果的函数或数组
    // 函数：JSON.stringify 时将调用该函数，使用函数的返回值而不是原始值，如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""
    // 数组：仅转换该数组中具有键值的成员，成员的转换顺序与键在数组中的顺序一样
// @param space (重点) 文本添加缩进、空格和换行符。
    // space 是一个数字，则返回值文本在每个级别缩进指定数目的空格
    // space 大于 10，则文本缩进 10 个空格
    // space 也可以使用非数字，如：\t

因此，JSON.stringify不止可以将一个对象字符化，还可以格式化输出哦～

介绍完了基础知识，那么我们来看看案例：

const people = {
    girl: {
        age: 18,
        weight: 100
    },
    boy: {
        age: 18,
        weight: 150
    }
}
console.log(JSON.stringify(people, null, 4))
// {
//     "girl": {
//         "age": 18,
//         "weight": 100
//     },
//     "boy": {
//         "age": 18,
//         "weight": 150
//     }
// }

字符串类型的数字快速转number类型

你是否还在苦恼，浏览器地址栏刷新后id就变成了string类型，那么你可以这样试试：

const a = '1'

console.log(typeof +a) // number

快速转换字符串类型

const a = 1 + ''

console.log(typeof a) // string

浏览器当编辑器使用

不知道大家还记得contenteditable属性么？设置该属性后，元素的内容将成为可编辑状态：

因此我们可以这样实现：（将以下代码放到console中执行，你将会神奇的发现整个页面都变的可以编辑）

document.body.contentEditable='true'

不需要第三者完成变量的交换

在之前我们面试的时候经常被问到冒泡排序，正常的逻辑代码为：

function numbersSort(arr = []) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // 相邻元素两两对比，元素交换的时候用第三者变量来暂存数据，最后用这个变量去替换原数据
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

第三者的插足往往都不是大家所希望的，那么我们可不可以避免呢，当然可以，请看下方实现：

function numbersSort(arr = []) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // 一句话就可以实现数据的交换，还不需要第三者，是不是很方便，大家快去试试吧
                arr[j]=[arr[j + 1], arr[j + 1]= arr[j]][0]
            }
        }
    }
    return arr;
}

结语：

大家都学会了么？让我们一起期待下一次的更新～

JS 6个实用小知识（第二更）

前言

正文