震惊!js基础竟是......(二)

124 阅读6分钟

一、

1、数据类型转换

强制类型转换:
1、转字符串:xx.toString();//xx不能undefined和null
	     String(xx);//万能,相当于隐式转换,还不如+""

2、转数字:parseInt/Float/Number();

3、转布尔:Boolean(x);
	只有6个为false0"",undefined,null,NaN,false
	分支和循环的条件中都会悄悄的带有转为布尔的隐式转换

2、运算符和表达式

1、算术:+ - * / %
   隐式转换:默认数字,在运算
	特殊:1、+运算,碰上字符串,则拼接
	      2、-*/% 碰上纯数字组成的字符串也可以转为数字,但非纯数字字符串则为NaN
			NaN参与任何算术运算结果都为NaN

2、比较:> < >= <= == != === !==
   隐式转换:默认数字,在比较
	特殊:1、两边都字符串,按位PK每个字符unicode号(ascii号)

	      2、NaN参与比较,都为false,推荐:!isNaN(x)

	      3、undefined===null

3、逻辑运算:
	本来的功能是做一个综合比较
	特殊:短路逻辑
	&&:简化简单的分支if(){}
		条件&&(操作);

	||:两个值二选一 - 处理兼容性问题
		e=e||window.event;

4、位运算:
	左移:m<<n,m*2的n次方
	右移:m>>n,m/2的n次方
	缺点:底数只能是2

5、赋值运算:+= -= *= /= %= ++ --
	特殊:前++和后++
	单独使用,放前放后无所谓
	如果参与别的表达式:
		变量中的值都会+1
		前++,返回的+1之后的新值
		后++,返回的+1之前的旧值

6、三目运算:简化简单的分支if(){}else{}	if(){}else if(){}else{}
	条件?操作1:默认操作;	==	if(){}else{}

	条件1?操作1:条件2?操作2:默认操作;	==	if(){}else if(){}else{}

	特殊:1、默认操作不能省略
	      2、简单的 - 操作只能有一句话

二、

1、自定义函数Function

1、创建和调用:
	1、创建2种:
		声明方式:function 函数名(形参,...){
				函数体;
				return 返回值;
			  }

		直接量方式:var 函数名=function(形参,...){
				函数体;
				return 返回值;
			    }

	2、调用:var 接住结果=函数名(实参,...);

	return本意退出函数,如果后面跟着一个结果,会把结果返回到全局作用域中,默认其实也有return undefined;

2、作用域:
	全局作用域:成员,任何地方都可以使用
	函数作用与:成员,只有当前函数调用时内部可用
	变量的使用规则,优先使用自己,自己没有找全局,全局没有则报错
	特殊:千万不要全局污染:对一个未声明的变量直接赋值

3、声明提前:
	在程序正式执行之前,会将var声明的变量和function声明的函数,集中提前到当前作用域的顶部,但是赋值留在原地

4、按值传递:两个变量之间进行赋值
	原始类型,两者互不影响,因为是复制了一个副本给对方
	引用类型,两者相互影响,因为使用的是同一个地址值

2、预定义全局函数

1、编码和解码:encodeURIComponentdecodeURIComponent - 无用的,浏览器自带将中文转为单字节字符的操作

2isFinite(num):判断num是不是一个有效范围,大部分都为true,只有3种情况为falseNaN,5/0,Infinity

3eval(str):计算字符串,把字符串的引号去掉,然后在执行代码

3、新的分支:

switch(变量/表达式){
	case 1:
	操作1;
	break;
	case 2:
	操作2;
	break;
	...
	default:
	默认操作
}

注意:1、效率高
      2、无法做范围判断
      3、不带隐式转换
          

三、

1、循环:

var 循环变量=几;
do{
循环体;
变量的变化
}while(循环条件)

只看第一次,如果第一次大家都满足,其实和while没有区别,但如果第一次不满足,do...while至少会执行一次

退出:continue;//退出本次循环

2、数组的基础:

关联数组:也称为hash数组
下标是可以自定义的
创建:
  1var arr=[];
  2、arr["自定义下标"]=新值;

访问:arr["自定义下标"]
添加/修改:arr["自定义下标"]=新值;

遍历hash:
	for(var i in arr){
		arr[i];
	}

一切对象的底层都是hash数组

3、数组的API:

1、arr转string:var str=arr.join("自定义连接符");
	固定套路:
		1、无缝拼接arr.join("");
		2、拼接为页面元素:elem.innerHTML="<开始>"+arr.join("</结束><开始>")+"</结束>";
	二级联动:
		1、专属事件:onchange - 改变时
		2、select.selectedIndex - 获取当前选中项的下标,其他的标签只能自定义下标使用
		3、二维数组 - 再次细分数据
	
2、拼接:添加:var newArr=arr.concat(值1,arr2...);

3、截取:取出某一部分:var subArr=arr.slice(starti,endi+1);

以下部分会改变原始值:

 4、删除、插入、替换:var dels=arr.splice(starti,n,值1,...)

5、翻转:arr.reverse();
    

四、

1、Array API:

1、排序:
1、冒泡排序:
2API排序: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();

2、二维数组:

创建: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];//当前次循环
		}
	}

五、

1、String API:

只有字符串可以使用的函数,无需创建,程序员直接使用
1、转义字符:\
	 作用:1、将字符串中和程序冲突的字符转为原文
			"\""	'\''
	       2、包含特殊功能的符号
			换行:\n
			制表符:\t  ->  大空格tab
	      *3、输出unicode编码的字符
			\uXXXX:第一个汉字:\u4e00		ascii19968
			        最后一个汉字:\u9fa5		ascii40869

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(新元素)