第一部分 变量及基础数据类型
一、引入js文件及变量
1、外部引入js：body最后一行上输入：，内嵌式：在内输入： js代码
2、注释：单行注释：//内容 多行注释：/* 内容 */ 快捷键：ctrl + /
3、输入输出：prompt(msg,defaultText); msg可选。要在对话框中显示的纯文本。defaultText可选。默认的输入文本。
使用 window.alert() 弹出警告框。
例：alert("你输入的年龄是：" + prompt("请输入年龄：") + "岁！");
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
4、变量：JS使用 var 来定义变量， 使用等号来为变量赋值。var i = 1;
不声明直接赋值使用，可以正常使用，并以赋值的数据为数据类型。只声明不赋值，变量为undefined类型。不声明不赋值直接使用，not defined,会报错（但是直接使用name则不会报错，最好不要用name直接作为变量名）。最好是既声明也赋值使用。
5、变量命名规范：严格区分大小写、建议遵守驼峰命名法，首字母小写，后面单词首字母大写。不能是关键字。
6、数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(独一无二的值)
对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）
String:字符串里包含引号时，需要用外双内单或外单内双的方式。转义字符：\'单引号" \"双引号 \\反斜杠 \n换行 \r回车 \t tab(制表符) \b空格符 \f换页符
Number：数字前面加0，表示八进制。0x开头为十六进制。Number.MAX_VALUE,Number.MIN_VALUE, js的最大值及最小值常量。
Infinity无穷大， -Infinity无穷小，NaN非数值（not a number的意思），例如："pink老师" - 100就是一个NaN，因为字符串跟数值不能相减。
Boolean：参与数值运算时，true为1,false为0;false+1结果为1， true + "aaa" 结果为"trueaaa"
undefined + 1 结果为NaN undefined + "aaa" 结果为"undefinedaaa"
null + 1 结果为1，NaN+1结果为NaN，
7、常用函数：isNaN(参数) 如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
str.length 返回字符串长度；typeof 参数; 返回参数类型；注意：typeof null;返回的是object；typeof object;返回的是function
字符串连接 + ；字符串+字符串等于新字符串，字符串+数值，也是字符串，数值+数值等于数值。
8、数值转换为字符串：使用+号拼接字符串（最重要）：num=1; num+"";则num转换成字符串。 num.toString(); String(num);
9、其它数据转为数值：parseInt(string)转为整数，截掉小数取整，去掉后面字母取数值，但不能去掉前面或中间字母，否则结果为NaN;
parseFloat(string)转为浮点数型; Number(); -号 *号 ，减0乘1
10、其它数据转为布尔型：Boolean(参数); 代表空、否定的值（''空字符串，0，NaN，null，undefined）会转换为false，其它的值会转为true。
第二部分 运算符
一、运算符： + - * / %（取余 9%2=1，3%5=3），先小括号，再乘除，后加减。
二、递增递减：++num，--num：num=num+1；先自加再返回值。num++，num-- ；先返回值再自加（常用）。（单独使用时没分别）
三、比较运算符：> < >= <= ==（字符串与数值对比时，会把字符串的转换为数字型） != === !==(全等，要求数据类型及值都全部一样)
四、逻辑运算符：1、&&与 ||或 !非；多个或混合逻辑运算时，先括号，再从左到右。
2、当有多个表达式（值）时，左边表达式值可以判断结果时，不再继续运算右边。（短路运算，逻辑中断）
3、返回值：逻辑运算的时候，返回的不一定是true或false，是能判断结果的表达式的值, alert(123 &&456)输出456，一般与运算中，如果是true,则返回最后一个表达式值，如果是false，则返回第一个假值的表达式运算后的值。或运算，如果是true，返回第一个直值表达式运算后的值，如果是false，则返回最后一个表达式的值。num=0;alert(123 || num++);输出123，此时num没有++，还是等于0；
五、赋值运算符：= += -= *= /= %= ； var a=10; a+=5;则代表a=a+5;即结果为a=15;
六、运算符优先级：括号 > 一元运算符（++ -- !） > 算数运算符(先* / %后+ -) > 关系运算符(< >= < <=)
> 相等运算符(== != === !==) > 逻辑运算符（先&&后||） > 赋值运算符= > 逗号运算符,。
第三部分 流程控制
一、分支：
1、if(条件){语句;} 语句后面有; 大括号后面没有; 条件不为''空字符串，0，NaN，null，undefined，则执行代码。
2、if(条件){语句} else{语句} 判断闰年：var i = prompt('请输入年份'); if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) { alert("闰年");} else { alert("不是闰年。"); }
3、多条件分支语句：if(条件1){语句1;} else if(条件2){语句2;} else if(条件3){语句3;} else{语句4;}
4、三元表达式：var i=5>3 ? "是的" : "不是"; 如果条件表达式为假，返回表达式2的值，如果为真返回表达式1的值。
5、swith分支：swith(条件){case value1:语句1;break;case value2:语句3;break;case value3:语句3;break;default:语句4;}
条件与value必须是类型数值全等===，否则全部去了default，注意prompt录入的是字符串必须经过转换才能与数值case对比。
匹配成功后，如果没有break则后面的语句不管是否匹配，一样会正常执行。
js的swith里的case没有范围可选，也不能设定表达式，只能是一个值，实际使用没有if else作用大。
二、循环：
1、for循环：var j=0; for(var i=1;i<=100;i++){j+=1;} alert(j); 注意 ; 符号位置。
2、while循环：var j=0, i=1; while(i<=100){j=j+i;i++;} alert(j); 注意要有i++;跳出循环条件。
3、do while循环：do {x=prompt("你爱我吗？")} while(x!="我爱你") 先执行一次，再进行判断。
4、continue：立刻跳出当前循环，本次循环后面的代码不执行，继续下一次循环。
var j=0; for(var i=1;i<=100;i++){if(i%2==0) {continue;} j+=i;} alert(j);100内奇数和。
5、break：立即跳出整个循环。当前循环后面的代码全部不再执行。
第三部分 数组、函数、作用域、预解释
一、数组：
1、利用new创建数组：创建空数组var arr = new Array(); 创建包含5个元素的数组var arr = new Array(5);但是每个元素也没有数据。但是如果是：var arr = new Array(2 , 3); 则等价于 var arr = [2,3]; 创建了一个数组，里面有2个元素，是2和3.
2、利用字面量创建数组：var arr = [1,2,'pink老师',true,]; 注意要用逗号分隔。数组使用前必须先创建，可以是空数组。var arr=[];
3、获取数组元素：arr[0]，索引号从0开始，如果访问超标，则结果是undefined。如上面alert(arr[4]);则是超标，返回undefined。
4、遍历数组：for(var i=0;i<10;i++){arr[i]=prompt("请输入名称");alert("你输入的名称是"+arr[i]);}
5、数组长度：arr.length，数组最后一个数值为arr[arr.length-1]，如果数组要新增一个值，可以直接用arr[arr.length]="aaa";
6、修改数组：arr.length=7; 这样可以修改数组长度，但实际上js数组可以直接不断增加。arr[20]="fafa"，中间没有的直接为undefined。
7、数组输出或复制：alert(arr); 这样可以将arr数组的数据全部显示出来。如果直接对arr进行赋值，例如arr="fafafa";则arr变成字符串数组。每一个元素等于一个字符。如果arr=23，则arr成为普通变量，arr[0]及后面都是undefined。
二、函数：
1、声明函数：function fn(形参1,形参2,形参3){语句;} 小括号里用逗号，形参变量在函数内无需再声明，直接使用。
2、匿名函数声明方式：var fn = function(形参){语句;} fn是变量名，不是函数名。代表了这个变量储存了一个函数，也叫函数表达式。
3、调用函数：fn(实参1,实参2,实参3); 调用时sum=fn(实参1,实参2);调用方法一样。
4、形参实参匹配：A.实参个数多于形参个数，多出的实参忽略。B.实参个数少于形参个数的，多出形参为undefined，如果函数是数值运算，则返回NaN，如果是字符运算，则连接为undefined。C.形参没有指定数据类型，以实参传过来的类型为准。类型不符的则自动转化再进行函数内的操作运算，如果要保证不发生错误，最好是在函数内进行数据类型判断并处理。
5、函数返回：如果要有返回值，则函数内须有return 返回值; 函数内遇到return的，即时终止函数，后面的语句不再执行。return一次只能返回一个值，如果要返回多个值，必须在函数内使用数组返回，return arr; 或 return [num1,num2,num3,num4...]。如果函数没有return，则返回undefined。
6、arguments对象：是一个伪数组（有数组的length属性，可按arguments[0]，arguments[2]这样的顺序读取，但没有数组的pop(),push()方法），它存储了所有实参。如果不知道或不能确定实参的个数，可是在建立函数时不写形参：fn(){在函数内对arguments伪数组进行遍历使用};
三、作用域：变量在某个范围内起作用
1、全局变量：变量在整个script标签里，或在一个单独的js文件内的全部代码范围都能使用。注意：在函数内没有用var声明的，也是全局变量。
2、局部变量：变量只能在函数内部使用，也称函数作用域。局部变量。注意：函数形参也是局部变量。
3、执行效率：全局变量只有在浏览器关闭时才会销毁，比较占内存。局部变量在所在函数的代码块执行完毕就会销毁。
4、块级作用域：即在代码块的大括号内声明并使用的变量，if(){var i; i=i*i;}。js是没有块级作用域的。
5、作用域链：使用多层函数时，内部函数能使用外部函数）的变量（一层一层往上找，以最近一层的变量为准），但是外部函数不能使用内部（下层）函数的变量。
四、预解释：js的运行机制
1、预解释：js引擎运行js时分两步，先预解释，再执行代码。预解释时，js引擎会将js文件里所有的var , function提升到当前作用域的最前面。预解释后，再按照代码的书写顺序从上往下执行。
2、变量预解释：把所有变量声明 var 提升到当面作用域最前面，但只提升声明，不赋值，变量使用在变量声明及赋值语句后面的话，就是undefinde，即未定义任何内容，也就是函数表达式的调用，必须写在函数表达式声明的原因。
3、函数预解释：把所有函数声明 function 提升到当面作用域最前面，但只提升声明，不调用函数，函数调用语句不管放在函数声明前或后，都可以正常使用。
4、例1：var n=10; fn(); function fn() { alert(n); var n=20; } 结果为：undefined var n=20;会在函数内变量提升，变成var n; alert(n); n=20;导致n为未赋值使用的状态。
5、例2：var n=10; fn(); function fn() { alert(n); var n=20; alert(n); } 结果为：undefined 20
6、例3：fn(); alert(b);alert(a); function fn() {var a=b=9; alert(b);alert(a);} 结果： 9 9 9 error:a is not defined(未定义未赋值就使用)
注意：var a=b=9; 相当于var a=9; b=9; 不是var a=9; var b=9; b没有var声明，在函数内直接赋值，是全局变量！
第四部分 对象
一、创建并调用对象：
1、对象解释：是一组无序的相关属性和方法的集合，由属性是特征（名词），方法是行为（动词）。
2、创建对象1：var obj = {username:'fafafa' , age=45, sayHi = function(){alert('Hi'); } } 有属性有方法（匿名函数）的对象。键值对，用逗号分隔。
3、使用对象： myname=obj['age'] 注意引号; myname=obj.username; 调用对象方法：obj.sayHi(); 就象使用函数一样。
var arr = 'Cbcoefoxyozzopp'; //判断字符串中每个字符的出现的次数
// var o = {}; 两个方法都可以。
var o = new Object;
for (var i = 0; i < arr.length; i++) {
var chars = arr.charAt(i);
if (o[chars]) { //重点，对象属性是否存在的检测方法。
o[chars]++; //只能使用['']这种方式，使用obj.usename方式无法实现。
} else {
o[chars] = 1;
}
}
console.log(o);//alert(o)无法直接输出对象，需要用for in 循环逐个输出。
4、创建对象2：var obj=new object;obj.username='fafafa' ; obj.age=45; obj.sayHi = function(){alert('Hi'); }
5、对象构造函数：function 构造函数名() {this.属性 = 值; this.方法 = function() { 语句;} }
6、例： function Star(username, userage, usersex) { this.name = username; this.age = userage; this.sex = usersex; this.sing = function(song) { alert(song); } 构造函数名字首字母最好用大写，不需要return返回值。//属性这里的name不一定要跟形参名称相同， 但是属性值这里一定要填写形参名称。注意：实际调用时，必须是函数内的属性及方法名称，不是传递的形参名称！！！Star.name/ Star.age/ Star.sex.Star.sing('this is a new song.')
7、构造函数创建对象及调用：使用var ldh = new Star('刘德华',18,'男'); alert(ldh.name); alert(ldh.sex);ldh.sing('a song;');
8、构造函数泛指某一类，相似于java及VB的类（class），对象是一个具体的事物，创建对象过程，也称为对象的实例化。new关键字实际是创造了一个空的对象，this就会指向创建的空对象，然后执行构造函数里的代码，给这个空对象添加属性和方法。最后返回这个对象给 var声明的变量名称。即：var ldh = new Star('刘德华',18,'男'); 里的ldh。
9、遍历方法：for(var k in ldh){alerk(k);alerk(ldh[k]);} k不用赋值，随便设一个名称。直接输出k，是对象的全部属性名，ldh[k]属性值。注意不能用ldh.k这种方式，只能用ldh[k]。另外，遍历的是实例化的对象ldh，不是类名Star，即不能是for(var k in Star)。
二、内置对象：
1、js对象：自定义对象，内置对象，浏览器对象。内置对象是js语言自带的一些对象，以提供给开发者使用一些常用或基本的功能。
2、MDN文档：https://developer.mozilla.org/zh-CN/
3、Math：不是一个构造函数，使用时不用new创建。例：i = Math.max(1,99,3); 结果为i等于99. Math.PI圆周率,Math.floor()向下取整,Math.ceil()向上取整,Math.round()四舍五入,Math.abs()绝对值,Math.max()最大值,Math.min()最小值。
4、random()：随机获得一个从0~1之间的小数，即 [ 0 , 1 )，这种称为左闭右开区间，即 0 <=x <1，从0到1，但不包括1。例，要得到两个数之间的随机整数，并且包含这2个整数。function getRandom(min,max) {return Math.floor( Math.random() * (max-min+1)) +min;} 这个函数实际工作中很常用。
5、日期函数：构造函数，必须用new创建。var date1=new Date(); date()系统当前时间。带参数有两种写法：最常用var date1=new Date('2022-3-31 8:8:8') ; 或不常用var date1=new Date(2022,3,31) ;这个会比实际时间要大。
6、其它日期函数：年date.getFullYear() 月date.getMonth()要加1才对 ，日 date.getDate() 星期日0~星期六7 date.getDay() ；时 date.getHours() 分date.getMinutes() 秒date.getSeconds()
7、日期格式化：var date=new Date(); var week=['星期日','星期一','星期二','星期三','星期四','星期五','ak期六']; alert("今天是：" + date.getFullYear() + "年" + date.getMonth()+1 + "月" + date.getDate()+"日 "+ week[date.getDay()] );
8、从1970-1-1到现在过了的毫秒数（时间戳）：最常用：var date = +new Date(); H5新支持最简短：Date.now(); 或 date.valueOf() 或 date.getTime() 都可以。时间戳是独一的，很多地方有作用。
9、倒计时案例：
function countDown(time) { //倒计时标准案例，重要。
var nowTime = +new Date();//返回70年1月1日到当前时间的总毫秒数
var inputTime = +new Date(time);//返回70年1月1日到用户输入时间的总毫秒数
var times = (inputTime - nowTime) / 1000;//得出剩余时间的总秒数
var d = parseInt(times / 60 / 60 / 24); //得出剩余天数
var h = parseInt(times / 60 / 60 % 24); //得出剩余小时数
var m = parseInt(times / 60 % 60); //得出剩余分钟数
var s = parseInt(times % 60); //得出剩余秒数
return d + "天" + h + "时" + m + "分" + s + "秒"; //格式化
} alert(countDown('2022-4-2 23:00:00'));
二、数组对象：
1、数组翻转： 翻转：arr.reverse();
2、数组排序：arr.sort( function(a,b) {return a-b;} );固定用法，使用冒泡升序排序，如果修改为function(b-a)，则为降序排序。
2、判断是否数组：方法1：instanceof 这个是一个运算符，跟加减号一样的。var arr=[]; alert(arr instanceof array); 输出 true.
方法2：var arr=[]; alert(Array.isArray( arr ));输出 true. 较方便，这个是H5新增方法。
3、数组未尾添加元素：push(参数1......); 例： var arr[1,2,3]; arr.push(4); arr.push(5,'fa',true); push操作后，会返回新数组的长度。var n=arr.push(7); 则arr的元素为：1,2,3,4,5,'fa',true,7 ,长度为8个。
4、数组前面添加元素：unshift(参数1, 参数2......) ; 操作跟push一样。
5、数组末尾删除元素：pop(); 例：var arr[1,2,3]; arr.pop(); 没有参数，一次只能删除一个元素。操作后会返回删除的那个元素的值。
6、数组前面删除元素：shift(); 例：var arr[1,2,3]; arr.shift(); 操作跟pop一样。
7、获取数组元素索引：var arr=['red','green','blue','pink']; alert(arr.indexOf('blue')); 结果为2；从前面开始查找，找到的返回索引号，找不到的返回-1，多个相同值的，只返回第一个的索引号。 lastIndexOf(); 这个是从后往前找。如果在indexOf加上第二个参数，即为从第几个开始查找：var arr=['red','green','blue','pink','green']; alert(arr.indexOf('green',2)); 结果为4
8、数组去重：
var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
} } return newArr;
} alert(unique(arr));
9、数组转换为长字符串：方法1：var arr=[1,2,3]; alert(arr.toString()); '1,2,3' 方法2：var arr=['blue','green','pink']; alert(arr.join()); 结果blue,green,pink alert(arr.join('&')); 结果blue&green&pink
10、数组连接：concat() 连接两个或多个数组成为一个数组。
11、数组截取：splice(从第几个开始, 要删除个数)，操作后返回一个新数组，会影响原数组。slice(begin,end) 截取一部份成为新数组。
第五部分 基本包装类型
一、基本包装类型：
1、把简单数据类型，包装成复杂数据类型：var str='andy'; alert(str.length);为什么简单数据类型会有length属性呢？
2、var temp = new String('andy'); 把简单数据类型声明（包装）成为复杂的数据类型。
3、str = temp; 把临时变量的值给str；temp = null; 销毁这个临时变量，最后str 这个简单数据类型就拥有了属性。
二、字符串对象：
1、字符串的不可变：指的是字符串里面的值不可变，所以不要大量的拼接字符串。
2、字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串，即指向一个新开辟的内存空间。
3、根据位置返回字符1：charAt(index); 例：var str=['andy']; a = str.charAt(3);则a等于y 。常用于字符串的遍历。
4、根据位置返回字符2：str[index]，例：a = str.str[3]; a等于y 。这个是H5新增的功能，跟charAt 一样。
4、返回相应索引号字符的ASCII码：str.charCodeAt(0); 结果为97； 常用于判断用户按下了那个键。
5、字符串拼接：concat(str1,str2,str3...) 等效于 +
6、字符串截取1：substr(起始位置索引号,截取长度) ，重点
7、字符串截取2：str.slice(起始位置索引号，结束位置索引号)，结束位置这个字符取不到，可以接受负值。
8、字符串截取3：str.substring(起始位置索引号，结束位置索引号)，结束位置这个字符取不到，不可以接受负值。
9、字符替换：str.replace('被替换的字符' , '替换为的字符') 不能替换字符串，且只会替换第一个字符。
10、字符串转换为数组：str.split('分隔符号') 这个跟之前的join()数组转换为字符串刚好相反。
三、
1、简单数据类型：又叫基本数据类型，存储变量中存储的是值本身，所以也叫值类型，包含string,number,boolean,undefined,null（其它数据类型用typeof返回的是它本身，但null比较特殊，typeof返回的是一个object类型，即空对象类型）。
2、复杂数据类型：又叫引用类型，在存储变量中存储的仅仅是地址（引用）。通过new关键字创建的对象，如Object、Array、Date等系统对象及自定义对象。
3、堆栈：
4、简单类型传参：function fn(a){a++;alert(a);} var x=10; fn(x); alert(x); 结果为11，10；简单类型传递参数只传值，不影响原变量的值。
5、复杂类型传参：传递参数传的是指向值的地址，影响原变量的值。
function Person(name) {
this.name = name;
}
function f1(x) {
alert(x.name);//因为将p的地址传给了x，x指向了值为刘德华的地址，所以输出刘德华。
x.name = '张学友'; //新建一个字符串（字符串不可变的），将x的地址指向新字符串。
alert(x.name); //输出张学友。
}
var p = new Person('刘德华');
alert(p.name); //输出刘德华。
f1(p);
alert(p.name); //因为x的地址及p的地址都修改为指向张学友的字符串，所以输出张学友。