javascript整理

1 语法基础

（1）变量声明：使用 var、let 或 const 关键字来声明变量。

var x = 10;
let y = "Hello";
const z = true;

（2）数据类型：JavaScript 中的数据类型包括原始数据类型和引用数据类型。

• 原始数据类型：数值类型（如整数和浮点数）、字符串类型、布尔类型、null 和 undefined。

let num = 42;
let str = "Hello";
let bool = true;
let n = null;
let u = undefined;

• 引用数据类型：对象、数组、函数等。

let obj = { name: "John", age: 25 };
let arr = [1, 2, 3, 4];
let func = function() { console.log("Hello"); };

（3）运算符：JavaScript 支持多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。

let a = 10 + 5; // 加法运算
let b = 20 - 8; // 减法运算
let c = 4 * 6; // 乘法运算
let d = 12 / 3; // 除法运算
let e = 10 % 3; // 取模运算

let x = 5;
x += 3; // 等同于 x = x + 3;

let result = (a > b) && (c < d); // 逻辑与运算

（4）条件语句：使用 if、else if 和 else 关键字进行条件判断。

let num = 10;
if (num > 10) {
  console.log("大于 10");
} else if (num === 10) {
  console.log("等于 10");
} else {
  console.log("小于 10");
}

（5）循环语句：使用 for、while 和 do…while 循环来执行重复操作。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);

（6）函数：在 JavaScript 中，函数可以定义和调用。可以使用 function 关键字来定义函数，并通过函数名和参数列表来调用函数。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // 调用函数并传递参数

（7）数组：JavaScript 中的数组是一种用于存储多个值的对象。可以使用方括号和逗号来定义数组，并通过索引访问数组元素。

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 输出第一个元素

fruits.push("grape"); // 向数组末尾添加元素
fruits.pop(); // 删除数组末尾的元素

（8）对象：JavaScript 中的对象是一种由键值对组成的无序集合。可以使用花括号和冒号来定义对象，并通过点号或方括号来访问对象的属性。

let person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

console.log(person.name); // 使用点号访问属性
console.log(person["age"]); // 使用方括号访问属性

（9）字符串操作：JavaScript 中的字符串是一系列字符的序列，可以进行连接、截取、替换等操作。

let str = "Hello, world!";
console.log(str.length); // 字符串长度

let concatStr = str + " Welcome!"; // 连接字符串
let subStr = str.substring(0, 5); // 截取子字符串
let replacedStr = str.replace("world", "everyone"); // 替换字符串

（10）注释：可以使用注释将说明性文字添加到代码中，注释不会被执行。

// 单行注释

/*
  多行注释
  可以跨越多行
*/

2 数据类型与变量

（1）数据类型

• 数值（Number）：用于表示数值，包括整数和浮点数。

let age = 25;
let price = 9.99;

• 字符串（String）：用于表示文本数据，由一系列字符组成，可以使用单引号或双引号表示。

let name = "John";
let message = 'Hello, world!';

• 布尔值（Boolean）：用于表示真或假两种状态。

let isStudent = true;
let isLoggedIn = false;

• 空值（Null）：表示一个空值。

let data = null;

• 未定义（Undefined）：表示一个未定义的值。

let variable;

• 对象（Object）：用于存储多个相关属性和方法的集合。

let person = {
  name: "John",
  age: 25
};

• 数组（Array）：用于存储多个值的有序列表。

let numbers = [1, 2, 3, 4, 5];

（2）变量
变量用于存储和引用数据。在 JavaScript 中，可以使用 var、let 或 const 关键字来声明变量。

• var：定义一个变量，它的作用域可以是函数范围或全局范围。

var x = 10;

• let：定义一个块级作用域的变量，它只在当前代码块中有效。

let y = "Hello";

• const：定义一个块级作用域的常量，一旦赋值后不能再修改

const z = true;

3 函数

定义函数的基本语法：

function functionName(parameter1, parameter2, ...) {
  // 函数体
  return result;
}

• function 关键字用于定义一个函数。
• functionName 是函数的名称，可以根据需要自定义。
• (parameter1, parameter2, …) 是函数参数的列表，多个参数之间用逗号分隔。
• {} 中包含函数的实际操作，也称为函数体。
• return 关键字用于指定函数的返回值，可以省略。
  示例：

function greet(name) {
  return "Hello, " + name + "!";
}

let result = greet("John");
console.log(result); // 输出：Hello, John!

3 对象和面向对象编程

