优雅编程 | 7 个你应该掌握的 JavaScript 编码技巧

Posted 2021-08-24 天行无忌

javascript 是一个灵活性很强的语言，有很多和其他语言不一样的特性，本文分享7 个日常开发中可以用到的 JavaScript 编码技巧，享受其优雅编程的快感。更多的编码技巧可以参阅《18个JavaScript代码的小技巧》和《24 个 Javascript 代码优化技巧》。

1.有条件地的扩展对象属性

扩展运算符 ... 是现在项目中最喜欢使用的操作符，让数组、对象操作变得简洁优雅。这里介绍另一种用法，使用其有条件的扩展对象属性。

我们可以使用扩展运算符 ... 来有条件地向 JavaScript 对象快速添加属性。

下面就以欧洲杯的比赛为例，竞猜主场英格兰和客场苏格兰的比赛，主场胜则增加 homeVictory: true 的属性，代码如下：

const conditionAddField = (scoreHome, scoreVisiting) => {
    return {
        home: "England",
        visiting: "Scottish",
        ...(scoreHome > scoreVisiting && { homeVictory: true }),
    };
};
console.log(conditionAddField(2, 1)); // { home: \'England\', visiting: \'Scottish\', homeVictory: true }
console.log(conditionAddField(1, 1)); // { home: \'England\', visiting: \'Scottish\' }

上面代码就实现了有条件的扩展对象属性，同样对于数组也适用。

2.检查对象属性是否存在

in 操作符，估计大部分人在项目中很少用，其实可以用来检查对象是否属性是否存在，如下：

const result = {
    home: "England",
    visiting: "Scottish",
    scoreResult: "2:1",
};
console.log("scoreResult" in result); // true
console.log("isFinish" in result); // false

3.用变量解构属性

数组解构或者对象解构大部份人都知道，如需要将对象的属性值赋值给变量的时候，可以使用解构的方式，如下：

const result = {
    home: "England",
    visiting: "Scottish",
};
const { home: homeTeam } = result;
console.log(homeTeam); // England

现在来看下另外的解构方式，如下：

const result = {
    home: "England",
    visiting: "Scottish",
};
const keyName = "visiting";
const { [keyName]: homeTeam } = result;
console.log(homeTeam); // Scottish

4.检查数组中的假值

对于数组操作，有必要熟悉这三个方法：filter、some 和 every，下面来看看 Boolean 的妙用，如下：

const arrayTest = [
    null,
    false,
    "UEFA European Football Championship",
    undefined,
    0,
];
// 过滤非真值
const arrayFiltered = arrayTest.filter(Boolean);
console.log(arrayFiltered); // [ \'UEFA European Football Championship\' ]
// 检查至少一个值是否为真
const orResult = arrayTest.some(Boolean);
console.log(orResult); // true
// 检查所有的值都为真
const andResult = arrayTest.every(Boolean);
console.log(andResult); // false

在一些动态验证或者配置表单的场景中，验证输入项的正确性，可以使用 some 来实现 or 的条件，every 实现 and 的条件，例如下面的代码：

const ageValidationOptions = {
    title: "年龄",
    condition: "and",
    validations: [
        {
            description: "必须为数字",
            fn: (val) => !isNaN(val),
        },
        {
            description: "必须 0-120",
            fn: (val) => val < 120 && val > 0,
        },
    ],
};
const orValidationOptions = {
    title: "测试",
    condition: "or",
    validations: [
        {
            description: "数字",
            fn: (val) => !isNaN(val),
        },
        {
            description: "大于0",
            fn: (val) => parseInt(val, 10) > 0,
        },
    ],
};
const validationCondition = {
    and: (validations, inputVal) =>
        validations.every((item) => item.fn(inputVal)),
    or: (validations, inputVal) =>
        validations.some((item) => item.fn(inputVal)),
};
const validationHelper = ({ condition, validations }, inputVal) => {
    return validationCondition[condition](validations, inputVal);
};
console.log(validationHelper(ageValidationOptions, "140")); // false
console.log(validationHelper(ageValidationOptions, 20)); // true

console.log(validationHelper(orValidationOptions, 20)); // true
console.log(validationHelper(orValidationOptions, "a")); // false

5.使用变量增加或者获取对象属性

通常需要通过变量动态获取对象属性名称或者增加新的属性是使用 [attrName] ，如：

const result = {
    home: "England",
    visiting: "Scottish",
};
const addField = (key, value, object) => {
    object[key] = value;
    return object;
};
console.log(addField("isFinish", true, result)); // { home: \'England\', visiting: \'Scottish\', isFinish: true }

// 动态获取
const fieldName = "home";
console.log(result[fieldName]); // England

6.扁平化数组

原型 Array 上有一个方法 flat 可以从数组的数组中创建一个数组：

语法

var newArray = arr.flat([depth])

参数

depth 可选，指定要提取嵌套数组的结构深度，默认值为 1。

返回值

一个包含将数组与子数组中所有元素的新数组。

const arrayTest = [{ id: 101 }, [{ id: 102 }], [{ id: 103 }]];
const arrayFlatted = arrayTest.flat();
console.log(arrayFlatted); // [ { id: 101 }, { id: 102 }, { id: 103 } ]

还可以定义一个深度级别，指定嵌套数组结构应展平的深度。例如：

const arrayTest = [0, 1, 2, [[[3, 4, [5]]]]];
console.log(arrayTest.flat(2)); // [ 0, 1, 2, [ 3, 4, [ 5 ] ] ]
console.log(arrayTest.flat(3)); // [ 0, 1, 2, 3, 4, [ 5 ] ]

7.console.log 的使用

使用控制台日志记录可以输出信息，特别在调试的时候可以起到跟踪变量的值，先分享 console.log() 的一个技巧，例如要打印一组数据，如下：

const person = (name, color, countries) => {
    return {
        name,
        color,
        countries,
    };
};
const person1 = person("克里斯蒂亚诺·罗纳尔多", "black", "葡萄牙");
const person2 = person("罗梅卢·卢卡库", "white", "比利时");
const person3 = person("帕特里克·希克", "blue", "捷克");
console.log({ person1, person2, person3 });

输出结果如下：

{
  person1: { name: \'克里斯蒂亚诺·罗纳尔多\', color: \'black\', countries: \'葡萄牙\' },
  person2: { name: \'罗梅卢·卢卡库\', color: \'white\', countries: \'比利时\' },
  person3: { name: \'帕特里克·希克\', color: \'blue\', countries: \'捷克\' }
}

这样可以清晰的知道输出的变量名称的值，接下里继续介绍日志输出函数 console.table()，传入一个数组，它会将数组打印为表格，方便对比数据，如下：

const person = (name, color, countries) => {
    return {
        name,
        color,
        countries,
    };
};
const person1 = person("克里斯蒂亚诺·罗纳尔多", "black", "葡萄牙");
const person2 = person("罗梅卢·卢卡库", "white", "比利时");
const person3 = person("帕特里克·希克", "blue", "捷克");
console.table([person1, person2, person3]);

输入结果如下（第一个是在终端里面打印的效果，第二个是浏览器打印效果）：

总结

希望本文介绍的这些技巧能够提高编码能力，也欢迎在评论中分享更多的 JavaScript 技巧！