下面我将为您详细讲解“JavaScript的21条基本知识点”完整攻略。

JavaScript的21条基本知识点

1. 什么是JavaScript？

JavaScript是一种脚本语言，用于编写交互式网页。JavaScript可以用于控制HTML页面中的各种事件，如按钮点击、表单提交、页面滚动等。

2. 变量和数据类型

JavaScript中的数据可以分为以下几种类型：

• 数字类型（Number）
• 字符串类型（String）
• 布尔类型（Boolean）
• 对象类型（Object）
• 函数类型（Function）

定义变量时，需要使用var关键字，如：

var age = 18;
var name = "Tom";
var isMan = true;
var person = { name: "Tom", age: 18 };
function sayHello() {
  console.log("Hello!");
}

3. 运算符

JavaScript中常用的运算符有：

• 算术运算符（+、-、*、/、%）
• 赋值运算符（=、+=、-=、*=、/=、%=）
• 比较运算符（==、===、!=、>、<、>=、<=）
• 逻辑运算符（&&、||、!）
• 三元运算符（?:）

示例：

var a = 10;
var b = 20;
var result = (a > b) ? "a大于b" : "a小于等于b";
console.log(result);
// 输出："a小于等于b"

4. 分支结构

JavaScript中可以使用if语句、switch语句实现分支结构。

4.1 if语句

if语句用于判断一个条件是否成立，如果成立，则执行一段代码块。示例：

var age = 18;
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

4.2 switch语句

switch语句用于检测多种情况，并根据不同的情况执行不同的代码块。示例：

var fruit = "apple";
switch (fruit) {
  case "banana":
    console.log("香蕉");
    break;
  case "apple":
    console.log("苹果");
    break;
  case "orange":
    console.log("橙子");
    break;
  default:
    console.log("未知水果");
}

5. 循环结构

JavaScript中可以使用for循环、while循环、do-while循环实现循环结构。

5.1 for循环

for循环用于重复执行一段代码。示例：

for (var i = 1; i <= 10; i++) {
  console.log(i);
}

5.2 while循环

while循环用于重复执行一段代码，但不知道循环次数。示例：

var i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

5.3 do-while循环

do-while循环与while循环类似，但至少会执行一次代码块。示例：

var i = 1;
do {
  console.log(i);
  i++;
} while (i <= 10);

6. 函数

函数是JavaScript中的一种基本语法结构，用于封装一段可重用的代码。函数可以接收参数，还可以返回一个值。

示例：

function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 输出：3

7. 数组

数组是一种存储一组数据的集合。JavaScript中的数组可以存储不同类型的数据。

示例：

var arr = [1, 2, 3, "Tom", true];
console.log(arr);

8. 对象

对象是JavaScript中的一种复合数据类型，用于封装一组相关的数据和功能。对象由属性和方法组成。

示例：

var person = {
  name: "Tom",
  age: 18,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};
console.log(person.name); // 输出："Tom"
person.sayHello(); // 输出："Hello, my name is Tom"

9. 字符串

字符串是一种表示文本的数据类型，可以使用单引号、双引号或反引号定义。

示例：

var str1 = 'Hello';
var str2 = "world";
var str3 = `Hello, ${str2}!`;
console.log(str3); // 输出："Hello, world!"

10. 数字

JavaScript中的数字类型包括整数和浮点数。可以进行加减乘除等基本运算。

示例：

var num1 = 10;
var num2 = 3;
console.log(num1 / num2); // 输出：3.3333333333333335

11. 布尔值

布尔值只有两个取值：true和false。常用于判断逻辑。

示例：

var isMan = true;
if (isMan) {
  console.log("男人");
} else {
  console.log("女人");
}

12. undefined和null

undefined表示一个没有定义过的变量，null表示一个空对象。

示例：

var a;
console.log(a); // 输出：undefined

var b = null;
console.log(b); // 输出：null

13. 对象属性

对象的属性可以通过点号或方括号访问。

示例：

var person = { name: "Tom", age: 18 };
console.log(person.name); // 输出："Tom"
console.log(person["age"]); // 输出：18

14. 对象方法

对象的方法是一个函数，可以通过点号调用。

示例：

var person = {
  name: "Tom",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};
person.sayHello(); // 输出："Hello, my name is Tom"

15. 函数参数

函数可以接收多个参数，参数可以是任意类型的数据。

示例：

function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 输出：3

16. 函数返回值

函数可以返回一个值，也可以返回undefined。

示例：

function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 输出：3

17. 匿名函数

匿名函数是没有函数名的函数，常用于立即执行。

示例：

var sum = function(a, b) {
  return a + b;
}(1, 2);
console.log(sum); // 输出：3

18. for-in循环

for-in循环用于遍历一个对象的属性。

示例：

var person = { name: "Tom", age: 18 };
for (var key in person) {
  console.log(key + ": " + person[key]);
}
// 输出：
// name: Tom
// age: 18

19. try-catch语句

try-catch语句用于处理JavaScript中的异常。当程序发生异常时，可以通过try-catch语句捕获异常并进行相应处理。

示例：

try {
  // ...
} catch (e) {
  console.log("发生异常：" + e.message);
}

20. JSON

JSON是一种轻量级的数据交换格式，常用于传输和存储数据。

示例：

var person = { name: "Tom", age: 18 };
var json = JSON.stringify(person); // 对象转JSON字符串
console.log(json); // 输出：{"name":"Tom","age":18}

var person2 = JSON.parse(json); // JSON字符串转对象
console.log(person2.name); // 输出："Tom"

21. DOM

DOM是Document Object Model的缩写，用于操作HTML页面中的各种元素。

示例：

// HTML
// <div id="myDiv">Hello</div>

// JavaScript
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "world";

以上就是JavaScript的21条基本知识点，每条知识点均有详细的讲解和示例。希望可以给您带来帮助。