文章目录
day02
数据类型
分类
基本数据类型: number string boolean null undefined
复杂/复合/引用数据类型: object array function
检验数据类型
语法: typeof 数据
typeof(数据)
返回当前数据的类型
var a = 20;
console.log(a);
console.log(typeof a);
console.log(typeof (a));
number
分类
- 整型数据 正整数 负整数 0
- 浮点型 小数点后至少有一位不为0的数字
- 特殊值:
3.1 NaN Not a Number 不是一个数字
\1. 当计算错误的时候
\2. 自己声明
3.2 进制数 了解
八进制数: 以0为开头 并且没有超过8的数字
十六进制: 以0x为开头 0-9a-f 0-15 a–10 b–11
3.3 Infinity -Infinity 正/负无穷大
3.4 10的次幂 e
注意
- js中没有分数 所有分数都会转换成小数
- 由于计算机存储精度的问题,导致小数计算不准确 避免使用小数计算
NaN的特性
- typeof检验以后 返回结果是number
- NaN和任何数值都不相等 包括自身
- NaN和任何数值计算结果都是NaN
var a = 20;
console.log(a);
console.log(typeof a);
console.log(typeof (a));
var b = .5;
console.log(b);
console.log(typeof b);
console.log(10 - 'a');
var c = NaN;
console.log(c);
console.log(typeof c);
console.log(NaN == NaN);
console.log(NaN + 10);
var d = 070;
console.log(d);
var e = 090;
console.log(e);
var f = 0xa;
console.log(f);
var g = Infinity;
console.log(g);
var h = -1/0;
console.log(h);
var i = 1e10;
console.log(i);
console.log(1/3);
console.log(0.1 + 0.2); // 0.30000000000000004
string
概念: 成对的单引号或者双引号中包裹的都是字符串
获取字符串的长度: 字符串.length
找到指定下标字符的方法: 字符串.charAt(下标) 字符串[下标]—ie8以上
下标: 从左往右, 从0开始的数字
var a = '123';
var b = "str";
console.log(typeof a, typeof b);
var str = '中新网1月5日电 据河北省卫健委网站消息,2021年1月4日0—24时,河北省新增14例本地新型冠状病毒肺炎确诊病例,其中石家庄市报告11例(2例为无症状感染者转为确诊病例),邢台市报告3例(1例为无症状感染者转为确诊病例)。无新增死亡病例,无新增疑似病例。\
1月4日0—24时,河北省新增30例本地无症状感染者,均为石家庄市报告。\
截至1月4日24时,河北省现有确诊病例19例(重型2例、普通型15例、轻型2例),累计治愈出院病例367例(含境外输入34例),累计死亡病例6例,累计报告本地确诊病例358例、境外输入病例34例。尚在医学观察无症状感染者40例。';
console.log(str);
// 获取字符串的长度: 字符串.length
console.log(str.length); // 295
// 找到第50个字是什么字 下标--49
// 找到指定下标字符的方法: 字符串.charAt(下标) 字符串[下标]---ie8以上
// 下标: 从左往右, 从0开始的数字
console.log(str.charAt(49));
console.log(str[49]);
boolean
boolean: 布尔值 true(真) false(假)
场景: 1. 判断 2. 条件的结果(比较运算符)
var t = true;
console.log(t);
console.log(typeof t); // boolean
console.log(typeof false);
// if(true){
// alert(1);
// }
console.log(NaN == NaN); // false
console.log(1 == 1); // true
null
null: 空,一个真正的空 只有一个值就是自己
做占位 当前变量没有值,但是后续有可能有值
var n = null;
console.log(n);
console.log(typeof n); // object
undefined
undefined: 值得空缺 本身应该有 但是没有
只声明变量,没有赋值变量
var a;
console.log(a);
console.log(typeof undefined); // undefined
规定: js中规定,null和undefined相等,但是不全等
console.log(null == undefined); // true
object
万物皆对象 一切皆对象
console.log(document);
console.log(typeof document); // object
console.log(window);
console.log(typeof window); // object
var box = document.getElementById('box');
console.log(box);
console.log(typeof box); // object
对象: json格式的数据
- 声明对象
声明空对象: var 变量 = {};
var obj = {};
console.log(obj);
console.log(typeof obj); // object
- 声明对象 存储数据: var 变量 = {属性名: 属性值, 属性名1: 属性值1, …};
var obj1 = {
'name': '彭于晏',
'height': 188,
'age': 33
};
console.log(obj1);
- 从对象中取值: 对象.属性名 对象[‘属性名’]
console.log(obj1.name);
console.log(obj1['name']);
array
array: 数组 存储不定数量不定类型的数据的容器
声明: var 变量名 = [值1, 值2, …];
获取数组的长度: 数组.length
获取指定的下标的值: 数组[下标]
var arr = [];
console.log(arr);
console.log(typeof arr); // object
var arr1 = [1, 0xa, true, false, "123str", null, undefined, document,window];
console.log(arr1);
// 获取数组的长度: 数组.length
console.log(arr1.length);
// 获取指定的下标的值: 数组[下标]
// 下标: 从0开始的数字
console.log(arr1[4]);
function
function: 函数 用来保存代码块 在有需要的时候进行调用
声明函数:
\1. 函数声明创建函数: function 函数名(){ // 要执行的代码 }
\2. 调用函数: 函数名();
注意: 如果只声明函数不调用,函数不起任何作用
function fun(){
console.log('今天是周二');
console.log('明天是周三');
console.log('还有3天放假');
}
fun();
fun();
fun();
console.log(typeof fun); // function 函数检验数据类型的时候 只加函数名
数组的应用
- 当图片的名称没有任何规律的时候, 用数组来存储图片的地址
- 在js中又不知道下标是几 假设当前下标是从0开始
// 当图片的名称没有任何规律的时候, 用数组来存储图片的地址
var arr = ["./img/0987.jpg", "./img/3786.jpg", "./img/aaa.jpg", "./img/12am.jpg"];
console.log(arr);
// 在js中又不知道下标是几 假设当前下标是从0开始
var n = 0;
// 想办法将arr中的图片地址依次从第一个赋值给img的src
// 点击一次切换到第二个
img.onclick = function(){
// 怎么样能找到arr中第二个地址
// 通过下标 第二个--下标1
n = n + 1;
console.log(n);
// 通过下标拿到地址
console.log(arr[n]);
// 将地址赋值给img的src
img.src = arr[n];
}
数据存储
基础数据类型: 声明和数据都直接存储在栈里面, 存储的数据量比较小 并且数据类型比较单一
复杂数据类型: 声明存储在栈里面, 数据存储在堆里面, 存储的数据量比较大 数据类型比较多样化
强制转换
为什么要强制转换
由于键盘上输入的都是字符串 字符串的+,变成了拼接
强制转换成数值后才能计算
/*
描述: 点击等号, 获取第一个输入框和第二个输入框得值,求和之后,赋值给span
*/
// 找元素
var inp1 = document.getElementById('inp1');
var inp2 = document.getElementById('inp2');
var btn = document.getElementById('btn');
var span = document.getElementById('span');
console.log(inp1, inp2, btn, span);
// 添加事件
btn.onclick = function(){
var txt1 = inp1.value;
var txt2 = inp2.value;
console.log(txt1, txt2);
console.log(typeof txt1);
// 赋值给span
span.innerHTML = txt1 + txt2;
}
number
Number
Number(要转换的数据) 将数据直接转换成number类型
可转换: 空字符串、空格字符串、纯数字字符串、boolean、null
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('12')); // 12
console.log(Number('200px')); // NaN
console.log(Number('a')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
parseInt
parseInt: parseInt(要转换的数据, 进制);
不写默认按照十进制转换 建议写上10
从左往右,依次转换每一个字符,遇到不能转换的就结束,如果第一个字符就不能转换,返回NaN
返回整型数据
console.log(parseInt('200px', 10));
console.log(parseInt('200.5px', 10));
parseFloat
parseFloat: parseFloat(要转换的数据)
从左往右,依次转换每一个字符,遇到不能转换的就结束,如果第一个字符就不能转换,返回NaN
返回浮点型、整型数据
console.log(parseFloat('200px'));
console.log(parseFloat('200.5px'));
isNaN
isNaN: isNaN(数据) 判断一个数据 是不是 不是一个数字
判断规则与Number一致
可转换: 空字符串、空格字符串、纯数字字符串、boolean、null
不是数字: true
是数字: false
console.log(isNaN('')); // false
console.log(isNaN(' ')); // false
console.log(isNaN('200')); // false
console.log(isNaN('200px')); // true
console.log(isNaN('true')); // true 加了引号之后的true不是布尔值
// typeof 返回的结果都是字符串类型的数据
console.log(isNaN(typeof 30)); // typeof 30 ---> number --> string isNaN('string') true
string
toString
toString: 数据.toString(进制);
进制可传可不传 默认传十进制
将数据转换成字符串
null\undefined不能使用这个方法
属于对象的一个方法
var n = 10;
console.log(n.toString());
console.log(typeof n.toString());
// 转换成多少进制的字符串
console.log(n.toString(2));
console.log(n.toString(8));
var t = true;
console.log(t.toString());
console.log(typeof t.toString());
var obj = {};
console.log(obj.toString()); // [object Object]
// var arr = [1,2,3];
var arr = [1];
console.log(arr.toString()); // "1,2,3" "1"
String
String: String(要转换的数据)
强制转换方法
console.log(String(null));
// console.log(null.toString()); // Cannot read property 'toString' of null
console.log(String(undefined));
// console.log((undefined).toString()); // Cannot read property 'toString' of undefined
Boolean
Boolean(要转换的数据)
js中的真真假假:
假: 0 NaN 空字符串 null undefined false
真: 除了假以外都是真的
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean(-1)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log({});
console.log(Boolean({})); // true
console.log([]);
console.log(Boolean([])); // true
运算符
分类
- 算术运算符: + - * / % ++(自加) --(自减)
- 赋值运算符: = += -= *= /= %=
- 比较运算符: > >= < <= ==(相等) =(全等) !=(不等) !(不全等)
- 逻辑运算符: &&(与) ||(或) !(非 取反)
- 三目运算符: 条件 ? 条件为真, 执行的代码 : 条件为假, 执行的代码;
算术运算符
console.log(10 + 20); // 30
console.log(10 - 20); // -10
console.log(10 * 10); // 100
console.log(10 / 10); // 1
console.log(10 % 3); // 1
注意:
++ 表示自加, 可以在变量前面写 也可以在后面写 在自身的基础上+1 并且赋值给自身
++在前 先自加, 然后在执行其他代码;++在后的时候, 先执行其他的代码,在自加;
–在前, 先自减, 然后在执行其他代码;–在后的时候, 先执行其他代码, 再自减;
// ++ 表示自加, 可以在变量前面写 也可以在后面写 在自身的基础上+1 并且赋值给自身
var n = 10;
++n;
console.log(n); // 11
n++;
console.log(n); // 12
// ++在前 先自加, 然后在执行其他代码
var m = 10;
// console.log(++m); // ++m; console.log(m); 11
// ++在后的时候, 先执行其他的代码,在自加
console.log(m++); // 10
// console.log(m); m++;
console.log(m); // 11
// --在前, 先自减, 然后在执行其他代码
var mn = 10;
// console.log(--mn); // 9
// --在后的时候, 先执行其他代码, 再自减
console.log(mn--); // 10 console.log(mn); mn--;
赋值运算符
将等号右边的给等号左边
var a = 20;
// +=: 在自身的基础上加一个数
a += 10; // a = a + 10;
console.log(a); // 30
a *= 10; // a = a * 10; a = 30 * 10;
console.log(a); // 300
a %= 10; // a = a % 10; a = 300 % 10;
console.log(a); // 0
比较运算符
比较运算符: 将符号左右两边进行比较, 看当前条件是否成立,如果成立返回true,如果不成立返回false
==: 相等 只比较数据的值
===: 全等 比较数据的值 和 数据类型 值和数据类型都相等 返回true
!=: 不等 只比较数据的值
!==: 不全等 比较数据的值 比较数据类型 有一个不相等 返回true
console.log(1 > 1); // false
console.log(1 >= 1); // 1>1 或 1==1 true
console.log(1 < 1); // false
console.log(1 <= 1); // true
// ==: 相等 只比较数据的值
// ===: 全等 比较数据的值 和 数据类型 值和数据类型都相等 返回true
console.log(1 == '1'); // true
console.log(1 === '1'); // false
console.log('1' === '1'); // true
// !=: 不等 只比较数据的值
// !==: 不全等 比较数据的值 比较数据类型 有一个不相等 返回true
console.log(1 != 2); // true
console.log(1 != '1'); // false
console.log(1 !== '1'); // true
逻辑运算符
逻辑运算符: 返回true和false
&&
&&: 左右两边各有一个条件, 如果两边条件都是true, 返回true, 如果有一个是false, 返回false
全真为真 一假为假
从左往右运算, 如果第一个条件为真,判断第二个条件 如果第一个条件为假,直接结束,返回false
console.log(true && false); // false
console.log(1 == 1 && true); // true
console.log(1 != 1 && false); // false
||
||: 左右两边各有一个条件, 如果两边条件都是false, 返回false, 如果有一个是true, 返回true
一真为真,全假为假
从左往右运算, 如果第一个条件为假,判断第二个条件 如果第一个条件为真,直接结束,返回true
console.log(false || true); // true
console.log(2 > 3 || 4 < 5); // true
console.log(1 !== '1' || true); // true
!
!: 取反 非 为真的返回 false 为假返回true
console.log(!{}); // false
console.log(!NaN); // true
console.log(!'a'); // false
var a;
console.log(!a); // true !undefined
三目运算符
三目运算符: 条件 ? 条件为真, 执行的代码 : 条件为假, 执行的代码;
// 2 > 3 ? alert(1) : alert(2);
// 如果2 > 3 弹出1 否则 弹出2
1 > 2 ? alert(1) : 2 > 3 ? alert(2) : alert(3);
// 有几个?就有几个判断
// 判断 1 > 2 如果 1> 2 弹出1
// 否则 判断 2 > 3 如果 2 > 3 弹出2 否则 弹出3
隐式转换
- 数值之间正常计算;
- 如果有字符串的加法, 会进行字符串拼接;
- 如果没有字符串的加法, 尽可能将数据都转换成数值之后进行计算, 其他运算符也是如此; Number
- 如果有对象或者数组,先调用自身的toString方法,转成字符串之后,再参考上述规则;
console.log(20 + 30); // 50
console.log('a' + 10); // a10
console.log('' + true); // 'true'
console.log('' + undefined); // undefined
console.log('1' + true); // 1true
console.log(1 + true); // 1 + 1 2
console.log(true - false); // 1 - 0 1
console.log(null * undefined); // 0 * NaN NaN
console.log(true / null); // 1 / 0 Infinity
var n = '1';
// console.log(n++); // 1 先输出 后自加
console.log(++n); // 2
console.log({} + 20); // [object Object]20
console.log([30] - '2'); // '30' - '2' 28
console.log([30,20] * 10); // '30,20' * 10 调用Number转换 Number('30,20')-->NaN NaN*10 NaN
console.log(3 > 2 + {} - ['20']);
console.log(3 > (2 + {} - ['20']));