主要源于廖雪峰老师的JavaScript教程
1. 高阶函数
参数传入函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
function add(x, y, f) {
return f(x) + f(y);
}
var x = add(-5, 6, Math.abs); //11
console.log(x);
- map/reduce
由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，得到一个新的Array:
'use strict';
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5];
var results = arr.map(pow);
console.log(results); //[1, 4, 9, 16, 25];
app.map(String); //['1', '2', '3', '4', '5']
reduce()用法: Array的reduce()把一个函数作用在这个Array的每个元素上，reduce()必须接收两个参数，把两个参数的处理结果继续和Array的下一个元素做累计计算，其效果就是：
[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;
});
- filter
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数，和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值true或false决定保留还是丢弃该元素。
#删掉偶数，保留奇数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r;//[1, 3, 5, 7, 9]
#把Array中的空字符串去掉
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim();
});
r; //['A', 'B', 'C']
filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element);
console.log(index);
console.log(self);
return true;
});
- sort 排序算法
sort()方法会直接对Array进行修改，它返回的结果仍然是当前Array.
如果Array中存储的都是Number，排序结果：
[10, 20, 1, 2].sort(); // [1, 10, 2, 20],这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。
如果不知道sort()方法的默认排序规则，直接对数字排序，绝对会大吃一惊！
但是，sort()也是一个高级函数，可以接收一个比较函数来实现自定义的排序。
#按照数组大小排序
'use strict';
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
console.log(arr); //[1, 2, 10, 20]
#字符串排序，忽略大小写
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;
});
2. 闭包
- 函数做为返回值
高阶函数除了可以接收函数做为参数外，还可以把函数做为结果值返回
#一般情况下的求和
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); //15
但是如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，返回求和的函数
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
};
}
var f = lazy_sum([1, 2, 3, 4, 5]); //function sum()
f(); //15
#在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。
#请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
- 闭包
注意到返回的函数在其定义内部引用了局部变量
arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。
返回函数并没有立刻执行，而是直到调用了f()才执行
function count() {
var arr = [];
for (var i = 1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
#注意执行结果
f1(); // 16
f2(); // 16
f3(); // 16
#全部都是16， 原因在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：
function count() {
var arr = [];
for(var i = 1; i<=3; i++) {
arr.push((function (n) {
return function () { return n * n};
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
# 创建一个匿名函数并立刻执行的语法
(function (x) {return x * x})(3); //9
在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。
在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。
我们用JavaScript创建一个计数器：
'use strict';
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
#执行起来如下：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：
'use strict';
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); //25
console.log(pow3(7)); //343
3. 箭头函数
ES6中增加了一种新的函数：Arrow Function。定义：x => x * x
相当于：function (x) { return x * x; }
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连
{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
x => {
if (x > 0) {
return x * x;
}else{
return - x * x;
}
}
如果参数不是一个，就需要用括号
()括起来：
//两个参数
(x, y) => x * x + y * y
//无参数：
() => 3.14
//可变参数：
(x, y, ...rest) => {
var i , sum = x + y;
for(i = 0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
如果要返回一个对象，就要注意，如果是单表达式，这么写会报错：
x => { foo: x },因为和函数体的{...}有语法冲突，应该改为：x => ({ foo: x })
- this
箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的
this是词法作用域，由上下文确定。
#前面的例子中，JavaScript函数对this的错误绑定
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
#现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层的调用这obj：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; //1990
var fn = () => new Date().getFullYear() - this.birth;//this指向
return fn();
}
};
obj.getAge(); //25
由于this在箭头函数中已经按照词法作用域进行了绑定，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即忽略传入的第一个参数：
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
4. generator
- generator定义
generator(生成器)也是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。generator定义如下：
function* foo(x) {
yield x + 1;
yield x + 2;
yield x + 3;
}
generator由function*定义，并且，除了return语句，还可以用yield返回多次。
#斐波那契数列为例
# 0 1 1 2 3 5 8 13 21 34 ...
#编写一个产生斐波那契数列的函数，可以这么写
function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
fib(5); //[0, 1, 1, 2, 3]
fib(10); //[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
#函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
- generator调用
如何进行调用呢，如果直接调用
fib(5); //fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
直接调用一个generator和调用函数不一样，fib(5)仅仅创建了一个generator对象，还没有去执行它。
调用generator对象有两种方法，
第一种是不断地调用generator对象的next()方法：
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。
当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。
第二种是用for ... of循环迭代generator对象，这种方式不需要我们自己判断done:
for (var x of fib(10)) {
console.log(x); //依次输出 0, 1, 1, 2, 3,...
}
- generator的应用
generator和普通函数相比，有什么用？
因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：
var fib = {
a: 0,
b: 1,
n: 0,
max: 5,
next: function () {
var
r = this.a,
t = this.a + this.b;
this.a = this.b;
this.b = t;
if (this.n < this.max) {
this.n ++;
return r;
}else{
return undefined;
}
}
};
用对象属性来保存状态，相当的繁琐。
generator的另一个巨大的好处，就是把异步回调编程同步代码。这个好处等后面学习了AJAX以后才能体会到。
网友评论