运算符、条件、循环

104 阅读11分钟

javascript概念和运算符


一、概述:JavaScript:简称js,是一个运行在客户端浏览器端的【解释型】【弱类型】【面向对象】脚本语言
  1. 编译型:在运行程序之前,需要先检查语法是否正确,如果不正确,直接不运行 - 严格,比如:Java、C++
    解释型:在运行程序之前,不需要检查语法是否正确,直接运行,碰到错误就会停止后续代码 - 更加自由,比如:JavaScript、Node.js、PHP
  2. 弱类型:变量保存的数据可以是随意的,数据类型由数据来决定 - 更自由
    强类型:变量保存的数据,由数据的类型来决定了能保存什么数据 - 比如Java - 更严格
  3. 面向对象
    对象名.属性名;
    对象名.方法名();
二、如何使用JS:
  1. 直接在HTML写上一个script标签,在里面书写JS代码 - 上课用
  2. 创建一个xx.js文件,在其中写入JS代码,最后在HTML引入 - 正式开发时使用的方式
<script src="js/03.js">
	此处不可以再书写JS代码
</script>
  1. 输出方式
    1、在控制台打印输入日志:console.log(你想要输出的东西);
    2、在页面上输出日志:document.write(你想要输出的东西); 如果绑定了点击事件,会将页面上所有的内容全部替换掉
    3、在浏览器自带的警告框输出日志:alert(你想要输出的东西);但有时候会卡住整个浏览器,导致用户只能看到一个白板
  1. 变量和常量
变量:创建后,值可以再次修改
var 变量名 = 值
1、变量名其实不是随意的
1、不能以数字开头
2、建议使用驼峰命名法或下划线命名法
3、命名要尽量的见名知意
4、变量名不能是name,否则不管你保存的数据类型是什么,都会悄悄的给你转为一个字符串 - name这个变量名是一个关键字
5、变量名不能是关键字
6、变量可以只创建,不赋值,默认值为undefined.
7.如果多个变量连续创建,可以用逗号隔开
常量:创建后,值不允许再次修改
const 常量名 = 值;
  1. 数据类型
原始/基本/值类型:51Number - 数字,取值有无数个,而且数字就是直接写,不用加任何东西(控制台输出的颜色是蓝色)
2String - 字符串,取值有无数个,但是必须加上""或者''(控制台输出的颜色是黑色)
3Boolean - 布尔,取值只有2个,分别叫做true(真|对) 或 false(假|错) - 一般用于当作条件判断(控制台输出的颜色是蓝色)
4Null - 空,取值只有一个,就是null,唯一的作用就是用于释放变量释放内存的,节约内存空间(控制台输出的颜色是灰色)
5Undefined - 未定义,取值只有一个,就是undefined,变量默认值为undefined(控制台输出的颜色是灰色)

查看数据类型:typeof(变量)
引用/对象类型:有11个,可以暂时理解为有11(属性和方法)个对象等待我们学习
  1. 运算符
1、算术运算符:+ - * / %
    特殊:
    1、%:取余,俗称模,两个数相除,不取商,而是取除不尽的余数
    作用:
        1、任意数%2 - 判断奇偶数
        2、取出某个数字的后n位
        console.log(1234%10);4
        console.log(1234%100);34
        console.log(1234%1000);234
    
    2.带有隐式转换:会将数据类型转换,发生变化,默认:将左右两边都悄悄的转为数字,再运算!
    true->1
    false->0
    undefined->NaN
    null->0
    "100"->100
    "100px"->NaN可以将字符串转为数字,但是前提必须是纯数字组成的字符串才可以,只要包含了非数字字符,则为NaN
    
    NaNNot A Number:不是一个数字,但是他确实是数字类型,它不是一个有效的数字,没有任何优点,但是有两个缺点:
    1、参与任何算术运算结果仍为NaN
    2、参与任何比较运算结果都为false
    
    +运算符:如果碰上一个字符串,左右两边都会悄悄的转为字符串,+运算不再是+运算,而是拼接操作
