8 种技巧让你编写更简洁的 JavaScript 代码

简介: 8 种技巧让你编写更简洁的 JavaScript 代码

image.png


大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲,是隔壁寒草🌿的好兄弟。 欢迎小伙伴们加我微信:sudongyuer拉你进群,一起讨论,期待与大家共同成长🥂。


在本文中,我们将介绍  8 种技巧让你编写更简洁的 JavaScript代码

现在让我们讨论每种技术,一次一个。


纯函数



纯函数是在给定相同输入的情况下始终返回相同输出的函数。除了提供的输入之外,它不依赖于任何外部变量,也不影响/更改任何外部变量。 拥有纯函数使测试变得更加容易,因为它们使测试变得超级容易,因为您可以随时存根/模拟输入并测试您的预期值。让我们看看下面的例子


let name = "Yu DongSu";
const splitName = () => {
  name = name.split(' ');
}
name = splitName();
console.log(name); // outputs [ 'Yu', 'DongSu' ]
复制代码


虽然上面的代码看起来很合适。不是开玩笑。这是因为该splitName函数依赖于一个名为的外部变量name,如果其他人开始更改此变量,该函数将splitName开始提供不同的输出。使它成为一个非纯函数,因为我们仍然会调用splitName()它,但输出会有所不同。


让我们把它改成一个纯函数,看看它是什么样子的:


let name = "Yu DongSu";
const splitName = (nameString) => {
  return nameString.split(' ');
}
name = splitName(name);
console.log(name); // outputs [ 'Yu', 'DongSu' ]
复制代码


通过上述更改,splitName现在是一个纯函数,因为:


  • 它仅依赖于输入(nameString输入)。
  • 它不会更改/重新分配任何外部变量


更少或命名参数


使用函数时,我们经常使用位置参数,这些参数必须在函数声明中声明时提供。例如,在 call中,如果不提供and arithmaticOp(num1, num2, operator),我们就无法提供operator参数。虽然这适用于这个例子,但对于许多功能来说,这会成为一个问题。 考虑以下示例:


const createButton = (title, color, disabled, padding, margin, border, shadow)  => {
  console.log(title, color, disabled, padding, margin, border, shadow)
}
复制代码


查看上面的代码,您已经可以看到,如果我们想在调用createButton+ 时将任何参数设为可选(使用默认值),那将是一场灾难,可能看起来像这样:


createButton('Sudongyu er', undefined /* optional color */, true ,'2px....', undefined  /* optional margin*/);
复制代码


你可以看到上面的语句看起来一点也不干净。此外,从函数调用语句中很难看出哪个参数对应于函数的哪个参数。所以这是我们可以遵循的做法:


  • 如果我们有 2 个或更少的参数,我们可以将它们保留为位置参数
  • 否则,我们提供一个带有键值对的对象


让我们在上面的例子中使用这个技术,看看它是什么样子的:


const createButton = ({title, color, disabled, padding, margin, border, shadow})  => {
  console.log(title, color, disabled, padding, margin, border, shadow)
}
createButton({
  title: 'Sudongyu er',
  disabled: true,
  shadow: '2px....'
});
复制代码


请注意,调用createButton函数的语句现在更简洁了。我们可以很容易地看到键值对中的哪个值对应于函数的参数。耶耶!🎉


对象/数组解构



考虑以下 javascript 示例,其中我们从对象中获取一些属性并分配给它们的各个变量:


const user = {
  name: 'Sudongyu',
  email: 'hi@xxx',
  designation: 'Software Architect',
  loves: 'The Code'
}
const name = user.name;
const email = user.email;
const loves = user.loves;
复制代码


在上面的例子中,多次使用这个user.*符号是非常令人恶心的。这就是对象解构的用武之地。我们可以使用对象解构将上面的示例更改如下:


const user = {
  name: 'Sudongyu',
  email: 'hi@xxx',
  designation: 'Software Architect',
  loves: 'The Code'
}
const {name, email, loves} = user;
复制代码


看!好多了。对?让我们考虑另一个例子:


