首页手记 JavaScript考点解析：初学者必知的基础知识点

JavaScript考点解析：初学者必知的基础知识点

标签：

JavaScript

概述

本文详细介绍了JavaScript的基础语法和常见考点，包括变量与数据类型、运算符、流程控制语句以及函数的定义与调用。文章还涵盖了DOM操作、内置对象和调试与错误处理等方面的知识，旨在帮助读者全面掌握JavaScript考点。

JavaScript基础语法

变量与数据类型

JavaScript 是一种动态类型语言，这意味着变量在声明时不需要指定类型。变量可以存储不同类型的数据，如数字、字符串、布尔值、数组、对象等。

变量声明

在 JavaScript 中，变量可以通过 var、let 和 const 关键字声明。

// 使用 var 声明
var age = 25;

// 使用 let 声明
let name = "Alice";

// 使用 const 声明
const PI = 3.14;

数据类型

JavaScript 中的主要数据类型包括：

数字：可以是整数或浮点数，例如 42 或 3.14。
字符串：用单引号或双引号包围的文本，例如 "Hello, World!"。
布尔值：true 或 false。
null：表示一个空值。
undefined：表示未定义的值。
对象：用于表示复杂的数据结构，如数组、对象等。
Symbol：唯一标识符，主要用于对象属性和方法的命名。

// 示例
let number = 42;
let text = "Hello, World";
let boolean = true;
let nothing = null;
let undefinedValue = undefined;
let array = [1, 2, 3];
let object = { name: "Alice", age: 25 };
let symbol = Symbol("unique");

运算符

JavaScript 支持多种运算符，包括算术运算符、关系运算符、逻辑运算符等。

算术运算符

算术运算符用于执行基本的数学运算。

let a = 10;
let b = 5;

// 加法
let sum = a + b; // 15

// 减法
let difference = a - b; // 5

// 乘法
let product = a * b; // 50

// 除法
let quotient = a / b; // 2

// 取余
let remainder = a % b; // 0

关系运算符

关系运算符用于比较两个操作数。

let x = 10;
let y = 20;

// 等于
let isEqual = x === y; // false

// 不等于
let isNotEqual = x !== y; // true

// 小于
let isLess = x < y; // true

// 大于
let isGreater = x > y; // false

// 小于等于
let isLessEqual = x <= y; // true

// 大于等于
let isGreaterEqual = x >= y; // false

逻辑运算符

逻辑运算符用于基于两个布尔值返回一个布尔值的结果。

let result1 = true;
let result2 = false;

// 逻辑与
let andResult = result1 && result2; // false

// 逻辑或
let orResult = result1 || result2; // true

// 逻辑非
let notResult = !result2; // true

流程控制语句

流程控制语句允许你控制代码的执行流程，包括条件语句和循环语句。

条件语句

条件语句用于根据不同的条件执行不同的代码块。

let age = 25;

if (age < 18) {
  console.log("未成年人");
} else if (age >= 18 && age < 60) {
  console.log("成年人");
} else {
  console.log("老年人");
}

循环语句

循环语句用于重复执行一段代码直到满足某个条件。

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

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

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

JavaScript 函数

函数定义与调用

函数是一段可重用的代码，可以接受参数并返回结果。

// 函数定义
function greet(name) {
  return "Hello, " + name;
}

// 函数调用
let message = greet("Alice");
console.log(message); // 输出 "Hello, Alice"

参数与返回值

函数可以接受零个或多个参数，并通过 return 语句返回结果。

function add(a, b) {
  return a + b;
}

let result = add(10, 20);
console.log(result); // 输出 30

函数作用域

JavaScript 中的变量作用域分为全局作用域和局部作用域。局部作用域内的变量只能在函数内部访问。

function outerFunction() {
  let outerVariable = "I'm outer";

  function innerFunction() {
    console.log(outerVariable); // 输出 "I'm outer"
  }

  innerFunction();
}

outerFunction();

