本文详细介绍了JavaScript的基础语法和核心概念，涵盖了变量、数据类型、运算符、条件语句等内容。文章深入讲解了函数、作用域、数组、对象、DOM操作以及事件处理等知识点。通过学习这些内容，读者可以全面掌握JS考点，为进一步学习高级JavaScript技术打下坚实基础。
JavaScript 基础语法简介 变量和数据类型在JavaScript中，声明变量的方式有多种，最基础的是使用var关键字，let和const关键字分别用于声明可修改和不可修改的变量。下面展示声明变量和使用不同数据类型的方式：
// 使用 var 声明
var number = 42;
var string = "Hello, world!";
var boolean = true;
var undefined_var;
console.log(number, string, boolean, undefined_var);
// 使用 let 声明
let str = "Hello";
str = "World"; // 可以重新赋值
console.log(str);
// 使用 const 声明
const PI = 3.14159;
// PI = 3.14; // 不允许重新赋值
console.log(PI);
// null 和 undefined
var null_var = null;
var undefined_var = undefined;
console.log(null_var, undefined_var);数据类型
JavaScript支持多种数据类型，包括数字、字符串、布尔、对象、数组、null和undefined。
var num = 123;
var str = "Hello";
var bool = true;
var obj = {};
var arr = [];
var nullValue = null;
var undefinedValue = undefined;
console.log(typeof num, typeof str, typeof bool, typeof obj, typeof arr, typeof nullValue, typeof undefinedValue);JavaScript支持基本运算符，如算术运算符、比较运算符和逻辑运算符。
算术运算符
var a = 10, b = 5;
console.log(a + b); // 加法
console.log(a - b); // 减法
console.log(a * b); // 乘法
console.log(a / b); // 除法
console.log(a % b); // 取模比较运算符
var a = 10, b = 5;
console.log(a == b); // 等于
console.log(a != b); // 不等于
console.log(a > b); // 大于
console.log(a < b); // 小于
console.log(a >= b); // 大于等于
console.log(a <= b); // 小于等于逻辑运算符
var a = true, b = false;
console.log(a && b); // 逻辑与
console.log(a || b); // 逻辑或
console.log(!a); // 逻辑非JavaScript中的条件语句主要包括if语句和switch语句。
if 语句
var age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}switch 语句
var fruit = "apple";
switch (fruit) {
case "apple":
console.log("这是苹果");
break;
case "banana":
console.log("这是香蕉");
break;
default:
console.log("未知水果");
}var age = 18;
var hasLicense = true;
if (age >= 18 && hasLicense) {
console.log("成年人且有驾照");
} else if (age >= 18 && !hasLicense) {
console.log("成年人但没有驾照");
} else {
console.log("未成年人");
}函数是执行特定任务的代码块。可以使用function关键字定义函数。
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
sayHello("World");返回值
函数可以返回结果，使用return关键字。
function add(a, b) {
return a + b;
}
console.log(add(10, 20));变量作用域
JavaScript中变量的作用域分为全局作用域和局部作用域。
var globalVar = "全局变量";
function testScope() {
var localVar = "局部变量";
console.log(globalVar);
console.log(localVar);
}
testScope();
console.log(globalVar);
console.log(localVar); // 报错，localVar 不在全局作用域闭包
闭包是指函数可以访问并修改其外部作用域中的变量。下面的例子展示了闭包的使用。
function createCounter() {
var count = 0;
return function() {
count++;
console.log(count);
};
}
var counter = createCounter();
counter(); // 1
counter(); // 2function createCounter() {
var count = 0;
return function() {
console.log(`当前计数: ${count}`);
count++;
};
}
var counter1 = createCounter();
var counter2 = createCounter();
counter1(); // 当前计数: 0
counter1(); // 当前计数: 1
counter2(); // 当前计数: 0
counter2(); // 当前计数: 1数组是存储多个值的集合，可使用数组方法进行操作。
var fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 访问数组元素
fruits.push("mango"); // 添加元素
console.log(fruits);
fruits.pop(); // 删除最后一个元素
console.log(fruits);
console.log(fruits.length); // 获取数组长度
fruits.forEach(function(fruit) {
console.log(fruit);
});数组方法
var numbers = [1, 2, 3, 4, 5];
numbers.sort(); // 排序
console.log(numbers);
numbers.reverse(); // 反转
console.log(numbers);
numbers.filter(function(num) {
return num % 2 === 0;
}).forEach(function(num) {
console.log(num);
});数组高级方法案例
var numbers = [1, 2, 3, 4, 5];
console.log(numbers.map(function(num) {
return num * 2;
}));
console.log(numbers.reduce(function(total, current) {
return total + current;
}, 0));对象是由属性和方法组成的。属性可以是简单的值或复杂的数据结构。
var person = {
name: "张三",
age: 28,
greet: function() {
console.log(`你好，我是${this.name}，${this.age}岁`);
}
};
console.log(person.name);
person.age = 29;
console.log(person.age);
person.greet();对象方法
var car = {
brand: "Toyota",
model: "Camry",
start: function() {
console.log(`${this.brand} ${this.model} 启动了`);
},
stop: function() {
console.log(`${this.brand} ${this.model} 停止了`);
}
};
car.start();
car.stop();var person = {
name: "张三",
age: 28,
address: {
street: "中山路",
city: "北京"
},
greet: function() {
console.log(`你好，我是${this.name}，${this.age}岁，住在${this.address.city}`);
}
};
console.log(person.address.street);
person.greet();DOM（文档对象模型）是Web页面的结构化表示。JavaScript可以用来选择和操作DOM元素。
var element = document.getElementById("myElement");
console.log(element);其他选择器
var element = document.querySelector("div");
console.log(element);属性操作
var element = document.getElementById("myElement");
element.innerHTML = "新内容";
element.setAttribute("class", "new-class");
console.log(element.getAttribute("class"));可以使用JavaScript修改元素的内容和样式。
var element = document.getElementById("myElement");
element.innerHTML = "修改后的内容";
element.style.color = "red";
element.style.backgroundColor = "yellow";更复杂的DOM操作
var element = document.getElementById("myElement");
var child = document.createElement("p");
child.innerHTML = "这是新添加的内容";
element.appendChild(child);
element.removeChild(child);可以通过JavaScript绑定事件处理器来响应用户的操作。
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("按钮被点击了");
});更复杂的事件处理
var container = document.getElementById("container");
container.addEventListener("click", function(event) {
console.log(`点击了: ${event.target.tagName}`);
});
var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
event.preventDefault();
console.log("链接被点击了，但默认行为被阻止");
});var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
event.preventDefault();
console.log("链接被点击了，但默认行为被阻止");
});语法错误通常是由于拼写错误、缺少括号等问题引起的。例如：
// 错误示例
function sayHello(name) {
console.log(`Hello, ${name}`);
}
sayHello("World"); // 缺少括号运行时错误通常在代码执行过程中发生，例如：
var x = undefined;
console.log(x.length); // undefined 没有 length 属性断点调试
使用浏览器的开发者工具可以设置断点，逐步执行代码并观察变量值的变化。
日志输出
var x = undefined;
console.log("x 的值是:", x);
if (x.length) {
console.log("x 有 length 属性");
} else {
console.log("x 没有 length 属性");
}通过学习本文中的基本语法、函数、变量、数组、对象、DOM操作、事件处理以及常见错误的排查方法，读者可以全面掌握JavaScript的基础知识。这些基础内容为后续深入学习高级JavaScript技术打下了坚实的基础。
随时随地看视频
