一、js 基础

网页的组成：
（1）结构：html
（2）样式：css
（3）行为：JavaScript

1. JavaScript（简称“js”）的组成：

（1）DOM： 文档对象模型，操作 html（在 js 中叫 DOM），网页结构；

（2）BOM： 浏览器对象模型，js 要运行在浏览器中，意味着 js 不仅要遵循自己的规则，还要遵循浏览器的规则（即BOM），提供了操作浏览器的方法；

（3）ECMAScript： 语法规范，规定了 js 怎么写，写什么；

2. 运行 js

js 也是一种脚本语言，有两种方式在HTML页面进行引入。
（1）外联 js： <script src="相对路径"></script>
（2）内部 js： <script type="text/javascript">//...</script>

3. 打印信息

跟编程没有任何关系，用来观察数据处理的结果，用来测试，用来调bug。
（1）向 页面 打印信息：document.write();       操作的是 DOM，影响页面（坑： 页面正在加载时执行 docment.write()，页面正常；页面加载完执行docment.write()，页面被覆盖）；

（2）向 控制台 打印信息：console.log();       操作的是 浏览器，既不影响页面，也不影响操作；

（3）向 浏览器弹出框 打印信息：alert();      操作的是 BOM，需要手动关闭；

4. 关键字 var

（1）原理： 我们所写的程序运行在内存中，当我们使用关键字 var 声明一个变量时，计算机会从内存中分一个空间，为我们存放 不同类型 的内容做准备。

（2）变量命名规则：

• 只能以 字母、_ 、$ 开头；
• 尽量使用数据类型做前缀；
• 不允许使用 关键字 和 保留字；

5. js 中的数据类型

（1）字符型（String）： 所有用引号引起来的数据 “” 和 ‘’ ；
（2）数值型（Number）： 0123456789；
（3）布尔型（Boolean）： true 和 false；
（4）undefined： undefined；
（5）对象型（object）： {} 就是对象；
（6）数值（arr）： [] 就是数值

• 检测数据类型的方法：
  （1）typeof ：用来检测数据类型；
  typeof 返回七种可能的值：“number”、“string”、“boolean”、“object”、“symbol”、“function”和“undefined”。

   console.log("基础数据类型");console.log(typeof ""); //stringconsole.log(typeof 1);  //numberconsole.log(typeof true);  //booleanconsole.log(typeof undefined);  //undefinedconsole.log(typeof null);  //objectconsole.log(typeof []);  //objectconsole.log(typeof {});  //objectconsole.log("引用数据类型");console.log(typeof function(){});  //functionconsole.log(typeof new Function()); // functionconsole.log(typeof new Date()); //object console.log(typeof new RegExp()); //object 
  

  • ① 对于基本类型，除 null 以外，均可以返回正确的结果。
  • ② 对于 null ，返回 object 类型。
  • ③ 对于引用类型，除 function 以外，一律返回 object 类型。
  • ④ 对于 function 返回 function 类型。

  其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但不是我们想要的结果。

  （2）instanceof，具体参考

  instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true，否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型。

  （3）constructor，具体参考

  （这里依然抛开null和undefined）乍一看，constructor似乎完全可以应对基本数据类型和引用数据类型，都能检测出数据类型，事实上并不是如此：声明了一个构造函数，并且把他的原型指向了Array的原型，所以这种情况下，constructor也显得力不从心了

  （4）Object.prototype.toString.call()

  jQuery源码就是采用这种方法检测的。

  var a = Object.prototype.toString;
  console.log(a.call("aaa"));   //[object String]
  console.log(a.call(1));       //[object Number]
  console.log(a.call(true));    //[object Boolean]
  console.log(a.call(null));    //[object Null]
  console.log(a.call(undefined));   //[object Undefined]
  console.log(a.call([]));      //[object Array]
  console.log(a.call(function() {}));   //[object Function]
  console.log(a.call({}));     //[object Object]
  console.log(a.call(new Date()));   //[object Date]
  console.log(a.call(new RegExp()));   //[object RegExp]
  

6. NaN（not a number）

（1） 不是一个数字的数值型数据，非法的运算 会得到 NaN；
（2）NaN 不等于 NaN；
（3）isNaN()是不是一个数字；检测 NaN；
得到 NaN 时，返回 true，如果是数字，返回 false。

console.log(isNaN(NaN));//true
console.log(isNaN(123));//false

7. js 运算符：

（1）算术运算符：

• -、*、/、%，会把两边的数据，当成数值进行运算；
• 而 + 号两边只要出现一个字符，那么就不是加法了，而是字符串的拼接；

（2）关系运算符：

