第二章 JavaScript学习入门之运算符和语句的使用
前言
javascript是前端学习中最重要的一门语言，可以说是拿下javascript，你的前端之旅会很顺利，由于之前学javascript有些已经忘记，刚好利用寒假时间，把基础补补，顺便记录一下自己的学习痕迹。一起加油吧！
一、运算符
1.typeof
typeof就是运算符也叫操作符，通过运算符可以对一个或多个值进行运算，并获得运算结果，并且将获得的类型以字符串的形式返回
2.算术运算符
注意：当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
” + “ 加法运算符
+可以对两个值进行加法运算，并将结果返回
如果对两个字符串进行加法运算，则会将两个字符串拼接成一个字符串，并返回
任何的值和字符串做加法运算，都会先转换为字符串，再拼接成一个字符串
注意！！！除了加法运算中任何值和字符串相加，会先转换为字符串再拼接，其余都是先转换为Number再运算。任何值和undefined运算都为NaN.
3.一元运算符
只需要一个操作数
- +正号 不会对数字产生任何影响
- -负号 可以对数字进行符号的取反
对于非Number类型的值， 会将其先转换为Number，然后再运算
4.逻辑运算符
！ 非 对一个值进行非运算
注意：如果是非布尔值进行元素，则会将其转换为布尔值，然后取反，因此我们可以利用这点，可以为任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
&& 与 可以对符号两侧的值进行与运算并返回结果
|| 或 可以对符号两侧的值进行或运算并返回结果
&& || 与或运算
对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算
与运算：
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值
或运算：
如果第一个值为true，则必然返回第一个值
如果第一个值为false，则返回第二个值
5.Unicode编码表
1. 在字符串中使用转义字符输出Unicode编码 \u四位编码 二、使用步骤
2. 在网页中使用&#编码，这里的编码需要用10进制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script
type="text/javascript"> /* * 在字符串中使用转义字符输入Unicode编码 * u四位编码 */ console.log("u2620"); </script>
</head>
<body>
<!--在网页中使用Unicode编码 &#编码; 这里的编码需要的是10进制 -->
<h1 style="font-size: 200px;">☠</h1>
<h1 style="font-size: 200px;">⚀</h1>
</body>
</html>6.条件运算符
也叫三元运算符
语法：
条件表达式 ? 语句1 ：语句2 ；
-执行的流程：
条件运算在执行时，首先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
var a = 10;
var b = 20;
a > b ? alert("a大"):alert("b大");
若要获取a和b中的最大值
var max = a > b ? a ：b；
若要获取a、b、c中的最大值
max = max > c ? max : c ;
如果条件的表达式的求值结果为一个非布尔值，会将其转换为布尔值，再运算
7.运算符的优先级
1. 先乘除，后加减
2.在JS中有一个运算符优先表，在表中月靠上优先级越高，优先级越高优先计算，若优先级一样则从左往右计算
若不清楚就用（）
二、语句的使用
1.代码块
程序是由一条一条语句构成的，语句是按照自上而下的额顺序一条一条执行的，在JS中可以使用{}来为语句进行分组，同一个{ }中的语句我们称为一组语句
要么都执行，要么都不执行；称为代码块；只具有分组作用，没有其他的用途
代码块内部的内容在外面是完全可见的
2.流程控制语句
JS中的程序时从上到下一行一行执行的
通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行
语句的分类：
条件判断语句
条件分支语句
循环语句
条件判断语句：
——使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行
——if语句
——语法一：
if(条件表达式)
语句
注意！！！if 语句只能控制紧随其后的那个语句，若要让if 语句统一控制多条语句，可以放到代码块中
——语法二：
if(条件表达式){
语句
}
练习： 从键盘输入小明的期末成绩：当成绩为100时，‘奖励一辆BMW’；当成绩为【80-99】时，‘奖励一台 iphone15s'；当成绩为【60-80】时，’奖励一本参考书‘；其他情况，什么奖励没有
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var a = prompt("请输入您的成绩:");
if (a == '100'){
alert('奖励一辆BMW');
}else if(a >= 80 && a<= 99){
alert('奖励一台iphone15s');
}else if (a >=60 && a <= 80){
alert('奖励一本参考书');
}else{
alert('抱歉！什么奖励都没有');
}
</script>
</head>
<body>
</body>
</html>/prompt()可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段文字，该函数需要一个字符串作为参数，该字符串将会作为提示框提示文字，其中用户输入的内容将会作为函数返回，可以定义一个变量来接收该内容/
3.条件分支语句
var num = 2;
switch ( num ){
case 1:
console.log( "一");
break;
case 2:
console.log( "二");
break;
...
default :
console.log( "非法输入");
}练习：从键盘输入一个分数，若100~90为优秀，89~70为良好，69~60为及格，60以下为不及格，否则为无效分数
var score = prompt("请输入你的成绩:");
switch( true){
case score >=90 && score <=100 :
alert("优秀");
break;
case score >=80 && score <=89 :
alert("良好");
break;
case score >79 && score <=60 :
alert("及格");
break;
case score < 60 && score >=0:
alert("不及格");
break;
default:
alert("输入的成绩无效");
break;
}4.while循环
while(条件表达式){
语句;
}
执行：先判断后执行
do{
}while(条件表达式)
执行：先执行后判断
实际上这两个语句功能类似，但是后者可以保证至少执行一次，前者不行；若要求程序必须至少执行一次，则必须使用do{ }while( )语句。
例子：
// while循环
//定义一个计数器
var count = 0;
//定义一个变量，表示当前数
var money = 1000;
//定义一个while循环来计算每年的钱数
while(money < 5000){
money *= 1.05;
//使用count自增
count++;
}
alert("共需要:" + count);例子2：
// -----------while例子练习-----------
//将之前的if例子修改为输错可重复输入
while(true) {
var score = prompt("请输入你的成绩");
if(score >= 0 && score <=100){
break;
}else{
alert("你输入的成绩无效，请重新输入");
}
}
if(score <=100 && score >=90){
alert("优秀");
}else{
alert("非优秀");
}例子3
do{
var scroe = prompt("请输入你的成绩");
if(scroe >=0 && scroe <=100){
break;
}else{
alert("请重新输入");
}
} while (true)
if(scroe >=90 && score <=100){
alert("优秀");
}else{
alert("非优秀");
}5.for循环
for循环中，提供了专门的位置用来放三个表达式
初始化表达式
条件表达式
更新表达式
for循环语法：
for( 初始化表达式，条件表达式，更新表达式){
语句.....
}
for 循环执行流程：
1.执行初始化表达式，初始化变量
2.执行条件表达式，判断是否执行循环
如果为true，则执行循环，如果为false，则终止循环
3.执行更新表达式，更新表达式执行完毕继续重复
例子1：
水仙花
// ____________________for循环_________________________
// 水仙花数是一个3位数，它的每个位上的数字的3次幂之和等于它本身
// 打印所有的三位数
for(var i = 100 ; i <1000; i++){
//获取i的百位十位个位的数字
//百位数
var a = parseInt(i/100);
//十位数
var b = parseInt((i-a*100)/10);
//个位数
var c = i % 10;
//判断是否为水仙花数
if(a*a*a + b*b*b + c*c*c == i){
alert(i);
}
}
例子2：
质数
// ________________________质数________________________-
// 在页面中接收一个用户输入的数字，并判断该数是否为质数
//质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须大于1
var flag = true;
var num = prompt("请输入一个大于1的整数:");
//判断这个值是否合法
while(true){
if (num <= 1) {
alert("该值不合法,请重新输入");
}else{
alert("即将进行质数判断");
break;
}
}
for(var i =2 ; i < num ; i++){
//判断能否被i整除
if(num % i == 0){
flag = false;
}
}
if(flag){
alert(num+ "为质数");
}else{
alert(num+ "不是质数");
}6.for循环的嵌套时使用
例子1：
// 5*5矩阵转为杨辉三角
for(var i=0; i<5; i++){
/*
在循环内部再创建一个循环，用来控制图形的宽度
外部for循环执行1次，内部for循环执行5次
内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少
*/
for(var j=0; j<5; j++){
//其中 表示空格
document.write("*  ");
}
//输出一个换行
document.write("<br />");
}/*通过分析矩阵和杨辉三角图形，可以发现相同点是行数相同，区别在于每行的中的列数为当前行数-1，因此只需修改内层循环
for(var i=0; i<5; i++){
for(var j=0; j<i; j++){
document.write(" *  ");
}
document.write("<br")
}
*/
//________________________________倒三角__________________________-
for( var i=0; i<5; i++){
for(var j=5-i; j>0; j--){
document.write("*  ");
}
document.write("<br />");
}// __________________________________________________________-
for (var i = 0; i < 5; i++) {
for (var j=0; j<5-i; j++) {
document.write("*  ");
}
document.write("<br />");
}例子2：打印出1-99的乘法表
//___________________打印出1-99的乘法表——————————————————————————————
//创建外层循环，用来控制乘法表的高度
for(var i=1; i<=9; i++){
//创建一个内层循环来控制图形的宽度
for(var j=1; j<=i; j++){
document.write("<span>" +j+ "*" +i+ "=" +i*j+ "</span>")
}
document.write("<br />");
}
</script>
<style type="text/css">
body{
width:2000px;
}
span{
display: inline-block;
width: 70px;
}
</style>总结
以上就是今天总结的内容，本文仅仅简单介绍了JavaScript的运算符和语句的使用，比较基础。
8284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