在JavaScript中，对象是一种复合数据类型，用于存储多个相关属性和方法的集合。对象可以被看作是现实世界中的某个实体或概念的抽象表示。

面向对象编程（Object-Oriented Programming，简称OOP）是一种编程范式，它将程序设计构建在对象的概念上。面向对象编程强调对象的行为和特征，并通过定义对象之间的相互关系来组织和管理代码。

在JavaScript中，我们可以使用对象来创建自定义的数据类型，通过定义构造函数和原型方法来封装属性和行为。
1、对象：
在JavaScript中，对象由键值对组成的属性集合，每个属性都有一个名称和一个关联的值。

let person = {
  name: "John",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

2、构造函数：
构造函数是创建对象的模板或蓝图，使用 new 关键字配合构造函数可以创建新的对象实例。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, " + this.name + "!");
  };
}

let john = new Person("John", 25);
john.greet(); // 输出：Hello, John!

3、原型：
JavaScript中的对象通过原型（prototype）来共享方法和属性。原型是一个对象，包含了其他对象可以访问的共享属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, " + this.name + "!");
};

let john = new Person("John", 25);
john.greet(); // 输出：Hello, John!

4 数组和迭代器

1、创建数组
使用数组字面量 [] 或 Array 构造函数来创建数组。

let numbers = [1, 2, 3, 4, 5];
let fruits = new Array("apple", "banana", "orange");

2、访问数组元素：
数组中的每个元素都有一个对应的索引，从0开始计数。可以使用索引来访问或修改数组中的元素。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出：1
numbers[2] = 10;
console.log(numbers); // 输出：[1, 2, 10, 4, 5]

3、数组的常用方法：
JavaScript提供了丰富的数组方法，用于操作和处理数组。

• push()：在数组末尾添加一个或多个元素。
• pop()：删除并返回数组的最后一个元素。
• shift()：删除并返回数组的第一个元素。
• unshift()：在数组开头添加一个或多个元素。
• slice()：返回从原数组中指定位置开始到结束位置之间的元素，不修改原数组。
• splice()：删除、替换或添加数组的元素，并返回被删除的元素。
• concat()：连接两个或多个数组，返回一个新数组。
• length：获取数组的长度。
  （1） 增加元素：
• 使用 push() 方法在数组末尾添加一个或多个元素。
• 使用 unshift() 方法在数组开头添加一个或多个元素。
  （2）删除元素：
• 使用 pop() 方法删除并返回数组的最后一个元素。
• 使用 shift() 方法删除并返回数组的第一个元素。
• 使用 splice() 方法删除、替换或添加数组的元素。
  （3）修改元素：
• 通过索引直接修改数组中的元素。
  （4）查找元素：
• 使用 indexOf() 方法查找指定元素在数组中的索引。
• 使用 includes() 方法判断数组是否包含某个元素。
• 使用 find() 方法根据条件查找符合要求的第一个元素。
• 使用 filter() 方法根据条件过滤出符合要求的元素数组。
  （5）遍历数组：
• 使用 for 循环遍历数组。
• 使用 forEach() 方法对数组中的每个元素执行回调函数。
• 使用 map() 方法对数组中的每个元素执行回调函数，并返回一个新数组。
• 使用 reduce() 方法根据回调函数对数组中的元素进行累积运算。
  （6）数组排序：
• 使用 sort() 方法对数组进行原地排序。
• 使用 reverse() 方法反转数组的元素顺序。
• 使用自定义的比较函数来进行排序，例如 sort((a, b) => a - b) 可以按升序排序。

let numbers = [3, 1, 5, 2, 4];

// 增加元素
numbers.push(6);
numbers.unshift(0);
console.log(numbers); // 输出：[0, 3, 1, 5, 2, 4, 6]

// 删除元素
numbers.pop();
numbers.shift();
numbers.splice(2, 1);
console.log(numbers); // 输出：[3, 5, 2, 4]

// 修改元素
numbers[1] = 10;
console.log(numbers); // 输出：[3, 10, 2, 4]

// 查找元素
console.log(numbers.indexOf(2)); // 输出：2
console.log(numbers.includes(5)); // 输出：true
console.log(numbers.find(num => num > 3)); // 输出：10
console.log(numbers.filter(num => num % 2 === 0)); // 输出：[10, 2, 4]

// 遍历数组
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

numbers.forEach(function(number) {
  console.log(number);
});

let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers);

let sum = numbers.reduce(function(acc, curr) {
  return acc + curr;
}, 0);
console.log(sum);

