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

莫道桑榆晚，为霞尚满天。这篇文章主要讲述优雅编程 | 7 个你应该掌握的 JavaScript 编码技巧相关的知识，希望能为你提供帮助。

文章图片

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.检查对象属性是否存在
【优雅编程 | 7 个你应该掌握的 JavaScript 编码技巧】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)); // trueconsole.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]);

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