JavaScript全面学习（函数）

1.定义函数的两种方法：

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

或者

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};  //记得要加分号，因为这是赋值abs变量

2.调用函数

abs(10, 'blablabla'); // 返回10
abs(-9, 10, 'hehe', null); // 返回9，不受多个参数的影响，因为第一个参数就return了
abs(); // x为undefined，返回NaN

3.关键字arguments，类似于array.

function foo(x) {
    alert(x); // 10
    for (var i=0; i<arguments.length; i++) {
        alert(arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

arguments最常用于判断传入参数的个数:

if (arguments.length === 0) //如果参数个数为0...

4.用rest获取所有参数：

function foo(a, b) {
    var i, rest = [];
    if (arguments.length > 2) {
        for (i = 2; i<arguments.length; i++) {
            rest.push(arguments[i]);   // 在rest数组后添加元素
        }
    }
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

一般写成如下更加简洁明了，与上面等效：

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

注意rest前面有3个点，如果没有的话，相当于rest就是第三个参数：

function foo(a, b,rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// 3

foo(1);
// 结果:
// a = 1
// b = undefined
// undefined

5.接受任意个参数并返回它们的和：

function sum(...rest) {
  var sum = 0;
  for(var i of rest) {
    sum += i;      
  }
  return sum;
}

6.JavaScript在行末自动添加分号

7.不同函数内部的同名变量互相独立，互不影响

8.内部函数可以访问外部函数定义的变量，反过来则不行：

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

9.JavaScript会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部，但不会提升变量的赋值：

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
}

foo();  //结果显示Hello, undefined，说明y没有值，但是已经声明了

10.JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'  与上面等效

11.let解决块级作用域

'use strict';

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
}

'use strict';

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1; // SyntaxError，无法引用i
}

12.关键字const来定义常量，const与let都具有块级作用域：

'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

13.this指的是被调用函数的当前对象  ，多层内嵌会使指示错误，可以在函数开头用var that = this;来捕捉固定this

    要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

对普通函数调用，我们通常把this绑定为null。

另一个与apply()类似的方法是call()，唯一区别是：

• apply()把参数打包成Array再传入；

• call()把参数直接按顺序传入。 

14.map函数用法，()里调用其他函数

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] 令数组的所有元素都执行（）里的函数

还能这样

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

 15.reduce函数用法：必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，例如求和：

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

其他例子

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;   // 把return值当成下一个x，与下一个y循环函数
}); // 13579

16.箭头函数

function (x) {
    return x * x;
}                 //相当于箭头函数x => x * x

 如果包含多条语句，这时候就不能省略{ ... }和return

如果参数不是一个，就需要用括号()括起来：

// 两个参数:
(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 })

回顾前面的例子，

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

箭头函数使this总是指向词法作用域，也就是外层调用者obj，如果是之前的直接创建函数，this就会指向window

由于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);   //箭头函数里的this已经绑定原对象obj,
                                                          //  此时的this.birth仍然是1990，
                                                     //  而不会将this绑定到传入的 birth:2000
    }
};
obj.getAge(2015); // 25

17.split() 方法用于把一个字符串分割成字符串数组,如果要把字符串数组变成“数”组，要乘以1，可以如下写

var arr=string.split('').map(x => x * 1)

18.parseInt()函数可解析一个字符串，并返回一个整数。

    语法：parseInt(string, radix)；

    string 必需。要被解析的字符串。

    radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

    如果省略该参数或其值为 0，则数字将以 10 为基础来解析。

    如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

    如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

parseInt("10");          //返回 10         10进制
parseInt("19",10);       //返回 19 (10+9)  10进制
parseInt("11",2);        //返回 3 (2+1)    2进制
parseInt("17",8);        //返回 15 (8+7)   8进制
parseInt("1f",16);        //返回 31 (16+15)    16进制
parseInt("010");         //未定：返回 10 或 8

19.filter方法

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {   
    return x % 2 !== 0;    //把arr中的偶数过滤掉，留下x%2!==0的
});
r; // [1, 5, 9, 15]

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (x) {
    return x && x.trim(); // 把false的空字符串过滤掉
});                            //注意：IE9以下的版本没有trim()方法
arr; // ['A', 'B', 'C']

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {  // 可以输入3个参数
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr   会输出3次Array [ "A", "B", "C" ]
    return true;
});

var r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});  //过滤掉arr中重复的元素   indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置，注意是首次

选出数组里面的素数：

 function get_primes(arr) {
      var i;
      var res = arr.filter(function(x){
            if(x<2) return false;     //排除掉1
            for(i=2; i*i<=x; i++){     
                if(x%i === 0){return false;}   //从2开始往上面的数一个个地除，直到确认是不是素数
                }
            return true;   //是素数就return true。
        });
        return res;
}

 20.对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1

21.闭包（不大懂意义）：返回一个函数,不立即执行

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()   
                       //调用lazy_sum()时，返回的并不是求和结果，而是返回求和函数
f(); // 15       //调用函数f时，才是真正计算求和的结果

当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数（每次调用的结果互不影响）：

var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

返回的函数并没有立刻执行，而是直到调用了f()才执行：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {     // 这里正常思维是最终i=4，但是没想到4最后居然进入循环里面运算了？？最终return 4*4
        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   等到3个函数都返回时，它们所引用的变量i已经变成了4

正确写法：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {     // 在里面再创建一个函数，用该函数的参数绑定循环变量当前的值
            return function () {
                return n * n;
            }
        })(i));              // 这样是用i去立即执行函数 注意括号的括法，(function (x) { return x * x }) (i);
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

借助闭包，可以封装一个私有变量。例如用JavaScript创建一个计数器：

'use strict';
function create_counter(initial) {
    var x = initial || 0;   //在没有初始值initial的时候给一个初始值
    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

换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来：

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);   // 计算x的n次方
    }
}
// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(5); // 25             相当于Math.pow(5, 2)
pow3(7); // 343            相当于Math.pow(7, 3)

只需要用函数，就可以用计算机实现运算，而不需要0、1、2、3这些数字和+、-、*、/这些符号：

'use strict';

// 定义数字0:
var zero = function (f) {
    return function (x) {
        return x;
    }
};

// 定义数字1:
var one = function (f) {
    return function (x) {
        return f(x);
    }
};

// 定义加法:
function add(n, m) {
    return function (f) {
        return function (x) {
            return m(f)(n(f)(x));
        }
    }
}
// 计算数字2 = 1 + 1:
var two = add(one, one);

// 计算数字3 = 1 + 2:
var three = add(one, two);

// 计算数字5 = 2 + 3:
var five = add(two, three);

// 给3传一个函数,会打印3次:
(three(function () {
    console.log('print 3 times');
}))();

// 给5传一个函数,会打印5次:
(five(function () {
    console.log('print 5 times');
}))();

22.（意义不明啊！）generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

    编写一个产生斐波那契数列的函数：

function* fib(max) {    //注意多出的*号
    var
        t,
        a = 0,
        b = 1,
        n = 1;
    while (n < max) {
        yield a;
        t = a + b;
        a = b;
        b = t;
        n ++;
    }
    return a;
}
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
        // fib(5)仅仅是创建了一个generator对象，还没有去执行它

//可以这样调用：
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: true}

next()方法每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。

一般这样调用：

for (var x of fib(6)) {   // 注意要6，坑啊
    console.log(x); // 依次输出0, 1, 1, 2, 3
}

下面是天书：

用generator的话，AJAX可以大大简化代码：

try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}

用一个对象来保存状态：

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

自增,并保存数字：

'use strict';
function* next_id() {
var i=1;
while(true)
{
  yield i++;
}
}