|
? ? ? ?这周每天的难度不亚于第一周，果然只有对比才有伤害，每一次抠脑壳的同时也是自我激励，过程很难，但坚持下来一定很酷！！！回顾ing...
1、数据类型转换：
?? ?1、强制类型转换：
?? ??? ?1、转字符串：2种
?? ??? ??? ?1、xx.toString();//undefined和null不能使用，
?? ??? ??? ?2、String(xx);// 不如+""
?? ??? ?2、转数字：
?? ??? ??? ?1、*parseInt(str/num) - 专门用于字符串转为整数的
?? ??? ??? ? ? 执行原理：从左向右依次读取每个字符，碰到非数字字符就停止，不认识小数点，一来就碰到了不认识的，则为NaN
?? ??? ??? ?2、*parseFloat(str) - 专门用于字符串转为浮点数的
?? ??? ??? ? ? 执行原理：几乎和parseInt一致，但是认识第一个小数点
?? ??? ??? ?3、Number(xx);// 不如*1 /1 -0
?? ??? ?3、转布尔：
?? ??? ??? ?Boolean(xx);//万能的，任何人都可以转为一个布尔值，简化版写法：!!xx - 简化版也不会用
?? ??? ??? ?*哪些会为false？6个：0,"",undefined,null,NaN,false，其余的都为true
?? ?2、隐式转换：多半都在运算符之中
2、***运算符和表达式
?? ?1、*算术运算：+ - * / %
?? ? ? 隐式转换：默认，转为数字，在运算
?? ? ? ? ? 特殊：1、+运算，只要碰上一个字符串，则变为拼接
?? ??? ? ? ? 2、- * / %，纯数字组成的字符串，也可以转为数字，但是非纯数字的字符串转为NaN
?? ??? ??? ??? ?NaN参与任何算术运算结果仍为NaN?? ?
?? ?2、*比较运算：> < >= <= == != === !==
?? ? ? 结果：布尔值
?? ? ? 隐式转换：默认，左右两边都会悄悄的转为数字，再比较
?? ? ? ? ? 特殊：
?? ??? ??? ?1、如果左右【两边】参与比较的都是字符串，则是按位PK每个字符的十六进制的unicode号（十进制ascii码）
?? ??? ??? ??? ??? ?0-9<A-Z<a-z<汉字
?? ??? ??? ?2、NaN参与任何比较运算结果都为false，带了一个问题，没有办法使用普通的比较运算判断一个xx是不是NaN
?? ??? ??? ??? ?解决：!isNaN(xx); true->有效数字 ?false->NaN
?? ??? ??? ?3、undefined==null，
?? ??? ??? ? ? 问题：==区分不开undefined和null，怎么才能区分开？
?? ??? ??? ? ? undefined===null
?? ?3、*逻辑运算符：
?? ??? ?隐式转换：悄悄的都变为布尔，然后综合比较得出结论
?? ??? ?&&：全部的条件都为true，结果才为true
?? ??? ? ? ?只要有一个为false，结果就为false
?? ??? ?||：全部的条件都为false，结果才为false
?? ??? ? ? ?只要有一个为true，结果就为true
?? ??? ? !：颠倒布尔值
?? ??? ?特殊：用法
?? ??? ? ? ***短路逻辑：只要前一个条件已经可以得出最后结论，则后续条件不再执行！
?? ??? ??? ?&&短路：如果前一个条件为true，后一个操作才执行
?? ??? ??? ??? ?如果前一个条件为false，后一个操作不执行
?? ??? ??? ??? ?简化了【简单的】分支：if(条件){操作}
?? ??? ??? ??? ?语法：条件&&(操作);
?? ??? ??? ??? ?举例：曾经：if(total>=500){total*=0.8};
?? ??? ??? ??? ? ? ? ?现在：total>=500&&(total*=0.8);
?? ??? ??? ??? ?特殊：1、【简单的】-> 操作只能有一句话
?? ??? ??? ?||短路：如果前一个条件为true，不需要执行后一个
?? ??? ??? ??? ?如果前一个条件为false，需要执行后一个
?? 4、*赋值运算：一句话执行了两个操作，先运算，再赋值
?? ??? ?+= -= *= /= %= ++ --
?? ??? ?何时使用：只要取出变量中的值，在做计算，之后还要在保存回去时，就要试用赋值运算
?? ??? ?i=i+1;
?? ??? ?推荐：
?? ??? ? ?i+=1 或者 i++;
?? ??? ?递增：i++; 每次只能+1
?? ??? ?累加：i+=n; 每次想加几，随便你
? ? ? ?++ 分为 ++i 和 i++
?? ??? ??? ?1、单独使用时，没有参与别的表达式，放前放后都一样
?? ??? ??? ?2、如果参与了别的表达式：
?? ??? ??? ??? ?变量中的值其实都会+1
?? ??? ??? ??? ?++i，返回的是递增后的【新值】
?? ??? ??? ??? ?i++，返回的是递增前的【旧值】
?? 5、***三目运算：简化分支：if(){}else{}?? ?if(){}else if()else{}
?? ??? ?语法：
?? ??? ? ?1、条件?操作1:默认操作;
?? ??? ? ?2、条件1?操作1:条件2?操作2:默认操作;
1、*****自定义Function：
? ?什么是函数：需要先定义好，可以反复使用的一个代码段
? ?何时使用：1、不希望打开页面立刻执行 2、以后可以反复使用 3、希望绑定在页面元素之上
? ?如何使用：
?? ?1、创建并且调用：2种
?? ??? ?1、创建
?? ??? ? ? ? ? *1、【声明方式】创建函数
?? ??? ??? ? ? function 函数名(形参,...){
?? ??? ??? ??? ?函数体;
?? ??? ??? ??? ?return 返回值/结果;
?? ??? ??? ? ? }
?? ??? ??? ?2、【直接量方式】创建函数 - 无用
?? ??? ??? ? ? var 函数名=function(形参,...){
?? ??? ??? ??? ?函数体;
?? ??? ??? ??? ?return 返回值/结果;
?? ??? ??? ? ? }
?? ??? ?2、调用
?? ??? ??? ?var 接住返回的结果=函数名(实参,...);
?? ??? ??? ?//其实return的本意退出函数，但是如果return后跟着一个数据，
?? ??? ??? ?//顺便将数据返回到函数作用域的外部，但return只负责返回，不负责保存
?? ??? ??? ?//就算省略return，默认也会return undefined;
?? ??? ??? ?//具体需不要得到函数的结果，看你自己
?? ?2、***作用域：2种
?? ??? ?1、全局作用域：全局变量 和 全局函数，在页面的任何一个位置都可以使用
?? ??? ?2、函数/局部作用域：局部变量 和 局部函数，在【当前函数调用时内部可用】
?? ??? ??? ?*变量的使用规则：优先使用自己的，自己没有找全局，全局没有报错
?? ??? ??? ?特殊：缺点：1、千万不要再函数中对着未声明的变量直接赋值 - 全局污染
?? ??? ??? ??? ? ? ?2、局部可以用全局的，但是全局不能用局部的 - 解决：看上面return
?? ??? ?
?? ?3、***声明提前：
?? ??? ?在程序正式执行之前
?? ??? ?将var声明的变量（轻）和function声明的函数（重）
?? ??? ?都会悄悄集中定义在当前作用域的顶部
?? ??? ?但是赋值留在原理
?? ?4、***按值传递：两个变量之间进行赋值：
?? ??? ?如果传递的是原始类型的值：
?? ??? ??? ?修改一个变量，另一个变量是不会受到影响的
?? ??? ?如果传递的是引用类型的对象：
?? ??? ??? ?修改一个变量，另一个变量是会受到影响的，因为操作的其实是同一个【地址值】
2、预定义的全局函数：前辈们提前创建好的方法，程序员可以直接使用，在任何位置都可以使用
? ?1、编码和解码：
?? ??? ? ?编码：var code=encodeURIComponent("魔兽世界");
? ?? ??? ? ?解码：var 原文=decodeURIComponent(code);
? ?2、isFinite(num)：判断num是不是无穷大，true->有效数字 ?false->无穷大
?? ?哪些会为false：NaN,Infinity,分母为0
? ?3、厉害的：parseInt/Float、isNaN、eval
?? ?eval(str)：计算字符串，简单来说就是脱字符串的衣服
3、*分支结构：if分支 switch分支
? ?语法：
?? ?switch(变量/表达式){
?? ??? ?case 值1:
?? ??? ?操作1;
?? ??? ?case 值2:
?? ??? ?操作2;
?? ??? ?default:
?? ??? ?默认操作;
?? ?}
?? ?
?? ?特殊：1、case的比较不带隐式转换
?? ? ? ? ?2、问题：默认只要一个case满足后，会将后面所有的操作全部做完
?? ??? ? 解决：break;
?? ??? ? 建议：每一个case的操作后都跟上一个break
?? ??? ??? ?有的地方也可以不加break:
?? ??? ??? ??? ?1、最后的一个操作default可以省略break;
?? ??? ??? ??? ?2、如果中间多个条件，做的操作是一样的，也不需要
?? ? ? ? ?3、default可以省略，如果条件都不满足的情况，什么事都不会做
?? ?面试题：if ?vs ?switch
?? ? ?1、switch...case... 缺点：必须要知道准备的结果才能使用，不能做范围判断
?? ??? ??? ? ? ? ?好处：执行效率相对较高
?? ? ?2、if...else 缺点：执行效率相对较低
?? ??? ? ? ? ? 优点：可以是范围判断
?? ? ?建议：代码优化，尽量将所有的 if...else 换成 switch...case、三目
扩展：JS动画：几乎和JS无关，与CSS有关（transition过渡）
?? ?JS操作样式，瞬间生效的，只需要加上过渡就会慢慢生效 - animate.css动画库（库：很多动画）
?
1、***循环结构：
? ?1、while(循环条件){循环体}
? ?2、do{循环体}while(循环条件)
?? ?面试题：while 和 do...while的区别
? ? ? ? ? ? ? ?只看第一次：如果第一次大家都满足，两者没有区别
?? ??? ??? ? ? ?如果第一次不满足，while一次都不执行，dowhile至少会执行一次
? ?3、***for(循环变量;循环条件;变量的变化){
?? ??? ?循环体;
?? ? }
? ?4、流程控制语句：退出循环：break;//退出整个循环
?? ??? ??? ? ? ? continue;//退出本次循环，根据需求进行分析使用哪一个
2、*****数组的基础：
?? ?1、基础概念：
?? ??? ?什么是数组：在一个内存（变量）中保存了多个数据的一个集合结构
?? ??? ?何时：只要存储的多个相关的数据，都要用数组集中保存;
?? ?2、创建：2种
?? ? ? 1、*直接量：var arr=[值1,...];
?? ? ? 2、构造函数：var arr=new Array(值1,...);
?? ??? ? ? ??? ?第二种方式：var arr=new Array(num);//创建一个长度num的空数组
?? ?3、访问：数组名[下标]; -- 当前元素
?? ? ? 添加/修改：数组名[下标]=新值;
?? ? ? 特殊：读取元素，下标越界 -- 返回undefined
?? ??? ? 添加元素，下标越界 -- 下标不在连续，导致变成一个稀疏数组
?? ?4、数组的三大不限制
?? ??? ?1、不限制长度
?? ??? ?2、不限制类型
?? ??? ?3、不限制下标越界
?? ?5、数组唯一的属性：数组名.length：获取当此数组的长度
?? ? ? ?? ?三个固定套路：
?? ??? ??? ?1、末尾添加：arr[arr.length]=新值;
?? ??? ??? ?2、获取倒数第n个：arr[arr.length-n];
?? ??? ??? ?3、删除倒数n个：arr.length-=n
?? ?6、遍历数组：对数组中每个元素执行相同 或 相似的操作
?? ??? ?for(var i=0;i<arr.length;i++){
?? ??? ??? ?arr[i];//当前次元素
?? ??? ?}
?? ?7、*如何释放一个引用类型：看清楚引用类型的数据有几个变量引用着，都要释放后才会真正释放
?? ??? ?建议：代码都要封装在一个函数中，函数中的变量会自动释放
?? ? ? ?索引数组：下标都是由数字组成的数组
?? ?8、*关联（hash）数组：
?? ??? ?什么是：下标是可以自定义的
?? ??? ?为什么：索引数组的下标无具体的意义，不便于查找
?? ??? ?如何使用：
?? ??? ??? ?1、创建：2步
?? ??? ??? ??? ?1、创建空数组：var arr=[];
?? ??? ??? ??? ?2、为数组添加下标并且添加元素：arr["自定义下标"]=新值;
?? ??? ??? ?2、访问元素：arr["自定义下标"]
?? ??? ??? ?3、强调：hash数组length永远失效，永远为0！
?? ??? ??? ? ? 遍历hash数组，不能使用for循环，必须使用for in循环 - 专门用于遍历数组的
?? ??? ??? ??? ?for(var i in arr){
?? ??? ??? ??? ??? ?i;//
?? ??? ??? ??? ?}
?? ??? ??? ? ? for in虽然不能定义从哪里开始，到哪里结束，专门用于遍历数组的，既可以遍历索引数组也可以遍历hash数组
?? ??? ??? ? ? 个人推荐：索引数组依然使用for，hash数组在用for in
?? ??? ??? ?4、***hash数组的原理：
?? ??? ??? ??? ?hash算法：将字符串，计算出一个尽量不重复的数字（地址值）
?? ??? ??? ??? ??? ? ?字符串内容相同，则计算出来的数字也一定是相同的
?? ??? ??? ??? ?添加元素：将自定义下标交给hash算法，得到一个数字（地址值），直接将你要保存的数据放到这个地址之中
?? ??? ??? ??? ?获取元素：将指定的自定义下标交给hash算法，得到一个和当初保存时一样的数字（地址值），通过地址就找到当前保存的数据
?? ??? ??? ?5、js里面的一切东西都是对象，除了undefined和null，一切对象的底层都是hash数组
3、*****数组的API：前辈们提前定义好的，我们程序员可以直接使用的，这些函数只有数组可用
?? ?1、*arr to string：
?? ??? ?var str=arr.join("自定义连接符");
?? ??? ?
?? ??? ?固定套路：2个
?? ??? ??? ?1、笔试题：将数组里面的内容拼接为一句话/单词;
?? ??? ??? ??? ?无缝拼接：var str=arr.join("");
?? ??? ??? ?2、将数组拼接为DOM页面元素
?? ??? ??? ??? ?//数据
?? ??? ??? ??? ?var arr=["北京","南京","西京","东京","重庆"]
?? ??? ??? ??? ?//转为字符串，并且拼接好标签
?? ??? ??? ??? ?var str="<开始>"+arr.join("</结束><开始>")+"</结束>";
?? ??? ??? ??? ?//渲染到DOM树上
?? ??? ??? ??? ?elem.innerHTML=str;
?? ?2、*数组拼接：添加元素的新方式
?? ??? ?把你传入的实参全部拼接到arr的末尾，
?? ??? ?var newArr=arr.concat(新值1,...)
?? ??? ?特殊：1、不修改原数组，只会返回一个新数组
?? ??? ? ? ? ?2、concat支持传入数组参数，悄悄的将你传入的数组打散为单个元素后在拼接
?? ?3、*截取子数组：
?? ??? ?根据你传入的开始下标截取到结尾下标
?? ??? ?var subArr=arr.slice(starti,endi+1);
?? ??? ?特殊：1、不修改原数组，只会返回一个新子数组
?? ??? ? ? ? ?2、含头不含尾
?? ??? ? ? ? ?3、endi可以省略不写，会从starti位置一直截取到末尾
?? ??? ? ? ? ?4、其实两个实参都可以省略 - 从头截到尾，深拷贝，和以前的按值传递（浅拷贝）不同，一个修改不会影响到另一个
?? ??? ? ? ? ?5、支持负数参数，-1代表倒数第一个
以上的API都不是会修改原数组
------------------------------------------------------------------------------------------------------------------------------
以下的API都是会修改原数组
?? ?4、*删除、插入、替换：arr.length-=n
?? ??? ?删除：var dels=arr.splice(starti,n);//n代表删除的个数
?? ??? ? ?特殊：其实splice也有返回值，返回的是你删除的元素组成的一个新数组
?? ??? ?插入：arr.splice(starti,0,值1,...);
?? ??? ? ?注意：1、原starti位置的元素以及后续元素都会向后移动
?? ??? ??? ?2、千万不要插入一个数组，会导致我们的数组一些是一维，一些是二维，遍历时非常的难受
?? ??? ?替换：var dels=arr.splice(starti,n,值1,...);
?? ??? ? ?注意：删除的元素个数不必和插入的元素个数相同
?? ?5、翻转数组：arr.reverse(); - 以后不会使用
扩展：以后面试中回答一个问题按4个方面回答（wwwh:what,when,why,how）
1、*****Array API：
?? ?1、*****排序：2种方式
?? ??? ?1、面试/鄙视：手写冒泡排序：从第一个元素开始，依次比较相邻的两个元素，只要前一个元素>后一个元素，两者就交换位置
?? ??? ??? ?公式：
?? ??? ??? ?for(var j=1;j<arr.length;j++){
?? ??? ??? ??? ?for(var i=0;i<arr.length-j;i++){
?? ??? ??? ??? ??? ?if(arr[i]>arr[i+1]){
?? ??? ??? ??? ??? ??? ?var middle=arr[i];
?? ??? ??? ??? ??? ??? ?arr[i]=arr[i+1];
?? ??? ??? ??? ??? ??? ?arr[i+1]=middle;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?2、正式开发中：排序的API
?? ??? ??? ?arr.sort();
?? ??? ??? ?问题1：默认会将元素们转为字符串，按位PK ascii码，如果希望按数字排序？
?? ??? ??? ?解决：
?? ??? ??? ??? ?arr.sort(function(a,b){//回调函数
//?? ??? ??? ??? ??? ?console.log(a);//拿到后一个
//?? ??? ??? ??? ??? ?console.log(b);//拿到前一个
?? ??? ??? ??? ??? ?return a-b;//如果return 返回是一个正数，说明后一个数>前一个数
?? ??? ??? ??? ??? ??? ? ? //如果return 返回是一个负数，说明后一个数<前一个数
?? ??? ??? ??? ??? ??? ? ? //如果return 返回是一个0,说明后一个数==前一个数
?? ??? ??? ??? ??? ??? ? ? //而我们的sort方法正好可以根据你返回的正数/负数/0来进行排序
?? ??? ??? ??? ?});
?? ??? ??? ?问题2：只能升序排列，如何降序?? ??? ??? ?
?? ??? ??? ??? ?arr.sort(function(a,b){
?? ??? ??? ??? ??? ?return b-a;
?? ??? ??? ??? ?})
?? ??? ?强调：排序其实非常重要，切记，只要以后页面中有排序功能，他的底层一定是一个数组，因为只有数组具有排序的方法
?? ?2、*栈和队列：添加元素和删除元素的新方法
?? ??? ??? ?开头进：arr.unshift(新值,...);//添加元素的新方式，向前添加，缺陷：导致其余元素的下标发生改变
?? ??? ??? ?开头出：var first=arr.shift();//删除元素的新方式，向前删除，缺陷：导致其余元素的下标发生改变
?? ??? ??? ?结尾进：arr.push(新值,...);//添加元素的新方式，向后添加，完全等效于arr[arr.length]或者arr.concat
?? ??? ??? ?结尾出：var last=arr.pop();//删除元素的新方式，向后删除
?? ??? ?队列：其实就是数组，只不过是一端进，另一端出
?? ??? ?何时：根据先来后到的顺序，现实中多得很
?? ??? ??? ?开头进：arr.unshift(新值,...);
?? ??? ??? ?结尾出：var last=arr.pop();
?? ??? ? ? ? ? *结尾进：arr.push(新值,...);
?? ??? ??? ?开头出：var first=arr.shift();
?? ??? ?ES3的数组API就算学完了，后面ES5还提供了6个API等待我们学习
?? ?
2、二维数组：数组的元素，又引用着另一个数组
?? ?何时：在一个数组内，希望再次细分每个分类
?? ?创建：
?? ?var arr=[
?? ??? ?["张三丰",128,5500],
?? ??? ?["张翠山",38,4500],
?? ??? ?["张无忌",18,12000]
?? ?];
?? ?访问：arr[行下标][列下表];
?? ?特殊：列下标越界，返回undefined
?? ? ? ? ?行下标越界，报错，因为undefined不能使用[]
?? ?
?? ?遍历二维数组：必然两层循环：外层循环控制行，内层循环控制列
?? ??? ??? ?for(var r=0;r<arr.length;r++){
?? ??? ??? ??? ?for(var c=0;c<arr[r].length;c++){
?? ??? ??? ??? ??? ?console.log(arr[r][c])
?? ??? ??? ??? ?}
?? ??? ??? ?}
3、*****String的概念：
?? ?什么是字符串：多个字符组成的【只读】字符【数组】（只读：明天我们要学习的所有的字符串的API都不会修改原字符串，只会返回的新的结果）
1、*****String API：只有字符串可以使用的函数，无需创建，程序员直接使用
?? ?1、转义字符：\
?? ??? ? 作用：1、将字符串中和程序冲突的字符转为原文
?? ??? ??? ??? ?"\""?? ?'\''
?? ??? ? ? ? ? 2、包含特殊功能的符号
?? ??? ??? ??? ?换行：\n
?? ??? ??? ??? ?制表符：\t ?-> ?大空格tab
?? ??? ? ? ? ?*3、输出unicode编码的字符
?? ??? ??? ??? ?\uXXXX：第一个汉字：\u4e00?? ??? ?ascii：19968
?? ??? ??? ??? ? ? ? ? ?最后一个汉字：\u9fa5?? ??? ?ascii：40869
?? ?2、*大小写转换：将字符串中的每个英文字母统一的转为大写 或 小写。
?? ??? ? ?何时：只要程序不区分大小写，就要【先统一】转为大写 或 小写，再比较（验证码）
?? ??? ? ?如何：
?? ??? ??? ?大写：var upper=str.toUpperCase();
?? ??? ??? ?小写：var lower=str.toLowerCase();
?? ?3、获取字符串中指定位置的字符：var newStr=str.charAt(i);?? ?===?? ?str[i]
?? ?4、获取字符串中指定位置的字符的ASCII码：
?? ??? ?var ascii=str.charCodeAt(i);
?? ? ? 根据ascii码转回原文：
?? ??? ?var 原文=String.fromCharCode(ascii);
?? ?5、***检索字符串：检查索引：获取关键字的下标
?? ??? ?var i=str/arr.indexOf("关键字",starti);
?? ??? ?从starti位置开始，查找右侧【第一个关键字】的位置
?? ??? ?starti可以省略，默认从0位置开始查找
?? ??? ?返回值：找到，返回的是第一个关键字的第一个字符的下标
?? ??? ??? ?*没找到，返回-1，不关心下标为多少，只关心为不为-1
?? ??? ?作用：判断有没有
?? ??? ?强调：数组也能用此方法，后期才添加上的
?? ??? ?鄙视题：默认只能获取到第一个关键字的下标，如何才能获取所有关键字的下标？
?? ??? ??? ?var str="no zuo no die no can no bibi";
?? ??? ??? ?var index=-1;
?? ??? ??? ?while((index=str.indexOf("no",index+1))!=-1){
?? ??? ??? ??? ?console.log(index);
?? ??? ??? ?}
?? ?6、*截取字符串：
?? ??? ?var subStr=*str/arr.slice(starti,endi+1);//和数组用法一样，支持负数参数，-n代表倒数第n个
?? ??? ??? ? ? str.substring(starti,endi+1);//用法几乎和slice相同，不支持负数参数
?? ??? ??? ? ? *str.substr(starti,n);//支持负数参数，n代表截取的个数，不必考虑含头不含尾
?? ?7、拼接字符串：var newStr=str.concat(str1,...);//还不如+运算
?? ?8、*替换字符串：本身这个方法非常强大，但是由于我们现在暂时还不会正则表达式，只能替换固定的关键字（下周一）
?? ??? ?var newStr=str.replace("关键字"/正则,"新内容");
?? ?9、*****切割/分割字符串：
?? ??? ?作用：将字符串转为数组
?? ??? ?var arr=str.split("自定义切割符");
?? ??? ?特殊：1、切割后，切割符就不存在
?? ??? ? ? ? ?2、切割符""，切散每一个字符
扩展：1、JS创建空元素：
?? ??? ?var elem=document.createElement("标签名");
?? ?
? ? ? 2、为此空标签添加必要的属性或事件
?? ??? ?elem.innerHTML="内容"
?? ??? ?elem.属性名="属性值"
?? ??? ?elem.on事件名=function(){}
? ? ? 3、渲染到DOM树上：
?? ??? ?父元素.appendChild(新元素)
?? ??? ?
|