JS学习笔记(一)函数 | 青训营笔记

41 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第2天,把之前学习记录的内容整理了一下

map/reduce

map函数传入一个函数,将该函数作用于数组的每一个元素,并返回作用后的结果

reduce函数传入一个函数,对数组的第一项做运算,并把结果和数组下一项当作参数传入函数进行下一次运算(可以实现累加/累积的效果)


一个问题:

image-20220727162448997.png 貌似是parseInt和map方法传参的问题,但是具体还没搞懂。(已解决√,见下方)

map函数中的函数会默认传入三个参数:item元素,index在数组中的序号,array数组本身

parseInt:提取字符串中的数字,但是字符串如果以0x开头会返回十六进制数

第一个参数为字符串,第二个参数表示使用多少进制(0,2~36)

image.png 所以["1", "2", "3"].map(parseInt)实际上是对1,2,3三个元素分别执行parseInt。而map函数默认传递item,index,arry三个参数,所以这三个参数也被传递给parseInt函数,但是由于parseInt函数只接受两个参数,所以第三个参数array自动被忽略,即执行:

parseInt("1", 0); 10禁止展示1,即1

parseInt("2", 1); 1不是有效进制,返回NaN

parseInt("3", 2); 2是二进制,但是二进制不允许出现3,所以返回NaN

注意:二进制转换从左至右开始,遇到非0或非1即返回,如‘00120’返回1,‘0112’返回3

参考文档:

Array.prototype.map() - JavaScript | MDN (mozilla.org)

A JavaScript Optional Argument Hazard (wirfs-brock.com)

filter

filter函数也接受一个函数,并把函数作用于数组的每一项,但是与map不同,它返回true/false,并根据布尔值判断是否留下该元素

不改变原数组,返回新数组

sort

默认逐位根据ASCII码值进行排序

image.png

但,可以传入一个比较函数,按照比较函数的规则进行排序

'use strict';
​
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;    // 对比值小于0,x先y后
    }
    if (x > y) {
        return 1;    // 对比只大于0,y先x后
    }
    return 0;    // 相对不变
});
console.log(arr); // [1, 2, 10, 20]

sort会对传入数组本身进行修改,而非副本

数组的高阶函数

every:可以判断数组中的所有元素是否满足测试条件

find:查找符合条件的第一个元素,找到返回该元素,找不到返回undefined

findIndex:同上,但是返回索引,找不到返回-1

forEach:传入的函数将依次作用于每一个元素(similar to map),但是不会返回新数组,常用来进行遍历

'use strict';
var arr = ['Apple', 'pear', 'orange'];
arr.forEach(console.log); // 依次打印每个元素

image-20220727175558929.png

forEach一共传入三个参数element,index,thisArray,所以每次打印这些参数都会进行打印