JS学习day02--js数据类型

1、数据类型分类

1、数据类型

1、基本数据类型（简单类型）：Number(数值) String(字符串) Boolean(布尔) Null(空) Undefined(未定义)

2、引用数据类型（复杂类型）：Object(对象)

2、typeof运算符

• 作用：检查数据类型，返回六个字符串

• 格式：typeof(值) / typeof 值

  typeof 数值 —> number

  typeof 字符串 —> string

  typeof 布尔 —> boolean

  typeof null —> object

  typeof undefined —> undefined

  typeof 对象/数组 —> object

  typeof 函数 —> function

3、Number

Number类型即数值类型，主要作用于存储数据，参与数学运算。

// 1、整数 小数 负数 都是数值类型
var a = 10;
var b = 0.2;
var c = -8;
console.log(a, typeof a); // 10 'number'
console.log(b, typeof b); // 0.2 'number'
console.log(c, typeof c); // -8 'number'

// 2、8进制的也是数值
var d = 070; // 8进制
console.log(d, typeof (d)); // 56 number

// ----------------------------
// 3、NaN
var e = '小王' - 5; // 减法运算本来想得到一个数字，但是我没有办法给你一个数字，只能给你一个NaN
console.log(e); // NaN      not a number(不是一个数字)

console.log(e == e); // false       NaN和谁都不相等，包括它自己
console.log(e + 5); // NaN          任何涉及NaN的操作，结果都是NaN
console.log(typeof e); // 'number'  typeof返回的是number

// NaN的特点：
// 1、任何涉及NaN的操作都返回NaN
// 2、NaN跟谁都不相等，包括它自己
// 3、typeof查看返回的是number

// -------------------------
var f = 0.1 + 0.2;
console.log(f, typeof f); // 0.30000000000000004    'number'
// 不要做 0.1+0.2==0.3 这种测试

// ---------------------
// 无穷
var g = 1 / 0;
console.log(g, typeof g); // Infinity  无穷大   'number'

4、String

String类型即字符串类型，是用引号引起来的数据，单双引号都可以

var str1 = 'abc';
var str2 = "def";
var str3 = "我就是我，'不一样'的烟火";
var str4 = '我就是我，\'不一样\'的烟火'; // 转义

console.log(str1, typeof str1);
console.log(str2, typeof str2);
console.log(str3, typeof str3);
console.log(str4, typeof str4);

console.log(10);
console.log('10');

// --------------------------------
// 从input表单中获取的值，都是字符串，即便输入的是数字，它也是字符串
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
btn.onclick = function () {
    var t = txt.value;
    console.log(t);
    console.log(typeof t); // 'string'
}

// ------------------------------
// 字符串的长度和下标
// 长度：字符串.length 从1开始数
// 下标：从0开始数，可以通过下标获取某一个字符  字符串[下标] / 字符串.charAt(下标)
var str = '平头哥';
console.log(str.length); // 3
console.log(str[2]);

var str2 = '';
console.log(str2.length); // 0

5、Boolean

Boolean 类型只有真和假，即 true、false

var b1 = true; // 真
console.log(b1, typeof b1); // true 'boolean'

var b2 = false;
console.log(b2, typeof b2); // false 'boolean'

// -----------------------------

// if (小括号中就是真假) {

// }

6、null 与 undefined

• null 表示变量已赋值但为空。（如果将来要给这个变量赋一个对象，但是现在还没有，则我们声明这个变量为null）
• undefined 表示变量已声明但是没有赋值

var n = null;
console.log(n, typeof n); // null 'object'

var u;
console.log(u, typeof u); // undefined 'undefined'

null和undefined的区别

• 1、undefined是申明了，未赋值，null是值为空，是准备在将来存储为一个对象的
• 2、undefined的typoef返回的是undefined，null的typeof返回的是object
• 3、undefined转成数字是NaN，null转成数字是0

7、Object

对象：本质上是一组无序的名值对

// 从页面当中获取的所有元素（标签）都是对象类型
var box = document.getElementById('box');
console.log(box, typeof box); // object

console.log(document, typeof document); // object
console.log(window, typeof window); // object

// ---------------------------
// 说某个元素是一个对象，你就想着它长得是大括号包着的
var obj = {
    name: 'zs',
    age: 3
}
console.log(obj);
console.log(typeof obj); // object

// ------------------------------
var arr = [1, 2, 3]; // 数组
console.log(arr, typeof arr); // object

// --------------------
function fn() { } // 函数
console.log(fn, typeof fn); // 'function'

2、数据类型的强制转换

1、转数字

1、Number(值)

作用：可以将任何数据类型转成数字，分能转成功或不能转成功。不会改变值本身

转换规则：

• 1、字符串如果全是数字(包括小数点)转成数字；如果有不是数字的，转成NaN，空字符串和空格转成0
• 2、true转成1， false转成0
• 3、数字简单的返回
• 4、null转成0
• 5、undefined转成NaN
• 6、对象一般返回NaN，一般不用来转对象

