[Web 前端] 022 js 的基本数据类型及使用

1. Javascript 基本数据类型

1.1 分类

类型	释义
boolean	布尔类型，分 true 与 false
number	整型，浮点型
string	字符类型
object	对象类型
function	函数类型
undefined	“未定义”类型

1.2 举例

• 补充：typeof() —— 可以获取变量类型的函数

/* 1. boolean
    Python: True, False
    JS:     true, false
*/
var B = true;
// alert(B);         // true
// alert(typeof(B)); // boolean

// 2. number
// 2.1 数字
var num_01 = 12;
var num_02 = 12.1;

/* 将结果打印到控制台
    一般不用 alert()
    而用 console.log()

    此外，document.write("Hello"); 可以将结果打印到 body 体
*/
console.log("num_01 =", num_01, "typeof(num_01) =", typeof(num_01));
console.log("num_02 =", num_02, "typeof(num_02) =", typeof(num_02));

/* 2.2 binary 二进制
    以 0b 开头
*/
var num_2 = 0b1011;
console.log("num_2 =", num_2, "typeof(num_2) =", typeof(num_2));

/* 2.3 Octal 八进制
    两种方式
        以 0 开头
        以 0o 开头
*/
var num_8_1 = 076;
var num_8_2 = 0o76;
console.log("num_8_1 =", num_8_1);
console.log("num_8_2 =", num_8_2);

/* 2.4 Hexadecimal 十六进制
    以 0x 开头
*/
var num_16 = 0xfe;
console.log("num_16 =", num_16);

// 2.5 NaN: not a number
var num_nan = NaN;
console.log("num_nan =", num_nan, "typeof(num_nan) =", typeof(num_nan));

// 3. string
// 3.1 单引号
var str1 = '123';
// 3.2 双引号
var str2 = "123";
// 3.3 将关键字放入引号内部
var str3 = "true";
// 3.4 单双引号可以相互嵌套，但三引号在 Js 中不好使
var str4 = "I am learning 'Python'!"
var str5 = 'I am learning "Python"!'
console.log("str1 =", str1, "typeof(str1) =", typeof(str1));
console.log("str2 =", str2, "typeof(str2) =", typeof(str2));
console.log("str3 =", str3, "typeof(str3) =", typeof(str3));
console.log("str4 =", str4, "typeof(str4) =", typeof(str4));
console.log("str5 =", str5, "typeof(str5) =", typeof(str5));

// 4, 5, 6
// 4. 对象
var obj = {name:'lisi', age:18}; // 像 Python 中的字典
console.log("obj =", obj, "typeof(obj) =", typeof(obj));

// 5. 数组
var list = [1, 2, 3, 4, 5];
console.log("list =", list, "typeof(list) =", typeof(list));

// 6. null
var obj = null;
console.log("obj =", obj, "typeof(obj)", typeof(obj));

// 7. 函数数据类型
var Func = function(){
    console.log("This is a function.");
}
console.log("Func =", Func, "typeof(Func) =", typeof(Func));

/* 8. undefined
    释义：未定义
    定义一个变量，若不赋值，则默认为 undefined
*/
var un1 = undefined;
var un2;
console.log("un1 =", un1, "typeof(un1) =", typeof(un1));
console.log("un2 =", un2, "typeof(un2) =", typeof(un2));

• 运行结果

