JavaScript基础整理3

最新推荐文章于 2020-03-30 17:26:33 发布
最新推荐文章于 2020-03-30 17:26:33 发布
阅读量113 收藏
点赞数
分类专栏： javascript

map

举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：

map

由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：

'use strict';

function pow(x) {
    return x * x;
}
​​​​​​​var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

 Run

1,4,9,16,25,36,49,64,81

注意：map()传入的参数是pow，即函数对象本身。

你可能会想，不需要map()，写一个循环，也可以计算出结果：

var f = function (x) {
    return x * x;
};

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i<arr.length; i++) {
    result.push(f(arr[i]));
}

的确可以，但是，从上面的循环代码，我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。

所以，map()作为高阶函数，事实上它把运算规则抽象了，因此，我们不但可以计算简单的f(x)=x2，还可以计算任意复杂的函数，比如，把Array的所有数字转为字符串：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

只需要一行代码。

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方说对一个Array求和，就可以用reduce实现：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

练习：利用reduce()求积：

'use strict';

function product(arr) {
return arr.reduce(function (x, y) {
    return x * y;     
});
​​​​​​​}

// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}

 Run

测试通过!

 

要把[1, 3, 5, 7, 9]变换成整数13579，reduce()也能派上用场：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;
}); // 13579

如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：

'use strict';

function string2int(s) {
var arr = s.split('').map(function (x) { return x - 0 });
return arr.reduce(function (x, y) {
    return x * 10 + y;
});
​​​​​​​}

// 测试:
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        console.log('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        console.log('请勿使用Number()!');
    } else {
        console.log('测试通过!');
    }
}
else {
    console.log('测试失败!');
}

 Run

测试通过!

 

练习

请把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入：['adam', 'LISA', 'barT']，输出：['Adam', 'Lisa', 'Bart']。

'use strict';

function normalize(arr) {
return arr.map(function (x) { return x[0].toUpperCase() + x.slice(1).toLowerCase() });
​​​​​​​}

// 测试:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}

 Run

测试通过!

 

小明希望利用map()把字符串变成整数，他写的代码很简洁：

'use strict';

var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);

​​​​​​​console.log(r);

 Run

结果竟然是1, NaN, NaN，小明百思不得其解，请帮他找到原因并修正代码。

提示：参考Array.prototype.map()的文档。

 

由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：

  • parseInt('0', 0); // 0, 按十进制转换

  • parseInt('1', 1); // NaN, 没有一进制

  • parseInt('2', 2); // NaN, 按二进制转换不允许出现2

可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数。

 

filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一个Array中的空字符串删掉，可以这么写：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

可见用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

利用filter，可以巧妙地去除Array的重复元素：

'use strict';

var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
     });

    console.log(r.toString());

filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一个Array中的空字符串删掉，可以这么写：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

可见用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。

回调函数

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

利用filter，可以巧妙地去除Array的重复元素：

'use strict';

var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

console.log(r.toString());

 Run

apple,strawberry,banana,pear,orange

去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

练习

请尝试用filter()筛选出素数：

'use strict';

function get_primes(arr) {
return arr.filter(function (el) {
if (el === 1) {
    return false;
} else {
    for (let i = 2; i < el; i++) {
            if (el % i === 0) {
            return false;
            };
        };
        return true;
}
});
}

// 测试:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    console.log('测试通过!');
} else {
    console.log('测试失败: ' + r.toString());
}

 Run

测试通过!

