数据类型的分类：
1. 基础数据类型/简单数据类型：Number(数值型)，String(字符串类型)，Boolean（布尔类型），Null（空值），Undefined（未定义）
2. 引用数据类型/复杂数据类型：对象（Object类型）分为一般对象，Array，Function
检测变量的数据类型的两种格式：
1. typeof(变量)；2. typeof 变量；(注意中间有空格)
typeof(变量)检测数据返回的数据类型取值有(6种)：
"number", "string", "boolean", "object", "function", "undefined".
<script>
/*
在JS中采用typeof(变量); 或者 typeof 变量;
来检测变量的数据类型是什么;
*/
var num = 12;
console.log(num, typeof (num)); //12 "number"
var str = "Karry";
console.log(str, typeof str); //Karry string
var b = true;
console.log(b, typeof (b)); //true "boolean"
var n = null;
console.log(n, typeof n); //null "object"
var d;
// undefined表示没有初始化的的变量
console.log(d, typeof (d)); //undefined "undefined"
// undefined 表示未定义的变量
console.log(typeof (a)); //undefined
</script>Number类型：主要是数值型，用于存储数据，参与数学运算。
主要有：整数，小数，负数，二进制，八进制，十六进制等都是数值型；
声明方式: var num = 1; (var 变量名 = 数值；)
特殊的Number类型：
- NaN: 表示不是一个数字，任何不能正常进行数学运算的或不能得到正常数字的都返回NaN;
- 无穷大/无穷小：Infinite/-Infinity
- 小数相加会有偏差 比如0.1+0.2 !==0.3 ; 0.1 + 0.2 ===0.30000000000000004
<script>
var num = 3;
console.log(num, typeof num); //3 "number"
// ----------------------------------------------
var num1 = 3 / 0;//Infinity "number"
var num1 = -3 / 0;//-Infinity "number"
console.log(num1, typeof num1);
// ----------------------------------------------
var num2 = 3 / '4'; //0.75 "number"
var num2 = 3 * '4'; //12 "number"
var num2 = 3 - '4'; //-1 "number"
/*
如果是数字字符型的会转换成数值型 然后计算
*/
// 乘除减一个非数字类型的值全都会返回NaN
var num2 = 3 / 'a';
var num2 = 3 / 'a';
var num2 = 3 - 'a';
console.log(num2, typeof num2); //NaN "number"
// --------------------------------------------------
// 加 则表示拼接 字符串
var num3 = 3 + 'a';
console.log(num3, typeof num3); //3a string
// ---------------------------------------
// var num4 = NaN;
// var num4 = NaN / 2;
// var num4 = NaN * 2;
// var num4 = NaN - 2;
// var num4 = NaN + 2;
var num4 = NaN - "w";
var num4 = NaN + "w";
// NaN和任何数据类型进行运算时候，返回值全为NaN 且是数值类型
// 除了拼接字符串除外...
console.log(num4, typeof num4); //NaN "number"
</script>String数据类型：即字符串类型，是指用引号引起来的数据，单引号和双引号都可以。'' , "" 。
注意，当我们从input等表单控件中获取的用户输入的内容数据，均为字符串类型。
字符串.length; 获取当前字符串的长度；
字符串.charAt(下标) ： 获取字符串对应下标下的内容，下标从0开始；
<script>
/*
声明方式：var str = '';/"";
引号里面可以写内容
String数据类型有两个方法
获取字符串的长度 .length;
获取字符串的下标 charAt(); 下标从0开始计算，ie7及其以下获取到的为undefined值
*/
var str = "123321";
console.log(str.length);//6
console.log(str.charAt(1));//2
</script>Boolean类型：即布尔值类型；取值只有false和true两种类型的值。
<script>
/*
布尔数据类型：只有有个取值：true false;
声明方式：var flag = true;
var flag = false;
*/
var flag = true;
var flag = false;
console.log(flag, typeof flag);
console.log(10 > 100);//false
console.log(10 > 1);//true
</script>Null类型和Undefined类型：
Null类型取值是一个关键字null，注意Null和NULL都是变量！！！
<script>
// Null：变量的值为空。如果一个变量你将来准备给它一个对象，但是现在没有给，我们就可以把它声明为null
// Undefined：变量声明了没有赋值
var n = null;
console.log(n, typeof n); // null 'object'
var u;
console.log(u, typeof u); // undefined 'undefined'
</script>null和undefined的区别
-
1、undefined是申明了，未赋值，null是值为空，是准备在将来存储为一个对象的；
-
2、undefined的typoef返回的是undefined，null的typeof返回的是object；
-
3、undefined转成数字是NaN，null转成数字是0；
Object对象：Object是复杂数据类型，在页面中获取的所有元素都是对象类型。可以说万物皆对象。
- 对象的声明有两种方式，第一种使用new关键词创建一个对象；第二种使用var o = {}; {}里面写键值对，键值对以逗号分隔开来；
- 函数。声明函数，调用函数。函数是function；
- 数组array。var arr = [可以存储任何类型的数据]; 数组以[]来声明。
<script>
// 自己创建对象
var o = {
name: 'karry',
age: '21',
}
//使用关键字new创建一个对象
var obj = new Object();
console.log(o, typeof o); //Objectage: "21"name: "karry"__proto__: Object "object"
// ----------------------------------------
// 数组 数组里面可以存储任何数据
var arr = [0, 2, 'sdksdka', ['weq'], { age: 213, name: 'sad' }];
console.log(arr, typeof arr); //(3) [0, 2, 3] "object"
// ---------------------
// 函数
function fn() {
// alert('你好');
}
console.log(fn(), typeof fn());//会先调用fn函数，然后控制台打印 undefined "undefined"
console.log(fn, typeof fn);
/*
ƒ fn() {
alert('你好');
} "function"
*/
</script>数据类型的强制转换：
其他数据类型转Number类型：
方式一: 采用Number(变量名) 进行强制转换成数值型
字符串转数值型：
如果是纯数字字符串转数值型，则取值为对应的数字内容;
如果不是串数字还有其他字符，则返回NaN
如果是空串 "" 或者 " " 多个空格的字符串 均返回 0 值
布尔值类型转数值型:
false>>0 ;
true>>1 ;
null返回0
undefined返回NaN
对象数据类型: 转换成数值型 均返回为NaN
2.方式二: 采用parseInt(变量,进制) 可以根据进制来转换数字 且为整数
采用parsrFloat(变量) 方法来进行转换 转换为浮点型 保留小数
变量可以包含数字和其他字符，此方法会从第一个开始尽可能多的读取数字内容，遇到其他字符
则不再读取转换。 parsrFloat 只读取一个小数点后的数字内容 多了也不再读取
所以首字母不为数字的话，则返回均为NaN
<script>
// 字符串转数值型
// var str = "123ad"; //NaN
// var str = "123"; //123
// var str = ""; //0
var str = " "; //0
// console.log(Number(str));
// =========================================
// 布尔值类型转数值型:
// var b = false; // 0
var b = true; // 1
// console.log(Number(b));
// ===========================================
//
var c = null; //0
var c = undefined; //NaN
// console.log(Number(c));
// ==============================
var obj = {
name: 'karry',
age: '21',
}//NaN "object"
var arr = [12, 32, 'aea']//NaN "object"
// console.log(Number(obj), typeof obj);
// console.log(Number(arr), typeof arr);
// ================================================================
var s1 = "123.213.213px";
var s2 = "0123.213px";
var s3 = "a0123.213px";
var s4 = "123px";
// console.log(parseInt(s1)); //123
// console.log(parseFloat(s1)); //123.213
// console.log(parseInt(s2, 8)); //83 8进制转换
// console.log(parseInt(s2)); //123
// console.log(parseFloat(s2)); //123.213
console.log(parseInt(s3)); //NaN
console.log(parseFloat(s3)); //NaN
console.log(parseInt(s4)); //123
console.log(parseFloat(s4)); //123
</script>转字符串String类型
方式一: String(变量);
方式二: 变量.toString();
数值型转换成 数字字符串，NaN 转换成 字符串NaN
布尔值 转换成 false true 字符串
null 和 undefined 转换成 null和undefined 字符串
但是不能用使用.toString();来转换。
对象： 对象object转换成对象object
数组转换成 一个个的值以 , 连接
<script>
// 数值型的转换
var num = 123;
var num1 = NaN;
num = num.toString(); //123 string
num = String(num); //123 string
console.log(num, typeof num);
num1 = num1.toString(); //NaN string
num1 = String(num1); //NaN string
console.log(num1, typeof num1);
// =======================================================
// 布尔转换
b = false;
// b = b.toString(); //false string
b = String(b); //false string
console.log(b, typeof b);
// null 和 undefined
var c = null;
var d = undefined;
// c = c.toString(); //字符串不能为null
// c = String(c); //null string
// d = String(d); //undefined string
// d = d.toString(); // Cannot read property 'toString' of undefined
console.log(c, typeof c);
console.log(d, typeof d);
// ============================================================
var obj = {
age: 12,
name: 'kai'
}
var arr = [123, 'sdfs', ["asd", 1]]
console.log(String(obj), typeof String(obj)); //[object Object] string
console.log(String(arr), typeof String(arr)); //123,sdfs,asd,1 string
</script>转Boolean类型值
方式一: Boolean(变量);
数值型的转布尔型： 0和NaN 均转换为 false
其他为true
字符类型转布尔型： 空串 "" 转为false
其他都为 true
null 转为false
undefined 转为false
一切对象均为真
JS中，只有 0, "", NaN, null, undefined, false 为假 其他均为真;
<script>
// 数值类型的转换
// var num = 0; //false
// var num = 1; //true
var num = -1; //true
// var num = NaN; //false
// var num = NaN / 0; //false
console.log(NaN / 0); //NaN
console.log(Boolean(num));
// ================================================
// 字符串
var str = ""; //false
// var str = "12as"; //true
// var str = " "; //true
console.log(Boolean(str));
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
// =================================================
var obj = {
age: 12,
name: 'kai'
}
var arr = [123, 'sdfs', ["asd", 1]]
console.log(Boolean(obj)); //true
console.log(Boolean(arr)); //true
</script>isNaN函数:
isNaN(); 来判断一个数是否为是否是数字;
不是数字，返回true，是数字，返回false。数字类型的NaN，返回true
它本身不判断， 是Number()来判断，把参数交给Number，如果Number能转成功数字，就返回false，如果转不成功，就返回true
<script>
console.log(isNaN(NaN)); //true
console.log(isNaN(12)); //false
console.log(isNaN("12")); //false
console.log(isNaN("sad1")); //ture
console.log(isNaN(true)); // 1 ===>false
console.log(isNaN(null)); // 0 ===> false
console.log(isNaN(undefined)); // true
</script>运算符：
1.算术运算符
数值运算符: + - * / % ++ -- （加、减、乘、除、取余、加加、减减）
算术运算符中特别需要注意的是加法运算
- 如果加号的两边都是数字，则是普通的加法运算
- 如果有一边是字符串，则另一边也转成字符串，变成字符串的拼接
- 如果两边都没有字符串，则转成数字，再进行相加
- 如果有一边是对象，则调用对象的valueOf方法，如果没有valueOf，则调用对象的toString()方法，取得值，再应用上面的方法
其他算术运算就是先看能不能转换成数字，如何不能返回NaN，如何可以就可以进行正常的算术运算。
<script>
// 加
var a = '5';
var b = 10;
console.log(a + b);
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
// -------------------------------
console.log(true + false); // 1
console.log(true + null); // 1
console.log(undefined + null); // NaN
console.log(1 + [1, 2, 3]); // '11,2,3'
// -------------------------
// 加加、减减
// 自增1 自减1，有加加在前和加加在后之分
// var a = 10;
// ++a; // a = a + 1;
// console.log(a); // 11
// --a; // a = a - 1;
// console.log(a); // 10
// 加加在前和加加在后的区别
// 加加在后，先参与表达式的运算，再自增
// 加加在前，先自增，再参与表达式的运算
var num1 = 2;
var num2 = 20;
// var num3 = ++num1 + num2; // 1、num1自增 2、num1+num2
var num3 = num1++ + num2; // 1、num1+num2 2、num1自增
var num4 = num1 + num2; // 23
console.log(num3, num4);
// --------------------------
var a = 10;
console.log(a++);
// ------------------------------
// 取余
console.log(10 % 3); // 1
console.log(1 % 0); // NaN
// 一个递增的变量，取模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
// ----------------------------------
// 减、乘、除
// 操作数的两边都转成数字
console.log('10' - 5); // 5
console.log('abc' - 5); // NaN
</script>2.赋值运算符
赋值运算符: = += -= /= %=
<script>
var a = 10; // 把10赋给a
a += 2; // a = a + 2;
console.log(a); // 12
a *= 5;
console.log(a); // 60
a %= 5;
console.log(a); // 0
</script>3.比较运算符
比较运算符: >= <= != == === !== > <
<script>
// 返回布尔值
// > >= < <= 字符串比较字符编码，其它的都转数字比较
// == != 值的比较，会发生类型转换，null和undefined不转换
// 但是>= <= 运算会发生类型转换
// === !== 值和类型都要相等
// 字符串的比较，比较的是它的字符编码。从左向右，一位一位的比较
// 字符的编码 0-48 A-65 a-97
console.log('10' > '2'); // false
// 数字的比较，如果有一边是数字，则另一边也转成数字，进行比较
console.log(10 > 2); // true
console.log(10 > '2'); // true
console.log(10 >= '10'); // true
console.log(10 <= '10'); // true
console.log(null >= false); // true
console.log(null >= undefined); // false
// -----------------------------
// == != 值是否相等（不推荐使用）
// 值的比较，会发生类型转换(转数字)
// null和undefined不能转换，它俩相等比较时，返回true
console.log(10 == '10'); // true
console.log(10 != '10'); // false
console.log(true == 1); // true
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
// ---------------------------
// = 赋值
// == 值是否相等
// === 值和类型都要相等（全等）
</script>4.逻辑运算符
逻辑运算符: &&， ||， !
- && 与，两边都为真，结果为真。只要有一边为假，结果为假
- || 或，两边都为假，结果为假。只要有一边为真，结果为真
- ！非 ，取值均为反值。
或和非的短路操作，只要左边能决定的，就不用跑到右边
如果左边为真，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值
如果左边为假，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
<script>
console.log(10 > 8 && 10 >= 10); // true
console.log(10 > 8 && 10 >= 11); // false
console.log(10 > 8 && 5); // 5
console.log(10 < 8 && 10 >= 8); // false
console.log(0 && 10 >= 8); // 0
console.log(5 && 3); // 3
console.log(5 && NaN); // NaN
console.log(5 && 5 > 3); // true
console.log(5 && undefined); // undefined
// ===============================================
console.log(10 > 8 || 10 < 8); // true
console.log(5 || 4); // 5
console.log(5 > 6 || 4); // 4
// ------------------------
// ! 非: 取反
var a = 10;
console.log(!!!!!!!!a); //trues
</script>
5三元运算符
语法格式：表达式 ? 执行语句1 : 执行语句2;
若表达式成立，则执行语句1，否则执行语句2；
优点：这种条件判断，结构格式比if...else..语句更加简洁；
缺点：只能判断两个条件，只能进行简单的值判断。
<script>
// 表达式 ? 执行语句1 : 执行语句2;
// 相当于if else
var age = 18;
// age >= 18 ? alert('成年') : alert('未成年');
// 推荐写法
var s = age >= 18 ? alert('成年') : alert('未成年');
console.log(s);
</script>6.运算符的优先级
++ -- !(贴身) > 算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符
<script>
console.log(5 + 4 * 3); // 17
console.log((5 + 4) * 3); // 27
console.log(10 > 5 > 4); // true > 4 false
console.log(10 > (5 > 4)); // true
</script>数据类型的隐式转换
+ - * / ++ -- % ! 全都有隐式转换
<script>
// 隐式类型转换：相对于强制类型转换
// + - * / % ++
console.log('10' - 5); // 5
var a = true;
a++;
console.log(a); // 2
// --------------------------
// 加 +
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); // 0
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'); // false
</script>常见的几个问题
1.null和undefined的区别：
null是声明的变量赋值为null，表示值为空；undefined 表示变量没有声明，值是空缺的，没有初始化变量。
2.NaN在声明情况下会出现，列举一些情况列子。
NaN可以和任何数值运算(除了+运算) 最后都会得到一个NaN 而且每个NaN的值都不相等;
- 0/0会得到 NaN;
- !NaN == >>> 1 true ;
- 1%0 ==>>NaN;
- 非数字进行运算会得到NaN;
<script>
console.log(0 / 0); //NaN
console.log(100 % 0); //NaN
console.log(100 % ''); //NaN
console.log(100 % ' '); //NaN
console.log(100 % []); //NaN
console.log(100 % {}); //NaN
console.log(Number({}), typeof {}); //空对象 NaN "object"
console.log(Number([]), typeof []); //0 "object"
console.log(Number(""), typeof ""); //0 "string"
console.log(Number(" "), typeof " "); //0 "string"
</script>
谢谢观看！！！
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
