变量无处不在。即便我们写一个小函数或一个小工具,也要声明、赋值和读取变量。增强对变量的重视,可以提高代码的可读性和可维护性。
用 const 或 let 声明自己的 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。
变量位于创建它的作用域中。代码块和函数体为 const 和 let 变量创建作用域。
把变量保持在最小作用域中是提高可读性的一个好习惯。
例如下面的二分查找算法的实现:
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
变量 middle 和 middleItem 是在函数的开头声明的,所以这些变量在 binarySearch() 函数的整个作用域内可用。变量 middle 用来保存二叉搜索的中间索引,而变量 middleItem 保存中间的搜索项。
但是 middle 和 middleItem 变量只用在 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;
}
现在 middle 和 middleItem 只存在于使用变量的作用域内。他们的生命周期极短,所以更容易推断它们的用途。
我总是习惯于在函数开始的时候去声明所有变量,尤其是在写一些比较大的函数时。但是这样做会使我在函数中使用变量的意图变得非常混乱。
所以应该在变量声明时应该尽可能靠的近使用位置。这样你就不必去猜:哦,这里声明了变量,但是…它被用在什么地方呢?
假设有一个函数,在函数有包含很多语句。你可以在函数的开头声明并初始化变量 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;}
现在是不是就清晰多了。
你可能已经知道了很多关于变量命名的知识,所以在这里不会展开说明。不过在众多的命名规则中,我总结出了两个重要的原则:
第一个很简单:使用驼峰命名法,并终如一地保持这种风格。
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;
}
你能很容易知道函数的作用吗?与薪水的计算有关?非常不幸,我们很难看出 ws、 r、 t、 w这些变量名的作用。
但是如果代码是这样:
function calculateTotalSalary(weeksHours, ratePerHour) {
let totalSalary = 0;
for (const weekHours of weeksHours) {
const weeklySalary = weekHours * ratePerHour;
totalSalary += weeklySalary;
}
return totalSalary;
}
我们就很容易知道它们的作用,这就是合理命名的力量。
我一般尽可能避免写注释,更喜欢写出能够自我描述的代码,通过对变量、属性、函数、类等进行合理的命名来表达代码的意图。
如果想使代码本身称为文档,一个好习惯是引入中间变量,这在在处理长表达式时很好用。
比如下面的表达式:
const sum = val1 * val2 + val3 / val4;
可以通过引入两个中间变量来提高长表达式的可读性:
const multiplication = val1 * val2;
const division = val3 / val4;
const sum = multiplication + division;
再回顾一下前面的二叉搜索算法实现:
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;
}
没有中间变量的解释,这个版本稍微不太好理解。
通过使用中间变量用代码解释代码。中间变量可能会增加一些语句,但出于增强代码可读性的目的还是非常值得的的。
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。
原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。
JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的
引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局
解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。
JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象
这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!