一、数据类型的转换(补充): 转bool:Boolean(x);//一般不用 有6个会转为false:0,"",undefined,null,NaN,false,其余都是true
二、运算符和表达式(补充)
1、比较运算:> < >= <= == != === !==
特殊:默认都转为数字,再比较
1、两边都是字符串,按位PK每个字符串unicode
0-9 A-Z a-z 汉字
2、NaN:!isNaN(x)
3、undefined===null
3、逻辑运算:
特殊:短路逻辑
&&:简化if
条件&&(操作);
||:两个值二选一 - 以后兼容
e=e||window.event;
4、位运算:
左移:m<<n,m*2的n次方
右移:m>>n,m/2的n次方
5、赋值运算:+= -= *= /= %= ++ --
i-- => i-=1 => i=i-1;
特殊点:
前-- 和 后--
单独使用时,放前放后无所谓
如果参与了别的表达式:变量中的值都会-1
前--,返回的减了之后的新值
后--,返回的减了之前的旧值
6、三目运算:简化if...else 和 if...else if...else
条件?操作:默认操作;
条件1?操作1:条件2?操作2:默认操作;
特殊点:1、操作只能有一句话
2、默认操作不能省略的
1、舍入误差:parseFloat(num.toFixed(保留小数位数));
2、获取字符串中第一个字的ASCII码:var ascii=str.charCodeAt(0);
1、自定义函数:方法,一段提前被定义好的,可以反复使用的代码段
三、函数如何使用:2步 1、创建/定义/声明函数&返回结果:2种
1、*声明方式:
function 函数名(形参,...){
函数体
return 返回值;
}
2、直接量方式:
var 函数名=function(形参,...){
函数体
return 返回值;
}函数名=变量名
2、调用函数&接住结果
var result=函数名(实参,...);
解释:return:本意退出函数,但是如果后面跟着一个数据,则可以将数据返回到全局作用域中,但是仅负责返回,不负责保存,所以我们需要自己创建一个变量接住函数调用的结果
return只能写一次,而且最好写在函数体的后面
何时使用:并不是任何时候都需要加return:
1、全局想要使用局部的
2、调用完函数还希望拿到函数的结果在后续还要做操作时
3、如果没有return,其实也有默认返回值undefined
四、作用域:2个
1、全局作用域:全局变量 和 全局函数,在任何位置都可以访问/使用
2、函数/局部作用域:局部变量 和 局部函数,只能在当前【函数调用时内部可用】
有了作用域才有变量的使用规则:
优先使用自己的,自己没有找全局,全局都没有报错
强烈建议:千万不要对未声明的变量直接赋值,导致全局污染
所有的变量在使用之前都一定要先var,不能对着没有var变量直接赋值
哪些属于局部变量:2部分
1、直接在函数作用域中创建的变量
2、形参
全局无法使用局部的,因为不符合现实生活
解决:创建函数部分
五、声明提前
在程序执行之前
悄悄将var声明的变量和function【声明】的函数
集中提前到当前作用域的顶部
但是赋值留在原地
变量比函数更轻
我们程序员是看不见的,但是会悄悄执行的
如果在笔试题中看到先试用后创建,多半都是考你声明提前
六、按值传递:两个变量之间进行赋值
1、如果传递的是原始类型的值:两个变量之间赋值,做操作,互不影响的 - 其实是复制了一个副本给对方
2、如果传递的是引用类型的对象:Array、Function
两个变量之间赋值,做操作,是会相互影响的 - 因为两个用的是同一个地址值
2、预定义的全局函数:前辈们(实现浏览器的程序员们)提前定义好,我们可以直接在任何位置使用的函数:
1、编码和解码:
问题1:url网址中不允许出现多字节字符,如果出现会导致乱码
utf-8编码格式下,一个汉字占3字节
解决:前端工程师需要将用户输入的网址中的中文编码为单字节字符,后端工程师接住前端传来的东西解码为原文
编码:var code=encodeURIComponent("str");
解码:var 原文=decodeURIComponent(code);
2、isFinite(num):判断num是不是在有效范围之内
三种情况会为false:分母为0,NaN,Infinity
3、重要的:parseInt/Float()、eval()、isNaN()
七、分支结构:根据条件的不同,执行不同的操作
if...else结构
switch...case结构
语法:
switch(变量/表达式){
case 值1:
操作1;
break;
case 值2:
操作2;
break;
default:
默认操作;
}
注意:默认只要满足一条路,会把后面所有的操作全都做完,解决:break:一般放在操作的后面,但是:
1、最后default不需要加break
2、如果连续的多个操作是一样的效果,也可以省略中间部分
2、不带有隐式转换
3、default可以省略不写
if vs switch:
switch:优点:效率相对较高,因为不需要做任何范围判断
缺点:不能实现范围判断,必须要知道用户有可能输入的结果是什么才能使用
if:优点:实现范围判断
缺点:效率相对较低
1、JS动画:跟JS没关系,有JS来触发,JS设置CSS是瞬间的操作,只需要在CSS中加一个过渡就可以具有动画了 八、循环:
var 变量=几;
do{
循环体;
变量变化
}while(循环条件)
不管第一次满不满足,都会执行第一次
终止循环语句:continue - 退出当前次循环
九、数组的基础:
关联hash数组:下标是可以自定义的
创建:var arr=[];
arr["自定义下标"]=值;
访问:arr["自定义下标"]
特殊:遍历:for in循环
for(var i in arr){
i;//当前次的下标
arr[i];//当前次的元素
}
十、数组的API:
1、数组转为字符串:var str=arr.join("自定义连接符");
固定套路:1、无缝拼接
2、拼接页面上的元素
2、拼接数组:添加元素的新方式
var newArr=arr.concat(值1,arr2,...);
3、截取子数组:拿出某一部分
var subArr=arr.slice(starti,endi+1);
4、删除、插入、替换:
var deletes=arr.splice(starti,n,值1,....);
5、翻转数组:arr.reverse();
十一、Array API:
1、排序:arr.sort()
按数字排序:arr.sort(function(a,b){return a-b})
降序排序:arr.sort(function(a,b){return b-a})
2、栈和队列:
arr.unshift(值,...);
var first=arr.shift();
arr.push(值,...);
var last=arr.pop();
十二、二维数组:
创建:
var arr=[[],[],[],[]]
访问:arr[r][c];
特殊:列下标越界:undefined
行下标越界:报错
遍历:
for(var r=0;r<arr.length;r++){
for(var c=0;c<arr[r].length;c++){
arr[r][c];//当前次元素
}
}
十三、字符数组:字符串的任何API都不会修改原字符串,保存新字符串
1、String API:
1、转字符串:\
作用:3个
1、字符串中如果出现了和字符串冲突的符号,可用\将其转义为原文
\" \'
2、特殊功能:
换行:\n
制表符:\t
3、*可以书写unicode号 表示一个字
\uXXXX
汉字的第一个字:4e00
汉字的最后一个字:9fa5
2、转换大小写:【统一的】转为大写或小写,再比较,忽略大小写:
大写:var newStr=str.toUpperCase();
小写:var newStr=str.toLowerCase();
3、获取字符串中指定位置的字符的ascii码
var ascii=str.charCodeAt(i);
通过ascii码转回原文
var 原文=String.fromCharCode(ascii);
4、检索字符串:检查索引/下标:从starti位置开始找右侧的第一个关键字的下标
作用:判断有没有
var i=str/arr.indexOf("关键字",starti);
特殊:1、starti可以省略,如果省略则从0开始
2、返回值:找到了,返回第一个字符的下标
没找到,返回-1,其实我们根本不关心下标是几,只关心下标是不是-1,-1代表没找到,不是-1代表找到了
3、数组也可以使用此方法
5、拼接字符串:var newStr=str.concat(str1,str2...) 还不如 +运算
6、截取字符串:
1、var subStr=str/arr.slice(starti,endi+1);
2、var subStr=str.substring(starti,endi+1);//不支持负数参数
3、var subStr=str.substr(starti,n);//n=个数,不用考虑头尾问题
7、替换字符串:
var newStr=str.replace("关键字"/正则表达式,"新内容");
8、切割/分割字符串:作用:str <=> arr
var arr=str.split("自定义切割符");
特殊:
1、切割符可以自定义,切割过后返回一个数组,数组中不再包含切割符
2、如果传入的切割符是一个"",每一个字符都会被切开
十四、创建元素并且渲染页面
1、创建空标签
var elem=document.createElement("标签名");
2、设置必要的属性或事件
elem.属性名="属性值";
elem.on事件名=function(){函数体} - 事件都可以在创建时提前绑定上
3、创建好的元素渲染到DOM树上
父元素.appendChild(elem);