Three

一：循环语句

循环语句：通过循环语句可以反复的执行一段代码多次。

for循环结构

for循环，在日常开发中，是最常用的循环形式。

i++, 在for()这里起到计步器的作用，也叫更新表达式。

循环体的单次执行叫作一次迭代。

for(initialization; condition; step){
    loop body;
}
-----------------------------------------------------------------------------------------------------------------------------
for(初始化表达式; 条件表达式; 计步器){
    循环体;
}
-----------------------------------------------------------------------------------------------------------------------------
//for循环语句代码演示之hell world
for(var i =0; i < 10; i++){
    console.log(i);
}
//Print result:0 - 9 (结果简写：实际是从0一直到9)
-----------------------------------------------------------------------------------------------------------------------------
Execution flow：
initialization --->   var i = 0;    ---> 初始化变量（初始化表达式只会执行一次）;
condition	   --->    i < 10;      ---> 在每次循环迭代之前检查，如果为 false，停止循环;
loop body      ---> console.log(i); ---> 条件为真时，重复运行;
step    	   --->      i++;       ---> 在每次循环体迭代后执行。
-----------------------------------------------------------------------------------------------------------------------------
执行:初始化表达式 --> 初始化变量（初始化表达式只会执行一次）
执行:条件表达式，判断是否执行循环；
	如果为true，则执行大括号内的循环体
    如果为false，则终止循环
执行:更新计步器，更新计步器执行完毕继续重复。

代码演示：分解for循环

//分解for循环
for(var i =0; i < 10; i++){
    console.log(i);
}
-----------------------------------------------------------------------------------------------------------------------------
for(initialization; condition; step){
    loop body;
}
//分解 1
声明变量，并初始化。
initialization：var i = 0;
//分解 2
	//分解 2.1
	if条件判断，成立
	condition： if(i < 10){
        			console.log(i);
    	 		}
	//分解 2.2
	if条件判断，不成立，终止程序
//分解 三
loop body：执行 自增或自减（前置型或后置型），并更新初始化变量的值
		i++;
//分解 四
for循环：再次执行if条件判断，条件成立重复执行2.1内容，直到条件不成立。条件不成立执行2.2所述内容。

//结论：根据以上理解，尝试用其它方法来写for循环
-----------------------------------------------------------------------------------------------------------------------------
var i = 0;
for(; i < 10;){
    console.log(i);
	i++;
}
//Print result：0 - 9
Explanation：如上

代码演示：for循环之while的写法

//结合上文，就可以顺理成章的把while给理解
var i = 0;
while(i < 10){
    console.log(i);
    i++;
}
//Print result：0-9
Explanation：如上

代码演示：while和for死循环

//公共部分，变量声明
var i = 0;
-----------------------------------------------------------------------------------------------------------------------------
while(1){
    console.log(i);
    i++;
}
//Print result：0 1 2 3 .....n
Explanation：while循环条件一直成立，重复执行，就变成了死循环。

for(;1;){
    console.log(i);
    i++;
}
//Print result：1 2 3 .....n
Explanation：for循环条件一直成立，重复执行，就变成了死循环。

代码演示：死循环之另辟蹊径

//在控制台中，打印1-10，不能用break return 等；
var i = 1;
for(; i ;){
    console.log(i);
	i++;
	if(i == 11){
        i = 0;
        //break;
        //return;
    }
}
//Print result：1 2 3 4 5 6 7 8 9 10
Explanation：在本例for循环中，在得到预计的结果后，增加了if判断，并促使for循环中的条件表达为false，来达成我们想要的结果。

代码演示：加深理解之从0累加，加到什么时候总和是小于100；

var sum = 0;
for(var i = 0;i < 100;i++){
    sum += i;	
    //console.log(i,sum); 如果放在这里，会出现预计的结果不一样，逻辑推导一定要细致
    if(sum >= 100){
        break;
    }
	console.log('累加次数：' + i + ' ' + '累加值：' + sum);
}
//Print result：结果太长，不写。
Explanation：在本例for循环中，先初始一个变量 sum，用来接收i的总和的结果。然后，正常写for循环小括号里的内容，在大括号中，用sum += i赋值运算，得到每次循环中i的总和。在用if判断分支语句，判断i的总和是否大于等于100，如果条件不成立，则继续向下执行打印每次i和sum的值，直至条件成立，则用break跳出整个for循环语句。
这里注意，如果console.log放在sum += i;语句后面，则会出现14 105的结果，因为按照逻辑推导步骤，是先计算i的总和后，在按顺序判断sum的和是否小于等于100，并进行打印。如果顺序反了，就会出现14 105的结果。

