day02 数据类型
1.回顾
-
什么叫js?
基于对象和事件驱动的解释性脚本语言
-
js的组成
ECMAScript:JavaScript的标准 DOM:Document Object Model 文档对象模型 BOM:Browser Object Model 浏览器对象模型
-
JavaScript和ECMAScript的关系?
前者是后者的具体实现 后者是前者的标准
-
引入方式
-
变量
存储数据的容器
声明变量:var 变量名 var a; //undefined 命名规则: 1.只能以数字、字母、下划线 $组成,不能以数字开头 2.不能使用关键字和保留字 3.见名知意,遵循驼峰标识 4.不要重名
-
事件
- onclick:点击
- onmouseover:鼠标移入/onmouseenter
- onmouesout:鼠标移出/onmouseleave
- onmousedown:鼠标按下
- onmouseup:鼠标抬起
- onmouesmove:鼠标移动
- ondblclick:双击
- oncontextmenu:右击
-
操作标签
-
操作标签内容
-
表单元素:标签.value
-
闭合标签: 标签.innerHTML/innerHTML
覆盖 innerHTML:识别标签 innerText:不识别
-
-
操作标签属性
- 语法:标签.属性名 = “属性值”
- 特殊:标签.className
-
操作标签样式
-
语法:标签.style.属性名 = 属性值
-
特殊:js中不允许出现-,需要使用驼峰标识
oDiv.style.backgroundColor = "red"; oDiv.style.fontSize = "20px";
-
cssText:重写style属性
oDiv.onmouseover = function(){ //js所有的样式操作都是在行间,cssText重新style属性 oDiv.style.cssText = "background:red;font-size:20px"; }
-
-
2.数据类型
根据数据特性、以及存储空间位置、存储容量进行划分
2.1 数据类型的分类
js数据类型分为6大类
- 五大基本数据类型
- number : 数值
- string:字符串 “” ‘’
- boolean:布尔 true false
- undefined:未定义
- null:空
- 复合类型(复杂类型、引用类型)
- object : 对象
- array:数组
- function:函数
2.2 基本数据类型
- number:小数、整数、 负数、二进制、八进制、十六进制、NaN、infinity
//1.1整数
var n1 = 10;
//1.2小数
var n2 = 3.14;
var t1 = typeof(n1);
console.log(t1); //number
var t2 = typeof n2;
console.log(t2); //number
//1.3八进制,以0开头,并且没有超过8的值,表示8进制,
var n3 = 045;
console.log(typeof n3,n3); //number 37
//1.4 十六进制 0x开头
var n4 = 0x22;
console.log(typeof n4,n4);//number 34
//1.5 NaN : not a number
var n5 = "睡觉"*6; //NaN,js中所有的数据运动都不会报错,如果不能正常运算结果为NaN
console.log(typeof n5,n5); //number NaN
//1.6 Infinity
var n6 = 5/0;
console.log(typeof n6,n6); //number Infinity
//1.7 小数在计算的时候稍微有点小偏差(精度缺失),不要用小数作为判断条件
console.log(0.1+0.2) //0.30000000000000004
console.log(0.1+0.2 == 0.3); //false
-
string
引号引起来,单引号和双引号都可以
//2.字符串 引号引起来的就是字符串 所有从页面获取的内容都是字符串 var s1 = "web1116"; var s2 = 'web1109'; console.log(typeof s1,typeof s2); //string string //获取字符串的个数 var len = s1.length; console.log(len); //7 //字符串.charAt(下标) :获取对应下标字符,所有的下标从0开始 console.log(s1.charAt(0));//w console.log(s1[0]); //w ie7-不兼容
-
boolean
//3.Boolean布尔: true false,要么是判断结果,要么是判断条件 var b1 = true; var b2 = false; console.log(typeof b1); //boolean console.log(10>20); //false 判断结果
-
undefined与null
//undefined:未定义 声明变量但是没有赋值,结果就是undefined var a; console.log(typeof a,a); //undefined //null:空对象,获取一个不存在对象返回的值 var oHa = document.getElementById("哈哈哈"); console.log(typeof oHa,oHa); //object null
undefined和null的区别?(笔试)
- undefined:空变量,未定义,声明了变量但是没有定义
- null:空对象,返回一个不存在对象返回的值
2.3 复杂类型(复合、引用、对象类型)
-
object:对象类型
var oDiv = document.getElementById("box"); //1.object:对象 console.log(typeof window); //object console.log(typeof document);//object console.log(typeof oDiv);//object 所有的标签都是对象 //自己创建对象 键值对组成 key:value var obj = { "sex":"异性", "height":"2米以上", "weight":"188", "city":"北京户口", "parent":"是局长" } console.log(obj); console.log(obj.city); //北京户口 console.log(obj["city"]);//北京户口
-
array:数组
//2.array:存储数据的容器,可以存储任意数据类型,可以存储任意多个 var arr = [1,"a",true,null,undefined,{},[1,2,3]]; console.log(arr); console.log(typeof arr); //object console.log(arr.length); //7个,获取数组的长度 console.log(arr[2]); //下标从0开始 true
-
function:函数
//3.function : 函数 //函数:存储一段代码块,需要的时候调用 //声明函数:function 函数名(){ 存储的代码块 } //调用函数:函数名() function homeWork(){ console.log("开始做作业"); console.log("正在做作业"); console.log("作业已完成"); } //在需要的时候调用,可以重复使用 homeWork(); homeWork(); homeWork(); homeWork(); homeWork();
2.4 typeof的返回值
-
typeof number ----- >number
-
typeof string ----- > string
-
typeof boolean ----- >boolean
-
typeof undefined ------> undefined
-
typeof null ------> object
-
typeof Object -------> object
-
typeof array ------> object
-
typeof function -----> function
-
数据类型的分类的依据:
- 存储数据的特点:
- 基本数据类型存储数据结构单一
- 复合数据类型存储数据结构复杂
- 存储位置不同
- 基本数据类型存储在栈,变量名中直接存储数值
- 复合数据类型存储在堆区,变量名中存储的是内存地址
- 存储数据的特点:
2.5 数据类型的转换
2.5.1 数据类型的强制转换
-
转换为number
-
Number(转换的内容):返回转换好的内容
-
parseInt():默认从左往右开始转换,遇到不能转换的,或者是到末尾就会停止,取整
-
parseFloat:默认从左往右开始转换,遇到不能转换的,或者是到末尾就会停止,保留小数
var b1 = true; //Number(需要转换的内容):返回转换好的值 var s1 = Number(b1); console.log(s1); //true-----1 var s2 = Number(false); console.log(s2); //false ----- 0 //字符串只能转纯数字,空字符 console.log(Number("123")); //123 console.log(Number("")); //0 console.log(Number("9.9元")); //NaNx console.log(Number("¥9.9")); //NaN console.log(Number(undefined));//NaN console.log(Number(null)); //0 //parseInt:默认从左往右开始转换,遇到不能转换的,或者是到末尾就会停止,取整 console.log(parseInt("9.9")); //9 console.log(parseInt("9.9px")); //9 console.log(parseInt("a9.9px")); //NaN //parseFloat:默认从左往右开始转换,遇到不能转换的,或者是到末尾就会停止,保留小数 console.log(parseFloat("9.9"));//9.9 console.log(parseFloat("9.9px"));//9.9 console.log(parseFloat("a9.9px"));//NaN
-
保留小数
//变量.toFixed(num): 保留n为小数,四舍五入 var a = 0.1; var b = 0.2; var c = a+b; //0.3000000000000000004 console.log(c.toFixed(2));
-
-
转为string
-
String(需要转换的值)
-
需要转换的值.toString()
/String(需要转换的内容):返回转换好的内容 var s = 431102200212153363; var n = 10; var b = true; var u = undefined; var nu = null; var arr = [1,2,3]; var obj = {"name":"fd"}; console.log(String(n),n); //"10" console.log(String(b),b);//"true" console.log(String(u));//"undefined" console.log(String(nu));//"null" console.log(String(arr)); //"1,2,3" console.log(String(obj)); //[object Object] //需要转换的内容.toString(n) : 转换为对应进制的字符串 2-36 console.log(n.toString()); //10 console.log(n.toString(8)); //12 //console.log(u.toString()); nudefined和null没有toString方法 //console.log(nu.toString());
-
-
转Boolean(了解–真假问题)
//Boolean():转boolean //非0为真 console.log(Boolean(1)); //true console.log(Boolean(-2)); //true console.log(Boolean(0)); //false //有值则为真,“”:假 console.log(Boolean("1")); //true console.log(Boolean("")); //false console.log(Boolean(undefined));//false console.log(Boolean(null));//false //复合数据类型(对象类型)永远为真 console.log(Boolean([])); //true console.log(Boolean({})); //true
3.运算符
-
赋值运算符
//1.赋值运算符 = += -= *= /= %= var a = 10; //将10赋值给a console.log(a); a += 2; //累加追加 在当前的基础上+ a = a + 2 console.log(a);
-
算术运动符
//2.算术运算符 + - * / %(取余,求模) ++自加 -- console.log(10+4);//14 console.log(10-4);//6 console.log(10*4);//40 console.log(10/4);//2.5 console.log(10%4);//2 //隐式转换,运算过程中数值自己进行的转换 //+只要遇到字符串就会变成连接符,其他运算符都会转换为number进行运算 console.log(10-"2");// “2”--2 console.log("10"*1);// “10”--10 console.log(10+20+"age"+10+18);//30age1018 var a = 10; a++; //11 ++a; //11 //如果是运算或者是打印的时候,++在前先自加,后运算,++在后,先运算,后自加 console.log(a); var x = 10; var y = x++; //y = 10 x=11 console.log(x,y);//11 10 var m = 10; var n = ++m;//m = 11 n = 11 console.log(m,n);//11 11
-
比较运算符
//3.比较运算符 > < >= <= ==(相等) != ===(全等) !== //判断的时候都会尽可能转换为number进行比较,字符串和字符串在比较的时候不会转换,一位一位比 //比较的是编码ASCII “0”--48 ”A“--65 ”a"---97 console.log(2>"1000000000");//false console.log("2">"10000000000000"); //true //null、undefined使用 “==” 做判断的时候,不进行隐式转换 console.log(null == null); //true console.log(null == undefined); //true console.log(undefined == undefined); //true //==(会进行隐式转换) ===(不会进行隐式转换,一模一样) console.log(10 == "10");//true console.log(10 === "10");//false
-
逻辑运算符
//4.逻辑运算符 &&与 ||或 !非 // &&与 ||或:连接两个判断条件的 var c = 89; //两个条件都为真,结果才为真 console.log(100>c && c>80); //true //|| 一真为真 var a = 56; var b = 65; console.log(a>=60 || b>=60); //!:取反 true false console.log(![]); //false console.log(!1); //false console.log(!""); //true //短路运算 //&&两真为真,如果第一个条件为假,第二个条件就不看了 //&&两真为真,如果第一个条件为真,再去看第二个条件 var m = 1 && 3; console.log(m);//3 var n = 0 && 1; console.log(n);//0 //一真为真,如果第一个值为真,第二个值就不看了 //一真为真,如果第一个值为假,再去看第二个条件 var x = 1 || 3; var y = 0 || 1; console.log(x,y);//1 1
-
三目(三元)运算符
//5.三目运算符 //语法:条件 ?条件成立时执行的代码 : 条件不成立时执行的代码? var age = 10; age < 7 ? console.log("找对象") : console.log("结婚");