写点什么

优雅编程:JavaScript 代码优化常见的 3 个小技巧

用户头像
devpoint
关注
发布于: 2021 年 04 月 05 日
优雅编程:JavaScript代码优化常见的3个小技巧

在代码 Review 过程中,享受让代码变得优雅是一件很有成就感的事情,本文总结了项目开发中常见的 3 个代码优化的技巧,这些技巧在 VUE 项目中有比较多的使用场景,不妨尝试去编写出高质量的代码。

神奇的扩展运算符

扩展运算符是我比较喜欢的 JavaScript 操作符,常用于数组、对象的操作。常用的场景有以下四个:


需要注意的点:扩展运算符的拷贝属于一层拷贝。

1.复制数组

const weeks = ["Monday", "Tuesday"];const newWeeks = [...weeks];console.log(newWeeks);  // [ 'Monday', 'Tuesday' ]
复制代码

2.扩展数组

const weeks = ["Tuesday", "Wednesday"];const newWeeks = ["Monday", ...weeks, "Thursday", "Friday"];console.log(newWeeks);  // [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
复制代码

3.扩展对象

const myinfo = {    name: "DevPoint",    city: "Shenzhen",};const myDetail = {    ...myinfo,    province: "Guangdong",};console.log(myDetail); // { name: 'DevPoint', city: 'Shenzhen', province: 'Guangdong' }
复制代码

4. 数组/对象合并

const weeks1 = ["Monday", "Thursday", "Friday"];const weeks2 = ["Tuesday", "Wednesday"];const newWeeks = [...weeks1, ...weeks2];console.log(newWeeks); // [ 'Monday', 'Thursday', 'Friday', 'Tuesday', 'Wednesday' ]
const myinfo = { name: "DevPoint",};const address = { province: "Guangdong", city: "Shenzhen",};const myDetail = { ...myinfo, ...address,};console.log(myDetail); // { name: 'DevPoint', province: 'Guangdong', city: 'Shenzhen' }
复制代码

null 检查的最佳方法

null 值检查是前端项目中比较常见的操作,在过去的语法中我们是这样进行检查:


if (tmp !== null && tmp !== undefined && tmp !=="") {    //}
复制代码


现在一个简单的if就可以实现:


if (tmp) {    //}
复制代码


如果 tmp 为空值则条件为falseif的条件为true的情况包括:nullundefinedNaN、空字符串、0false


之前在《24个Javascript代码优化技巧》介绍过空值的检查方法,最新 Javascript 语法新增了空值合并运算符??确实有一个很好的快捷方式来实现这个功能。在 《Javascript代码优化的15个小知识》文中也介绍了:如何在 JavaScript 中检查空字符串/undefined/null。

使用 .map()、.reduce()、.filter()

是的,我们经常讨论函数式和响应式编程的强大技术!几年前第一次接触函数式编程的时候,为我打开了一扇全新的门。现在,每当看到这些简单的说明,会被它优雅的代码风格所震撼。《javascript数组之includes、reduce》介绍了 reduce 的详细用法。


函数式编程的基本原理之一是使用列表和操作,本文将用三个最著名的操作:mapreducefilter来重构代码的例子。


在 Covid-19 之前,一个日本家庭来巴黎度假。他们在超市买了些食物和日用品。但是所有的物品都是欧元标价,他们想知道每一件物品的价格以及换算成日元的价格。


以汇率 1 欧元等于 126 日元来计算。


所以,按照传统的方式,将用一个经典的循环来做:


const RATE = 126;const items = [    { name: "pineapple", price: 2, type: "food" },    { name: "beef", price: 20, type: "food" },    { name: "advocate", price: 1, type: "food" },    { name: "shampoo", price: 5, type: "other" },];
let sum = 0;const itemsInYen = [];const length = items.length;for (let i = 0; i < length; i++) { const item = items[i]; item.price *= RATE; itemsInYen.push(item); if (item.type === "food") { sum += item.price; }}console.log(itemsInYen);console.log(sum); // 2898
复制代码


输出的结果如下:


[  { name: 'pineapple', price: 252, type: 'food' },  { name: 'beef', price: 2520, type: 'food' },  { name: 'advocate', price: 126, type: 'food' },  { name: 'shampoo', price: 630, type: 'other' }]2898
复制代码


现在我们利用.map()、.reduce()、.filter()对上述代码进行重构:


const RATE = 126;const items = [    { name: "pineapple", price: 2, type: "food" },    { name: "beef", price: 20, type: "food" },    { name: "advocate", price: 1, type: "food" },    { name: "shampoo", price: 5, type: "other" },];const itemsInYen = items.map((item) => {    const itemsInYen = { ...item };    itemsInYen.price *= RATE;    return itemsInYen;});console.log(itemsInYen);
const sum = itemsInYen .filter((item) => item.type === "food") .reduce((total, item) => (total += item.price), 0);console.log(sum);
复制代码


上述输出结果一致。map 将所有价格从欧元转换为日元,filter 过滤非食品的消费项,reduce 将每个食品项目的价格添加到总金额中!

发布于: 2021 年 04 月 05 日阅读数: 16
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
优雅编程:JavaScript代码优化常见的3个小技巧