19+ JavaScript 常用的简写技巧

  博主说:对于任何基于 JavaScript 的开发人员来说,这绝对是一篇必读的文章,乃提升开发效率之神器也。
  
  正文
  
  js
  
  1. 三元运算符
  
  当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如:
  
  const x = 20;
  
  let answer;
  
  if (x > 10) {
  
  answer = ‘is greater‘;
  
  } else {
  
  可以简写为:
  
  const answer = x > 10 ? ‘is greater‘ : ‘is lesser‘;
  
  1
  
  1
  
  也可以嵌套if语句:
  
  const big = x > 10 ? " greater 10" : x
  
  1
  
  1
  
  2. 简写短路求值
  
  当给一个变量分配另一个值的时候,你可能想确定初值不是null,undefined或空值。这时,你可以写一个多重条件的if语句:
  
  if (variable1 !== null || variable1 !== undefined || variable1 !== ‘‘) {
  
  let variable2 = variable1;
  
  或者可以使用短路求值的方法:
  
  const variable2 = variable1 || ‘new‘;
  
  1
  
  1
  
  3. 简写变量声明
  
  在定义函数的时候,你可能需要先声明多个变量,例如:
  
  let x;
  
  let y;
  
  这时,你可以使用简写的方式节省很多时间和空间,即同时声明多个变量:
  
  let x, y, z=3;
  
  1
  
  1
  
  4. 简写 if 执行条件
  
  这可能微不足道,但值得一提。在你做if条件检查的时候,其赋值操作可以省略,例如:
  
  if (likeJavaScript === true)
  
  1
  
  1
  
  可以简写为:
  
  if (likeJavaScript)
  
  1
  
  1
  
  只有当likeJavaScript是真值的时候,以上两个语句才可以替换。如果判断假值,例如:
  
  let a;
  
  if ( a !== true ) {
  
  // do something...
  
  可以简写为:
  
  let a;
  
  if ( !a ) {
  
  // do something...
  
  5. 简写 JavaScript 循环方法
  
  当你想使用纯 javascript 而不依赖外库(例如jQuery)的时候,这是非常有用的。
  
  for (let i = 0; i < allImgs.length; i++)
  
  1
  
  1
  
  可以简写为:
  
  for (let index in allImgs)
  
  1
  
  1
  
  也可以使用Array.forEach:
  
  function logArrayElements(element, index, array) {
  
  console.log("a[" + index + "] = " + element);
  
  }
  
  [2, 5, 9].forEach(logArrayElements);
  
  // logs:
  
  // a[0] = 2
  
  // a[1] = 5
  
  // a[2] = 9
  
  6. 短路求值
  
  如果想通过判断参数是否为null或者undefined来分配默认值的话,我们不需要写六行代码,而是可以使用一个短路逻辑运算符,只用一行代码来完成相同的操作。例如:
  
  let dbHost;
  
  if (process.env.DB_HOST) {
  
  dbHost = process.env.DB_HOST;
  
  } else {
  
  dbHost = ‘localhost‘;
  
  6
  
  可以简写为:
  
  const dbHost = process.env.DB_HOST |www.wmyl110.com| ‘localhost‘;
  
  1
  
  1
  
  7. 十进制指数
  
  当数字的尾部为很多的零时(如10000000),咱们可以使用指数(1e7)来代替这个数字,例如:
  
  for (let i = 0; i < 10000; i++) {}
  
  1
  
  1
  
  可以简写为:
  
  for (let i = 0; i < 1e7; i++) {}
  
  // 下面都是返回 true
  
  1e0 === 1;
  
  1e1 === 10;
  
  1e2 === 100;
  
  1e3 === 1000;
  
  1e4 === 10000;
  
  1e5 === 100000;
  
  8. 简写对象属性
  
  在 JavaScript 中定义对象很简单,而且ES6提供了一个更简单的分配对象属性的方法。如果属性名与key值相同,例如:
  
  const obj = { x:x, y:y };
  
  1
  
  1
  
  则可以简写为:
  
  const obj = { x, y };
  
  1
  
  1
  
  9. 简写箭头函数
  
  传统函数很容易让人理解和编写,但是当它嵌套在另一个函数中的时候,它就会变得冗长和混乱。例如:
  
  function sayHello(name) {
  
  console.log(‘Hello‘, name);
  
  }
  
  setTimeout(function() {
  
  console.log(‘Loaded‘)
  
  }, 2000);
  
  list.forEach(function(item) {
  
  console.log(item);
  
  这时,可以简写为:
  
  sayHello = name => console.log(‘Hello‘, name);
  
  setTimeout(() => console.log(‘Loaded‘), 2000);
  
  list.forEach(item => console.log(item));
  
  10. 简写隐式返回值
  
  我们经常使用return语句来返回函数最终结果,仅有一行声明语句的箭头函数能隐式返回其值(这时函数必须省略{}以便省略return关键字)。如果想要返回多行语句,则需要使用()包围函数体。例如:
  
  function calcCircumference(diameter) {
  
  return Math.PI * diameter
  
  }
  
  var func = function func() {
  
  return { foo: 1 };
  
  可以简写为:
  
  calcCircumference = diameter => (
  
  Math.PI * diameter;
  
  )
  
  var func = () => ({ foo: 1 });
  
  11. 默认参数值
  
  我们经常可以使用if语句来为函数中的参数定义默认值。但是在ES6中,咱们可以在函数本身声明参数的默认值。例如:
  
  function volume(l, w, h) {
  
  if (w === undefined)
  
  w = 3;
  
  if (h === undefined)
  
  h = 4;
  
  return l * w * h;
  
  可以简写为:
  
  volume = (l, w = 3, h = 4 ) =>www.chuangyed.com (l * w * h);
  
  volume(2) // output: 24
  
  12. 字符串模板
  
  你是不是厌倦了使用+将多个变量转换为字符串?有没有更简单的方法呢?如果你能够使用ES6,那么很幸运,你仅需使用反引号并将变量置于${}之中即可。例如:
  
  const welcome = ‘You have logged in as ‘ + first + ‘ ‘ + last + ‘.‘
  
  const db = ‘http://‘ + host + ‘:‘ + port + ‘/‘ + database;
  
  可以简写为:
  
  const welcome = `You have logged in as ${first} ${last}`;
  
  const db = `http://${host}:${port}/${database}`;
  
  13. 简写赋值方法
  
  如果你正在使用任何流行的 Web 框架,那么你很有可能使用数组或以对象本文的形式将数据在组件和 API 之间进行通信。一旦数据对象到达一个组件,你就需要解压它。例如:
  
  const observable = require(‘mobx/observable‘);
  
  const action = require(‘mobx/action‘);
  
  const runInAction = require(‘mobx/runInAction‘);
  
  const store = this.props.store;
  
  const form = this.props.form;
  
  const loading = this.props.loading;
  
  const errors = this.props.errors;
  
  const entity = this.props.entity;
  
  可以简写为:
  
  import { observable, action, runInAction } from ‘mobx‘;
  
  const { store, form, loading, errors, entity } www.wmyl15.com/
  
  3
  
  也可以分配变量名:
  
  // 最后一个变量名为 contact
  
  const { store, form, loading, errors, entity:contact } = this.props;
  
  14. 简写多行字符串
  
  如果你曾发现自己需要在代码中编写多行字符串,那么这估计就是你编写它们的方法,即在输出的多行字符串间用+来拼接:
  
  const lorem = ‘Lorem ipsum dolor sit amet, consectetur\n\t‘
  
  + ‘adipisicing elit, sed do eiusmod tempor incididunt\n\t‘
  
  + ‘ut labore et dolore magna aliqua. Ut enim ad minim\n\t‘
  
  + ‘veniam, quis nostrud exercitation ullamco laboris\n\t‘
  
  + ‘nisi ut aliquip ex ea commodo consequat. Duis aute\n\t‘
  
  + ‘irure dolor in reprehenderit in voluptate velit esse.\n\t‘
  
  但是如果使用反引号,你就可以达到简写的目的:
  
  const lorem = `Lorem ipsum dolor sit amet, consectetur
  
  adipisicing elit, sed do eiusmod tempor incididunt
  
  ut labore et dolore magna aliqua. Ut enim ad minim
  
  veniam, quis nostrud exercitation ullamco laboris
  
  nisi ut aliquip ex ea commodo consequat. Duis aute
  
  irure dolor in reprehenderit in voluptate velit esse.`
  
  15. 扩展运算符
  
  在ES6中,包括扩展运算符,它可以使你的操作更简单,例如:
  
  // joining arrays
  
  const odd = [1, 3, 5];
  
  const nums = [2 ,4 , 6].www.wmyL119.cn concat(odd);
  
  // cloning arrays
  
  const arr = [1, 2, 3, 4];
  
  const arr2 = arr.slice()
  
  可以简写为:
  
  // joining arrays
  
  const odd = [1, 3, 5];
  
  const nums = [2 ,4 , 6, ...odd];
  
  console.log(nums); // [2, 4, 6, 1, 3, 5]
  
  // cloning arrays
  
  const arr = [1, 2, 3, 4];
  
  const arr2 = [...arr];
  
  不像concat()函数,你可以使用扩展运算符在一个数组中任意处插入另一个数组,例如:
  
  const odd = [1, 3, 5 ];
  
  const nums = [2, ...odd, 4, 6];
  
  也可以使用扩展运算符:
  
  const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
  
  console.log(a) // 1
  
  console.log(b) // 2
  
  console.log(z) // { c: 3, d: 4 }
  
  16. 强制参数
  
  默认情况下,如果不传递值,JavaScript 会将函数参数设置为undefined,而其他一些语言则会报出警告或错误。想要执行参数分配,则可以让if语句抛出undefined的错误,或者使用“强制参数”的方法。例如:
  
  function foo(bar) {
  
  if(bar === undefined) {
  
  throw new Error(‘Missing www.wmyl11.com parameter!‘);
  
  }
  
  return bar;
  
  可以简写为:
  
  mandatory = () => {
  
  throw new Error(‘Missing www.zbcppt.com parameter!‘);
  
  }
  
  foo = (bar = mandatory()) => {
  
  17. Array.find 简写
  
  如果你曾负责编写 JavaScript 中的find函数,那么你很有可能使用了for循环。在此,介绍ES6中一个名为find()的数组函数。
  
  const pets = [
  
  { type: ‘Dog‘, name: ‘Max‘},
  
  { type: ‘Cat‘, name: ‘Karl‘},
  
  { type: ‘Dog‘, name: ‘Tommy‘},
  
  ]
  
  function findDog(name) {
  
  for(let i = 0; i<pets.length; ++i) {
  
  if(pets[i].type === ‘Dog‘ && pets[i].name === name) {
  
  return pets[i];
  
  可以简写为:
  
  pet = pets.find(pet => pet.type ===‘Dog‘ && pet.name === ‘Tommy‘);
  
  console.log(pet); // { type: ‘Dog‘, name: ‘Tommy‘ }
  
  1
  
  2
  
  1
  
  2
  
  18. 简写 Object[key]
  
  你知道Foo.bar也可以写成Foo[‘bar‘]吗?起初,似乎没有什么理由让你这样写。然而,这个符号给了你编写可重用代码的基础。考虑如下简化的验证函数示例:
  
  function validate(values) {
  
  if(!values.first)
  
  return false;
  
  if(!values.last)
  
  return false;
  
  return true;
  
  }
  
  console.log(validate({first:‘Bruce‘,last:‘Wayne‘})); // true
  
  这个函数可以完美的完成它的任务。但是,考虑一个场景,你有很多表单,你需要进行验证,但有不同的字段和规则。那么,构建一个可以在运行时配置的通用验证函数不是很好吗?
  
  // 对象验证规则
  
  const schema = {
  
  first: {
  
  required:true
  
  },
  
  last: {
  
  required:true
  
  }
  
  }
  
  // 通用验证函数
  
  const validate = (schema, values) => {
  
  for(field in schema) {
  
  if(schema[field].required) {
  
  if(!values[field]) {
  
  return false;
  
  }
  
  }
  
  }
  
  return true;
  
  }
  
  console.log(validate(schema, {first:‘Bruce‘})); // false
  
  console.log(validate(schema, {first:‘Bruce‘,last:‘Wayne‘})); // true
  
  现在我们就有了一个可以在所有的form中重用的验证函数,而无需为每个form编写其自定义的验证函数啦!
  
  19. 简写双重按位非运算符
  
  按位运算符绝对是你初学 JavaScript 时了解的但一直没有用武之地的运算符。因为如果不处理二进制,谁会没事操作0和1呢?但是,双重按位非运算符非常实用,例如你可以使用它来替代floor()函数,而且与其他相同的操作相比,按位运算符的操作速度更快。
  
  Math.floor(4.9) === 4 //true
  
  1
  
  1
  
  可以简写为:
  
  ~~4.9 === 4 //true
  
  20. Suggest One of U?
  
  我很喜欢这些简写的方法,也希望能找到更多的简写方法,如果您知道的话,请在此留言,非常感谢!
  
  翻译声明:本文源自「sitepoint」,19+ JavaScript Shorthand Coding Techniques。

时间: 2024-10-13 12:35:32

19+ JavaScript 常用的简写技巧的相关文章

JavaScript 常用的简写技巧

1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } 1 2 3 4 5 6 7 1 2 3 4 5 6 7 可以简写为: const answer = x > 10 ? 'is greater' : 'is lesser'; 1 1 也可以嵌套if语句

19 个 JavaScript 常用的简写技术

1.三元操作符 当想写if...else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { answer = 'is greater';} else { answer = 'is lesser';} 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater 10" : x 2.

收藏 19 个 ES6常用的简写技巧

代码精炼是每个有追求的程序所向往的,本文总结了19个JavaScript的简写技术,其中包括三元操作符.短路求值简写方式.声明变量简写方法等等,还有些自己的理解加上去:希望对你有帮助. 三元操作符 当想写if...else语句时,使用元操作符来代替 const x = 20; let answer; if(x > 10){ answer = 'is greater'; }else{ answer = 'is lesser'; } 简写: const answer = x > 10?'is gr

Javascript常用的简写技术有哪些?

本文和大家分享的主要是javascript 中常用的 19 个简写技术,一起来看看吧吗,希望对大家 学习javascript有所帮助. 1.三元操作符 当想写  if...else  语句时,使用三元操作符来代替. const x = 20; let answer; if (x > 10) { answer = 'is greater'; }  else { answer = 'is lesser'; } 简写: const answer = x > 10 ? 'is greater' : '

JavaScript简写技巧总结

在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证     当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或则未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 非优化代码: if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let

JavaScript 的简写技巧

本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文章将分成初级篇和高级篇两部分,分别进行介绍. 初级篇1.三目运算符下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码. const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } else { answer

19个JavaScript简化编码小技巧

这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好的理解JavaScript. 三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let big; if (x > 10) { big = true; } else { big = false; } Shorthand: co

javascript常用技巧归纳

最近归纳了下,发现还很多的哦1 javascript捕捉方向键  <HTML><HEAD><title>反选</title><script language="javascript"> function check() {   if(event.keyCode =="37")      alert("您选择了左键!");     if(event.keyCode =="38&q

Web开发:需收藏的JavaScript常用技巧

原文来自:https://www.baidu.com/home/news/data/newspage?nid=4242707244478773456&n_type=0&p_from=1&dtype=-1 分享以下js常用的一些技巧,希望对大家有所帮助!还有更好的,大家一起分享下.谢谢! 1. JS防止复制 oncopy="return false;" oncut="return false;" 2. IE 地址栏前换成自己的图标 < l