JavaScript-Day2
一、数据类型
数据是有类型
在JS(ES5),数据分为两大类:
1.基本(简单)数据类型
基本数据类型5类
- 数值类型 number 1,2,3,6,1.1,-100,-100.99…
- 字符串类型 string “” ‘’
- length属性 字符串长度
- charAt(index) 根据索引取出字符串中字符 索引从0开始
- 布尔类型 boolean 真假 true false
- null 空
- undefined 未定义 表示变量定义了,但是没有初始化(赋值)
注意:若检测null的数据类型,结果为object
console.log(typeof o);//object
特殊情况:NaN not a number
console.log(a);//NaN
console.log(typeof a);
null和undefined的区别:
undefined是访问以未初始化的变量时的返回的值
null是访问一个不存在的对象时返回的值
undefined表示访问一个空的变量,null表示访问一个空的对象
2.复杂数据类型
引用(对象)类型
例如:Object 、Array、Function 、Date…
1)Object类型
var obj={ //定义对象
name:"jack",
age:20
};
//取出对象的值
console.log(obj.age);
//对象赋值
obj.age=100;
2)数组类型 Array
数组中可以保存多个数据
属性:length 数组的元素个数
索引:从0开始
数组可以通过 [索引] 形式来取值和赋值
var arr = [10, 20, 10, 20, 100, 50];
console.log(arr[0]);//取值
console.log(arr[5]);
arr[0]=100;//赋值
console.log(arr);
3)Function类型
函数是一种封装
函数不会自动执行,需要调用才能执行
//定义一个函数
function show() {
console.log('hello');
console.log('world');
console.log('哈哈哈');
}
show();//调用函数
show();
show();
判断数据类型:typeof
常量和变量
二、数据类型转换
1.为什么要进行数据类型转换?
2.数据类型转换
强制类型转换和隐式类型转换
3.强制类型转换
1)其它类型转换为number类型
Number() 可以将数字类型的字符串转换为数值类型 其它的类型则会转换为NaN
parseInt()
parseFloat()
//parseInt() 自左向右一个一个的转换,遇到非数字型字符,结束转换
// var a="hello";
// var b="10";
// var c="hello999";
// var d="999hello888";
// var s=parseInt(a);//NaN
// var s=parseInt(b);
// var s=parseInt(c);//NaN
// var s=parseInt(d);//999
// console.log(s);
//parseFloat()
// var s=parseFloat(a);//NaN
// var s=parseFloat(b);//10
// var s=parseFloat(c);//NaN
// var s=parseFloat(d);
var a="9.99";
var s=parseInt(a);//转换为整数类型
var s1=parseFloat(a);//转换为浮点类型
console.log(s,s1);
可以通过isNaN()方法来判断指定变量是否为:非数字
2)其它类型转换为字符串类型
- 调用toString() 例如:a.toString()
4.隐式类型转换
在JavaScript中运算过程中,会发生数据类型之间的转换。例如:加减乘除
+碰到了字符串,则运算结果是字符串类型
数字类型字符串,进行减法、乘法、除法等…
三、运算符
能够进行运算的符号
1.算术运算符
+(加法) - * / %(取余)
++ –
注意:
-
若+运算符两边有一个为字符串类型,则执行拼接操作,拼接结果为字符串类型
-
数字型字符串可以进行算术运算
-
自增自减运算符的前置和后置对变量自身没有影响 ++a a++
-
若自增和自减出现在了赋值语句中:
- 运算符前置,先运算,再赋值
- 运算符后置,先赋值,后运算
2.赋值运算符
= += -= *= /= %= (先运算,再赋值)
3.比较(关系)运算符
运算结果是:布尔类型
大于 > < >= <= == != ===
注意:>=和<= 有一个成立即可
和=的区别: ==只比较数值,===既比较数值,又比较数据类型
console.log('我' == '我');//判断两个字符串是否一致
console.log(null==undefined);//true
console.log(null===undefined);//false
4.逻辑运算符
一般情况下,逻辑运算符的运算结果为:布尔类型
&& 逻辑与
两边均为真,则为真,其它均为假
|| 逻辑或
两边只要有一个为真,则结果为真。两边均为假,则假
! 非
取反
5.条件运算符
?:
条件?表达式1:表达式2
执行规则:若条件为真,则结果为表达式1,若条件为假,则结果为表达式2
6.运算符的优先级
四、拓展
基本数据类型与引用数据类型的区别:
手绘内存图
注意:
基本数据类型赋值和引用类型赋值的区别
课后作业
qq号验证
设置一个input标签和一个内容为检测的按钮,在点击按钮的时候,让获取input的内容并判断
要求:
1、有没有输入
2、输入的是不是数字
3、不能有0在前面
4、不能是小数
5、输入的数字必须在5位以上、11位以下
如果满足要求,就弹窗输出验证成功,如果不满足要求,就弹窗输出验证失败
<body>
<input type="text" placeholder="请输入您的QQ号,宝贝" id="inp">
<input type="submit" value="登录" id="btn">
<script>
var inp = document.getElementById('inp');
var btn = document.getElementById('btn');
btn.onclick = function () {
if (inp.value == "") {
alert('请输入QQ号');
} else if (isNaN(inp.value)) {
alert('请输入数字');
} else if (inp.value[0] == 0) {
alert('QQ号开头不能为零');
} else if (parseFloat(inp.value) !== parseInt(inp.value)) {
alert('QQ号不能是小数');
}
else if (inp.value.length < 5 || inp.value.length > 11) {
alert('输入的数字必须在5位以上、11位以下');
}else{
alert('验证成功');
}
}
</script>
</body>