前端之js基础

                                                                                  版权声明:本文为博主原创文章,未经博主允许不得转载。 http://www.thescrewshack.com/qq_36251118/article/details/90737882

                                                                                  1、创建变量的方式

                                                                                     var  es3
                                                                                     function es3
                                                                                     let  es6
                                                                                     const  es6
                                                                                     import es6
                                                                                     class  es6
                                                                                  

                                                                                  2、数据类型

                                                                                     基本数据类型(值类型)
                                                                                         null、undefined、string、number、boolean
                                                                                         null  空对象指针
                                                                                     	   undefined  未定义
                                                                                         string  字符串,用单引或或包裹起来,例如'13'
                                                                                         number 数字,其中有一个特殊的数字,NaN,全称(not a Number):不是数字的数字,例如1,2,3
                                                                                         boolean 布尔值,仅存在两种情况,true,false
                                                                                  
                                                                                     引用数据类型
                                                                                         object
                                                                                     	     普通对象
                                                                                     	  	     var obj={name:"aa",age:20} 使用大括号包裹,内部包含多组键值对
                                                                                     	     数组对象
                                                                                     	  	     var arr=[1,2,3,4,5]  使用[]包裹,包含零到多项内容
                                                                                     	     正则对象
                                                                                     	         var reg=/^$/
                                                                                     	     日期对象
                                                                                               var date=new Date()
                                                                                     
                                                                                         function
                                                                                         Symbol 唯一的值,es6中新增数据类型 
                                                                                   	     var a=Symbol('a');
                                                                                     		 var b=Symbol('b');
                                                                                     	     console.log(a==b); //false
                                                                                  
                                                                                     js原生输出方法
                                                                                  	 alert 警告,alert输出的内容为字符串,实现机制:1、将值(如果是表达式,将计算后的结果)通过toString 转换为字符串输出
                                                                                  	 alert(1+1); //'2'
                                                                                  	 promt 确认
                                                                                  	 console.log 控制台输出日志
                                                                                  	 console.dir 控制台输出详细
                                                                                  	 console.table 以表格方式输出json数据
                                                                                  

                                                                                  3、数字方法

                                                                                     isNaN()
                                                                                  	 作用:检查是否不是有效数字,true 不是有效数字,false是有效数字
                                                                                  	 
                                                                                  		isNaN(12); //false
                                                                                  		isNaN('12');//false
                                                                                  		isNaN(true);//false   Number(true) ->1
                                                                                  		isNaN(false);//false Number(false) ->0
                                                                                  		isNaN(null);//false  Number(null) ->0
                                                                                  		isNaN(undefined); true
                                                                                  		isNaN([12]); //false  Number([12]) ->12
                                                                                  		isNaN([12,23]); //true  Number([12,23]) ->NaN
                                                                                  		isNaN(/^$/); //true
                                                                                  		isNaN(function(){}); //true
                                                                                  	
                                                                                  	 isNaN机制:
                                                                                  	   1、如果需要检测的值不是数字类型,浏览器会默认将其转换为数字类型
                                                                                  	   2、值是数字false,不是数字true  (数字类型中只有NaN不是有效数字,其余都是有效数字)
                                                                                  
                                                                                     Number()
                                                                                  	 作用:将其他类型转换为数字类型
                                                                                  		
                                                                                  		 1、字符串->数字
                                                                                  		    如果字符串中出现任意一个非有效字符,结果为NaN
                                                                                  		    
                                                                                  		       Number('10');//10
                                                                                  		       Number('10px'); //NaN
                                                                                  		       Number(""); //0
                                                                                  
                                                                                  		2、布尔值->数字
                                                                                  		   转换结果为0或1
                                                                                  		       
                                                                                  		       Number(true); // 1
                                                                                  		       Number(false); //0
                                                                                  
                                                                                  	    3、其他->数字
                                                                                  	    
                                                                                  	          Number(null); //0
                                                                                  	          Number(undefined);//NaN
                                                                                  
                                                                                  	    4、引用数据类型->数字
                                                                                  	       引用数据类型先调用toSting 方法,转换为字符串,在使用Number方法,转换为数字
                                                                                  	           
                                                                                  	           Number({}); //({}).toString() ->'[object Object]' ->NaN
                                                                                  	           Number([1,2,3]);  //[1,2,3].toString() -> '1,2,3'->NaN
                                                                                  	           Number(/^$/); /(/^$/).toSting() -> '/^$/' ->NaN
                                                                                  	           Number([]); //([]).toSting() ->""
                                                                                  	           isNaN([]);// [].toSting() ->"" ->Number("") ->0
                                                                                  
                                                                                      parseInt/parseFloat
                                                                                  	  等同于Number,作用:将其他类型转换为数字
                                                                                  	  
                                                                                  	  parseInt:将一个字符串的整数部分解析出来,遇到非有效数字,返回NaN
                                                                                  	  parseFloat:将一个字符串的小数部分解析出来,,遇到非有效数字,返回NaN
                                                                                  
                                                                                     	    parseInt('10.5px');//10
                                                                                          parseFloat('10.5px');//10.5
                                                                                  	    parseInt("abc123"); //NaN
                                                                                  		
                                                                                  	  区别:number 遇到非有效数字返回NaN
                                                                                  	   
                                                                                      NaN和任意一个数字都不相等,包括自己
                                                                                  	  NaN == NaN  //false
                                                                                  

                                                                                  4、boolean、null、undefined

                                                                                  	boolean 返回true或false
                                                                                  	!"a";//false  "a"->true,!true->false
                                                                                  	!!"a";.true  !!相当于没取反
                                                                                      js中,只有0,‘’,NaN,null,undefined为false,其他均为true
                                                                                      
                                                                                      null 空指针对象,使用场景:手动赋值null,后面会对该变量赋值
                                                                                      undefined 未定义,使用场景:声明变量,如果不手动赋值,浏览器会默认undefined,后面可以不赋值
                                                                                  

                                                                                  5、对象

                                                                                  	var obj={name:"XX",age:20}
                                                                                  	
                                                                                  	新增
                                                                                  	    obj['a'] = '';
                                                                                  	    obj.a  = '';
                                                                                  	    obj[20] =20;
                                                                                  	    obj[{}];
                                                                                  
                                                                                  	获取
                                                                                  	    obj["20"];//20
                                                                                  	    obj['[object Object]']
                                                                                  	
                                                                                  	删除
                                                                                  	    delete obj.a
                                                                                  
                                                                                  	注:
                                                                                  	  1、对象中的属性名,不可以重复
                                                                                  	  2、如果对象中没有key,返回undefined
                                                                                  	  3、对象key可以存储字符串、数字
                                                                                  	  4、对象存储属性名不是字符串或数字时,会调用toString方法,然后在进行存储
                                                                                  

                                                                                  6、数组

                                                                                    	数组也是对象的一种,数组中存在length 属性,为该数组的元素长度
                                                                                    		[1,2,3,4,5]
                                                                                      下标 0 1 2 3 4  数字作为key,递增
                                                                                  	
                                                                                  	新增
                                                                                  	
                                                                                  		var ary=[];
                                                                                  		ary['age']=20;
                                                                                  		ary[1]='1';
                                                                                  			
                                                                                  	获取
                                                                                  		ary['age'];
                                                                                  		ary[1];
                                                                                  

                                                                                  7、js运行机制和不同数据类型的操作

                                                                                  	1、当浏览器内核/引擎渲染和解析js时,会提供一个js代码运行的环境,这个环境称为全局作用域(栈内存)
                                                                                  	2、代码自上而下执行(之前有一个变量提升的过程)
                                                                                  	      基本数据类型的值存在当前作用域下
                                                                                  	      var a=12;
                                                                                  	      1、在内存中开辟一个空间(栈内存)存储12
                                                                                  	      2、在当前作用域中声明一个变量a
                                                                                  	      3、让声明的变量和存储的12进行关联,把存储的12赋值给a
                                                                                  	
                                                                                  		var a=12;
                                                                                  		var b=a;
                                                                                  		b=15;
                                                                                  		console.log(a);		
                                                                                  		基本数据类型(值类型),按值操作,把之前的值复制一份,放到新的空间,操作与之前的空间没有关系
                                                                                  		
                                                                                  		引用数据类型的值不能直接存储在当前作用域下,需要开辟一个新的空间,把内容存储到这个空间内
                                                                                  		
                                                                                  		var obj={n:100}
                                                                                  		1、开辟一个新的空间(堆内存),把对象的键值依次存储起来,空间拥有一个16进制的地址
                                                                                  		2、声明一个变量
                                                                                  		3、让变量和空间地址关联在一起,把地址赋值给变量
                                                                                  		
                                                                                  		var obj={n:100};
                                                                                  		var obj2 = obj;
                                                                                  		obj2['n']=200;
                                                                                  		console.log(obj['n']);
                                                                                  		引用类型不是按值操作,它操作的是引用地址,把原来的空间地址赋值给变量,但是原来的空间没有被克隆,这样就会出现多个变量关联一个空间,修改会相互影响
                                                                                  		
                                                                                  		栈内存:存储基本类型的值
                                                                                  		堆内存:存储引用类型中的信息,对象存储的是键值对,函数存储的是字符串
                                                                                  

                                                                                  8、操作语句

                                                                                  	判断
                                                                                  		if/else if/else
                                                                                  			var num=12;
                                                                                  			if(num >10){
                                                                                  				num++;
                                                                                  			}else{
                                                                                  				num--;
                                                                                  			}
                                                                                  		
                                                                                  		注:if条件判断中,==判断相当,===判断是否全等,!=判断是否不相等,!==判断是否不全等
                                                                                  			  10=='10';//true
                                                                                  			  10==='10';//false
                                                                                  			  1!='1';//false
                                                                                  			  1!=='1';//true
                                                                                  		
                                                                                  		三元运算符
                                                                                  			var num=12;
                                                                                  			num>10?num++:null 
                                                                                  		switch
                                                                                  			switch(num){
                                                                                  				case 10:
                                                                                  					num++;
                                                                                  					break;
                                                                                  				case 10
                                                                                  					num--;
                                                                                  					break;
                                                                                  				default:
                                                                                  					num=0;
                                                                                  			}
                                                                                  			注:必须添加break;否则会进入下一个beak为止;
                                                                                  		    switch case是基于===进行比较的		
                                                                                  		    
                                                                                  	循环
                                                                                  		for 
                                                                                  			for(var i=0;i<10;i++){
                                                                                  				
                                                                                  			}
                                                                                  			1、定义初始值var i=0;
                                                                                  			2、设定循环成立条件,条件成立循环成立,不成立则循环结束,i<10
                                                                                  			3、条件成立进入循环体
                                                                                  			4、执行步长累加			
                                                                                          注:1、可根据需求,改变为倒叙或修改递增次数
                                                                                  		    2、循环退出使用break,continue 跳过本轮循环,进入下一轮循环,循环中break和continue 后面的代码均不执行
                                                                                          
                                                                                  		for in 
                                                                                  		while
                                                                                  

                                                                                  9、检测数据类型

                                                                                  	typeof 作用:检测基本数据类型 返回值为”number“/"string"/"boolean"/"undefined"/"object"/"function"
                                                                                  	注:检测数组、正则、对象为object
                                                                                  	    typeof(NaN);//'number'
                                                                                  		typeof []; //'object'
                                                                                  		typeof type []; //typeof 'object' ->'string'
                                                                                  		
                                                                                  	constanceof
                                                                                  	custructor
                                                                                  	Object.prototype.toString.call()
                                                                                  

                                                                                  10、dom

                                                                                  	获取元素
                                                                                  	document.getElementById()
                                                                                  	document.getElementsByClassName()
                                                                                  	document.getElementByTagName() //获取元素集合,类数组对象,key作为索引,存在length属性,但不是数组
                                                                                  	document.getElementsByName()
                                                                                  	
                                                                                  	//元素对象属性
                                                                                  	id 存储当前元素的id值,存储的值为字符串
                                                                                  	className 代表当前元素样式类名,存储的值为字符串
                                                                                  	innerHtml 存储元素中所有的内容,包含html标签
                                                                                  	innerText 存储元素中所有的文本内容,不包含html标签
                                                                                  	onclick  点击事件
                                                                                  	onmouseover 鼠标滑过事件
                                                                                  	onmouseout 鼠标离开事件
                                                                                  	style 存储当前元素所有的行内样式,样式表中样式无法获取
                                                                                  

                                                                                  11、函数

                                                                                  	函数就是一个方法,为了实现某个功能,将多次使用的代码块封装在函数中
                                                                                  	优点:实现低耦合,高内聚,减少冗余,提高代码可复用性
                                                                                  	使用:1、定义function fn(),
                                                                                  		 2、调用fn()
                                                                                  	
                                                                                  	函数执行机制:
                                                                                  		1、形成私有作用域(栈内存)
                                                                                  		2、把之前堆内存中的字符串复制一份过来,	变为真正的js代码,在新的作用域下,自上而下执行
                                                                                  		3、每次调用时,都会形成一个私有作用域栈,操作同2	
                                                                                  
                                                                                  	function 函数名(形参){//参数作为函数的入口
                                                                                  		//函数体
                                                                                  	}
                                                                                  	fn(1);//1为实参,实参与形参对应
                                                                                  	注:1、如果形参未接受变量,为undefined
                                                                                  	    2、如果实参比形参多,多余的丢弃
                                                                                  

                                                                                  12、数据类型转换

                                                                                  	isNaN,当检测的值不是数字,浏览器会使用Number()方法,先将其转换为数字,然后在检测是否为非有效数字
                                                                                  	isNaN('3px');  Number('3px')  -> NaN -> isNaN(NaN)  -> true
                                                                                  	
                                                                                  	parseInt/parseFloat 
                                                                                  	数学运算:+ - * /,其中+还有字符串拼接的作用
                                                                                  	‘3’-1;   Number('3')-1 -> 3-1 ->2
                                                                                  	'3px'-1  NaN
                                                                                  	'3px'+1 '3px1'
                                                                                  	
                                                                                  	var i='3';
                                                                                  	i=i+1; ''31
                                                                                  	i+=1; '31'
                                                                                  	i++; 4  //纯数学运算,不存在字符串拼接
                                                                                  	
                                                                                  	判断条件中 ==比较时,会将其他类型转换为数字类型
                                                                                  	
                                                                                  	转换规律
                                                                                  		浏览器调用Number方法
                                                                                  	字符串转数字
                                                                                  		只要遇到一个非有效数字,为NaN
                                                                                  		'' ->0
                                                                                  	布尔转数字
                                                                                  		true ->1
                                                                                  		false ->0
                                                                                  	其他转数字
                                                                                  		null->0
                                                                                  		undefined ->NaN
                                                                                  	引用类型转数字
                                                                                  		先调用toString方法,然后在通过Number方法,将其转换为数字
                                                                                  
                                                                                  展开阅读全文

                                                                                  没有更多推荐了,返回首页