js学习过程中的小问题

OBKoro1 发布于2019-08-20 11:24 / 2918人阅读

摘要：一个初学者啦想要记录一下遇到的小问题。返回值存入，接着进行第二次迭代。返回迭代结束后的结果。这是高级程序设计上面介绍的。参数是数组中的第一个元素的值。再补充一点的每一次递归必须要有返回值，否则会出错这一点也有相似性质

一个js初学者啦~想要记录一下遇到的小问题。也希望和大家交流。

1.Array#sort

Array#sort方法在没有指定参数的情况下，是执行的是字符串的比较。如下列代码

[0,-1,-2].sort();//=>[-1,-2,0]

和我们预想的并不一致啊，既不是从小到大也不是从大到小。这是因为javascript的sort方法是将数字转换成字符串再检查。即先检查负号，然后1<2，故排列为-1,-2,0，和我们预期的并不一样。正确的写法如下（即需要传入一个用于比较的函数）：

[-1,-2,0].sort(function(x,y){
    return x-y;//从小到大
    //return y-x; //从大到小
    //或者是
    return x<=y;
})

2.关于reduce的用法

Array.reduce()是可以传入两个参数，用于处理每一项的函数和迭代的初始值（可选）。基础的用法一般是用于求数组的和，这也是javascript高级程序设计书中的例子：

var values = [1,2,3,4,5];
var sum = values.reduce(
    function(prev,cur,index,array){
        return prev+cur;
    });
console.log(sum);//15

其实也可以在reduce函数的第二个参数上加一个迭代初始值0，这里应该是默认是0了。迭代过程如下：

prev=1，cur = 2,然后prev+cur=3，返回结果。

返回值存入prev，接着进行第二次迭代。

接着进行下一次迭代直至迭代完。

返回迭代结束后的结果。

这是javascript高级程序设计上面介绍的。然而我写了一个测试的代码。

function reduceFunc(arr){
  arr.reduce(function(prev,cur,index,array){
    console.log(arguments);
    return prev+cur;
  },0);
}

就是增加了一句打印每次迭代参数，而且initialValue给定了0的值。发现第一次的prev是0，可是第一个值应该是1对不对。javascript高级程序设计（第三版）中98页写道“第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项”。所以是书本有错吗？不尽然。我查到MSDN关于reduce的介绍。是这样解释这个问题的：
第一次执行回调函数时：

如果向 reduce 方法提供 initialValue：
prev 参数为 initialValue。
cur 参数是数组中的第一个元素的值。

如果未提供 initialValue：
prev 参数是数组中的第一个元素的值。
cur 参数是数组中的第二个元素的值。

一般情况下迭代的初始值不需要写，也就是

reduce(function(){
    //
});

这样用即可，但是如果存储每次迭代结果的是一个数组的话就不能这样啦。今天看到一个比较高级一点的用法。就是迭代结果是数组，先贴代码

var str = "name,age,hair
 Merble,35,red
Bob ,64, blonde";

function lameCSV(str){
  return str.split("
").reduce(function(table,row,index,array){
    console.log(index);
    table.push(row.split(",").map(function(c){
      return c.trim();
    })
    );
    return table;
  }, []);
}

代码大致就是实现一个把字符串解析成数组的形式。这里prev写的是table。如果说没有倒数第二行设置为空数组的话，table.push()是会报错的。因为如上文所说，如果不指定迭代初始值的话，第一次迭代prev（也就是table）的取值是1。显然1是没有Push方法的。
再来具体说说这个函数。

1. row每次分割之后返回trim()之后的值，table再将其push进去。
2. 接着返回table数组作为新一轮的迭代初值。进行下一行的迭代。
3. 然后reduce函数内的return语句会把table迭代结束的结果返回出来。函数运行结束。

再补充一点

reduce的每一次递归必须要有返回值，否则会出错

var arr = [1,2,3,4];
function Process(prev,cur){
      if(prev!=3){
            return prev+cur;
      }
}
arr.reduce(Process);//NaN

这一点map也有相似性质

function mapFunc(value){
    if(value!=2){return value;}
}
arr.map(mapFunc);//undefined

GPU云服务器云服务器 java中的小程序招投标过程中的违法行为 mfc中的问题深度学习学习过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80550.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
几个js开发过程中的小技巧

摘要：前言是一门非常灵活的语言，实际的开发过程中我们也可以灵活的使用它而给我们的工作带来便利，这篇文章记录了自己平时学习过程中经常用到的一些小技巧，整理出来作为笔记，也希望对感兴趣的同学有所帮助。前言 javascript是一门非常灵活的语言，实际的开发过程中我们也可以灵活的使用它而给我们的工作带来便利，这篇文章记录了自己平时学习过程中经常用到的一些小技巧，整理出来作为笔记，也希望对感兴趣...

golden_hamster 2019-08-21 10:46 评论0 收藏0
node.js初体验之利用node.js的fs-文件系统，来写一个批量修改文件名的小工具

摘要：导语公司最近业务不忙，利用闲暇时间准备学习一下，看见网上前端大牛张旭鑫的文章一般般的网页重构可以使用做些什么，跟着写了一下批量修改文件名的小工具，主要利用的中相关方法来实现记录一下，以备后用。导语：公司最近业务不忙，利用闲暇时间准备学习一下Node.js，看见网上前端大牛张旭鑫的文章JS一般般的网页重构可以使用Node.js做些什么？，跟着写了一下批量修改文件名的javascript...

Steve_Wang_ 2019-08-23 15:30 评论0 收藏0
我是如何学习小程序的

摘要：行胜于言，理论结合实践才是王道，所以本文我将基于前面的学习方法，分享我是如何学习微信小程序的。第二个目标则需要学习小程序的插件相关接口调用，以及蝉知建站系统这边的微信模块代码。前段时间和大家一起分享了一篇关于学习方法内容《大牛与搬运工的差距——学习方法的力量》。我们将学习过程分成八步，并借鉴了敏捷开发的迭代思想，以达到自我迭代学习的效果。行胜于言，理论结合实践才是王道，所以本文我将基...

XGBCCC 2019-07-01 10:10 评论0 收藏0
教你如何一键反编译获取任何微信小程序源代码（图形化界面，傻瓜式操作）

摘要：很想一窥源码，查看究竟，看看大厂的前端大神们是如何规避了小程序的各种奇葩的坑。头发减减可是问题是呐好看的小程序，又获得不到源代码。所以啊，才能容易的反编译出来，如果是那就很难了一键获取微信小程序源代码 1 Tips： 2 　　一键获取微信小程序源码, 使用了C#加nodejs制作直接解压在D盘根目录下后就可以使用将小程序文件放到 wxapkg目录下3 这个目录下有一些demo...

RyanQ 2019-04-23 11:44 评论0 收藏0