// 数组排序
numbers.sort();
console.log(numbers); // 输出：[10, 2, 3, 4]
numbers.reverse();
console.log(numbers); // 输出：[4, 3, 2, 10]

let sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // 输出：[2, 3, 4, 10]

4、迭代器的使用
（1）使用 for 循环迭代数组：

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

（2）使用 forEach() 方法迭代数组：

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

（3）使用 map() 方法迭代数组，并返回一个新数组：

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers);

（4）使用 filter() 方法迭代数组，并返回满足条件的元素组成的新数组：

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);

for 循环是最基本的迭代方式，适用于复杂的迭代操作。forEach() 方法适用于简单的遍历操作，它接受一个回调函数作为参数，在每次迭代中对数组的元素执行相应的操作。map() 方法可以通过回调函数对数组中的每个元素执行操作，并返回一个新数组。filter() 方法可以根据条件过滤出符合要求的元素组成一个新的数组。

5 DOM操作

（1）查询元素：

• getElementById(id)：通过元素的 id 获取指定元素。

• getElementsByClassName(className)：通过类名获取一组元素。

• getElementsByTagName(tagName)：通过标签名获取一组元素。

• querySelector(selector)：通过 CSS 选择器获取匹配的第一个元素。

• querySelectorAll(selector)：通过 CSS 选择器获取匹配的所有元素。
  （2）修改元素内容：

• textContent：获取或设置元素的文本内容。

• innerHTML：获取或设置元素的 HTML 内容。
  （3）修改元素属性：

• getAttribute(attributeName)：获取指定属性的值。

• setAttribute(attributeName, value)：设置指定属性的值。

• removeAttribute(attributeName)：移除指定属性。
  （4）修改元素样式：

• style.property：获取或设置元素的行内样式属性。

• classList.add(className)：添加指定类名。

• classList.remove(className)：移除指定类名。

• classList.toggle(className)：切换指定类名的状态。
  （5）创建和插入元素：

• createElement(tagName)：创建新元素。

• appendChild(node)：将节点插入到父节点的末尾。

• insertBefore(newNode, referenceNode)：将节点插入到参考节点之前。
  （6）删除元素：

-parentNode.removeChild(node)：从父节点中移除指定节点。

// 查询元素
let element = document.getElementById('my-element');
let elements = document.getElementsByClassName('my-class');
let elements = document.getElementsByTagName('div');
let element = document.querySelector('#my-element');
let elements = document.querySelectorAll('.my-class');

// 修改元素内容
element.textContent = 'Hello, World!';
element.innerHTML = '<b>Hello, World!</b>';

// 修改元素属性
let value = element.getAttribute('data-value');
element.setAttribute('data-value', 'new value');
element.removeAttribute('data-value');

// 修改元素样式
element.style.color = 'red';
element.classList.add('highlight');
element.classList.remove('highlight');

// 创建和插入元素
let newElement = document.createElement('div');
parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);

// 删除元素
parentElement.removeChild(element);

6 HTML中的Javascript

1、内嵌 JavaScript：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
</head>
<body>
  <h1>内嵌 JavaScript 示例</h1>

  <script>
    // 在这里编写 JavaScript 代码
    alert('Hello, World!');
  </script>
</body>
</html>

2、外部 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
  <script src="script.js"></script> <!-- 引入外部 JavaScript 文件 -->
</head>
<body>
  <h1>外部 JavaScript 示例</h1>
</body>
</html>

3、在 HTML 元素上添加事件处理程序：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
  <script>
    function handleClick() {
      alert('Button clicked!');
    }
  </script>
</head>
<body>
  <h1>事件处理程序示例</h1>
  <button onclick="handleClick()">点击我</button>
</body>
</html>

4、外部链接的 JavaScript 库：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
  <script src="https://example.com/library.js"></script> <!-- 引入外部链接的 JavaScript 库 -->
</head>
<body>
  <h1>外部链接的 JavaScript 库示例</h1>
</body>
</html>

5、内联事件处理程序：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
</head>
<body>
  <h1>内联事件处理程序示例</h1>
  <button onclick="alert('Button clicked!')">点击我</button>
</body>
</html>

6、外部脚本模块（使用 ES6 的模块化语法）：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 示例</title>
  <script type="module">
    import { greet } from './script.js'; // 导入外部脚本模块
    greet();
  </script>
</head>
<body>
  <h1>外部脚本模块示例</h1>
</body>
</html>