var s1 = '10';
console.log(Number(s1)); // 10
console.log(s1); // '10'
console.log(Number('12px')); // NaN
console.log(Number('12.34')); // 12.34
console.log(Number('')); // 0
console.log(Number('    ')); // 0

console.log(Number(12)); // 数字简单返回

console.log(Number(true)); // 1
console.log(Number(false)); // 0

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

2、parseInt() 和 parseFloat()

• parseInt(值, 进制) 转成整数
• parseFloat(值) 转成小数，和parseInt的区别，它识别一个小数点，并且没有第二个参数

他们解析的原则是从前往后进行解析，尽其所能。若存在有能识别的数字就解析，遇到不能识别的就结束转换，如果第一位就不是数字则返回NaN

console.log(parseInt('12px')); // 12
console.log(parseInt('12.34px')); // 12
console.log(parseInt('12px34')); // 12
console.log(parseInt('ab12px')); // NaN
console.log(parseInt('   12px34')); // 12

console.log(parseInt('070')); // 在标准浏览器下返回70，在IE8及以下返回56
console.log(parseInt('070', 10)); // 添加第二个参数，在所有浏览器下返回70

console.log(parseFloat('12.34px')); // 12.34
console.log(parseFloat('12.3.4px')); // 12.3
console.log(parseFloat('12px')); // 12

2、转字符串

• String(值); 可以将任何数据类型转成字符串，不会影响原来的值
• 值.toString(); 同String()转换，null和undefined不能转换

var num = 10;
console.log(String(num)); // '10'
console.log(num);
console.log(String(070)); // '56'
console.log(String(NaN)); // 'NaN'
console.log(String(1 / 0)); // 'Infinity'

console.log(String(true)); // 'true'
console.log(String(false)); // 'false'

console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'

// --------------------------------
console.log(String([])); // ''
console.log(String([1])); // '1'
console.log(String([1, 2, 3])); // '1,2,3'

// ---------------------------------
var n = null;
// console.log(n.toString()); // 不能转

var u;
// console.log(u.toString()); // 不能转

3、转布尔

Boolean(值)

作用：可以将任何数据类型转成布尔值，不影响原值

console.log(Boolean(10)); // true
console.log(Boolean(-10)); // true
console.log(Boolean(0)); // false
console.log(Boolean(1 / 0)); // true
console.log(Boolean(NaN)); // false

console.log(Boolean('ab')); // true
console.log(Boolean('')); // false
console.log(Boolean('   ')); // true

console.log(Boolean(true)); // true
console.log(Boolean(false)); // false

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

console.log(Boolean([])); // true 一切对象都是真的
console.log(Boolean({})); // true

记住：js世界里，0、NaN、’’、false、null、undefined 这六个为假，其它一切都是真的

4、isNaN

isNaN(值) 是不是不是一个数字？不是数字返回true，是数字返回false

isNaN本身不工作，它有一个好朋友Number()，它接收到参数，交给Number()转换，如果能转成数字，就返回false，如果不能转成数字，就返回true

console.log(isNaN('10')); // false
console.log(isNaN('')); // false
console.log(isNaN(' ')); // false
console.log(isNaN('12px')); // true

console.log(isNaN(1 / 0)); // false
console.log(isNaN(NaN)); // true

console.log(isNaN(true)); // false
console.log(isNaN(false)); // false

console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true

console.log(isNaN([])); // false	Number([])-->0
console.log(isNaN([1])); // false   Number([1])-->1
console.log(isNaN([1, 2, 3])); // true   Number([1,2,3])-->NaN

3、运算符

1、算术运算符

加（+）减（-）乘（*）除（/）取余（%）加加（++）减减（–）

加（+）

规则：

• 1、如果两边都是数字，则就是普通的数学计算
• 2、如果有一边是字符串，则另一边也转成字符串，变成字符串的拼接
• 3、如果没有字符串，则调用Number方法，转成数字，再进行相加
• 4、如果有一边是对象，则对象调用toString得到字符串表示，再进行计算

console.log(10 + 5); // 15
console.log('10' + 5); // 105

console.log(true + 0); // 1
console.log(true + false); // 1
console.log(null + false); // 0
console.log(null + false); // 0
console.log(null + undefined); // NaN
console.log(null + 'undefined'); // 'nullundefined'
console.log(null + [1, 2, 3]); // 'null1,2,3'

var a = 5;
var b = 10;
console.log('5+10的和是15');
console.log(a + '+' + b + '的和是' + a + b); // 5+10的和是510
console.log(a + '+' + b + '的和是' + (a + b)); // 5+10的和是15

减（-）乘（*）除（/）

只要不是数字，运算符的两边都调用Number()方法

console.log(10 - 5); // 5
console.log('10' - 5); // 5
console.log('小王' - 5); // NaN

取余（%）

