一、JavaScript 是什么
JavaScript 是一种高级编程语言，主要用于网页开发。它能在浏览器中运行，为网页添加交互性、动态效果和验证功能。此外，它还可在服务器端（如 Node.js）、桌面应用程序和移动应用程序中使用。
二、JavaScript 的基本语法
（一）变量声明
使用 var、let 或 const 关键字声明变量。
var声明的变量有变量提升现象，let和const则无。const声明的变量是常量，一旦赋值后不能再被修改。
javascript
var name = "John";
let age = 25;
const PI = 3.14;（二）数据类型
JavaScript 有七种基本数据类型：number、string、boolean、null、undefined、symbol 和 bigint。还有对象类型，如 Object、Array 和 Function。
javascript
let num = 10; // number
let str = "Hello"; // string
let isTrue = true; // boolean
let nothing = null;
let notDefined; // undefined
let sym = Symbol(); // symbol
let bigNum = 10n; // bigint
let obj = { name: "John", age: 25 }; // object
let arr = [1, 2, 3]; // array
let func = function() { return "Hello"; }; // function（三）运算符
- 算术运算符：
+、-、*、/、%等。 - 比较运算符：
==、===、!=、!==、<、>、<=、>=等。 - 逻辑运算符：
&&（与）、||（或）、!（非）。 - 赋值运算符：
=、+=、-=、*=、/=等。
javascript
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a == b); // false
console.log(a > b && b < 10); // true
a += b; // a = a + b; a is now 15（四）控制流语句
- 条件语句：
if、else if、else。 - 循环语句：
for、while、do-while。
javascript
let num = 10;
if (num > 5) {
console.log("Number is greater than 5");
} else if (num < 5) {
console.log("Number is less than 5");
} else {
console.log("Number is equal to 5");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}（五）函数
使用 function 关键字定义函数。函数可接受参数，并返回一个值。
javascript
function add(a, b) {
return a + b;
}
console.log(add(10, 5)); // 15三、JavaScript 的对象和数组
（一）对象
对象是一组属性和方法的集合。可使用对象字面量或构造函数创建对象。
javascript
let person = {
name: "John",
age: 25,
sayHello: function() {
console.log("Hello!");
}
};
console.log(person.name); // John
person.sayHello(); // Hello!
let anotherPerson = new Object();
anotherPerson.name = "Jane";
anotherPerson.age = 30;（二）数组
数组是一组有序的值的集合。可使用数组字面量或构造函数创建数组。
javascript
let arr = [1, 2, 3];
console.log(arr[0]); // 1
let anotherArr = new Array(4, 5, 6);
console.log(anotherArr.length); // 3四、JavaScript 的事件处理
（一）事件
事件是浏览器或用户在网页上执行的操作，如点击、鼠标移动、键盘输入等。
（二）事件处理程序
事件处理程序是一个函数，当特定事件发生时被调用。可使用 addEventListener 方法或在 HTML 元素的属性中指定事件处理程序。
html
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log("Button clicked!");
});
</script>五、JavaScript 的巧妙用法
（一）立即执行函数表达式（IIFE）
定义后立即执行的函数。可用于创建局部作用域，避免变量污染全局作用域。
javascript
(function() {
let privateVariable = "This is a private variable";
console.log(privateVariable);
})();
// 输出：This is a private variable
console.log(privateVariable); // 报错，privateVariable 未定义（二）函数柯里化
将多参数函数转换为一系列单参数函数的技术，使函数更加灵活和可复用。
javascript
function add(a) {
return function(b) {
return a + b;
};
}
let addFive = add(5);
console.log(addFive(3)); // 8（三）数组方法的巧妙运用
map、filter 和 reduce 等数组方法可使数组操作更简洁高效。
javascript
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(num) {
return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
let sum = numbers.reduce(function(acc, num) {
return acc + num;
}, 0);
console.log(sum); // 15（四）利用解构赋值简化代码
可从数组或对象中提取值，并将其赋给变量。
javascript
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
let { name, age } = { name: "John", age: 25 };
console.log(name); // John
console.log(age); // 25六、JavaScript 常用的方法
1.toString()：将一个值转换为字符串。
javascript
let num = 10;
console.log(num.toString()); // "10"2.toFixed()：将一个数字格式化为指定小数位数的字符串。
javascript
let num = 10.12345;
console.log(num.toFixed(2)); // "10.12"3.split()：将一个字符串分割成数组。
javascript
let str = "Hello,World";
console.log(str.split(",")); // ["Hello", "World"]4.join()：将一个数组的元素连接成一个字符串。
javascript
let arr = ["Hello", "World"];
console.log(arr.join(" ")); // "Hello World"5.push() 和 pop()：
push()方法将一个或多个元素添加到数组的末尾，并返回新的数组长度。pop()方法从数组中删除最后一个元素，并返回该元素。
javascript
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
console.log(arr.pop()); // 4
console.log(arr); // [1, 2, 3]6.unshift() 和 shift()：
unshift()方法将一个或多个元素添加到数组的开头，并返回新的数组长度。shift()方法从数组中删除第一个元素，并返回该元素。
javascript
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(arr.shift()); // 0
console.log(arr); // [1, 2, 3]7.slice()：从一个数组中提取一部分元素，并返回一个新的数组。
javascript
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // [2, 3, 4]8.splice()：可以在数组中添加、删除或替换元素。
javascript
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6);
console.log(arr); // [1, 2, 6, 4, 5]9.indexOf() 和 lastIndexOf()：
indexOf()方法返回在数组中首次出现的指定元素的索引，如果不存在则返回 -1。lastIndexOf()方法返回在数组中最后一次出现的指定元素的索引，如果不存在则返回 -1。
javascript
let arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 310.forEach()：对数组的每个元素执行一个回调函数。
javascript
let arr = [1, 2, 3];
arr.forEach(function(num) {
console.log(num);
});
// 输出：1、2、3七、常见的 JavaScript 算法题
（一）求数组中的最大值
给定一个整数数组，找出其中的最大值。
javascript
function findMax(arr) {
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
console.log(findMax([5, 8, 3, 10, 2])); // 10（二）判断回文数
给定一个整数，判断它是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。
javascript
function isPalindrome(x) {
if (x < 0) return false;
let reversed = 0;
let original = x;
while (x > 0) {
reversed = reversed * 10 + x % 10;
x = Math.floor(x / 10);
}
return reversed === original;
}
console.log(isPalindrome(121)); // true
console.log(isPalindrome(-121)); // false（三）冒泡排序
实现冒泡排序算法，对给定的整数数组进行升序排序。
javascript
function bubbleSort(arr) {
const n = arr.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
// 交换元素
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(bubbleSort([5, 3, 8, 4, 2])); // [2, 3, 4, 5, 8]（四）斐波那契数列
实现一个函数，返回斐波那契数列的第 n 项。斐波那契数列的定义为：F (0)=0，F (1)=1，F (n)=F (n - 1)+F (n - 2)（n≥2，n∈N*）。
javascript
function fibonacci(n) {
if (n <= 1) return n;
let a = 0;
let b = 1;
for (let i = 2; i <= n; i++) {
let temp = a + b;
a = b;
b = temp;
}
return b;
}
console.log(fibonacci(6)); // 8八、JavaScript 重要知识点拓展
（一）原型与原型链
在 JavaScript 中，每个对象都有一个 __proto__ 属性，它指向该对象的原型对象。而原型对象自身也有原型，如此便形成了原型链。通过原型链，对象能够访问到其原型对象上的属性和方法。
javascript
function Person() {}
Person.prototype.sayHello = function() {
console.log("Hello!");
};
let person = new Person();
person.sayHello(); // Hello!（二）闭包
闭包是指有权访问另一个函数作用域中的变量的函数。它使得函数可以访问其外部函数的变量，即使外部函数已经执行完毕。
javascript
function outerFunction() {
let outerVariable = "I am an outer variable";
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
let closure = outerFunction();
closure(); // I am an outer variable（三）异步编程
JavaScript 是单线程语言，但可以通过异步编程来处理耗时的操作，比如网络请求、文件读取等。异步编程可以通过回调函数、Promise 和 async/await 等方式来实现。
javascript
function fetchData(callback) {
setTimeout(function() {
callback("Data fetched!");
}, 2000);
}
fetchData(function(data) {
console.log(data);
});
javascript
function fetchData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Data fetched!");
}, 2000);
});
}
fetchData().then(function(data) {
console.log(data);
});
javascript
async function fetchData() {
await new Promise(function(resolve) {
setTimeout(resolve, 2000);
});
return "Data fetched!";
}
fetchData().then(function(data) {
console.log(data);
});九、JavaScript 的 DOM 操作
（一）DOM（Document Object Model）
用于表示和操作 HTML 和 XML 文档的标准编程接口。JavaScript 可以通过 DOM 来访问和修改网页的内容、结构和样式。
（二）访问 DOM 元素
使用 document.getElementById、document.getElementsByTagName、document.getElementsByClassName 等方法来访问特定的 DOM 元素。
javascript
let element = document.getElementById("myElement");
let elements = document.getElementsByTagName("div");
let classElements = document.getElementsByClassName("myClass");（三）修改 DOM 元素
可以修改 DOM 元素的内容、属性和样式。
javascript
let element = document.getElementById("myElement");
element.innerHTML = "New content";
element.setAttribute("class", "newClass");
element.style.color = "red";十、总结
本文全面介绍了 JavaScript 的基础知识，包括基本语法、对象和数组、事件处理、巧妙用法、常用方法、练习题、常见算法题、知识点补充以及 DOM 操作。通过学习这些内容，可开始使用 JavaScript 开发简单的网页应用程序。随着学习的深入，还可探索更多高级的 JavaScript 特性和框架，提高开发效率和技能水平。
希望这个入门教程对你有所帮助！如有问题或建议，请随时在评论区留言。