JavaScript 的数据类型
-
基本数据类型（值类型）
-
Number（包含小数、整数、负数、科学计数法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // Number var a = 10; var b = 77.8; var c = 123e5; // 科学计数法 console.log(a, b, c); // 检测数据类型 typeof console.log(typeof a); console.log(typeof b); console.log(typeof c); </script> </html>
-
String（字符串，特点必须被引号包含）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // String var e = "hello world"; console.log(e); // 判断类型 console.log(typeof e); </script> </html>
-
Boolean（布尔类型。true、false）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // Boolean // true 表示真 // false 表示假 var a = false; var b = true; console.log(a, b); // 判断类型 console.log(typeof a); console.log(typeof b); </script> </html>
-
Null（空）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // Null var a = null; console.log(a); // 判断类型 console.log(typeof a); </script> </html>
-
Undefined（未定义的）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // Undefined var a = undefined; console.log(a); // 判断类型 console.log(typeof a); </script> </html>
-
Symbol（s6新增的）
-
-
引用数据类型
- Object（对象）
- Array（数组）
- Function（函数）
JavaScript 数据类型的特点
-
JS 拥有动态类型。这意味着相同的变量可用做不同的类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> var a = 10; a = true; console.log(a); console.log(typeof a); </script> </html>
对象
-
对象是包含属性和方法的集合
-
创建对象的第一种方式：字面量（直接赋值）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // 对象 Object // 创建对象的第一种方式 字面量 var person = { name: "John", age: 36, height: 180, weight: 65, six: "男", // 方法 drink: function () { console.log("喝水"); }, }; console.log(person); // 使用对象中的方法：通过 对象.方法 // 使用对象中的属性：通过 对象.属性 // 使用属性 console.log(person.name, person.age, person.height); // 使用方法 person.drink(); person.name = "李四"; console.log(person ); </script> </html>
-
对象的创建方式二：通过关键字
new.Object()创建，创建完成之后在进行赋值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // 创建对象的第二种方式：new.Object() // 创建对象 var student = new Object(); student.name = "李四"; student.age = 25; student.weight = 65; student.sex = "男"; student.drink = function () { console.log("看书"); }; console.log(student); // 使用 console.log(student.name); student.name = "王五"; console.log(student.name); student.drink(); </script> </html>
函数 Function
-
创建方式一:字面量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // 函数的创建方式一：字面量 // 将匿名函数赋值给变量 var foo = function () { console.log("这是一个函数"); }; foo(); </script> </html>
-
创建方式二：new Function()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // 函数的创建方式二：Function name (){} function foo() { // 具体代码 console.log("foo"); } foo(); </script> </html>
函数的参数
-
如何传参
-
形参：在定义函数时，用来接收参数的变量
-
实参：在调用函数时，传入的具体数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> // 定义方法，接收参数的叫做形参 function sum(a, b) { console.log(a + b); } // 方法的调用,传入的方式叫做实参 sum(10, 20); sum(20, 40); </script> </html>
函数的返回值
-
通过
return关键字，将结果进行返回，返回的结果可以进行保存，也可以直接打印<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> function sum(a, b) { // 计算 a+b 将 a+b 的结果复制给 total var total = a + b; return total; } // console.log(sum(10, 20)); var n = sum(10, 20); console.log(n); </script> </html>
函数的作用域
-
在函数内部定义的变量叫做局部变量
-
在函数外部定义的变量叫做全局变量
-
在函数内部定义的变量在函数外是无法访问到的
- 会产生错误（a is not defined，a 没有被定义）
-
在函数外部定义的变量，在函数内部是可以访问到的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> /* 在函数内部定义的变量叫做局部变量 在函数外部定义的变量叫做全局变量 在函数内部定义的变量在函数外是无法访问到的 在函数外部定义的变量，在函数内部是可以访问到的 */ function foo() { // 函数体（方法体）写具体操作的 var a = 10; } // console.log(a); // a 没有被定义 var b = 20; function bar() { console.log(b); } bar(); </script> </html>