• 只要关系运算符两边，存在数值，会把两边的数据，当成数值进行运算；
• 两边都是字符，会按照字符的比较规则，比较(逐位比较)；
• === 除了比较值，还比较了类型，不存在类型转换；

  console.log(1 == true);    //true
  console.log(1 ===  true); //false
  

（3）逻辑运算符：||、&&、!；

（4）赋值运算符 = += -+ *= /= %=；

（5）自增 ++ 和自减 -- 每次变化1：

• ++a 先运算，再执行
• a++ 先执行，再运算

8. 数据类型转换

（1）隐式类型转换：
① 字符转数值： -、*、/、%；

② 数值转字符：+；

③ 其他转 boolean：if(){} 括号中的隐式转换

• 非 0 为 true，0 为 false；
• 所有非空字符（即""，而不是" "）为 true，空字符为 false；
• undefined 为 false；
• 所有对象和数组（包括{}，[]，除了 null）都为 true；
• NaN 为 false；
• null 为 false；

④ 其他

• true 会转成1，false 会转成0；
• NaN 与任何值（除了字符）运算得到 NaN；

  console.log(1 + "1");//11
  console.log(2 + false);//2   false -> 0
  console.log(1 + true);//2   true-> 1
  console.log(true + false);//1
  console.log(undefined + 1);//NaN
  console.log(undefined + NaN);//NaN
  console.log(undefined + null);//NaN
  console.log(null + 1);//1   null -> 空
  

（2）显式（强制）类型转换
① 字符转数值：Number()、parseInt()取整、parseFloat()取浮点数、Math.round()四舍五入取整

console.log(parseInt("123abc456"));//123
console.log(parseInt("abc456"));//NaN
console.log(parseInt("12.34"));//12
console.log(parseInt("12.84"));//12console.log(parseFloat("123.1415avc"));//123.1415
console.log(parseFloat("123.14avc15"));//123.14
console.log(parseFloat("123.am1415"));//123
console.log(parseFloat("123am.1415"));//123
console.log(parseFloat("12am3.1415"));//12
console.log(parseFloat("am123.1415"));//NaNconsole.log(Number("123a"));//NaN
console.log(Number("123.12"));//123.12console.log(Math.round(123.4));//123

• parseInt() 和 parseFloat() 转换规则：
  从左到右依次检测字符，遇到数字就转，遇到字母就停，第一位是字母就是 NaN；

• Number()：
  严格转换，小数点也能转换，只要出现一个非数字的字符，无论在哪个位置，都是 NaN。

② 数值转字符： +""、toString()转成字符、toFixed(n)四舍五入且保留n（n>=0）位小数

var num = 10;
var str = num + "";
var str = num.toString();
var str = num.toFixed();

9. 解决精度缺失问题

var n = 0.1 + 0.7;
n = parseFloat(n.toFixed(1))

10. 进制的转换

var num = 110;
console.log(num.toString(2));//十进制转二进制 1101110
console.log(num.toString(8));//十进制转八进制 156
console.log(num.toString(16));//十进制转十六进制 6e

var str = "110";
console.log(parseInt(str,2));//二进制的转十进制 6
console.log(parseInt(str,8));//八进制转十进制 72
console.log(parseInt(str,16));//十六进制转十进制 272

11. undefined 和 not a defined

（1）undefined： 定义了没赋值；
（2）not a define： 未定义、一种报错；

二、程序的结构-单双分支

逻辑的不同，程序分为三种结构：顺序结构、分支结构、循环结构；

2.1 分支结构

1. 单分支

if(判断条件){}，只要“判断条件”为真，就会执行花括号中的操作。

• 判断条件为真，可以是一个 boolean值为 true 的变量，非 0 的数字，具体可以参考 第一点里面的第8条-数据类型转换-其他转 boolean。

2. 双分支

• if(){}else{}
• 三目表达式：条件 ? 条件为真时的操作 : 条件为假时的操作;

3. 多分支

（1）if()

if(){
}
else if{
}
else{
}

（2）switch(){}

//switch语句名
//()要判断的值
//{}要执行的内容
//default：不是必须的，常只有一个，放在最后，不需要加break;
switch(变量){case 变量值0:操作;break; case 变量值1:操作;break;default:当 case 条件不满足是执行的操作（默认操作）;
}

• case 穿透： 当某一条 case 判断成功时，执行了当前 case 后的语句，后面所有的 case 都不再验证判断条件，直接执行后面所有的语句；

  var n = 2;
  switch (n){case 1:console.log("星期一");case 2:console.log("星期二");case 3:console.log("星期三");case 4:console.log("星期四");      
  }//打印结果
  星期二
  星期三
  星期四
  

• 阻止 case 穿透： break 在 switch 中专门用来阻止 case 穿透。

2.2 循环结构

1. 循环三要素：

（1）声明计数器，比如：var i；
（2）计数器的改变；
（3）停止条件；