代码演示：加深理解之打印从0到100以内得数，并跳过可以被7整除或个位数是7得数；

for(var i = 0;i <= 100;i++){
    if(i % 7 == 0 || i % 10 == 7){
       //这里为空
    }else{
     console.log(i);
    }
}
//Print result：结果太长，不写。
Explanation：没什么好讲的，就是 i % 10 = 7 和else的时候，卡了一下壳。脑子和手还是要多练，编程是一门手艺活，需要多想多练。

代码演示：使用`continue;` 重构上一段代码；

在 JavaScript 中，continue 语句用于跳过当前循环的一次迭代，并继续执行下一次迭代。

for(var i = 0; i <= 100 ; i++){
    if(i % 7 == 0 || i % 10 == 7){
        continue;
    }
    console.log(i);
}
//Print result：如上
Explanation：没什么好讲的，无非就是新增了一个continue指令。

代码演示：加深理解之打印从0到100以内可以被4，5，6同时整除得数；

//要同时满足被 4 5 6整除为0
for(var i = 0; i <= 100; i++){
    if(i % 4 == 0 && i % 5 == 0 && i % 6 == 0){
        console.log(i)
    }
}
//Print result：0 60
Explanation：没什么好解释的，这里主要就是用到了逻辑与(&&)运算，算是锻炼手艺。

代码演示：加深理解之打印从0到100以内可以被4，5，6任意一个数整除得数；

//只要满足被 4 5 6 任意一个数整除为0
for(var i = 0; i <= 100; i++){
    if(i % 4 == 0 || i % 5 == 0 || i % 6 == 0){
        console.log(i)
    }
}
//Print result：结果太长，直接运行下就知道了。
Explanation：没什么好解释的，这里主要就是用到了逻辑或(||)运算，算是锻炼手艺。

代码演示：加深理解之打印0-99的数 for循环()中只能有一句表达式，不能写比较，{}不能出现i++ i--；

//第一段代码，是钻了上面语义的漏洞，没什么意义
var i = 0;
for(;;i++){
    if(i <= 99 ){
        console.log(i);
    }else{
        break;
    }
}
//Print result：//Print result：0-99
Explanation：没什么好解释的。

//这段代码，才是对上面的需求，正确理解
var i = 100;
for(;i--;){
    console.log(i);
}
//Print result：99-0
Explanation：这里主要是理解两个知识点：
1、在for循环中条件表达式的理解以及灵活运用；
2、后置型自减。

代码演示：加深理解之打印10得N(5)次方；

var n = 1;
for(var i = 0; i<=5; i++){
    n *=10;
    console.log(n);
}
//Print result：100000
Explanation：没有什么好解释得，如果一定要解释得话，就是 n *=10,等价与 n = 1 * 10,其他运算符也是如此。

//最简单的办法
const result = 10 ** 5;
console.log(result);

代码演示：加深理解之打印5的阶乘；

var a = 1;
for( var i = 1; i <=5 ; i++){
    a *=i;
    console.log(i,a);
}
console.log(a);
//Print result：结果有点长，不写。
Explanation：没什么好解释，运算这块，在上一个例子解释中有说明。如果实在要进行解释，就是阶乘基数为1，如果为0，0*0等于0，就没鸟用了。

其它代码演示：加深理解之实现789从后到前的位置调换；

var swap = 789;
var a =  swap % 10;
var b = (swap - a) % 100 /10;
var c = (swap - a - b * 10) /100;
console.log("" + a + b +c);
//Print result：987
Explanation：数学应用，其中，console中的小括号，使用了空字符串相加的小技巧，来实现数字之间的拼接。

其它代码演示：加深理解之打印三个数中最大的值；

var a = 3,
	b = 7,
	c = 10;
if(a > b){
    if(a > c){
        console.log(a);
    }else{
        console.log(c);
    }
}else{
    if(b > a){
        if(b > c){
            console.log(b);
        }else{
            console.log(c);
        }
    }
}
//Print result：10
Explanation：在本例中，使用if判断分支语句，逐个进行比较，其实没什么好说的，只要逻辑条理清晰，一步一步去做，没什么难得。无非就是锻炼下脑子。

代码演示：加深理解之打印100以内得质数；

var c = 0;
for (var i = 2; i < 100; i++) {
    for (var j = 1; j <= i; j++) {
        if (i % j == 0) {
            c++;
        }
    }
    if (c == 2) {
        console.log(i);
    }
    c = 0;
}
这个得细品