const getDetails = () => {
  return ['xxx', 'sudongyu', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}
const details = getDetails();
const uName = details[0];
const uEmail = details[1];
const uAddress = `${details[2]}, ${details[3]}, ${details[4]}, ${details[5]}`;
const uFirstName = uName.split(' ')[0];
const uLastName = uName.split(' ')[1];
复制代码


啊。我什至讨厌编写上述示例的代码🤣。虽然不得不这样做。您可以看到代码看起来非常怪异且难以阅读。我们可以使用 Array Destructuring 将其写得更简洁,如下所示:


const getDetails = () => {
  return ['xxx', 'sudongyu', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}
const [uName, uEmail, ...uAddressArr] = getDetails();
const uAddress = uAddressArr.join(', ');
const [uFirstName, uLastName] = uName.split('');
console.log({
  uFirstName,
  uLastName,
  uEmail,
  uAddress
});
复制代码

你可以看到这有多干净🤩


避免硬编码值


/**
 * 阿巴阿巴
 * 
 * 
 * 
 * 
 * 
 */
setInterval(() => {
  // do something
}, 86400000);
// WHAT IS THIS 86400000 ??? 🤔
复制代码


看代码的人可能不知道这个数字代表什么,它是如何计算的,以及它背后的业务逻辑是什么。我们可以创建一个常量,而不是硬编码这个值,如下所示:


const DAY_IN_MILLISECONDS = 3600 * 24 * 1000; // 86400000
setInterval(() => {
  // do something
}, DAY_IN_MILLISECONDS);
// now this makes sense
复制代码


让我们考虑另一个例子:


const createUser = (name, designation, type) => {
  console.log({name, designation, type});
}
createUser('SudongYu', 'Software Architect', '1');
// WHAT IS this '1'? 🤔
复制代码

查看调用createUser方法。阅读代码的人很难理解这'1'代表什么。即type这是什么用户。因此,我们可以创建一个我们拥有的用户类型的对象映射,而不是在这里对值进行硬编码'1',如下所示:


const USER_TYPES = {
  REGULAR_EMPLOYEE: '1'
}
const createUser = (name, designation, type) => {
  console.log({name, designation, type});
}
createUser('Sudongyu', 'Software Architect', USER_TYPES.REGULAR_EMPLOYEE);
// smoooooooth 😎
复制代码

避免使用简写变量名


速记变量在需要它们的地方才有意义。就像如果你有像xand这样的位置坐标y,那是可行的。p但是,如果我们在没有上下文的情况下创建像,t之类的变量c,那么真的很难阅读、跟踪和维护这样的代码。例如看这个例子:


const t = 25;
let users = ['Sudongyuer', 'xxx'];
users = users.map((user) => {
  /**
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   */
  return {
    ...user,
    tax: user.salary * t / 100 // WHAT IS `t` again? 🤔
  }
})
复制代码


上面的例子表明,现在开发人员/读者必须一直向上滚动或转到定义来尝试理解这个变量是什么。因此是不干净的代码😠。这也称为对变量进行思维导图,其中只有作者知道它们的含义。因此,我们可以给它一个适当的名称,而不是简写变量名称,如下所示:


const taxFactor = 25;
let users = ['Sudongyuer', 'xxx'];
users = users.map((user) => {
  // some code
  return {
    ...user,
    tax: user.salary * taxFactor / 100
  }
})
复制代码

现在这更有意义了。


使用 Object.assign() 设置默认对象值


在某些情况下,您可能希望从另一个对象创建一个新对象,如果源对象没有它们,则提供一些默认值。考虑以下示例:


const createButton = ({title, color, disabled, padding})  => {
  const button = {};
  button.color = color || '#333';
  button.disabled = disabled || false;
  button.title = title || '';
  button.padding = padding || 0;
  return button;
}
const buttonConfig = {
  title: 'Click me!',
  disabled: true
}
const newButton = createButton(buttonConfig);
console.log('newButton', newButton)
复制代码


Object.assign()如果源对象提供了默认属性,我们可以使用如下方式覆盖默认属性,而不是做所有这些:


const createButton = (config)  => {
  return {
    ...{
      color: '#dcdcdc',
      disabled: false,
      title: '',
      padding: 0
    },
    ...config 
  };
}
const buttonConfig = {
  title: 'Click me!',
  disabled: true
}
const newButton = createButton(buttonConfig);
console.log('newButton', newButton)
复制代码

使用方法链(尤其是类)


如果我们知道类/对象的用户将一起使用多个函数,则方法链接是一种很有用的技术。您可能已经在诸如 moment.js 之类的库中看到了这一点。让我们看一个例子:


class Player {
  constructor (name, score, position) {
    this.position = position;
    this.score = score;
    this.name = name;
  }
  setName(name) {
    this.name = name;
  }
  setPosition(position) {
    this.position = position;
  }
  setScore(score) {
    this.score = score;
  }
}
const player = new Player();
player.setScore(0);
player.setName('Sudongyuer');
player..setPosition([2, 0]);
console.log(player)
复制代码


在上面的代码中,您可以看到我们需要为播放器一起调用一堆函数。如果您的对象/类是这种情况,请使用方法链接。您需要做的就是从要链接的函数中返回对象的实例。上面的例子可以修改如下来实现:


class Player {
  constructor (name, score, position) {
    this.position = position;
    this.score = score;
    this.name = name;
  }
  setName(name) {
    this.name = name;
    return this; // <-- THIS
  }
  setPosition(position) {
    this.position = position;
    return this; // <-- THIS
  }
  setScore(score) {
    this.score = score;
    return this; // <-- THIS
  }
}
const player = new Player();
player.setScore(0).setName('Sudongyuer').setPosition([2, 0]);
// SUPER COOL 😎
console.log(player)
复制代码


在回调上使用 Promise


承诺让我们的生活更轻松。几年前我们有一个叫做回调地狱的东西,这使得代码很难阅读。它看起来像这样:


image.png

image.png


即使我正在使用具有回调的库,我也会尝试在那里添加一个包装器来保证这一点(是的,现在这是一个术语)。让我们考虑以下示例:


const getSocials = (callback) => {
  setTimeout(() => {
      callback({socials: {youtube: 'xxx', twitter: 'xxx'}});
    }, 1500);
}
const getBooks = (callback) => {
  setTimeout(() => {
    callback({books: ['React Cookbook']});
  }, 1500);
}
const getDesignation = (callback) => {
  setTimeout(() => {
    callback({designation: 'Software Architect'});
  }, 1500);
}
const getUser = (callback) => {
  setTimeout(() => {
    callback({user: 'Sudongyuer'});
  }, 1500);
}
 getUser(({user}) => {
    console.log('user retrieved', user)
    getDesignation(({designation}) => {
      console.log('designation retrieved', designation)
      getBooks(({books}) => {
        console.log('books retrieved', books)
        getSocials(({socials}) => {
          console.log('socials retrieved', socials)
        })
      })
    })
  })
复制代码


上述代码中的所有函数都是异步的,它们会在 1.5 秒后发回数据。现在,如果涉及 15 个不同的功能,想象一下它会是什么样子。可能就像我在上面分享的图像😅。为了更好的可读性,我们可以promisify我们的函数并使用promises,而不是这个回调地狱:


const getSocials = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({socials: {youtube: 'xxx', twitter: 'xxx'}});
    }, 1500);
  })
}
const getBooks = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({books: ['React Cookbook']});
    }, 1500);
  })
}
const getDesignation = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({designation: 'Software Architect'});
    }, 1500);
  })
}
const getUser = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({user: 'Sudongyuer'});
    }, 1500);
  })
}
  getUser()
    .then(({user}) => {
      console.log('user retrieved', user);
      return getDesignation();
    })
    .then(({designation}) => {
      console.log('designation retrieved', designation)
      return getBooks();
    })
    .then(({books}) => {
      console.log('books retrieved', books);
      return getSocials();
    })
    .then(({socials}) => {
      console.log('socials retrieved', socials)
    })
