百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 学习在 JavaScript 中准确处置变量
分享文章到:

学习在 JavaScript 中准确处置变量

发布时间:01/01 来源:未知 浏览: 关键词:
JavaScript栏目将具体介绍怎样准确处置变量

引荐(免费):javascript(视频)

变量无处不在。即使我们写一个小函数或一个小工具,也要声明、赋值和读取变量。增强对变量的重视,可以提高代码的可读性和可保护性。

1.倡议使用 const,要末使用 let

constlet 声明本人的 JavaScript 变量。两者之间的主要不同是 const 变量在声明时需要初始化,并且一旦初始化就没法再从新赋值。

// const 需要初始化
const pi = 3.14;
// const 不克不及被从新赋值
pi = 4.89; 
// throws "TypeError: Assignment to constant variable"

let 声明不需要对值初始化,可以屡次从新赋值。

// let 要不要初始化随你
let result;
// let 可被从新赋值
result = 14;
result = result * 2;

const 是一次性分配变量。由于你知道 const 变量不会被修改,所以与 let 比拟,对 const 变量的猜测比力容易。

声明变量时优先使用 const,然后是 let

假设你正在 review 一个函数,并看到一个 const result = ... 声明:

function myBigFunction(param1, param2) {
  /* 一写代码... */

  const result = otherFunction(param1);
  /* 一些代码... */
  return something;
}

虽然不知道 myBigFunction() 中做了些什么,但是我们可以得出结论,result 变量是只读的。

在其他状况下,假如必需在代码施行历程中屡次从新对变量赋值,那就用 let

2. 使变量的作用域最小化

变量位于创立它的作用域中。代码块和函数体为 constlet 变量创立作用域。

把变量保持在最小作用域中是提高可读性的一个好习惯。

例如下面的二分查寻算法的实现:

function binarySearch(array, search) {
  let middle;  let middleItem;  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    middle = Math.floor((left + right) / 2);    
    middleItem = array[middle];    
    if (middleItem === search) { 
      return true; 
    }
    if (middleItem < search) { 
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

binarySearch([2, 5, 7, 9], 7); // => true
binarySearch([2, 5, 7, 9], 1); // => false

变量 middlemiddleItem 是在函数的开头声明的,所以这些变量在 binarySearch() 函数的整个作用域内可用。变量 middle 用来留存二叉搜索的中心索引,而变量 middleItem 留存中心的搜索项。

但是 middlemiddleItem 变量只用在 while 轮回中。那为什么不直接在 while 代码块中声明这些变量呢?

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);    
      const middleItem = array[middle];    
      if (middleItem === search) {
        return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

此刻 middlemiddleItem 只存在于使用变量的作用域内。他们的生命周期极短,所以更容易推断它们的用处。

3. 易于使用

我总是习惯于在函数开端的时候去声明所有变量,特别是在写一些比力大的函数时。但是这样做会使我在函数中使用变量的企图变得非常纷乱。

所以应当在变量声明时应当尽大概靠的近使用位置。这样你就不必去猜:哦,这里声明了变量,但是…它被用在什么地方呢?

假设有一个函数,在函数有包括许多语句。你可以在函数的开头声明并初始化变量 result,但是只在 return 语句中使用了 result

function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

  /*
   * 一些代码...
   */

  return something + result;}

问题在于 result 变量在开头声明,却只在结尾用到。我们并没有充分的理由在开端的时后就声明这个变量。

所认为了更好地懂得 result 变量的功效和作用,要始终使变量声明尽大概的接近使用它位置。

假如把代码改成这样:

function myBigFunction(param1, param2) {
  let something;

  /* 
   * 一些代码... 
   */

  const result = otherFunction(param1);  
  return something + result;}

此刻是不是就清楚多了。

4. 合理的命名

你大概已经知道了许多关于变量命名的知识,所以在这里不会展开说明。不外在众多的命名规则中,我总结出了两个重要的原则:

第一个很简便:使用驼峰命名法,并终如一地保持这种风格。

const message = 'Hello';
const isLoading = true;
let count;

这个规则的一个例外是一些特定的值:比方数字或具有非凡含义的字符串。包特定值的变量平常用大写加下划线的情势,与常规变量区分开:

const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';

我认为第二条是:变量名称应当分明无误地表白是用来留存哪些数据的

下面是一些很好的例子:

let message = 'Hello';
let isLoading = true;
let count;

message 名称表示此变量包括某种新闻,很大概是字符串。

isLoading 也一样,是一个布尔值,用来指示可否正在停止加载。

毫无疑问,count 变量表示一个数字类型的变量,其中包括一些计数结果。

必然要选一个能够分明表白其作用的变量名。

看一个例子,假设你看到了下面这样的代码:

function salary(ws, r) {
  let t = 0;
  for (w of ws) {
    t += w * r;
  }
  return t;
}

你能很容易知道函数的作用吗?与工资的运算有关?非常不幸,我们很难看出 wsrtw这些变量名的作用。

但是假如代码是这样:

function calculateTotalSalary(weeksHours, ratePerHour) {
  let totalSalary = 0;
  for (const weekHours of weeksHours) {
    const weeklySalary = weekHours * ratePerHour;
    totalSalary += weeklySalary;
  }
  return totalSalary;
}

我们就很容易知道它们的作用,这就是合理命名的力量。

5.采纳中心变量

我一样尽大概幸免写注释,更喜爱写出能够自我描写的代码,通过对变量、属性、函数、类等停止合理的命名来表达代码的企图。

假如想使代码本身称为文档,一个好习惯是引入中心变量,这在在处置长表达式时很好用。

比方下面的表达式:

const sum = val1 * val2 + val3 / val4;

可以通过引入两个中心变量来提高长表达式的可读性:

const multiplication = val1 * val2;
const pision       = val3 / val4;

const sum = multiplication + pision;

再回忆一下前面的二叉搜索算法实现:

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];    
    if (middleItem === search) {      
      return true; 
    }
    if (middleItem < search) {      
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

里面的 middleItem 就是一个中心变量,用于留存中心项。使用中心变量 middleItem 比直接用 array[middle] 更容易。

与缺少 middleItem 变量的函数版本停止比力:

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    if (array[middle] === search) {      
      return true; 
    }
    if (array[middle] < search) {      
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

没有中心变量的说明,这个版本轻微不太好懂得。

通过使用中心变量用代码说明代码。中心变量大概会增添一些语句,但出于增强代码可读性的目的还是非常值得的的。

总结

  • 变量无处不在。在 JavaScript 中使用变量时,首选 const,其次是 let
  • 尽大概缩小变量的作用域。一样,声明变量时要尽大概接近其使用位置。
  • 合理的命名是非常重要的。要遵照以下规则:变量名称应当分明无误地表白是用来留存哪些数据的。不要惧怕使用更长的变量名:要追求清楚而不是简短。
  • 最后,最好用代码本人来说明代码。在高度复杂的地方,我更喜爱引入中心变量。

以上就是学习在 JavaScript 中准确处置变量的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板