鸡肋之do while，目前得认知

do{
    执行语句;
}while( 条件 )
特点：先执行后判断条件是否成立。

二：引用值

array object function date RegExp

array ---> 数组

object ---> 对象

代码演示：数组 array 初步认识

var arr =[1, 2, 3, 4, 5, 6, 7, undefined, null];
console.log(arr[0]);
//从数组中取值，可以通过数组索引方式(下标)获取。从0开始，一一对应。
arr[3] = null;
//arr数组下标为3的值，重新赋值。
console.log(arr[3]);
//打印arr数组下标为3的值
console.log(arr.length);
//arr.length 打印数组长度

//遍历一维数组(打印数值内的所有值)
for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

代码演示：对象 object 初步认识

var animal ={
    name: '狗子',
  //属性名/键名：属性值/键值，
    age: '5',
    lenght: '1.2cm',
    weight: '80'
}
	animal.name = '旺财';
  //重新赋值
	console.log(animal.name);
  //使用属性名，打印相应的属性值

三：typeof 类型识别

typeof 类型识别，js内置方法。

typeof方法的两种书写格式：

1、typeof(variable/Value) typeof(变量/值)

2、typeof variable/value typeof 变量/值

typeof 可识别的类型：number string boolen object undefined function

Object ---> 引用类型 object--->指具体的引用类型(如：对象、数组等)

代码演示：typeof 各种数据类型的范例

console.log(typeof(123)); //number 数值
console.log(typeof('abc')); //string 字符串
console.log(typeof(true)); //boolean 布尔

console.log(typeof({}));//Object 对象 空对象
console.log(typeof([]));//Object 对象 空数组

console.log(typeof(null));//Object 对象，历史遗留问题
//历史遗留问题：Null是一个BUG，创造Null的时候，是为了指定空对象的指针，也是空对象的占位符。

console.log(typeof(undefined));//undefined
console.log(typeof(function(){}));//function

console.log(typeof(1-1));//number
console.log(typeof(1-'1'));//隐式类型转换：字符串1会自动转换为数值类型，在进行运算,然后在使用typeof进行类型检查

console.log(a);//报错，a 未被定义
console.log(typeof(a));//undefined

console.log(typeof(typeof(a)));
console.log(typeof(typeof(123)));
//string
//嵌套内的typeof后的值，在次被typeof后，一定是string，因为是解析的是名称，而不再是原有的类型定义

四：显式类型转换/隐式类型转换

显式类型转换

代码演示：Number()函数之显示类型转换

//Number()方法，转换数据类型
----------------------------------------------------------------------------------------------------------------------------
//字符串(String)转换数值类型
var a = '123'; //纯数值字符串类型
console.log(typeof(Number(a)) + '-' + Number(a));//number-123

var a = '3.14';//纯数值字符串类型
console.log(typeof(Number(a)) + '-' + Number(a));//number-3.14

var a = 'true';//非纯数值字符串类型
console.log(typeof(Number(a)) + '-' + Number(a));//number-NaN 非数

var a = 'a';//非纯数值字符串类型
console.log(typeof(Number(a)) + '-' + Number(a));//number-NaN 非数

var a = '1a';//非纯数值字符串类型
console.log(typeof(Number(a)) + '-' + Number(a));//number-NaN 非数
----------------------------------------------------------------------------------------------------------------------------
//布尔(Boolean)类型转换数值类型
var a = true;
console.log(typeof(Number(a)) + '-' + Number(a));//number-1

var a = false;
console.log(typeof(Number(a)) + '-' + Number(a));//number-0
----------------------------------------------------------------------------------------------------------------------------
//特殊类型转换数值类型
var a = undefined;
console.log(typeof(Number(a)) + '-' + Number(a));
//number-NaN 非数 因为undefined在JavaScript中的定义是:表示一个未被定义的变量，所以不能转换为数字
var a;
console.log(a); //打印的结果为undefined，由此可以验证上面的解释

var a = null;
console.log(typeof(Number(a)) + '-' + Number(a));
//number-0 null，在JavaScript中的定义：表示一个空值，所以使用Number()进行转换，可以是0

代码演示：parseInt与parseFloat函数之显示类型转换

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。

radix，选填，默认为十进制，但是基数将会根据字符串的值进行推算。注意，推算的结果不会永远是默认值 10！。

