JavaScript 考点详解：初级学习教程

概述

本文详细介绍了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();  // 2

更复杂的闭包案例

function 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 操作入门 选择元素

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技术打下了坚实的基础。