num_01 = 12 typeof(num_01) = number
num_02 = 12.1 typeof(num_02) = number
num_2 = 11 typeof(num_2) = number
num_8_1 = 62
num_8_2 = 62
num_16 = 254
num_nan = NaN typeof(num_nan) = number
str1 = 123 typeof(str1) = string
str2 = 123 typeof(str2) = string
str3 = true typeof(str3) = string
str4 = I am learning 'Python'! typeof(str4) = string
str5 = I am learning "Python"! typeof(str5) = string
obj = {name: "lisi", age: 18}age: 18name: "lisi"__proto__: Object typeof(obj) = object
list = (5) [1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5__proto__: Array(0) typeof(list) = object
obj = null typeof(obj) object
Func = ƒ (){
            console.log("This is a function.");
        } typeof(Func) = function
un1 = undefined typeof(un1) = undefined
un2 = undefined typeof(un2) = undefined

2. Javascript 数据类型转换

2.1 可供使用的函数

函数	释义
Number(value)	强转一个数值，包含整数和浮点数
parseInt(value)	强转整型
parseFloat(value)	强转浮点型
String(value)	强转换字符串类型
Boolean(value)	强转换 Boolean 类型

2.2 举例 1

/* 1. 数值类型转换
    Number()
    parseInt()
    parseFloat()
*/
var str1 = '123';
console.log("str1 =", str1, "typeof(str1) =", typeof(str1));

var str2 = Number(str1);
console.log("str2 =", str2, "typeof(str2) =", typeof(str2));

var str3 = parseInt(str1);
console.log("str3 =", str3, "typeof(str3) =", typeof(str3));

var str4 = parseFloat(str1);
console.log("str4 =", str4, "typeof(str4) =", typeof(str4));

console.log("--------------------");
// var str5 = '123abc';
// var str5 = 'abc123';
// var str5 = 'abc123def';
// var str5 = '123abc456';
var str5 = '1.23abc';
console.log("str5 =", str5, "typeof(str5) =", typeof(str5));

var str6 = Number(str5); // 可以更换 str5 查看区别
console.log("str6 =", str6, "typeof(str6) =", typeof(str6));

var str7 = parseInt(str5); // 可以更换 str5 查看区别
console.log("str7 =", str7, "typeof(str7) =", typeof(str7));

var str8 = parseFloat(str5); // 可以更换 str5 查看区别
console.log("str8 =", str8, "typeof(str8) =", typeof(str8));

// 2. isNaN() 检测一个变量是否是 NaN
// var num = '1'; // 是 NaN
// var num = 'a'; // 不是 NaN
var num = '1a'; // 可以更换 num 查看区别
console.log("num =", num, "isNaN(num) =", isNaN(num));

• 运行结果

str1 = 123 typeof(str1) = string
str2 = 123 typeof(str2) = number
str3 = 123 typeof(str3) = number
str4 = 123 typeof(str4) = number
--------------------
str5 = 1.23abc typeof(str5) = string
str6 = NaN typeof(str6) = number
str7 = 1 typeof(str7) = number
str8 = 1.23 typeof(str8) = number
num = 1a isNaN(num) = true

2.3 举例 2

/* 1. 字符串转布尔值
    '1' -> true
    '0' -> true
    ''  -> false
*/
var str1 = '1';
console.log("str1 =", str1, "\tBoolean(str1) =", Boolean(str1));

var str2 = '0';
console.log("str2 =", str2, "\tBoolean(str2) =", Boolean(str2));

var str3 = '';
console.log("str3 =", str3, "\tBoolean(str3) =", Boolean(str3));

/* 2. 数值类型转布尔值
    1   -> true
    0   -> false
    NaN -> false
*/
var num1 = 1;
console.log("num1 =", num1, "\tBoolean(num1) =", Boolean(num1));

var num2 = 0;
console.log("num2 =", num2, "\tBoolean(num2) =", Boolean(num2));

var num3 = 0.0;
console.log("num3 =", num3, "\tBoolean(num3) =", Boolean(num3));

var num4 = NaN;
console.log("num4 =", num4, "\tBoolean(num4) =", Boolean(num4));

/* 3. 对象转布尔值
    obj  -> true
    null -> false
*/
var obj1 = {name:"Tom", age:18};
console.log("obj1 =", obj1, "Boolean(obj1) =", Boolean(obj1));

var obj2 = {};
console.log("obj2 =", obj2, "Boolean(obj2) =", Boolean(obj2));

var obj3 = null;
console.log("obj3 =", obj3, "Boolean(obj3) =", Boolean(obj3));

• 运行结果

str1 = 1 	Boolean(str1) = true
str2 = 0 	Boolean(str2) = true
str3 =  	Boolean(str3) = false
num1 = 1 	Boolean(num1) = true
num2 = 0 	Boolean(num2) = false
num3 = 0 	Boolean(num3) = false
num4 = NaN 	Boolean(num4) = false
obj1 = {name: "Tom", age: 18} Boolean(obj1) = true
obj2 = {} Boolean(obj2) = true
obj3 = null Boolean(obj3) = false

3. Javascript 运算符

3.1 JS 运算符简介

运算符	举例
算术运算符	+, -, *, /, ++, --
字符串连接	+
赋值运算	=, +=, -=, %=
比较运算符	<, >, >=, <=, ==, =, !=, !
逻辑运算符	&&
位运算	^, &
三元运算符	? :

3.2 举例

// 1.1 自增 i++
var num1 = 1;
console.log("num1 =", num1);

num1++;
console.log("num1' =", num1);

// 1.2 自减 i--
var num2 = 1;
console.log("num2 =", num2);

num2--;
console.log("num2' =", num2);
console.log('\n');        

/* 2. 字符串连接
    1 + 2
    '1' + '2'

    '1' + 2
    '1' + 2 + 3

    1 + '2'
    1 + 2 + '3'

    字符串及其之后的运算用"拼接"
*/
console.log("1 + 2 ->\t\t", 1+2);
console.log("'1' + '2' ->\t", '1'+'2');
console.log('\n');

console.log("'1' + 2 ->\t\t", '1'+2);
console.log("'1' + 2 + 3 ->\t", '1'+2+3);
console.log('\n');

console.log("1 + '2' ->\t\t", 1+'2');
console.log("1 + 2 + '3' ->\t", 1+2+'3');
console.log('\n');

/* 3. === 全等
    !=  不等于
    !== 不全等
*/
var num3 = 1 == 1;
console.log("(num3 = 1) == 1?", num3);

var num4 = 1 === 1;
console.log("(num4 = 1) === 1?", num4);

console.log("1 === 1?\t", 1===1);
console.log("'1' == 1?\t", '1'==1);
console.log("'1' === 1?\t", '1'===1);

• 运行结果

num1 = 1
num1' = 2
num2 = 1
num2' = 0

1 + 2 ->		 3
'1' + '2' ->	 12

'1' + 2 ->		 12
'1' + 2 + 3 ->	 123

1 + '2' ->		 12
1 + 2 + '3' ->	 33

(num3 = 1) == 1?	true
(num4 = 1) === 1?	true
1 === 1?	 true
'1' == 1?	 true
'1' === 1?	 false