谁能解释给我这个JavaScript代码定义一些变量和循环通过他们
Can anyone explain to me this JavaScript code that define some variables and loop through them?
我遵循这个教程:http://vimeo.com/16961179,教你如何使用express.js制作视图和局部:
var products = [
{
id: 1,
name : 'Mac Book Pro',
description: 'Apple 13 inch Mac Book Pro notebook',
price: 1000
},
{
id: 2,
name : 'iPad',
description: 'Apple 64GB 3G iPad',
price: 899
}
];
module.exports.all = products;
module.exports.find = function(id) {
id = parseInt(id, 10);
var found = null;
productloop: for(product_index in products) {
var product = products[product_index];
if (product.id == id) {
found = product;
break productloop;
}
};
return found;
}
在教程中,作者并没有对这部分做过多的解释。我对循环部分特别困惑。谁能给我解释一下(我是JavaScript初学者)?
我理解顶部的product变量,但它看起来像是一个数组,其中包含其他数组。
函数根据产品id搜索产品。
- 循环依次将
product
设置为产品数组中的每个产品。 - 将产品的id与传递给函数的id进行比较。
- 如果两者相等,则跳出循环(yay
goto
)并返回结果(true)。 - 如果它正常退出循环,这意味着产品从未找到,它将返回null (false)。
这样表达会更容易读吗?
var products = [
{
id: 1,
name : 'Mac Book Pro',
description: 'Apple 13 inch Mac Book Pro notebook',
price: 1000
},
{
id: 2,
name : 'iPad',
description: 'Apple 64GB 3G iPad',
price: 899
}
];
module.exports.all = products;
module.exports.find = function(id) {
var i, product,
nProducts = products.length;
id = parseInt(id, 10);
for(i = 0; i < nProducts; ++i) {
product = products[i];
if (product.id === id) {
return product;
}
}
return null;
}
首先,这是一段糟糕的代码。稍有变化它就会崩溃。让我们从第一行开始。
var products = [
在全局上下文中声明一个变量。尽量避免这种情况。在全球范围内发生的一切都可能崩溃。此外,数据的封装有助于增加代码的模块化,这反过来又允许您重用代码。
让我们看一下find()函数:
module.exports.find = function(id) {
id = parseInt(id, 10);
var found = null;
productloop: for(product_index in products) {
var product = products[product_index];
if (product.id == id) {
found = product;
break productloop;
}
};
return found;
}
在JavaScript中,块不引入作用域。只有函数作用域。在函数中任何地方引入的变量在函数中的任何地方都是可见的。JavaScript的代码块让经验丰富的程序员感到困惑,并导致错误,因为熟悉的语法做出了错误的承诺。
所以这个(var product = products[product_index];
)声明实际上并没有在每次迭代中声明一个新的变量。
。
product.id == id
==和!=操作符在比较之前进行类型强制转换。这很糟糕,因为它导致' 't'r'n' == 0为真。这可以掩盖类型错误。在find()函数的情况下,操作符==不会导致错误,但这是更改代码时可能出现错误的地方。始终使用===操作符
for(product_index in products)
for in语句允许循环遍历对象的所有属性名。不幸的是,它还循环遍历通过原型链继承的所有属性。当对数据属性感兴趣时,这有提供方法函数的不良副作用。如果在没有意识到这种情况的情况下编写程序,那么它可能会失败。
每个for in语句的主体都应该包装在if语句中,if语句可以进行过滤。它可以选择一个特定的类型或值的范围,或者它可以排除函数,或者它可以排除原型中的属性。例如,
for (name in object) {
if (object.hasOwnProperty(name)) {
....
}
}
在你的代码中'products'是一个数组,所以你可以确定它没有额外的属性。但是!product是全局变量,所以实际上它可以是任何东西。
我稍微重写一下这个函数,并解释一下这段代码的作用。
module.exports.find = function(id) {
var found = null,
product;
id = parseInt(id, 10);
for (product_index in products) {
if (products.hasOwnProperty(product_index)){
product = products[product_index];
if (product.id === id) {
found = product;
break;
}
}
};
return found;
}
很简单。该函数以产品ID作为参数(function(id)
),将其转换为数字(id = parseInt(id, 10);
)。然后用一个循环(for(product_index in products)
)逐个遍历一个产品数组,检查传递给函数标识符与当前产品标识符(if (product.id == id)
)是否相等。如果它们相等,则停止迭代(break;
),将当前product的值赋给变量"found" (found = product;
),并将结果返回给函数的调用者(return found;
)。
注:我真的不懂英语,所以请原谅我可能出现的错误。
Products
是一个包含两个对象的数组。有些人可能称它们为"关联数组",但它们只是对象。它们有"属性"(如id
)和"值":
var products = [{
id: 1,
name : 'Mac Book Pro',
description: 'Apple 13 inch Mac Book Pro notebook',
price: 1000
},{
id: 2,
name : 'iPad',
description: 'Apple 64GB 3G iPad',
price: 899
}];
模块。exports是节点程序在执行require('./products.js')
时实际看到的对象:
module.exports = {
// just pass along the whole array
all: products,
// method to find a product by id
find: function(id){
return products.filter(function(product){
return product.id == id
})[0] // we return the first element, at index zero
}
}
我用filter
方法替换了for in
循环,这里应该更清楚。它将循环遍历products数组并对每个产品执行该函数—如果结果为true
,则将该项目添加到结果中,否则将忽略。
使用Express使用这个模块应该是这样的:
var products = require('./products.js')
app.get('/products', function(req, res){
// get the whole products array
products.all
// render page...
})
app.get('/products/:id', function(req, res){
// get product with id ':id' from URL (http://mysite.com/products/25)
var p = products.find(req.params.id)
// render page...
})
- 如何在Javascript函数调用中循环变量
- Jquery-每个循环不更新变量
- 如何将while循环中生成的值存储到变量中,以便以后在JQuery中使用
- 如何在AngularJS-ng重复循环中将长JSON路径缩短为变量
- 在javascript函数的循环中设置全局布尔变量的最佳语法
- 使用javascript使用for循环声明变量
- Coffeescription:循环中的条件变量未正确声明
- 当JSON数据=变量时,需要执行循环
- Javascript'数组'和'循环'如何“;变量[i]”;是一个条件
- for 循环和 if 语句,获取变量并存储它
- JavaScript-用for循环项声明变量
- 将值添加到相同的变量循环jQuery中
- 在JSON变量循环中获取最近5年的日期
- Javascript变量循环
- 使用Google Maps v3中的一个变量(循环、闭包)将事件侦听器附加到一组标记上
- 动态变量循环
- 使用变量&循环创建"onclick"功能
- 以选择器作为变量循环.append()
- 使用webaudioapi和jquery的变量+循环
- 倒计时变量循环和显示数组