取余数，如果左右两边不是数字，则调用Number()转成数字

console.log(10 % 3); // 1
console.log('10' % 3); // 1

// 一个递增的变量取余n，返回的是0--n减1之间的数
console.log(0 % 3); // 0
console.log(1 % 3); // 1
console.log(2 % 3); // 2
console.log(3 % 3); // 0
console.log(4 % 3); // 1
console.log(5 % 3); // 2
console.log(6 % 3); // 0

加加（++）减减（–）

加1或减1

var a = 10;
a++; // a = a + 1
++a; // a = a + 1
console.log(a); // 12

// 加加在后，先参与表达式的运算，再自增1，加加在前，先自增1，再参与表达式的计算
var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;
var num4 = num1 + num2;
console.log(num3, num4);

var a = 12;
console.log(a++); // 12

var a = '10';
a++; // 1、将a调用Number转成数字10，2、10+1
console.log(a); // 11

2、赋值运算符

• 赋值（=）
• 加等于（+=）
• 减等于（-=）
• 乘等于（*=）
• 除等于（/=）
• 取余于（%=）

var a = 10; // 赋值
a += 5; // a = a + 5;  操作符的两边先操作，结果赋给左边
console.log(a); // 15

3、比较运算符

比较运算符判断两个变量的大小，返回布尔值

大于（>） 小于（<） 大于等于（>=） 小于等于（<=）

console.log(10 > 5); // true
console.log(10 >= 5); // true
console.log(10 >= 10); // true

console.log(10 >= '2'); // true  字符串调用Number()
console.log('10' >= '2'); // false  两边都是字符串，就是字符串的比较，比较的是ASCII编码。字符串比较时，是一位一位的比较

值是否相等（==） 不等于（!=）

• 两个等号的相等比较，会进行隐藏类型转换，调用Number()后再进行比较
• null和undefined不能调用Number进行转换

console.log(10 == 10); // true
console.log(10 == '10'); // true
console.log(true == 1); // true
console.log(false == 0); // true
console.log(false != 0); // false

console.log(null == false); // false
console.log(null == undefined); // true 规定的
console.log(null != undefined); // false 规定的

绝对等于（=） 绝对不等于（!）

值和类型都要相等，它不会发生隐式类型转换(推荐使用)

console.log(10 === '10'); // false
console.log(null === undefined); // false
console.log(null !== undefined); // true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yXxnY2W9-1606827421757)(e850352ac65c103880a07b53bc119313b17e8941.png)]

4、逻辑运算符

&& 与(并且)

• 如果两边都为真，结果为真
• 如果左边为假，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
• 如果左边为真，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值

console.log(10 >= 10 && 10 >= 5); // true
console.log(10 >= 10 && 10 <= 5); // false

console.log(10 < 5 && 10 > 5); // false
console.log(0 && 10 > 5); // 0
console.log('' && 10 > 5); // ''

console.log(5 && 10 > 5); // true
console.log(5 && 10); // 10
console.log(5 && NaN); // NaN

|| 或(或者)

• 只要有一边为真，结果为真
• 如果左边为真，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
• 如果左边为假，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值

console.log(10 > 5 || 10 < 5); // true
console.log(10 < 5 || 10 > 5); // true
console.log(10 < 5 || 3 > 5); // false

console.log(10 || 3 > 5); // 10
console.log(0 || 3); // 3
console.log(0 || ''); // ''

! 非(取反)

var a = 10;
console.log(!a); // false
console.log(!!!!!!!!!a); // false
console.log(!!a); // true 相当于调用了Boolean()这个方法

5、三目(三元)运算符

条件 ? ‘条件为真执行这里’ : ‘条件为假执行这里’;

var age = 7;
// age >= 7 ? alert('上小学') : alert('上幼儿园');

var msg = age >= 7 ? '上小学' : '上幼儿园'; // 推荐用法
alert(msg);

6、运算符的优先级

优先级：https://github.com/xhlwill/blog/issues/16

console.log(3 + 4 * 5); // 23
console.log((3 + 4) * 5); // 35

console.log(3 > 2 > 1); // false
console.log(3 || 2 && 2 || 1); // 3

4、数据类型的隐式转换

隐式类型转换： + - * / ++ – %都具有隐式类型转换的作用

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // 10string
console.log(19 + 10 + 'age' + 18 + 10) // 29age1810
console.log(10 + '100'); // 10100
console.log(10 + true); // 11
console.log(true + false); // 1 
console.log('10' + true); // 10true
console.log('' + 100); // '100'
console.log(10 + null); // 10
console.log(10 + undefined); // NaN 
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100
console.log(100 - true); // 99
console.log(100 - '80'); // 20
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0
console.log(100 * '100');// 10000 
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // 无穷
console.log(100 / '70'); // 10/7
console.log(100 / null); // 无穷
console.log(100 / undefined); // NaN 
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++;
console.log(n); // 11
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // flase