javascript基础集锦（四）

本系列主要记录javascript中，新手比较容易搞错的地方。

（1）函数参数arguments

　　JavaScript函数中有一个关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个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，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：
　　　　function abs() {
　　　　if (arguments.length === 0) {
　　　　return 0;
　　　　}
　　　　var x = arguments[0];
　　　　return x >= 0 ? x : -x;
　　　　}
　　　　abs(); // 0
　　　　abs(10); // 10
　　　　abs(-9); // 9
　　实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：
　　　　// foo(a, [b], c)
　　　　// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
　　　　function foo(a, b, c) {
　　　　if (arguments.length === 2) {
　　　　// 实际拿到的参数是a和b，c为undefined
　　　　c = b; // 把b赋给c
　　　　b = null; // b变为默认值
　　　　}
　　　　// ...
　　　　}
　　要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。

(2)rest参数　

　由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：

function foo(a, b) {
var i, rest = [];
if (arguments.length > 2) {
for (i = 2; i<arguments.length; i++) {
rest.push(arguments[i]);
}
}
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？
ES6标准引入了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参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

　　　　如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

　　　　因为rest参数是ES6新标准，所以你需要测试一下浏览器是否支持。

（3）变量提升

　　JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：
　　　　'use strict';
　　　　function foo() {
　　　　var x = 'Hello, ' + y;
　　　　alert(x);
　　　　var y = 'Bob';
　　　　}
　　　　foo();
　　虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是alert显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。
　　对于上述foo()函数，JavaScript引擎看到的代码相当于：
　　　　function foo() {
　　　　var y; // 提升变量y的申明
　　　　var x = 'Hello, ' + y;
　　　　alert(x);
　　　　y = 'Bob';
　　　　}
　　由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。

　　最常见的做法是用一个var申明函数内部用到的所有变量：
　　　　function foo() {
　　　　var x = 1, // x初始化为1
　　　　　　y = x + 1, // y初始化为2
　　　　　　z, i; // z和i为undefined
　　　　// 其他语句:
　　　　for (i=0; i<100; i++) {
　　　　　　...
　　　　　}
　　　　}

(4)全局作用域

　　不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：
　　　　'use strict';
　　　　var course = 'Learn JavaScript';
　　　　alert(course); // 'Learn JavaScript'
　　　　alert(window.course); // 'Learn JavaScript'
　　因此，直接访问全局变量course和访问window.course是完全一样的。
　　你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

　　　　'use strict';
　　　　function foo() {
　　　　alert('foo');
　　　　}
　　　　foo(); // 直接调用foo()
　　　　window.foo(); // 通过window.foo()调用

　　这说明，JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

（5）名字空间

　　全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：
　　　　// 唯一的全局变量MYAPP:
　　　　var MYAPP = {};
　　　　// 其他变量:
　　　　MYAPP.name = 'myapp';
　　　　MYAPP.version = 1.0;
　　　　// 其他函数:
　　　　MYAPP.foo = function () {
　　　　return 'foo';
　　　　};
　　把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

　　许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

（6）局部作用域

　　由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：
　　　　'use strict';
　　　　function foo() {
　　for (var i=0; i<100; i++) {
　　　　//
　　　　}
　　　　i += 100; // 仍然可以引用变量i
　　　　}
　　为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：
　　　　'use strict';
　　　　function foo() {
　　　　var sum = 0;
　　　　for (let i=0; i<100; i++) {
　　　　sum += i;
　　　　}
　　　　i += 1; // SyntaxError
　　　　}

（7）常量

　　由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：
　　　　var PI = 3.14;
　　　　ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：
　　　　'use strict';
　　　　const PI = 3.14;
　　　　PI = 3; // 某些浏览器不报错，但是无效果！
　　　　PI; // 3.14

（8）装饰器

　　利用apply()，我们还可以动态改变函数的行为。
　　JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。
　　现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：
　　　　var count = 0;
　　　　var oldParseInt = parseInt; // 保存原函数
　　　　window.parseInt = function () {
　　　　count += 1;
　　　　return oldParseInt.apply(null, arguments); // 调用原函数
　　　　};
　　　　// 测试:
　　　　parseInt('10');
　　　　parseInt('20');
　　　　parseInt('30');
　　　　count; // 3

(9)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()作为高阶函数，事实上它把运算规则抽象了，因此，我们不但可以计算简单的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']
　　只需要一行代码。

　　注意：

　　在将字符串转换为整型的时候，千万别用arr.map(parsInt);这样会报错！要使用arr.map(Number);

(10)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