JavaScript 基础知识教程:从零开始学习语法和数据类型
                           
天天向上
发布: 2025-02-08 00:14:51

原创
789 人浏览过

介绍与历史

JavaScript 是一种高效、灵活且广泛应用的脚本语言,最初由 Netscape 的 Brendan Eich 于 1995 年开发。它主要用于网页的动态交互,是 Web 开发的核心技术之一。虽然名字中有 “Java”,但 JavaScript 和 Java 完全是不同的两种语言。

  • Java 与 JavaScript 的关系:Java 是一种面向对象的编程语言,而 JavaScript 是一种基于事件驱动、非阻塞模型的动态语言。Java 是用来开发大型应用的,而 JavaScript 主要用于在浏览器中提供动态效果。
  • JavaScript 运行环境
  • 浏览器:JavaScript 最初是设计用来在网页中提供交互性,现代浏览器(如 Chrome、Firefox、Safari 等)提供了运行 JavaScript 的环境。
  • Node.js:随着技术发展,JavaScript 不仅限于浏览器。Node.js 让 JavaScript 可以在服务器端运行,构建高效的后端应用程序。

基础语法

  1. 变量声明
  • var:早期 JavaScript 使用的声明方式,存在作用域问题,已不推荐使用。
  • let:引入了块级作用域的声明方式,可以避免 var 可能导致的作用域问题。
  • const:常量声明,声明后不可重新赋值,保证值的不可变性。
   let age = 25;
   const name = 'John';
   var city = 'New York'; // 不推荐使用
  1. 数据类型
  • Number:数字类型,包括整数和浮动小数。
  • String:字符串类型,使用单引号或双引号包裹。
  • Boolean:布尔值类型,只有两个值:truefalse
  • Null:表示无效或空值。
  • Undefined:声明但未赋值的变量默认为 undefined
  • Symbol:ES6 引入的唯一值类型。
  • Object:对象类型,可以包含多个值(属性和方法)。
   let age = 30; // Number
   let name = "Alice"; // String
   let isActive = true; // Boolean
   let person = null; // Null
   let address; // Undefined
  1. 基本操作符
  • 算术操作符+, -, *, /, %, ++, --
  • 比较操作符==, ===, !=, !==, <, >, <=, >=
  • 逻辑操作符&& (与), || (或), ! (非)
   let sum = 5 + 3; // 8
   let isEqual = 5 === 5; // true
   let isValid = true && false; // false
  1. 条件语句
  • if...else:根据条件判断执行不同的代码块。
  • switch:多个条件选择的简便方法。
   let age = 20;
   if (age >= 18) {
     console.log("Adult");
   } else {
     console.log("Child");
   }

   // switch 示例
   switch (age) {
     case 20:
       console.log("20 years old");
       break;
     default:
       console.log("Age not matched");
   }
  1. 循环结构
  • for:经典的计数循环。
  • while:在条件为真时执行循环。
  • do...while:至少执行一次的循环。
  • for...in:遍历对象的属性。
  • for...of:遍历数组或其他可迭代对象的值。
   // for 循环
   for (let i = 0; i < 5; i++) {
     console.log(i); // 0, 1, 2, 3, 4
   }

   // for...in 循环
   let person = { name: "John", age: 30 };
   for (let key in person) {
     console.log(key + ": " + person[key]);
   }
  1. 函数的声明与调用
  • 函数声明:通过 function 关键字定义函数。
  • 函数调用:使用函数名加括号调用。
   function greet(name) {
     console.log("Hello, " + name);
   }

   greet("Alice"); // 输出: Hello, Alice

基础数据结构

  1. 数组
  • 创建数组:通过 [] 创建。
  • 访问与修改:通过索引访问或修改数组元素。
  • 常用数组方法push(), pop(), shift(), unshift(), slice(), splice() 等。
   let fruits = ["Apple", "Banana", "Cherry"];
   fruits.push("Orange"); // 添加元素
   console.log(fruits[0]); // 输出: Apple
   fruits.pop(); // 移除最后一个元素
  1. 对象
  • 创建对象:使用 {} 定义。
  • 访问与修改属性:通过点操作符或方括号语法。
  • 对象方法:对象可以拥有函数作为属性。
   let person = {
     name: "John",
     age: 30,
     greet: function() {
       console.log("Hello, " + this.name);
     }
   };

   person.greet(); // 输出: Hello, John
  1. 字符串
  • 常用字符串方法slice(), substring(), charAt(), split(), toUpperCase(), toLowerCase() 等。
   let str = "JavaScript";
   console.log(str.slice(0, 4)); // "Java"
   console.log(str.charAt(5)); // "S"
   console.log(str.split("")); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
  1. JSON 处理
  • JSON.parse():将 JSON 字符串转换为对象。
  • JSON.stringify():将对象转换为 JSON 字符串。
   let jsonString = '{"name": "Alice", "age": 25}';
   let obj = JSON.parse(jsonString);
   console.log(obj.name); // "Alice"

   let jsonObject = { name: "Bob", age: 30 };
   let jsonStr = JSON.stringify(jsonObject);
   console.log(jsonStr); // '{"name":"Bob","age":30}'

小结

JavaScript 是一门非常强大且灵活的语言,掌握基础语法、数据结构及常用方法是编写高效、可靠代码的基础。通过本部分内容的学习,你已经能够理解 JavaScript 的基本语法、变量声明、数据类型、控制流结构及常用数据结构(如数组和对象),为后续深入学习和实际开发打下了坚实的基础。

发表回复 0

Your email address will not be published. Required fields are marked *