【JavaScript】JavaScript初识及基本语法详解

目录

前言

1. JavaScript简介

特点

2. JavaScript环境

浏览器

Node.js

3. JavaScript基本语法

变量声明

数据类型

运算符

控制结构

函数

数组

对象

4. 高级概念

异步编程

作用域和闭包

原型链和继承

模块化

总结

---

前言

        JavaScript 是一种高级的、解释执行的编程语言，它是互联网上最广泛使用的脚本语言之一。JavaScript 使得网页可以具有交互性，是现代网页开发不可或缺的一部分。本文将为你提供一个全面的 JavaScript 初识指南，深入探讨其基本语法，并详解各种核心概念。

---

1. JavaScript简介

JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年创建，并迅速成为网页开发的核心技术之一。尽管名字中包含 "Java"，但 JavaScript 与 Java 语言没有直接关系。JavaScript 通常被归类为一种轻量级的、解释型的、基于原型的脚本语言。

特点

• 解释型语言：JavaScript 代码在运行时被解释，无需编译。
• 基于对象：虽然 JavaScript 是一种多范式的语言，但它主要基于对象。
• 动态类型：变量在声明时不需要指定类型，类型会在运行时确定。
• 弱类型：JavaScript 允许类型转换，尤其是在算术运算中。
• 事件驱动：JavaScript 常用于响应用户操作，如点击、输入等。

2. JavaScript环境

JavaScript 最初设计用于浏览器端，但随着 Node.js 的出现，JavaScript 也可以在服务器端运行。此外，JavaScript 也可以在其他环境中运行，如 Adobe Flash、Internet Explorer 的 JScript 引擎等。

浏览器

• Chrome、Firefox、Safari、Edge 等主流浏览器都内置了 JavaScript 引擎。
• 浏览器的兼容性和实现细节可能会有所不同。

Node.js

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。
• 它使得 JavaScript 可以在服务器端运行，并支持构建更复杂的后端应用。

3. JavaScript基本语法

变量声明

在 JavaScript 中，使用 var、let 和 const 关键字来声明变量。

var message = "Hello, world!"; // var 是函数作用域
let count = 0; // let 是块级作用域
const PI = 3.14159; // const 声明常量

数据类型

JavaScript 有七种基本数据类型：

• Number：表示数字，如 5、3.14。
• String：表示字符串，如 'Hello'、"JavaScript"。
• Boolean：表示逻辑值，true 或 false。
• Null：表示空值。
• Undefined：表示未定义的值。
• Object：表示复合值，如数组、函数、日期等。
• Symbol（ES6 新增）：表示唯一的标识符。

运算符

JavaScript 支持各种算术、赋值、比较、逻辑和条件运算符。

// 算术运算符
let sum = 5 + 3; // 8
let difference = 5 - 3; // 2
let product = 5 * 3; // 15
let quotient = 5 / 3; // ~1.6667

// 赋值运算符
let x = 5;
x += 3; // x 现在是 8

// 比较运算符
if (5 == 3) { // false
  console.log('Not equal');
} else {
  console.log('Equal');
}

// 逻辑运算符
let a = true;
let b = false;
let result = a && b; // false
result = a || b; // true

控制结构

JavaScript 提供了多种控制结构，如条件语句、循环和异常处理。

// 条件语句
if (condition) {
  // 代码块
} else {
  // 另一个代码块
}

// 循环
while (condition) {
  // 循环体
}
for (let i = 0; i < 10; i++) {
  // 循环体
}
for (let key in object) {
  // 对象属性遍历
}

// 异常处理
try {
  // 可能抛出异常的代码
} catch (error) {
  // 异常处理
} finally {
  // 无论是否异常都会执行的代码
}

函数

函数是 JavaScript 中的一等公民，可以作为变量存储，作为参数传递，也可以作为其他函数的返回值。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

数组

数组是 JavaScript 中用于存储多个值的全局对象。

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits.length); // 3

对象

对象是 JavaScript 中表示复杂数据结构的方式。

let person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet();

4. 高级概念

异步编程

JavaScript 支持异步编程，主要通过回调函数、Promise 和 async/await 来实现。

// 回调
function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'Data');
  }, 1000);
}

fetchData((error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log(result);
  }
});

// Promise
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

// async/await
async function fetchDataAsync() {
  let result = await promise;
  console.log(result);
}

fetchDataAsync();

作用域和闭包

JavaScript 有函数作用域和块级作用域（ES6 引入的 let 和 const）。

function outerFunction() {
  var outerVar = 'I am in outer function';

  function innerFunction() {
    console.log(outerVar); // 可以访问 outerFunction 的变量
  }

  innerFunction();
}

outerFunction();

原型链和继承

JavaScript 中的继承是基于原型链的。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

let dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.

模块化

ES6 引入了模块化编程的概念，允许将代码组织成独立的模块。

// module.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './module.js';

console.log(add(2, 3)); // 5

总结

        JavaScript 是一种功能强大的编程语言，它的灵活性和易用性使其成为网页开发的首选语言。随着现代框架和库（如 React、Angular 和 Vue.js）的出现，JavaScript 的应用范围已经远远超出了浏览器，涵盖了服务器端、移动应用、游戏开发等多个领域。掌握 JavaScript 的基本语法和核心概念，将为你打开现代软件开发的大门。