console.log(outerVariable); // 报错，outerVariable 未定义

箭头函数与默认参数

箭头函数是一种更简洁的函数定义方式，而默认参数可以在函数定义时指定默认值。

// 箭头函数
const add = (a = 0, b = 0) => a + b;

console.log(add(10, 20)); // 输出 30
console.log(add()); // 输出 0

严格模式

在函数内部使用严格模式可以避免一些常见的编程错误。

function strictFunction() {
  "use strict";
  // 严格的代码逻辑
}

strictFunction();

DOM操作基础

获取元素

DOM（文档对象模型）允许 JavaScript 操作 HTML 和 XML 文档。可以通过多种方式获取元素。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <div id="myDiv">Hello, World!</div>
  <script>
    // 通过 id 获取元素
    let div = document.getElementById("myDiv");
    console.log(div); // 输出 <div id="myDiv">Hello, World!</div>

    // 通过 tag name 获取元素
    let divs = document.getElementsByTagName("div");
    console.log(divs); // 输出 NodeList [ <div id="myDiv">Hello, World!</div> ]

    // 通过 class name 获取元素
    let classDiv = document.getElementsByClassName("myClass");
    console.log(classDiv); // 输出 HTMLCollection [ <div id="myDiv" class="myClass">Hello, World!</div> ]

    // 通过 CSS 选择器
    let myDiv = document.querySelector("#myDiv");
    let myDivs = document.querySelectorAll(".myClass");
  </script>
</body>
</html>

修改元素属性与内容

可以修改元素的属性和内容。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <div id="myDiv">Hello, World!</div>
  <script>
    let div = document.getElementById("myDiv");

    // 修改内容
    div.innerHTML = "Hello, JavaScript!";

    // 修改属性
    div.setAttribute("class", "myClass");
    div.style.backgroundColor = "lightblue";
  </script>
</body>
</html>

事件处理

可以通过事件处理程序响应用户操作，如点击、输入等。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <script>
    let button = document.getElementById("myButton");

    // 添加点击事件处理程序
    button.addEventListener("click", function() {
      console.log("Button clicked!");
    });
  </script>
</body>
</html>

添加与删除元素

可以动态地添加和删除DOM元素。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <div id="container"></div>
  <script>
    let container = document.getElementById("container");

    // 添加元素
    let newDiv = document.createElement("div");
    newDiv.innerHTML = "New Element";
    container.appendChild(newDiv);

    // 删除元素
    container.removeChild(newDiv);
  </script>
</body>
</html>

JavaScript 常见内置对象

String 对象

字符串是 JavaScript 中最常用的数据类型之一。通过 String 对象可以进行字符串操作。

let str = "Hello, World!";

// 字符串长度
let length = str.length;
console.log(length); // 输出 13

// 字符串拼接
let newStr = str + " Nice to meet you!";
console.log(newStr); // 输出 "Hello, World! Nice to meet you!"

// 字符串查找与替换
let index = str.indexOf("World");
console.log(index); // 输出 7
let replaced = str.replace("World", "JavaScript");
console.log(replaced); // 输出 "Hello, JavaScript!"

// 正则表达式
let regex = /Hello/;
let match = str.match(regex);
console.log(match); // 输出 ["Hello"]

Array 对象

数组是 JavaScript 中用于存储多个值的数据结构。

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

// 数组长度
let length = arr.length;
console.log(length); // 输出 5

// 数组拼接
let newArr = arr.concat([6, 7, 8]);
console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6, 7, 8]

// 数组索引
let first = arr[0];
console.log(first); // 输出 1
let lastIndex = arr[arr.length - 1];
console.log(lastIndex); // 输出 5

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

// 使用 map、filter 和 reduce
let mapResult = arr.map(item => item * 2);
console.log(mapResult); // 输出 [2, 4, 6, 8, 10]

let filterResult = arr.filter(item => item > 2);
console.log(filterResult); // 输出 [3, 4, 5]

