day02JavaScript基础知识：数据类型用法和举例

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

分类

1. 整型数据 正整数 负整数 0
2. 浮点型 小数点后至少有一位不为0的数字
3. 特殊值:

​ 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

注意

1. js中没有分数 所有分数都会转换成小数
2. 由于计算机存储精度的问题，导致小数计算不准确 避免使用小数计算

NaN的特性

1. typeof检验以后 返回结果是number
2. NaN和任何数值都不相等 包括自身
3. 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格式的数据

1. 声明对象

声明空对象: var 变量 = {};

var obj = {};
console.log(obj);
console.log(typeof obj); // object

2. 声明对象 存储数据: var 变量 = {属性名: 属性值, 属性名1: 属性值1, …};

var obj1 = {
   'name': '彭于晏',
   'height': 188,
   'age': 33
};
console.log(obj1);

3. 从对象中取值: 对象.属性名 对象[‘属性名’]

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 函数检验数据类型的时候 只加函数名

数组的应用

1. 当图片的名称没有任何规律的时候， 用数组来存储图片的地址
2. 在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

运算符

分类

1. 算术运算符: + - * / % ++(自加) --(自减)
2. 赋值运算符: = += -= *= /= %=
3. 比较运算符: > >= < <= ==(相等) =(全等) !=(不等) !(不全等)
4. 逻辑运算符: &&(与) ||(或) !(非 取反)
5. 三目运算符: 条件 ? 条件为真, 执行的代码 : 条件为假, 执行的代码;

算术运算符

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 

隐式转换

1. 数值之间正常计算;
2. 如果有字符串的加法, 会进行字符串拼接;
3. 如果没有字符串的加法, 尽可能将数据都转换成数值之后进行计算, 其他运算符也是如此; Number
4. 如果有对象或者数组，先调用自身的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']));