1.js基础

JS语法

---

---

1.== & ===

"!=\="： 当判断if 不等于时 false == 0; // true

false === 0; // false

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

---

---

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false 

唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

---

---

最后要注意浮点数的相等比较：
1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

2.小心你的return语句

前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的一个大坑：

function foo() {
    return { name: 'foo' };
}

foo(); // { name: ‘foo’ }
如果把return语句拆成两行：

function foo() {
    return
        { name: 'foo' };
}

foo(); // undefined
要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

function foo() {
    return; // 自动添加了分号，相当于return undefined;
        { name: 'foo' }; // 这行语句已经没法执行到了
}

所以正确的多行写法是：

function foo() {
    return { // 这里不会自动加分号，因为{表示语句尚未结束
        name: 'foo'
    };
}

3.for …in & for…of

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for … in循环将把name包括在内，但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

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

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

output:
A, index = 0
B, index = 1
C, index = 2

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

value：值
key：键
map：Map(3) {1 => “x”, 2 => “y”, 3 => “z”}

4.var申明的变量实际上是有作用域的

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000

全局作用域
不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性

4.1 var申明的变量实际上是有作用域的

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

4.2 名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

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

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

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

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

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

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

4.3 局部作用域

由于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;
    }
    // SyntaxError:
    i += 1;
}

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: ‘小明’, x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =
这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

({x, y} = { name: ‘小明’, x: 100, y: 200});

'use strict';

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

xiaoming.age(); // Uncaught TypeError: Cannot read property ‘birth’ of undefined
结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

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

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

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

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

比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5
对普通函数调用，我们通常把this绑定为null。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

getElementById querySelector 不同

参考：https://www.cnblogs.com/leaf930814/p/6660305.html
getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

• 先看看一个例子：

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
 
//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

Demo1 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

• querySelector和querySelectorAll()

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

• 总结

如果只要一次查找就可得到元素时，首选getXXXByXXX ；
如果需要经过多级查找，才能得到元素时，

类型转换

• parseInt( )

parseInt("+123");//123
parseInt("-123");//123
parseInt("12.3元")//12
parseInt("abc");//NaN

该方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，所以要解析十六进制的值，对于含有前导的数则直接进行解析需如下调用：

    parseInt("AA",16);//170

    parseInt("10",2);//2

    parseInt("10",8);//8

    parseInt("10",10);//10

    //含有前导

    parseInt("0xAA")//170        

    //如果二进制数包含前导0，那么最好采用基数2，不然默认以十进制解析

    parseInt("010");   //returns   10 

    parseInt("010",2);//2 

• ParseFloat()

• Number() Number则是对整体进行判断，是数字返回数字，否则NaN

    Number("12.3");//12.3
    Number("+123");//123
    alert(12.3元);//false
    Number(true);//1
    Number("12.3.4");//NaN
  

• Boolean()

• 隐式类型转换

    var x = "123";
    var y = 121;
    alert(x+y);//"123121;
    alert(x-y);//2
    alert(x*y);//14883
    alert(x/y);//1.016528256198346
    alert(x%y);//2
    alert(x>y);//true
    alert(x==y);//false
    alert("123a">y);//false诡异

Array 对象方法

反引号 --ES6

• ① 换行：
  

• ② 拼接
  value= ${value} haha !