关系/比较运算符:>,<,>=,<=,==,!=,===,!==
何时使用:一般都出现在明天的分支结构之中,我们可以通过条件满足不满足,走不同的路线
结果:一定是一个布尔值
带有隐式转换:默认左右两边都会悄悄的转为数字在比较大小
	特殊:
	1、如果参与比较的两边【都是】一个字符串!则会按位PK每个字符的十六进制unicode号(十进制ASCII码)
	数字0-9<大写A-Z<小写a-z<汉字
	常识:汉字的第一个字:一	unicode号:4e00	ascii码:19968
              汉字的最后一个字:龥unicode号:9fa5 ascii码:40869

	2NaN参与任何比较运算结果都为false,那我们怎么判断一个x是不是NaN呢?
	!isNaN(x);
	专门为了判断NaN而存在的,结果一定是一个布尔值:
	true->是一个有效数字
	false->是一个NaN
        
	3undefined==null;//true
	解决:===,全等:不带隐式转换的等值比较,要求数据相同,值也要相同
逻辑运算符:在比较运算的基础上,在进行综合比较,一个条件比较不出来我想要,我们可以考虑综合比较
	&&:与(并且)
	全部条件都满足,结果才为true
	只要一个不满足,结果就为false

	||:或者
	全部条件都不满足,结果才为false
	只要一个满足,结果就为true

	!:颠倒布尔值
	!true->false
	!false->true
赋值运算符:=,+=,-=,*=,/=,%=
	1、=:赋值符号,将=右边的东西,保存到=的左边的变量名中
	2、后面5个可以理解为是一种升级写法,一句话两个操作,运算后再保存回变量本身!
	i=i+1 ==> i+=1
自增自减运算符:++,--
举例:i++ === i+=1 === i=i+1
自增:固定的每次只能+1
累加:+=每次加几由程序员自己决定
	前++ 和 后++的区别?
	1、如果单独使用,前++和后++,没有任何区别!
	2、但是如果参与了其他表达式,变量始终都会+1,前++和后++返回的结果不同
	前++,返回的是加了之后的新值
	后++,返回的是加了之前的旧值
位运算:
左移:m<<n,读作m左移了n位,翻译:m*2的n次方
右移:m>>n,读作m右移了n位,翻译:m/2的n次方
底数只能是2,不可以修改!

分支结构


  1. 程序的流程控制语句:3种
    1、顺序结构 - 默认:从上向下依次执行每一句话
    2、分支结构 - 通过条件判断,选择部分代码执行
    3、循环结构 - 通过条件判断,选择要不要重复执行某块代码
  1. 如何使用:3种
f分支:3种写法
1、一个条件,一件事,满足就做,不满足就不做
	if(条件){
		操作;
		}
                
2、一个条件,两件事,满足就做第一件,不满足就做第二件
	if(条件){
		操作;
        }else{
                默认操作;
         }

3、多个条件,多件事,满足谁就做谁
	if(条件1){
		操作1;
	}else if(条件2){
		操作2;
	}else{
		默认操作;
        }

switch...case分支:
语法:
	switch(变量/表达式){
		case1:
		操作1;
		break;
		case2:
		操作2;
		break;
		default:
		默认操作;
	}
 特殊:
 	1、问题:默认只要一个case满足后,会将后续所有的操作全部做完
	解决:关键字break;
	建议:每一个case的操作后面都可以跟上一个break;
            有的地方也可以不加break1、最后一个操作default可以省略break
            2、如果中间多个条件,做的操作是一样的,可以省略掉中间部分!
	2case在做比较的时候是不带隐式转换的
	3default可以省略不写,但是不推荐,如果你不写,条件都不满足,则什么都不会执行

if vs switch的区别?谁好谁坏?
	1switch...case:优点:执行效率高,速度比较快(等值比较)
	缺点:必须要知道最后的结果是什么才可以使用switch case去判断!
        2if...else:优点:可以做范围判断
	缺点:执行效率较慢
3、三目运算:纯粹就是为了简化【简单的】分支结构
	语法:
	扩展:短路逻辑:条件&&(操作); === if...
        条件?操1:默认操作; === if...else...
        条件1?操作1:条件2?操作2:默认操作; === if...else if...else
        注:默认操作不能省略,省略了会报错
        三目运算一般只写到一排
  1. 类型转换:转字符串:2种
1、var str=x.toString();//x不能是undefined和null,会报错,undefined和null不能使用.做任何操作!
2、var str=String(x);//万能的,任何人都可以转为字符串,完全等效于隐式转换,其实String()就是隐式转换的底层原理,还不如+""
页面上一切的数据js获取到后都是字符串类型!:此种转换几乎不用
  1. 类型转换:转数字:3种
字符串转为整数
    执行原理:从左向右依次读取每个字符,碰到非数字字符就停止转换,如果一来就不认识则为NaN,不认识小数点
