js温故而知新3——学习廖雪峰的js教程

zhaot 发布于2019-08-21 11:34 / 1158人阅读

摘要：例如，在一个中，删掉偶数，只保留奇数，可以这么写把一个中的空字符串删掉，可以这么写注意以下的版本没有方法可见用这个高阶函数，关键在于正确实现一个筛选函数。回调函数接收的回调函数，其实可以有多个参数。

1.map

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

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

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

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

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"]

只需要一行代码。

2.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

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

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

3.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()这个高阶函数，关键在于正确实现一个“筛选”函数。

3.1回调函数

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;
});

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

4.sort

JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊：

// 看上去正常的结果:
["Google", "Apple", "Microsoft"].sort(); // ["Apple", "Google", "Microsoft"];

// apple排在了最后:
["Google", "apple", "Microsoft"].sort(); // ["Google", "Microsoft", "apple"]

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。

第三个排序结果是什么鬼？简单的数字排序都能错？

这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果"10"排在了"2"的前面，因为字符"1"比字符"2"的ASCII码小。

要按数字大小排序，我们可以这么写：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

如果要倒序排序，我们可以把大的数放前面：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

var arr = ["Google", "apple", "Microsoft"];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ["apple", "Google", "Microsoft"]

最后友情提示，sort()方法会直接对Array进行修改，它返回的结果仍是当前Array：

var a1 = ["B", "A", "C"];
var a2 = a1.sort();
a1; // ["A", "B", "C"]
a2; // ["A", "B", "C"]
a1 === a2; // true, a1和a2是同一对象

云服务器专线服务廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

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

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

js温故而知新6(JSON)——学习廖雪峰的js教程

JSON JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。道格拉斯·克罗克福特（Douglas Crockford）--雅虎的高级架构师--发明了JSON这种超轻量级的数据交换格式. 序列化让我们先把小明这个对象序列化成JSON格式的字符串： var xiaoming = { name: 小明, age: 14, gender...

20171112 2019-08-21 11:36 评论0 收藏0
js温故而知新8(浏览器)——学习廖雪峰的js教程

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。浏览器目前主流的浏览器： IE 6~11：从IE10开始支持ES6标准； Chrome：基于Webkit内核，内置了非常强悍的JavaScript引...

charles_paul 2019-08-20 15:07 评论0 收藏0
js温故而知新4——学习廖雪峰的js教程

摘要：你可能认为调用，和结果应该是，，，但实际结果是全部都是原因就在于返回的函数引用了变量，但它并非立刻执行。返回闭包时牢记的一点就是返回函数不要引用任何循环变量，或者后续会发生变化的变量。真的是看着很晕那闭包另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 评论0 收藏0
js温故而知新10(操作表单)——学习廖雪峰的js教程

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种：文本框，对应的，用于输入文本； ...

simon_chen 2019-08-20 15:08 评论0 收藏0
js温故而知新2——学习廖雪峰的js教程

摘要：让我们拆开写小明正常结果单独调用函数怎么返回了请注意，我们已经进入到了的一个大坑里。如果单独调用函数，比如，此时，该函数的指向全局对象，也就是。函数 1. arguments JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array： function fo...

Caizhenhao 2019-08-21 11:34 评论0 收藏0
js温故而知新——学习廖雪峰的js教程

摘要：在设计时，有两种比较运算符第一种是比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果第二种是比较，它不会自动转换数据类型，如果数据类型不一致，返回，如果一致，再比较。数据类型和变量数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据...

taohonghui 2019-08-21 11:31 评论0 收藏0