weixin_37328901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js小题狂练(1)-map+reduce字符串转整型
王甲评的博客
02-15 1925
from 廖雪峰js教程想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：// 测试: if (string2int('0') === 0 &amp;&amp; string...
把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()，就可以写出一个把字符串转换为Number的函数。
weixin_43842567的博客
04-19 465
function string2int(s) { let arr=s.split(''); let numArr=arr.map(function pow(x) {return x * 1}); //将字符串数组转为数字数组,不适用Number和parseInt //let numArr=arr.map(Number); //将字符串数组转为数字数组 let numstr=numArr.reduce(function (x, y) { //将数组转为所有项依次排列的数字 return
两道js题目小练
Arlisol的博客
01-03 289
博主最近在通过廖雪峰的js教程学习，看到了几道有趣的小题目，实现并记录下来。 1.想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。(练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数） 博主的实现为: 'use str...
Q&A之廖雪峰map
hrsen118的博客
11-09 185
如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。 要求：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数。 个人写法： function string2int(s) { var arr = [.....
javascript变量弱类型
sunny05296的博客
09-21 1014
javascript变量弱类型 计算从左到右顺序。 符号“+”，可能是数字相加、也可能是字符串拼接，情况如下： 1. 数字 + 字符串 (1 + "2" = "12")： 字符串拼接 2. 字符串 + 数字 ("1" + 2 = "12")： 字符串拼接 3. 字符串 + 字符串 ("1" + "2" = "12")： 字符串拼接 4. 数字 + 数字 (1 + 2 = 3)：
JavaScript基础整理
05-08
本人学习前端时的总结笔记，包含数据类型、循环结构、分支结构、函数预解析、常用内置对象方法、浏览器兼容问题、offset系列、scroll系列、client系列。 是什么原型、原型的...3、什么是组合继承 4、什么是拷贝继承
JavaScript基础知识整理
02-26
JavaScript是一种广泛应用于前端...总之，JavaScript作为一种强大的前端编程语言，它的基础包括变量、数据类型、对象等概念，这些构成了构建动态Web应用的基础。了解并掌握这些基础知识，对于进行前端开发至关重要。
Javascript基础知识整理.doc
最新发布
11-27
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。它可以在浏览器中执行，实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结，包括脚本...
菜鸟javascript基础整理1
10-28
### JavaScript基础知识概览 #### 一、文档写入与输出 **知识点1：`document.write()`** `document.write()` 方法用于将字符串写入文档流。它通常用于动态生成页面内容或者进行简单的测试输出。 **示例代码：** `...
菜鸟javascript基础资料整理3 正则
10-28
`RegExp`（Regular Expression）对象用于表示正则表达式，它是进行模式匹配的基础。在JavaScript中，可以通过以下两种方式创建`RegExp`对象： 1. **构造函数方式**： ```javascript var patt = new RegExp(...
JavaScript教程 --- 知识点总结七
smile_to_lin的博客
05-16 140
11.高阶函数 JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。一个最简单的高阶函数： function add(x, y, f) { return f(x) + f(y); } 1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map(...
深入PHP内核（一）——弱类型变量原理探究
yphplearning的专栏
09-23 436
PHP是一门简单而强大的语言，提供了很多Web适用的语言特性，其中就包括了变量弱类型，在弱类型机制下，你能够给一个变量赋任意类型的值。  PHP的执行是通过Zend Engine（下面简称ZE），ZE是使用C编写，在底层实现了一套弱类型机制。ZE的内存管理使用写时拷贝、引用计数等优化策略，减少再变量赋值时候的内存拷贝。 下面不光带你探索PHP弱类型的原理，也会在写PHP扩展角度，介绍如
Javascript笔记之map/reduce
大脸猫的博客
03-30 253
内容来自廖雪峰大神官网：https://www.liaoxuefeng.com/wiki/1022910821149312/1024322552460832 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clusters”，你就能大概明白map/reduce的概念。 map 举例说明，比如我们有一个函...
JavaScript函数的一些注意点(2)
永远保持谦卑好学
02-22 350
参考：廖雪峰老师的javascript教程高阶函数 Higher-order functionJavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。一个最简单的高阶函数：function add(x, y, f) { return f(x) + f(y); }当我们调用add(-5, 6
js弱类型转换
juceli的博客
03-26 1486
如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：'use strict'; function string2int(s) { return...
分享一道我认为非常有思考价值JavaScript题目
weixin_30770495的博客
11-21 99
这是一道综合性的题目，如果你能快速清晰的分析整理出来，那我相信你对JavaScript是有一定的理解的了。我会先将题目的图片截取出来，供大家思考，在结尾在给出我的分析过程和答案，作个总结。 好，废话不多说啦，我们马上来看看！ 　　好，希望大家现在好好思考一下，result的值会是多少。下面我会给出答案。 　　我们用node打印一下看看 　　答案是 -2，亲爱的朋友们，你...
3、字符串转换数组
SC的博客
08-18 788
示例代码： package program.string.exercise03; import java.util.StringTokenizer; /** * 3.如何把一段逗号分割的字符串转换成一个数组? */ public class StringTransArray { public static void main(String[] args) { ...
不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数
fistraiser的博客
04-23 409
'use strict'; function string2int(s) { var s_arr = []; for(let i = 0; i < s.length; i++) { s_arr.push(s[i]); } var int_arr = s_arr.map(function(x) { return +x; }); return int_a...
JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数，利用map和reduce操作实现一个string2int()函数
tongyanping1015的博客
01-24 5998
map/reduce练习题：不要使用JavaScript内置的parseInt()和Number()函数，利用map和reduce操作实现一个string2int()函数。 分析：把一个字符串"13579"先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。 代码如下： 'use strict'; function
JavaScript基础知识点总结
JavaScript 学习整理资料 JavaScript 是一种广泛应用于 Web 开发的编程语言，本文档总结了 JavaScript 的一些基本特点、语法、对象、事件处理等知识点，旨在帮助学习者更好地理解和掌握 JavaScript。 **基本语法**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值