console.log(parseInt(35.5));//35
				console.log(parseInt("35.5"));//35
				console.log(parseInt("3hello5"));//3
				console.log(parseInt("hello35"));//NaN
				console.log(parseInt("35px"));//35
				console.log(parseInt(true));//NaN
				console.log(parseInt(false));//NaN
				console.log(parseInt(undefined));//NaN
				console.log(parseInt(null));//NaN
字符串转为小数
    执行原理:几乎和parseInt一致,认识第一个小数点
console.log(parseFloat(35.5));//35.5
				console.log(parseFloat("35.5"));//35.5
				console.log(parseFloat("3hello5.5"));//3
				console.log(parseFloat("hello5.5"));//NaN
				console.log(parseFloat("35.5px"));//35.5
				console.log(parseFloat(".5px"));//0.5
				console.log(parseFloat("35.5.5"));//35.5

var num=Number(x)任何类型都可以转为数字,完全等效于隐式转换,等价于隐式转换的底层原理,但还不如-0 *1 /1
  1. 类型转换:转布尔
Boolean(x);//万能,任何人都可以转为布尔,完全等效于隐式转换,其实Boolean()就是隐式转换的底层原理,等价于 !!x
只有6个会为false0,"",undefined,null,NaN,false - 其余的全部都是true

循环结构

  1. 循环三要素:
1、循环条件:开始 - 结束,循环的次数
2、循环体:你要做的操作
3、循环变量:记录着我们当前在哪一次,而且他会不断的变化,变化往往都是向着不满足循环条件前进的
  1. 3种循环
while循环:
语法:
	var 循环变量=几;
	while(循环条件){
		循环体;
		循环变量变化;
	}
执行原理:创建循环变量,判断循环条件,条件满足,则执行【一次】循环体,
并不会退出循环,而会回过头再次判断循环条件满不满足,
如果满足,则执行【一次】循环体操作直到循环条件不满足,才会退出循环

特殊:
	1、有的时候可能真的需要使用死循环:默认永远不会停止的循环
	何时使用:【不确定循环次数的时候】
		while(1){操作}
	2、退出循环
		break - 退出整个循环 - 一般都是用于配合死循环使用的
		continue - 退出本次循环 - 还会执行下一次操作
for循环:和while的原理是一样的,但是他比while看上去更加的简洁,更加的舒服,那while能做的事,for也可以去完成
	语法:
	for(var 循环变量=几;循环条件;循环变量变化){
		循环体;
	}

	特殊:
	死循环:for(;;){操作}
        
        whilefor 的区别?
            whilefor在原理上来说几乎没有区别
            一般我们不确定循环次数的时候会使用while循环 - 死循环
            一般我们确定循环次数的时候推荐for循环 - 大部分情况都是他
do...while循环:几乎不用
    语法:
	var 循环变量=几;
            do{
		循环体;
		循环变量变化;
            }while(循环条件)

	whiledo...while 的区别?
            区别只看第一次,如果第一次条件都满足,那么两者没有区别
            如果第一次条件都不满足,while一次都不会执行,而do...while至少会执行一次

Function的基础:重要

概念:Function - 函数,也称之为方法,先【预定义】好,以后可以【反复使用】的【代码段】
如何使用函数:21、定义/创建/声明:
	function 函数名(){
		函数体/代码段;
	}

    2、调用函数:21、在JS内部写:函数名() - 程序员写几次就会调用几次
        2、在HTML页面上绑定事件:
		<elem onclick="函数名()"></elem> - 任何元素都可以绑定点击事件

    3、我们以后何时使用函数呢?
	1、不希望打开页面立刻执行
	2、希望由用户来触发 - 提升用户的体验感
	3、以后每一个独立的功能(作业)都要封装为一个函数
        4、函数的地位很高,是第一等公民地位

    4、创建出带有形参的函数:
	function 函数名(形参,...){
		函数体/代码段;
	}
					
        使用带参数的函数时,记得要必须传入实参 - 实际参数,就是你传递过去的值!	
	函数名(实参,...)
        例:
        function add(a,b){//给出2个形参
		console.log(a+b);//定义函数体,也可以为代码段
			}
			add(1,2);//调用函数,定义2个实参,对应a和b
			add(2,3);
			add(3,4);
			add(4,5);
			add(5,6);
			add(7,8);
			add(9,10);
			add(10,11);
	注意:传参的时候顺序是不能乱的,必须和形参的顺序一一对应上
        
        带参数和不带参数的区别
            1、不带参数的函数,用于执行一些固定操作
            2、带参数的函数,可以根据我们传入的实参的不同,执行的操作略微不同