JS文档归纳

在html中引入外部js文件,并调用带参

• js文件
  

• html文件
  

ES6规范引入了新的数据类型Map，Set

Map是一组键值对的结构，具有极快的查找速度。

• 用JavaScript写一个Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

• 例如：
  

• 初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

• 注：由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉(覆盖)

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。重复元素在Set中自动被过滤

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

• 通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果；
• 通过delete(key)方法可以删除元素；

为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

• 具有iterable类型的集合可以通过新的for ... of循环来遍历。

• for … of循环是ES6引入的新的语法

• 用for … of循环遍历集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

• 更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。

---

定义函数两种方式

方式1：

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

方式2：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};
// 在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。
   但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。

• 上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

---

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。

---

---

---

• 在JavaScript中，用var申明的变量实际上是有作用域的。
• 如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响；
• 由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行；
• 如果内部函数和外部函数的变量名重名，JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。
• 不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性（因此，直接访问全局变量XXX和访问window.XXX是完全一样的）；
• 由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象；

---

---

---

名字空间 ~重点~

• 减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

---

绑定到对象上的函数称为方法，和普通函数也没啥区别

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN

拆开写：

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

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


xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了

• 在一个方法内部，this是一个特殊变量，它始终指向当前对象

• JavaScript的函数内部如果调用了this，那么这个this到底指向谁？
  答案是，视情况而定！

• 如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

• 如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

• 用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

---

高阶函数

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

等价于如下：

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]

---

• reduce函数

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

其效果就是：

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

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

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

---