parseInt() ---> 将传入的数据当作字符串来处理，从左至右提取数值，一旦遇到非数值就立即停止。此时还没有提取到数值，就返回NaN。

parse 表示“转换”，Int 表示“整数”。

parseInt 返回一个整数，而 parseFloat 返回一个浮点数。

roles(作用)：在现实生活中，我们经常会有带有单位的值，例如 CSS 中的 "100px" 或 "12pt"。并且，在很多国家，货币符号是紧随金额之后的，所以我们有 "19€"，并希望从中提取出一个数值。这就是 parseInt 和 parseFloat 的作用。

//parseInt(string,)
var a = '123';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-123

var a = '   123  ';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-123 自动去除前后空格

var a = '077';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-77 前面的0会被自动忽略

var a = '3.14';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-3 忽略.后面的任何值，因为.不是数值

var a = '3.99';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-3 同上，也就不会四舍五入

var a = 'abc';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN 因为是非数值

var a = '124cd4';
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-124 按照顺序提取数值，遇到非数值及停止并返回

var a = true;
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN

var a = false;
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN

var a = null;
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN

var a = undefined;
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN

var a = NaN;
console.log(typeof(parseInt(a)) + '-' + parseInt(a));//number-NaN
----------------------------------------------------------------------------------------------------------------------------
/**
*	parseInt(string, radix)
*	parseInt(a,10) parseInt(a,2) parseInt(a,8) parseInt(a,16) 
*	  10 = 十进制     2 = 二进制     8 = 八进制     16 = 十六进制
*	如果省略了radix, JavaScript将假设基数为10。如果值以“0x”开头，JavaScript假定基数为16。
*	个人理解：无论第二个参数，是多少进制，输出的值都是十进制，也可以理解为转换为十进制。
*/

//二进制
var a = 01;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,2));//number-1 二进制01转换成十进制为1

var a = 10;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,2));//number-2 二进制10转换成十进制为2

var a = 11;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,2));//number-3 二进制10转换成十进制为3

var a = 100;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,2))//number-4 二进制100转换成十进制为4


//八进制 10_8(八进制数学写法，十进制为8)
//数学转换公式 125_8 = 1 * 8^0 + 2 * 8^1 + 5 * 8^2 = 1 + 16 + 320 = 337 
var a = 10;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,8));//number-8 八进制10转换成十进制为8

var a = 11;
console.log(typeof(parseInt(a)) + '-' + parseInt(a,8));//number-9 八进制11转换成十进制为9


//十六进制 A_16(十六进制数学写法，十进制为10)
//数学转换公式 125_16 = 1 * 16^0 + 2 * 16^1 + 5 * 16^2 = 1 + 32 + 1024 = 1057
//0 1 2 3 4 5 6 7 8 9 A B C D E F(A代表十进制中的10，以此类推)
var a = 'a';
console.log(typeof(parseInt(a)) + '-' + parseInt(a,16));//number-10 十六进制a转换成十进制为10

var a = 'b';
console.log(typeof(parseInt(a)) + '-' + parseInt(a,16));//number-11 十六进制a转换成十进制为11


/**
*	parseFloat()作用将字符串转换为浮点数。parseFloat()和 parseInt()的作用类似。
*/
var a = '31.14$';
console.log(typeof(parseFloat(a)) + '-' + parseFloat(a));//number-31.14

var a = '31.14.14$';
console.log(typeof(parseFloat(a)) + '-' + parseFloat(a));//number-31.14 遇到第二个.就会被忽略该字符以及之后的所有字符包括数值

代码演示：String(字符串类型转换) String()与toString()

//String
console.log(String(123));
console.log(typeof(String(123)));
//123 
//string 验证上一步，结果成立

//toString 同parseInt一样，后面也有radix，radix可以是 2, 8, 16.现在只需要知道。

var a = undefined;
console.log(a.toString());

var a = null;
console.log(a.toString());
//会报错，只有undefined和null没有这个toString方法。

var a = NaN;
console.log(a.toString());
console.log(typeof(a.toString()));
//NaN
//string

代码演示：Boolean(布尔类型转换)

var a = 1;
console.log(Boolean(a));//true

//boolean undefined null NaN false '' "" 0 都为false，其它都为true
var a = null;
console.log(boolean(a));//flase

隐式类型转换

隐式类型转换，就是偷偷转换。

代码演示：常规范例

var a = '123'; 
a++;			 //此处进行了隐式类型转换
console.log(a);	 //124

var a = 'a' + 1; //此处1进行了隐式类型转换，转换成字符串，在用 + 连接符拼接
console.log(a);  //a1