2. 循环语句

（1）while(){}

//while语句名
//()执行条件、停止条件
//{}执行语句、循环体
var i = 0;
while(i<10){console.log(i);//0 1 2 3 4 5 6 7 8 9i++;//计数器常放最后console.log(i);//1 2 3 4 5 6 7 8 9 10
}
//当 i<10 时，执行循环体，否则不执行。执行次数 10 

• 求100-999之间的水仙花数：

  //水仙花数： a^3 + b^3 + c^3 = abc;
  var i = 100;
  while(i<1000){var a = i%10; //取个位数var b = parseInt(i%100/10); //取十位数var c = parseInt(i/100); //取百位数if(i == a*a*a + b*b*b + c*c*c){console.log(i)}i++;
  }
  

（2）do{}while(){}
特性：不管条件是真还是假，do 和 while 都会进行循环；

//do 语句名 {}do的执行语句、循环体
//while 语句名 ()停止条件 {}while的执行语句
//循环条件若放在 while 中，将会造成死循环

（3）for(){}

//for 语句名 ()条件组 {}循环体
for(var i=0;i<10;i++){console.log(i);//0 1 2 3 4 5 6 7 8 9 
}

3. do-while 和 while的区别

do-while不管任何情况下都至少会执行一次。

var i = 0;
do{console.log("do执行："+ i); //0 1 2 3 4 5 6 7 8 9i++;
} while ( i < 10){console.log("while执行："+ i); //10

4. 死循环：

无法替自身控制结束的循环，称为死循环；

死循环的应用：每次判断一个条件，直到满足条件，利用 break 跳槽循环（常使用 while()）。

• 篮球从5米高的地方掉下来，每次弹起的高度时原来的30%，经过几次弹起，篮球的高度是0.1？

  var i = 0;
  var h = 5;
  while(true){h = h * 0.3;i++;if(h<0.1){break;}
  }
  console.log(i); //4
  

5. 循环中的关键字

（1）break，跳出当前循环、结束当前循环，不再执行剩余代码。
（2）continue，跳过本次循环，用于停止当次循环，回到循环起始处，进入下一次循环操作。。

var i = 0;
while(i<10){console.log(i);if(i==5){break;}i++;
}
// 打印结果：0 1 2 3 4 5var i = 0;
while(i<10){console.log(i);if(i==5){continue;}i++;
}
//造成死循环。当i=5时，跳过本次循环，即不执行i++，再次循环时i还是=5var i = 0;
while(i<10){i++;if(i==5){continue;}console.log(i);
}
//1 2 3 4 6 7 8 9 10
//当 i=5 时，跳过本次循环及后面的逻辑，再返回到花括号中第一句代码重新开始循环判断

三、函数

概念： 函数是由事件驱动的，或者当它被调用时可执行的可重复使用的代码块；

1. 函数的使用

（1）创建函数

• 声明式 创建函数： function 函数名(){//...}
• 赋值式(也叫字面量式) 创建函数： var 函数名 = function(){//...}

（2）函数调用方式：

• 自动执行： 函数名();
• 事件执行： obtn.onclick = 函数名;

（3）函数执行时机：

• 任何情况下，只要 函数名()，立即执行；
• 当需要用事件触发函数时，不能加小括号，加了就会立即执行；

function bar () {console.log(1);
}
console.log(bar);
//打印结果：ƒ bar () {
//  console.log(1);
//}console.log(bar()); //打印结果：1

（4）使用/执行： 函数名();

<button>按钮</button>
var obtn = document.querySelector("button");
obtn.onclick = say;function say(){console.log("hello");
}

（5）函数的好处：
① 重复使用；
② 选择执行；
③ 忽略细节（就想空调一样，不会组装，但是会使用）；

2. 函数分类

（1）有名函数： function 函数名(){};
（2）无名函数： funtion(){};
（3）匿名函数： (function(){})()

• 区别：
  ① 无名函数： 不能直接写，必须通过事件调用，或者作为参数、返回值等使用；
  ② 匿名函数： 会立即执行，自动执行（即：不用主动调用，自己执行）；

3. 函数的参数

形参： 形式的参数，函数定义时，小括号内的参数；
实参： 实际的参数，函数执行时，小括号内的参数；

function fn(n){ //n 形参console.log(n);
}
fn(12); // 12实参

（1）实参数量 = 形参数量，参数一一对应；
（2）实参数量 > 形参数量，多出来的实参到 argument 中；
（3）实参数量 < 形参数量，多出来的形参是 undefined；

4. arguments

（1）伪数组：

• 理解：伪数组像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组。
• 特点：
  ① 具有 length 属性；
  ② 按索引方式存储数据；
  ③ 不具有数组的 push()、pop() 等方法；
• 伪数组转换为真数组：
  ① 方法一：Array.prototype.slice.call(伪数组);
  ② 方法二：Array.prototype.slice.apply(伪数组);
  ③ 方法三：Array.prototype.slice.bind(伪数组);
  ④ 方法四：Array.from(伪数组)，返回的就是真数组；

（2）arguments 是一个伪数组，接收所有实参。

function fn(a,b){console.log(a); //4console.log(b);  //6console.log(arguments);//Arguments(4) [4,6,8,3]
}
fn(4,6,8,3)

• 示范将伪数组变成真数组：

  function fn(a,b){console.log(arguments);//Arguments(4) [4,6,8,3]var arr = Array.prototype.slice.call(arguments);console.log(arr);  //[4,6,8,3]
  }
  fn(4,6,8,3)
  

（3）arguments.callee 保存了自身所在的函数，“递归”中使用（但是后期递归舍弃了该方法）；

function fn(a,b){console.log(arguments.callee);//[4,6,8,3]
}
fn(4,6,8,3)

（4）运用场景：无法确定实参的个数是多少时。

//求任意个数字的和
function fn(){var sum = 0;for(var i = 0; i<arguments.length; i++){sum += arguments[i];}
}
fn(4,6,8,3)

5. return

把函数里面的数据 返回到 函数外面，使我们可以在函数外面拿到函数里面的数据。

（1）作用：① 终止循环；② 返回值；

function fn(){return 123;
}
var a = fn();
console.log(a);//123
console.log(fn());//123

1. 返回值： 返回值就是 将函数处理后的数据，返回到函数名上（利用这一点可以做一个简单的“闭包”，也可参考菜鸟教程）， 便于其他程序或用户调用或做二次使用。
2. 不一定所有函数都有返回值，只有需要返回数据的函数才加 retrun。

• 闭包具体在后面提及，这里写一个示例。

  function a(){var m = 0;return function(){m++;console.log(m)};}
  console.log(a());
  //打印结果：返回的是return后面的函数，不包括 var m = 0;这一条语句。
  //ƒ (){
  //  m++;
  //  console.log(m)
  //}
  a()();  //11  这样相当于执行函数a的整个部分，所以多次调用，会一直先让m=0，再去执行return语句
  a()();  //11
  

  //从上面的打印结果，我们可以看到打印a()的结果是一个函数。
  function a(){var m = 0;return function(){m++;console.log(m)};}
  var b = a();  //将这个函数结果定义一个新的变量保存起来
  b();  //11
  b();  //12
  b();  //13//上面这种保存函数的方法，执行结果就相当于
  //function a(){var m = 0;function b(){ //变量m和函数b组成了一个闭包return m++;}
  //}
  console.log(b());  //因为函数b的返回值是return，要想查看结果，就要console.log(b())；而不能直接b()
  console.log(b());  //类似数组方法sort()的执行过程
  console.log(b());
  

（2）return 的几个返回值：
① return true;，返回正常的处理结果；终止处理。

② return false;，返回错误的处理结果；终止处理；阻止提交表单;阻止执行默认的行为。
return false; 只在当前函数有效，不会影响其他外部函数的执行。

③ return;，把控制权返回给页面。

（3）break，continue 和 return 的用法及区别：

6. 作用域

var carName = " Volvo";// 此处可调用 carName 变量
function myFunction() {// 函数内可调用 carName 变量
}

// 此处不能调用 carName 变量
function myFunction() {var carName = "Volvo";// 函数内可调用 carName 变量
}

var a = "10";
function fn() { var a ="20";console.log(a)
}
fn(); //20
console.log(a);   //10 这里的a为全局变量 

7. 变量提升

console.log(b);//b is not defined
console.log(a);//undefined
var a = 10;
console.log(a);//10
console.log(b);//b is not defined

fn();//hello
function fn(){console.log("hello");
}

fn();//fn is not a funtion
var fn = function(){console.log("world");
}

console.log(v1);
var v1 = 100;
function foo() {console.log(v1);var v1 = 200;console.log(v1);
}
foo();
console.log(v1);//打印结果：
//undefined
//undefined
//200
//100

8. 递归

（1）递归就是在自身内部调用自己；
（2）缺点： 耗性能，逻辑稍微不太好理解；

• 递归计算阶乘

  //3*2*1
  function fn(n){if(n == 1){return 1;} else {return n*fn(n-1);}
  }
  fn(3);
  

• 斐波那契数列：1，1，2，3，5，8，13，21，34…

  //写一个数字n，找到第 n 个斐波那契数列；
  function fn(n){
  if( n == 1 || n== 2){return 1;} else {return fn(n-1) + fn(n-2);
  }
  fn(3);
  

下一篇—— js笔记（二）对象和构造函数、数组、this