let reduceResult = arr.reduce((acc, item) => acc + item, 0);
console.log(reduceResult); // 输出 15

Date 对象

Date 对象用于处理日期和时间。

let now = new Date();

// 获取当前时间
console.log(now); // 输出类似 "2023-10-01T15:30:00.000Z"

// 获取年份
let year = now.getFullYear();
console.log(year); // 输出 2023

// 获取月份（0 表示一月）
let month = now.getMonth();
console.log(month); // 输出 9（十月）

// 获取日期
let date = now.getDate();
console.log(date); // 输出 1

// 获取小时
let hours = now.getHours();
console.log(hours); // 输出 15

// 获取分钟
let minutes = now.getMinutes();
console.log(minutes); // 输出 30

// 获取秒
let seconds = now.getSeconds();
console.log(seconds); // 输出 0

// 获取毫秒
let milliseconds = now.getMilliseconds();
console.log(milliseconds); // 输出 0

调试与错误处理

使用 console.log 进行调试

console.log 是一种常用的调试方法，用于在控制台输出调试信息。

let x = 10;
console.log(x); // 输出 10

try...catch 语句

try...catch 语句用于捕获和处理错误。

try {
  let result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error("Error occurred: ", error);
}

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero");
  }
  return a / b;
}

抛出错误

可以使用 throw 语句抛出错误。

function checkAge(age) {
  if (age < 18) {
    throw new Error("Age must be 18 or older");
  }
}

try {
  checkAge(16);
} catch (error) {
  console.error("Error: ", error); // 输出 "Error: Error: Age must be 18 or older"
}

自定义错误对象与错误日志记录

可以自定义错误对象并记录错误日志。

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = "CustomError";
  }
}

try {
  throw new CustomError("Custom error occurred");
} catch (error) {
  console.error("Error: ", error); // 输出 "Error: CustomError: Custom error occurred"
}

基本面试题解析

常见面试题类型

常见的 JavaScript 面试题类型包括基本语法、函数、DOM 操作、内置对象、调试和错误处理等。

解题思路与示例代码

基本语法

题目：编写一个函数，接受两个参数并返回它们的和。

function sum(a, b) {
  return a + b;
}

console.log(sum(10, 20)); // 输出 30

函数

题目：编写一个函数，接受一个数组和一个值，判断数组中是否包含该值。

function contains(array, value) {
  return array.includes(value);
}

console.log(contains([1, 2, 3, 4, 5], 3)); // 输出 true
console.log(contains([1, 2, 3, 4, 5], 6)); // 输出 false

DOM 操作

题目：编写一个函数，点击按钮后将按钮文本从 "Click Me" 改为 "Clicked"。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <script>
    let button = document.getElementById("myButton");

    button.addEventListener("click", function() {
      button.textContent = "Clicked";
    });
  </script>
</body>
</html>

内置对象

题目：编写一个函数，返回当前时间的字符串表示。

function getCurrentTimeString() {
  let now = new Date();
  return now.toLocaleString();
}

console.log(getCurrentTimeString()); // 输出类似 "10/1/2023, 3:30:00 PM"

调试与错误处理

题目：编写一个函数，如果输入的值为负数，则抛出错误。

function checkPositive(value) {
  if (value < 0) {
    throw new Error("Value must be positive");
  }
}

try {
  checkPositive(-1);
} catch (error) {
  console.error("Error: ", error); // 输出 "Error: Error: Value must be positive"
}

通过这些示例代码，可以帮助初学者更好地理解和掌握 JavaScript 的基本知识点。这些知识点涵盖了 JavaScript 的基础语法、函数、DOM 操作、内置对象、调试与错误处理等，是学习 JavaScript 不可或缺的基础内容。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕斯709654

手记
篇

粉丝

37

获赞与收藏

183

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 313934 2208

后端通用面试教程

41个小节 31204 346

网络编程入门教程

20个小节 12758 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空