1.基础介绍
1.1 数据类型
(可使用typeof()去判断数据类型,但是无法使用 typeof 去判断 JavaScript 对象是否是数组(或日期))
- 可包含值的数据类型:number、string、boolean、object、function
- 三种对象类型:Object 、Date、Array
- 不能包含值的数据类型:null、undefined
1.2 特殊值
null返回object,undefined返回undefined,NaN返回number
- undefined:当声明的变量还未被初始化时,变量的默认值为undefined。
- null:空对象赋值,也就是说,此变量是一个对量类型。Null属于object类型。表示一个指向不存在或无效的对象或地址引用。即使它指向不存在的东西,常用来表示函数企图返回一个不存在的对象。
- NaN 表示一个不是数字的东西,尽管它实际上是一个数字。它不等于它本身,如果要检查是否有东西是 NaN 时,需要借助 isNaN() 函数。
- 在基本算术运算中,null 被视为0,undefined则会返回NaN (Not a Number)。
1.3 变量(变量名:变量值)
-
作用:变量是用来存储数据的,方便程序进行操作。
-
特点:
**1、**变量声明只有var关键字,声明的变量可以存储任意类型的数据;
**2、**JS中的变量允许出现同名变量,但后面的会覆盖前面的;
**3、**声明不赋值,默认为undefined;
**4、**尽量在定义变量时,对变量进行赋值;
5、 typeof不存在的变量,不报错,输出undefined, -
变量的类型转换:(显式转换和隐式转换)
**1、**非数字类型转化为数字类型的方法:
parseInt()、parseFloat()----只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。
例:字符串 “12345red” 转换成整数,那么 parseInt() 将返回 12345;
例:字符串 “22.5” 将被转换成 22,因为对于整数来说,小数点是无效字符。
例:“0xA” 会被正确转换为数字 10(十六进制写法)
**2、**转化为字符类型的方法:
toString()
**3、**强制类型转换
Number()----将其他类型的数据转换成数字类型,转换失败返回NaN(Not a Number);
Boolean()----将其他类型的数据转换成布尔类型,有值返回true,无值返回false;
全局方法 String() ----能够把其他类型的数据转换为字符串。
**4、**只有 0、空字符串、null、undefined、NaN、false这几个数据值转换为布尔类型的false,其余的都为true
1.4 变量—var和let
ES6 可以使用 let 关键字来实现块级作用域
在函数外声明的变量作用域是全局的,因此var 的使用要格外注意声明的位置,不然会出现如下的情况。
-
for循环中使用var:
var a = []; for (var i = 0; i < 10; i++) { /*此处使用的是匿名函数,函数存储在变量中,不需要函数名称,通常通过变量名来调用 */ a[i] = function () {console.log(i);};//此处声明了10个函数!如何证明?在for循环 } a[2]();//输出结果为10 a[3看 ]();//输出结果为10 /*调用函数时,但是变量i为全局变量,由于前面的循环结束后i最后的值为10,每个函数指向的console.log(i)里的i都为10*/
-
for循环中使用let:
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () {console.log(i);}; } a[2]();//输出结果为2 a[3]();//输出结果为3
1.5 函数的声明(注意:在js中函数是作为对象存在的)
function 函数名(形参1,形参2,…,形参n){函数体}
<script type="text/javascript">
function test1(a,b){
var c=a+b;
alert("函数第一种声明方式:"+a+b);
}
test1(1,2);
</script>
-
function 变量名=new Function(形参1,形参2,…,形参n){函数体};
1.6 函数的形参
- 函数调用时,形参可以不赋值,默认为undefined
- 函数调用时,形参可以不完全赋值,依次赋值
1.7函数的返回值
- 在函数内部直接使用return语句即可,不需要返回值类型
- 注意:默认返回undefined
1.8 函数的调用
-
在代码域中直接调用(用于页面初始化)
1.9 IIFE
IIFE (Immediately Invoked Function Expression) 立即调用函数。
(function () {
statements
})();
当函数变成立即执行的函数表达式时,表达式中的变量不能从外部访问。
(function () {
var name = "Barry";
})();
// 无法从外部访问变量 name
name // 抛出错误:"Uncaught ReferenceError: name is not defined"
2.经典实例
完全新手接触前端时,不用过分去考虑优化问题,先跑起来,能实现功能就行。
2.1出一个数判断是否是闰年
闰年规则:
普通闰年:公历年份是4的倍数,且不是100的倍数的,为闰年(如2004年、2020年等就是闰年)。
世纪闰年:公历年份是整百数的,必须是400的倍数才是闰年(如1900年不是闰年,2000年是闰年)。
function leap_year(){
var leap_year=prompt(“请输入一个年份:”);
if((leap_year%4===0&&leap_year%100!0)||leap_year%4000){
alert(leap_year+“是闰年”);
}
}
注:&&的优先级高于||,所if语句来面的||前面的表达式可以不用加外括号。
2.2判断是否某年的某月有多少天
switch(表达式){
case 常量表达式1: 语句1;
case 常量表达式2: 语句2;
…
case 常量表达式n: 语句n;
default: 语句n+1;
}
注意:
常量是固定值,在程序执行期间不会改变。
常量表达式的值只能是:数字和字符、字符串、布尔数、null。
各常量表达式的值不能相同。
什么是表达式?:
表达式是由一系列 运算符 和 操作数 组成的。表达式是由数字、算符、数字分组符号(括号)、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合。只含常量的表达式叫常量表达式
default执行条件:
**1、**default只有在case匹配失败的时候才会执行;**2、**case匹配成功了,但缺少了break语句;
思路:月份天数有闰月和大小月。利用switch的贯穿,区分区分大小月,再利用判断闰年的方法判断是否为闰月。执行了case里面的语句后才执行break,没匹配到case中的内容则继续执行,直到碰到default语句跳出Switch。
function (){
var year = prompt("请输入一个年份:");
var month = parseInt(prompt("请输入一个月份:"));
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert(month + "月有31天");
break;
case 2:
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
alert(month + "月有28天");//闰月
} else {
alert(month + "月有29天");
}
break;
case 4:
case 6:
case 9:
case 11:
alert(month + "月有30天");
break
default:break;
}
}
2.3输入一个带有年月日的字符串,判断这天位于当年的第几天
思路:年:判断年份是否为闰年----用于确定2月的天数;
月:switch 语句累加输入月份之前的总天数;
这里采用贯穿,其中要将case语句中1~12倒序匹配,原因是贯穿的缺点在于------如果没有break语句,case语句一旦匹配就会一直执行下去。如果按照case 的常量表达式按112顺序匹配,则如果输入的是4月份,那么累加的天数将会是4月份以后的所有月份的天数,所以要将case语句中112倒序匹配,这样如果输入的是4月份,则累加的是4、3、2、1月份的内容。
现在问题来了,如果输入的是4月21日,那么实际需要累加的1~3月的月份天数再加上4月的21天。所以再获取到的month要进行-1,相应的case 语句匹配的就是输入的月份的前一个月,故case常量表达式的匹配 值式12~1。
日: 最后加上具体的天数。
function dateday(){
var data=document.getElementById("demo3").value;//接收输入的带有年月日的字符串
var year=data.slice(0,4);//利用slice()函数切割字符串
var month=parseInt(data.slice(4,6))-1;
var day=parseInt(data.slice(6,8));//转换类型,因为后面要使用到算术运算,必须转换成数字才能进行运算
console.log(year);//控制台输出检查是否正确获取到值
console.log(month);
console.log(day);
var result=0;
switch (month) {
case 12:result+=31;
case 11:result+=30;
case 10:result+=31;
case 9:result+=30;
case 8:result+=31;
case 7:result+=31;
case 6:result+=30;
case 5:result+=31;
case 4:result+=30;
case 3:result+=31;
case 2:if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
result+=28;
} else {
result+=29;
};
case 1:result+=31;//12月
default:break;
}
result+=day;
alert("第"+result+"天");
}