JavaScript——简介与基础语法|极客笔记

JavaScript——简介与基础语法

1. 简介

JavaScript是一种轻量级、解释型的编程语言，主要用于网页前端开发，能够为网页增加交互性和动态效果。它是一种基于对象和事件驱动的语言，允许开发者通过编写脚本代码来对网页进行操作和控制。JavaScript的设计目标是与HTML和CSS进行无缝集成，实现网页内容和样式的动态变化。

作为一门脚本语言，JavaScript不需要编译器，代码可以直接嵌入到HTML文档中，在浏览器中执行。JavaScript的语法和Java类似，但两者并没有任何关系。JavaScript的开发者可以使用浏览器内置的JavaScript引擎进行测试和调试，也可以使用第三方的开发工具，如Visual Studio Code、Sublime Text等。

JavaScript具有广泛的应用领域，包括网页开发、移动应用开发、桌面应用开发、服务器端开发等等。随着近年来前端开发的快速发展，JavaScript变得越来越重要，成为前端开发者的必备技能之一。

2. 基础语法

2.1 变量与数据类型

在JavaScript中，可以使用var、let和const关键字声明变量。其中，var是ES5标准引入的关键字，let和const是ES6标准引入的关键字。

示例代码：

// 使用var声明变量
var name = "John";
console.log(name);  // 输出：John

// 使用let声明变量
let age = 20;
console.log(age);  // 输出：20

// 使用const声明常量
const PI = 3.14;
console.log(PI);  // 输出：3.14

JavaScript中的数据类型包括：字符串（String）、数字（Number）、布尔值（Boolean）、对象（Object）、数组（Array）、空（Null）和未定义（Undefined）。

示例代码：

let message = "Hello World";  // 字符串
let number = 25;              // 数字
let isTrue = true;            // 布尔值
let person = {                // 对象
  name: "John",
  age: 20
};
let fruits = ["apple", "banana", "orange"];  // 数组
let emptyVariable = null;      // 空
let undefinedVariable;         // 未定义

console.log(typeof message);   // 输出：string
console.log(typeof number);    // 输出：number
console.log(typeof isTrue);    // 输出：boolean
console.log(typeof person);    // 输出：object
console.log(typeof fruits);    // 输出：object
console.log(typeof emptyVariable);  // 输出：object
console.log(typeof undefinedVariable);  // 输出：undefined

2.2 运算符

JavaScript支持多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等等。以下是一些常用运算符的示例：

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

let x = 5;
let y = 3;

console.log(x + y);  // 输出：8
console.log(x - y);  // 输出：2
console.log(x * y);  // 输出：15
console.log(x / y);  // 输出：1.6666666666666667
console.log(x % y);  // 输出：2
console.log(x ** y); // 输出：125

赋值运算符：用于给变量赋值。

let x = 5;

console.log(x);     // 输出：5

x += 3;
console.log(x);     // 输出：8

x -= 2;
console.log(x);     // 输出：6

x *= 4;
console.log(x);     // 输出：24

x /= 3;
console.log(x);     // 输出：8

x %= 5;
console.log(x);     // 输出：3

x **= 2;
console.log(x);     // 输出：9

比较运算符：用于比较两个值的大小。

let x = 5;
let y = 3;

console.log(x > y);   // 输出：true
console.log(x < y);   // 输出：false
console.log(x >= y);  // 输出：true
console.log(x <= y);  // 输出：false
console.log(x == y);  // 输出：false
console.log(x != y);  // 输出：true

逻辑运算符：用于对布尔值进行逻辑运算。

let x = 5;
let y = 3;

console.log(x > 0 && y > 0);  // 输出：true
console.log(x > 0 || y > 0);  // 输出：true
console.log(!(x > 0));       // 输出：false

2.3 控制流程

JavaScript中的控制流程包括条件语句和循环语句。

条件语句：根据条件的真假执行不同的代码块。

let age = 20;

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

循环语句：重复执行一段代码块。

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

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

2.4 函数

函数是JavaScript中的一种可重复使用的代码块，通过函数可以将一段代码封装起来并多次调用。JavaScript中有两种定义函数的方式：函数声明和函数表达式。

函数声明：通过关键字function定义一个函数，并命名该函数。

function sayHello() {
  console.log("Hello!");
}

sayHello();  // 输出：Hello!

函数表达式：将函数赋值给一个变量，函数可以使用匿名或具名方式定义。

let sayHello = function() {
  console.log("Hello!");
};

sayHello();  // 输出：Hello!

let add = function(x, y) {
  return x + y;
};

console.log(add(5, 3));  // 输出：8

2.5 对象与类

JavaScript是一种基于对象的语言，可以使用对象来封装数据和函数。

对象：使用对象字面量或构造函数的方式创建对象。

对象字面量：使用大括号{}定义一个对象，对象中包含多个键值对。

let person = {
  name: "John",
  age: 20,
  gender: "male",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person.name);      // 输出：John
console.log(person.age);       // 输出：20
console.log(person.gender);    // 输出：male
person.greet();                // 输出：Hello, my name is John

构造函数：使用构造函数创建一个对象，构造函数使用new关键字调用。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

let john = new Person("John", 20, "male");

console.log(john.name);        // 输出：John
console.log(john.age);         // 输出：20
console.log(john.gender);      // 输出：male
john.greet();                  // 输出：Hello, my name is John

类：ES6引入了类的概念，可以使用class关键字创建一个类。

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

let john = new Person("John", 20, "male");

console.log(john.name);        // 输出：John
console.log(john.age);         // 输出：20
console.log(john.gender);      // 输出：male
john.greet();                  // 输出：Hello, my name is John

2.6 数组操作

JavaScript中的数组是一种特殊的对象，可以用于存储多个值。数组的元素可以是不同的数据类型，并且数组的长度可以动态变化。

创建数组：使用[]括起来的一组值即可创建一个数组。

let fruits = ["apple", "banana", "orange"];

console.log(fruits);                   // 输出：["apple", "banana", "orange"]
console.log(fruits.length);            // 输出：3
console.log(fruits[0]);                // 输出：apple
console.log(fruits[1]);                // 输出：banana
console.log(fruits[2]);                // 输出：orange

数组方法：JavaScript提供了一些内置的数组方法，用于对数组进行操作。

let fruits = ["apple", "banana", "orange"];

fruits.push("pear");
console.log(fruits);                   // 输出：["apple", "banana", "orange", "pear"]

fruits.pop();
console.log(fruits);                   // 输出：["apple", "banana", "orange"]

fruits.shift();
console.log(fruits);                   // 输出：["banana", "orange"]

fruits.unshift("kiwi");
console.log(fruits);                   // 输出：["kiwi", "banana", "orange"]

let subFruits = fruits.slice(1, 3);
console.log(subFruits);                 // 输出：["banana", "orange"]