复制代码


您可以看到代码现在已经非常可读,因为所有语句都缩进并显示了在每个步骤.then()中检索到的数据。.then()我们可以很容易地看到使用这种语法的步骤,因为每次.then()调用都会返回下一个函数调用及其承诺。


现在我们可以把它提升一个档次,让我们的代码更具可读性。如何?通过使用async await. 我们将修改我们的代码如下来实现:


const getSocials = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({socials: {youtube: 'xxx', twitter: 'xxx'}});
    }, 1500);
  })
}
const getBooks = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({books: ['React Cookbook']});
    }, 1500);
  })
}
const getDesignation = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({designation: 'Software Architect'});
    }, 1500);
  })
}
const getUser = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({user: 'Sudongyuer'});
    }, 1500);
  })
}
const performTasks = async () => {
  const {user} = await getUser();
  console.log('user retrieved', user);
  const {designation} = await getDesignation();
  console.log('designation retrieved', designation);
  const {books} = await getBooks();
  console.log('books retrieved', books);
  const {socials} = await getSocials();
  console.log('socials retrieved', socials);
}
复制代码


请注意,我们将代码包装在performTasks()函数中,这是一个async函数,您可以看到async关键字的用法。在内部,我们使用await关键字进行每个函数调用,这基本上会在执行下一行代码之前等待函数的承诺得到解决。使用这种语法,我们的代码看起来好像都是同步的,但实际上是异步的。而且我们的代码更干净🙂


结论



那么我的 8 种技巧让你编写更简洁的 JavaScript 代码的这篇文章就结束了,文章的目的其实很简单,就是对日常工作的总结和输出,输出一些觉得对大家有用的东西,菜不菜不重要,但是热爱🔥,希望大家能够喜欢我的文章,我真的很用心在写,也希望通过文章认识更多志同道合的朋友,如果你也喜欢折腾,欢迎加我好友,一起沙雕,一起进步

相关文章
|
3天前
|
资源调度 前端开发 JavaScript
Babel:JavaScript代码的编译利器
Babel:JavaScript代码的编译利器
|
3天前
|
JavaScript 前端开发 安全
抽象语法树(AST):理解JavaScript代码的抽象语法树
抽象语法树(AST):理解JavaScript代码的抽象语法树
|
4天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
4天前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
32 0
|
4天前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
14 0
|
3天前
|
存储 JavaScript 前端开发
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
|
4天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
13 3
|
4天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
4天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
4天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0