谁能解释给我这个JavaScript代码定义一些变量和循环通过他们

Can anyone explain to me this JavaScript code that define some variables and loop through them?

本文关键字:变量 循环 他们 定义 能解释 代码 JavaScript      更新时间:2023-09-26

我遵循这个教程: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...
})