一、变量
1.变量的赋值与声明
1.变量可以先声明后赋值。
如:
声明变量
var boy;
var girl;
console.log(boy); //undefined(未定义的)
console.log(girl);
为变量赋值
boy="jack";
girl="lily";
console.log(boy); //jack
console.log(girl); //lily
2.变量可以声明的同时赋值。
如:
var myAge = 16;
var myHeight = 188;
console.log(myAge);
console.log(myHeight)
2.let声明变量
let是ES6新引入的关键字,用来替代var关键字。(ES6指2015年推出的ECMAScript语法。)
1.使用var声明的变量,可以多次赋值,但是其结果只与最后一次赋值有关。
如:
var boyFriend = "魏大勋";
var boyFriend = "魏晨";
var boyFriend = "白敬亭";
console.log(boyFriend);(结果为白敬亭)
2.let不允许在一个代码块里有变量和他取一样的名字,但是允许修改同一个变量值。
如:
let boyFriend = "吴亦凡";
boyFriend = "蔡徐坤";
console.log(girlFriend);(结果为蔡徐坤)
3. 一个花括号{}就是一个代码块
如:
let boyFriend = "吴亦凡";
boyFriend = "蔡徐坤";
console.log(girlFriend);(结果为蔡徐坤)
//如此不会报错
3.const声明变量
let/var声明可以改变
const声明的变量不能改变,即常量
如:
错误写法:
const a = 3.14;
a = 3.15;
console.log(a);
正确写法:
const a = 3.14;
console.log(a);
注:const在声明时就赋值。
4.变量声明的区别
(1)初始化要求不同
使用var和let声明变量时可以先不初始化,而使用const声明变量时必须初始化。
(2)重复声明不同,
使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致,
而使用const声明的变量,在整个运行过程中不能修改初值.
(3)对块级作用域的支持不同。
(使用一对花括号括起来的代码称为一个代码块所谓块级作用域,
就是指变量起作用的范围是当前代码块,离开当前代码块,变量就失效了。
使用var声明的变量支持全局作用域,使用let和const声明的变量支持块级作用域。)
二、数据类型
1.数据类型分类
简单数据类型存储在栈内存中。
复杂数据类型的内存存储在堆内存中,地址存储在栈内存中。
2.基本数据类型
(1) [Boolean-布尔型]
let flag1 = true;
let flag2 = false;
//True,False,TURE,FALSE等写法都为错误。
console.log(flag1)
let flag3 = "true"
console.log(flag3);
(2) [number-数字型]
let age = 18;
let date = "0306";
console.log(age);
console.log(date);
console.log(Number.MAX_VALUE); //最大值
console.log(Number.MAX_VALUE*2); //Infinity(无穷大)
var a = 3-"b";
console.log(a); //NaN (Not a Number) NaN也属于数字类型
// isNaN判断是否是一个非数字,
// 如果是数字类型则为false;
// 如果非数字类型则为true。
console.log(isNaN(a)); //true
console.log(isNaN(111)); //false
console.log(isNaN("abc")); //true
(3) [string-字符串]
let demo1 = "字符串";
let demo2 = '字符串';
let demo3 = `字符串`;
let demo4 = "老师说:'今天晚上不上晚自习'";
console.log("111\'222");
(4) [undefined-未定义类型]
// 表示声明的变量还未赋值
let grade;
console.log(grade); //undefined
(5) [null-空]
var a = null;
console.log(a); //null
3.数据类型的检测
(1)isNaN 检验是否是一个非数字
如:
console.log(isNaN(111)); //false
console.log(isNaN("abc")); //true
(2)typeof()
如:
console.log(typeof("123")); //string
console.log(typeof(false)); //boolean
console.log(typeof(NaN)); //number
console.log(typeof('aaa'*2)); //number (字符串进行计算答案都为NaN)
注:
布尔类型true,会在运算中转化为数字1
布尔类型false,会在运算中转化为数字0
如:
console.log(2-true); //1
console.log(typeof(2-true)); //number
加号遇上字符串,做拼接使用
如:
console.log(2+"true"); //2true
console.log(typeof(2+"true")); //string
4.数据类型转换
(1)将数据类型转换为布尔类型
使用Boolean()进行转换
1、字符串类型和数字类型都会转化为布尔类型的true
var a = Boolean("a")
console.log(a); //true
console.log(Boolean(123)); //true
2、空字符串转化为布尔类型的false,空格字符串转化为布尔类型的true。
console.log(Boolean("")); //false
console.log(Boolean(" ")); //true
3、 数字0转为布尔类型的false。
console.log(Boolean(0)); //false
4、NaN,undefined,null转化为布尔类型的false。
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
(2)将数据转化为字符串类型
使用String()或者toString()进行转换
如:
let num = 1;
console.log(num); //数字类型的1
let num2 = String(num);
console.log(num2); //字符串类型的1
(3)将数据转化为数字类型
使用Number()进行转换
如:
console.log(Number(123)); // 数字类型的123
console.log(Number("123")); //数字类型的123
console.log(Number("")); // 0(空字符)
console.log(Number(" ")); // 0(空格字符)
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number(false)); // 0
console.log(Number(true)); // 1
console.log(Number("true")); //NaN
console.log(Number("123.1")); //123.1
三、运算符
(1)算术运算符
若:
let a = 10;
let b = 20;
1.加法运算符
console.log(a+b); //30
2. 减法运算符
let c = b-a;
console.log(c); //10
3. 乘法运算符
console.log(c*b); //200
4. 除法运算符
b = b/a;
console.log(b); //2
5. 取模运算 取余运算符
console.log(26%5); //1
6. 幂运算符
console.log(2**10); //1024
// 2*2*2*2*2*2*2*2*2*2
7. 自增运算
m = 5;
n = ++m;
console.log(m); //6
console.log(n); //6
m = 5;
n = m ++;
console.log(m); //6
console.log(n); //5
var x =1; y = 2;
console.log(++x); //2
console.log(x); //2
console.log(y++); //2
onsole.log(y); //3
注: ++在前,先计算完再访问打印;++在后,先访问打印再计算。
8.自减运算
q = 2;
p = q--;
console.log(q); //1
console.log(p); //2
var d = 10;
console.log(++d); //11
console.log(d); //11
console.log(d--); //11
console.log(d); //10
注:如++符一样,--在前,先计算完再访问打印;--在后,先访问打印再计算。
(2)字符串运算符&隐式转换
<!--
隐式转换:当两个数据类型不同时,JavaScript会按照既定的规则进行转换。
字符串运算符:+遇上字符串做拼接使用
-->
如:
console.log(1 + 1); //2
console.log(1 + null); //1
console.log(1 + true); //2
console.log(1 + false); //1
console.log("12" - 0); //12
console.log(undefined * null); //NaN
console.log(1 + "1"); //11(字符串)
console.log(1 + "null"); //1null(字符串)
console.log(null + "undefined"); //nullundefined(字符串)
(3)赋值运算符
若:
let a = 10;
let b = 20;
1. 赋值
let c = a+b;
2. 加等于/加并赋值 +=
a += b;(加) 等于 a = a+b;
console.log(a); //30
console.log(b); //20
a -= b;(减)
console.log(a); //10
console.log(b); //20
// a = a - b;
a*=b;(乘)
a/=b;(除)
a%=b;(取余)
a**=b;(幂)
(4)比较运算符
1. != (不等于)
console.log(4 != 5); //true
console.log(4 != 4); //false
2. !==(不全等)
console.log(5 !== "5"); //true
3. == (等于,不拘小节)
console.log(4 == "4"); //true
4. === (全等,一丝不苟)
console.log(4 === "4"); //false
注:
==和!=在比较不同数据类型时,会将比较的数据转化为相同的数据类型。
===和!==则不会进行数据类型的转换。
(5)逻辑运算符
1. && 逻辑与运算符,一假则假
如:
console.log(true && true); //true
console.log(false && true); //false
console.log(false && false); //false
2.|| 逻辑或运算符,一真则真
如:
console.log(true || true); //true
console.log(true || false); //true
console.log(false || false); //false
3.! 逻辑非运算符,真作假来假作真
如:
console.log(!true); //false
console.log(!false); //true
(6)三元运算符
三元运算符公式:条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式的值为true,则返回表达式1的执行结果。
// 如果条件表达式的值为false,则返回表达式2的执行结果。
如:
var age = prompt("请输入你的年龄")
console.log(age);
var res = age >=18 ? "欢迎来到成年世界" : "小孩禁止访问"
document.write(res)
(7)运算符优先级
// 一元运算符 > 比较运算符 > 逻辑运算符(逻辑与>逻辑或) > 赋值运算符
1.比较运算符 > 逻辑运算符
let a = 3>5 && 2<7 && 3==4
console.log(a); //false
2.逻辑与运算符 > 逻辑或运算符
let b = 3<5 || 2>7 && 3=="3"
// true || false && true
console.log(b);
3.比较运算符 > 赋值预算符
let c = 2 == "2"
console.log(c); //true
4.小括号内优先运算
let d = !c && (b || a)
console.log(d); //false
四、流程控制
(1)选择结构
1.if语句
表达式:
if (条件表达式) {代码段}
let age = prompt("请输入您的年龄")
if (age>=18){
document.write("欢迎进入本网站")
}
2.if...else语句(双分支)
表达式:
if (条件表达式) {代码段1} else {代码段2}
let age = prompt("请输入您的年龄")
if (age>=18){
document.write("欢迎进入本网站")
} else{
document.write("小孩请离开")
}
3.if..else if..else语句(多分支)
表达式:
if(条件表达式1){
条件表达式1的结果
}else if (条件表达式2){
条件表达式2的结果
}else if (条件表达式3){
条件表达式3的结果
}else{
除去表达式123之外的结果
}
let cj = prompt("输入成绩")
if (cj==100){
document.write("恭喜获得奖学金")
}else if(cj<100 && cj>80){
document.write("优秀")
}else if(cj<=80 && cj>=60){
document.write("合格")
}else if(cj<=60 && cj>=40){
document.write("有补考机会")
}else if(cj<=40 && cj>=20){
document.write("挂科")
}else {
document.write("留级")
}
4.switch语句
条件表达式:
// case-情况;break-跳出语句。
// switch(表达式){
// case 值1:
// 代码段
// break;
// case 值2:
// 代码段
// break;
// case 值3:
// 代码段
// break;
// ....
// default:
// 代码段n;
// }
示例:
let subject = +prompt('请输入你想想选择的专业:1-区块链专业;2-UI专业;3-土木专业;4-农林专业')
console.log(subject);
switch(subject){
case 1:
document.write('恭喜你,开始坐牢了');
break;
case 2:
document.write('恭喜你,开始和AI开卷');
break;
case 3:
document.write('恭喜你,去打灰吧');
break;
case 4:
document.write('恭喜你,回家养猪咯');
break;
default:
document.write('请输入你的专业')
break;
}
(2)循环结构
1.for循环
条件表达式:
for(初始化变量;条件表达式;操作表达式){
循环体
}
示例:
需求:在控制台输入1~100的整数
for(var i=1;i<=100;i++){
console.log(i);
}
2.while语句
条件表达式:
while(条件表达式){循环体}
示例:
// 初始化变量
var c=1;
while(c<=1){
console.log(c);
c++
}
3.do...while语句
条件表达式:
do { 循环体 }while (表达式)
示例:
var d=1;
do{ d++
console.log(d);
}while(
d<=100
)
注:while与do...while的区别
while语句先判断条件表达式的值,再根据条件表达式的值决定是否执行循环体。
do...while语句会先无条件执行一次循环体,然后在判断条件表达式的值。
do...while至少会执行一次。
(3)跳转语句
1.break语句
for(var i = 1; i <= 5 ; i++){
if(i=3){
console.log("吃到了毒苹果");
break; //跳出整个循环
}
console.log("我吃完了第"+i+"个苹果");
}
2.continue语句
for(var n = 1; n <= 5 ; n++){
if(n == 3){
console.log("吃到了虫苹果");
continue;
}
console.log("我吃完了第"+n+"个苹果");
}
注:break语句与continue语句区别
break语句会立即跳出整个循环,也就是循环结束。
continue语句用来立即跳出本次循环,也就是跳过continue语句后面的代码,
继续下一次循环
(4)循环嵌套
// 需求,在控制台输出四列四行的“*”
var str=''
// 成列
for(var i = 1; i<=4; i++){
// 成行
for(var j=0; j<4;j++){
str += "*"
}
str += "\n"
}
// "\n"是换行的转义符
console.log(str);