JS入门

---

一、JavaScript发展简史

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

二、CSS与JS的放置位置

• CSS应放在页面顶部的head中
  由于Rendering Tree是由DOM Tree和CSSOM Tree组合成的，html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成白屏或FOUC。
• JS应放在body的底部
  因为浏览器需要一个稳定的DOM Tree结构，而且JS中很有可能有代码直接改变了其结构，浏览器为了防止出现JS修改DOM Tree，需要重新构建的情况，所以就会阻塞其他的下载和呈现。
  将JS放在head内和body底部的区别也在于此：若放在head里面，由于浏览器发现head里面有JS标签就会暂时停止其他渲染行为，等待JavaScript下载并执行完成才能接着往下渲染，而这个时候将发生白屏；若放在body底部，Rendering Tree已经完成大部分，所以此时页面有内容呈现，即使遇到JavaScript阻塞渲染，也不会有白屏出现。

三、JavaScript数据类型

1. 数值（number）：整数和小数
2. 字符串（string）：字符组成的文本
3. 布尔值（boolean）：true（真）和false（假）
4. undefined：表示“未定义”或不存在，即此处目前没有任何值
5. null：表示空值，即此处应该有一个值，但为空
6. 对象（object）：各种值组成的集合。对象有三个子类型狭义的对象（object），数组（array），函数（function）。

数值、字符串、布尔值称为原始类型（primitive type）值，即它们是最原始的数据类型，不能再细分了。而将对象称为复杂类型（complex type）值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。

四、typeof与instanceof

• typeof用于返回一个数据原始的数据类型。对于常见的几大数据类型都可以用typeof 数据类型的方式进行判断（其中typeof null 返回的object）。
• instanceof用于判断某个对象是不是构造函数的一个实例，即一个新声明的变量是不是调用了构造函数的内置属性或方法。
• 对于一个变量a可用如下方法判断其数据类型：

type a === "number" \\判断a是否为数字
type a === "string" \\判断a是否为字符串
type a === "boolean" \\判断a是否为布尔值
type a === "function" \\判断a是否为函数

JS运算符

---

一、NaN的作用

• NaN不是数值，全称为Not a Number。它用于表示一个本来要返回数值的操作数未返回数值的情况，此时为了不报错，就会返回NaN。
• NaN非常特殊，因为它“不是数字”，所以它不等于任何数，包括其自身，即NaN != NaN。任何涉及NaN的操作（如NaN/10）都会返回NaN这个特点在多步计算中有可能导致问题。
• isNaN(testValue)可检查一个参数是否为数值，返回true或false。

二、==与===

• ==：相等运算符，但是不比较参数的类型，两边参数类型不同时，会先进行类型转化，再比较值。
• ===：严格相等运算符，不仅比较参数的值，也比较参数的类型，只有两者均一致，才返回true。

JS函数

---

一、if语句

1. if语句的语法：

if(condition) {
  statement
}else {
  statement
}

其中的 condition可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值。如果该位置是非布尔值，JavaScript会将这个值自动转为布尔值。

2. condition判断：

• 布尔值：直接作出判断，true为true，flase为false
• 字符串：除了空字符串。""为false外，其余（包括包含空格字符串" "）都为true。
• 数值：除了0（+0、-0、0.00、00等）与NaN为false，其余都为true。
• undefined：转换为false。
• null：转换为false
• 对象：转换为true（包括空数组[]与空对象{}）

二、==相等操作符

相等操作符==在比较两参数时，若参数类型不一致，会先将它们转换成一样的类型，再比较其相等性。转换规则如下：

• 若其中一个为布尔值，将其转换为数值，false为0，true为1；
• 若其中一个为字符串，另一个为数值，则将字符串转换为数值，只含数字的字符串转换为相应数字，空字符串或只含空格字符串转换为0，其余转换为NaN；
• 若其中一个是对象，另一个不是，则调用对象的valueOf()方法，用前述规则进行比较；
  以下特殊结果需特别注意：

null == undefined  //true  
NaN == NaN  //false
false  == undefined  //fales
false  == null  //false
NaN != NaN  //true

三、switch语句

1. switch表达式如下：

switch(condition){
  case 1: 
    statement1;
    break;
  case 2:
    statement2;
    break;
  ......
  case N:
    statementN;
    break;
 default:
    statement;
}

switch语句会把condition与case进行对应，然后执行相应case的statement。

2. break语句会在程序执行case后跳出当前的switch。若当前case没有break，程序会遍历当前case之后的case并执行statement，直到遇见break或遍历完所有的case，才跳出switch。

四、其他语句的用法

• while的用法：

var i = 5;
while(i>0){
  console.log(i);
  i--;
}

当()中的条件为true时，程序会循环执行while中的语句，直到()中的条件变为false。

• do-while的用法：

var i = 5;
do{
  console.log(i);
  i--;
}while(i>0)

do-while语句与while语句的用法大致相同，唯一不用的是，do-while会先执行do里的语句，再判断while的条件是否满足。

• for遍历数组的方法：

var arr = [3,4,5];
for(var i=0; i<3; i++){
  console.log(arr[i])
}

• for-in遍历数组的方法：

var arr = [3,4,5];
for(var i in arr){
  console.log(arr[i])
}

• break 和 continue 的用法：

for(var i = 0; i< 6; i++){
    if(i % 4 === 0){
        break;
    }
    console.log(i);
}

for(var i = 0; i< 6; i++){
    if(i % 4 === 0){
        continue;
    }
    console.log(i);
}

其中break语句会跳出整个循环，因此结果为不输出；continue语句会跳出当前循环，执行下一循环，因此结果为1 2 3 5。

JS作用域链与引用类型

---

一、立即执行函数

• 立即执行函数就是声明一个函数并马上调用它，function前后必须用小括号包裹起来。其语法如下：

( function(){
  函数体 
} ) ()

• 立即执行函数只有一个作用：创建一个独立的作用域，这个作用域里面的变量外面访问不到（即避免变量污染）。

二、作用域与作用域链

作用域

---

JS的作用域可分为全局作用域、函数作用域和块级作用域：

1. 全局作用域：在全局对象（window）中声明的变量和函数具有全局作用域，程序的所有部位都可见。
2. 函数作用域：在一个函数内部声明的变量和函数具有局部作用域，只在函数内部可见，若在函数外部访问会返回undefined。这里注意一点：带参的函数，参数列表中的参数也相当于是声明了的局部变量，在函数内部不需要再次声明，直接调用即可。若函数对象中和全局对象中同时对一个变量声明/赋值，在函数内部以函数内的声明/赋值为准。
3. 块级作用域：用let/const声明的变量只在{}块级符号内部可见（es6新特性）。且const是声明一个常量，在作用域内部不能改变，否则会报错。

作用域链

---

1. 函数在执行的过程中，先从自己内部找变量
2. 如果找不到，再从创建当前函数所在的作用域去找, 以此往上
3. 注意找的是变量的当前的状态
   可看如下例子：

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出2

var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn() //输出1

var a = 1
function fn1(){
  function fn3(){
    function fn2(){
      console.log(a)
    }
    fn2()
    var a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn()  //输出undefined