var a1 = 2 > 1 > 3;  // 2 > 1 比较结果true，true隐式转换 结果为1，1 > 3 比较结果false。
var a2 = 2 > 1 == 1; // 2 > 1 比较结果true，true隐式转换 结果为1，1 == 1 比较结果true。
console.log(a1,a2);
//Print result：false，true

var a1 = undefined > 0,
	a2 = undefined < 0,
	a3 = undefined == 0,
	b1 = null > 0,
	b2 = null < 0,
	b3 = null == 0,
	c1 = undefined == null,
	c2 = undefined === null; //严格相等为false，不是一个数据类型
console.log(a1,a2,a3,b1,b2,b3,c1,c2)
//Print result：false，false，false，false，false，false，true,false
Explanation：(undefined/null)与其他值进行比较都为false，与自身比较则为true,且与对方进行相等比较也为true，但严格相等为false。

var num1 = 'abc';
var num2 = '123';
console.log(typeof(+num1) + ':' + (+num1) + '|' + typeof(-num2) + ':' + (-num2));
//Print result:number:NaN|number:-123
Explanation:由此可见，在字符串前面加上 + - 两个符号，也会进行数值类型转换。

isNaN()函数之隐式转换

isNaN函数在判断值是否为非数时，会进行隐式转换，可以理解为: isNaN(value) 等价与 Number(value)

console.log(isNaN(NaN));		//true  
console.log(isNaN(123));		//false 数值类型，当然为false
console.log(isNaN('123'));		//false 纯数值字符串类型，所以为true
console.log(isNaN('a'));		//true  非纯数值字符串类型，当然为NaN,所以为false
console.log(isNaN(true));		//false 布尔(boolean)类型,true,隐式转换结果为1,所以为false
console.log(isNaN(false));		//false 同上
console.log(isNaN(null));		//false 根据Number(null)，得出的结果，所以为false
console.log(isNaN(undefined));	//true	字面意思，undefined，未被定义的变量，所以为true，也可以用Number()，得出为true的结论

JavaScript学习笔记3

Three

一：循环语句

for循环结构

代码演示：分解for循环

代码演示：for循环之while的写法

代码演示：while和for死循环

代码演示：死循环之另辟蹊径

代码演示：加深理解之 从0累加，加到什么时候总和是小于100；

代码演示：加深理解之 打印从0到100以内得数，并跳过可以被7整除或个位数是7得数；

代码演示：使用continue; 重构上一段代码；

代码演示：加深理解之 打印从0到100以内可以被4，5，6同时整除得数；

代码演示：加深理解之 打印从0到100以内可以被4，5，6任意一个数整除得数；

代码演示：加深理解之 打印0-99的数 for循环()中只能有一句表达式，不能写比较，{}不能出现i++ i--；

代码演示：加深理解之 打印10得N(5)次方；

代码演示：加深理解之 打印5的阶乘；

其它代码演示：加深理解之 实现789从后到前的位置调换；

其它代码演示：加深理解之 打印三个数中最大的值；

代码演示：加深理解之 打印100以内得质数；

鸡肋之do while，目前得认知

二：引用值

代码演示：数组 array 初步认识

代码演示：对象 object 初步认识

三：typeof 类型识别

代码演示：typeof 各种数据类型的范例

四：显式类型转换/隐式类型转换

显式类型转换

代码演示：Number()函数之显示类型转换

代码演示：parseInt与parseFloat函数之显示类型转换

代码演示：String(字符串类型转换) String()与toString()

代码演示：Boolean(布尔类型转换)

隐式类型转换

代码演示：常规范例

isNaN()函数之隐式转换

代码演示：加深理解之从0累加，加到什么时候总和是小于100；

代码演示：加深理解之打印从0到100以内得数，并跳过可以被7整除或个位数是7得数；

代码演示：使用`continue;` 重构上一段代码；

代码演示：加深理解之打印从0到100以内可以被4，5，6同时整除得数；

代码演示：加深理解之打印从0到100以内可以被4，5，6任意一个数整除得数；

代码演示：加深理解之打印0-99的数 for循环()中只能有一句表达式，不能写比较，{}不能出现i++ i--；

代码演示：加深理解之打印10得N(5)次方；

代码演示：加深理解之打印5的阶乘；

其它代码演示：加深理解之实现789从后到前的位置调换；

其它代码演示：加深理解之打印三个数中最大的值；

代码演示：加深理解之打印100以内得质数；