JavaScript（简称 JS）是世界上最流行的编程语言之一，最初设计用于在浏览器中运行，如今已广泛应用于服务器开发、桌面程序开发和手机应用开发等多个领域。本文将带你深入了解 JavaScript 的基础语法，从变量、数据类型到控制结构和函数，帮助你快速掌握这门强大的语言。

一、JavaScript 简介

1.1 JavaScript 是什么

JavaScript 是一种脚本语言，通过解释器运行，主要在客户端（浏览器）上运行，也可以在服务器端运行（如 Node.js）。它最初用于简单的表单验证，如今已成为通用编程语言，可用于网页开发、游戏开发、服务器开发、桌面程序开发和手机应用开发等。

1.2 发展历史

JavaScript 由布兰登·艾奇（Brendan Eich）在 1995 年用 10 天时间设计完成。最初命名为 LiveScript，后因 Java 的流行而更名为 JavaScript。尽管名字相似，但 JavaScript 和 Java 是两种完全不同的语言。

1.3 JavaScript 的组成

JavaScript 主要由以下三部分组成：

• ECMAScript（ES）：JavaScript 的语法标准。

• DOM（文档对象模型）：用于操作页面中的元素。

• BOM（浏览器对象模型）：用于操作浏览器窗口。

二、JavaScript 运行过程

编写好的 JavaScript 代码保存在文件中，浏览器读取文件并加载到内存中。浏览器的解释器将代码翻译成二进制指令，然后由 CPU 执行。浏览器分为渲染引擎和 JS 引擎，渲染引擎解析 HTML 和 CSS，JS 引擎解析并执行 JavaScript 代码。

三、JavaScript 的书写形式

3.1 行内式

直接嵌入到 HTML 元素内部：

 <input type="button" value="click me!" onclick="alert('haha')">

3.2 内嵌式

写在<script>标签中：

<script>alert("haha");</script>

3.3 外部式

写在单独的.js文件中：

<script src="script.js"></script>

四、注释

• 单行注释：//

vscode快捷键: ctrl + /

• 多行注释：/* */

vscode快捷键:ctrl + shift + a

五、输入输出

5.1 输入：prompt

弹出一个输入框：

var name = prompt("Please input your name:");

5.2 输出：alert

弹出一个警示对话框：

alert("hello");

5.3 控制台输出：console.log

在控制台打印日志：

console.log("This is a log!");

六、变量的使用

6.1 基本用法

使用var关键字声明变量：

var name = 'zhangsan';
var age = 20;

6.2 动态类型

JavaScript 是动态类型语言，变量的类型在运行时确定，且可以改变：

var a = 10; // 数字
a = "hehe"; // 字符串

七、基本数据类型

• number：数字，不区分整数和浮点数。

• boolean：布尔值，true或false。

• string：字符串。

• undefined：未定义的值。

• null：空值。

八、运算符

8.1 算术运算符

+,-,*,/,%

8.2 赋值运算符

=,+=,-=,*=,/=,%=

8.3 自增自减运算符

++,--

8.4 比较运算符

==(要求数据类型),===(要求数据类型和数据都一样),!=,!==,>,<,>=,<=

8.5 逻辑运算符

&&,||,!

8.6 位运算符

&,|,~,^,<<,>>,>>>

九、条件语句

9.1if语句

if (条件) {
    // 语句
} else if (条件) {
    // 语句
} else {
    // 语句
}

9.2 三元表达式

条件 ? 表达式1 : 表达式2;

9.3switch语句

switch (表达式) {
    case 值1:
        // 语句
        break;
    case 值2:
        // 语句
        break;
    default:
        // 语句
}

十、循环语句

10.1while循环

while (条件) {
    // 循环体
}

10.2for循环

for (初始化; 条件; 更新) {
    // 循环体
}

10.3continue和break

• continue：结束当前循环，继续下一次循环。

• break：结束整个循环。

十一、数组

11.1 创建数组

var arr = new Array();
var arr2 = [1, 2, 'haha', false];  //js中不要求数组的数据类型一样

11.2 获取数组元素

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr[0]); // 小猪佩奇

11.3 新增数组元素

arr.push('小猫凯迪'); // 追加元素

11.4 删除数组元素

arr.splice(2, 1); // 删除下标为2的元素

十二、函数

12.1 函数声明

function 函数名(形参列表) {
    // 函数体
    return 返回值;
}

12.2 函数调用

函数名(实参列表);

12.3 函数表达式

var add = function() {	//此时的add就是函数的一个引用,可以通过add(...)来调用函数
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
};
console.log(add(10, 20)); // 30

在 JavaScript 中，arguments是一个特殊的类数组对象，它在每个函数中都可用，用于表示传递给函数的参数。不过，arguments的行为和使用方式在 ES6 之后有所变化。

ES5 及之前的版本
在 ES5 及之前的版本中，arguments是所有函数内部的一个内置对象，它包含了传递给函数的参数。arguments是一个类数组对象，它有length属性，可以通过索引访问参数值，但它不是一个真正的数组，因此它没有数组的方法（如push、map等）。

示例：

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出：6

ES6 及之后的版本
在 ES6 中引入了rest参数语法（...），它提供了一种更简洁的方式来处理函数参数。使用rest参数可以将函数的参数收集到一个真正的数组中，这样就可以使用数组的方法了。

示例：

function sum(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 输出：6

arguments和rest参数的区别

• arguments：

• 是一个类数组对象，不是真正的数组。

• 不能使用数组的方法。

• 在严格模式（strict mode）下，arguments不会自动绑定到函数的参数上，需要手动处理。

• rest参数：

• 是一个真正的数组。

• 可以使用数组的所有方法。

• 更简洁，更符合现代 JavaScript 的语法。

总结
虽然arguments在所有函数中都可用，但在 ES6 及之后的版本中，推荐使用rest参数来处理函数参数，因为它更简洁、更强大。不过，arguments仍然在一些特定场景下有用，比如当你需要兼容旧代码或者需要访问函数的调用上下文时。

十三、作用域

13.1 全局作用域

在整个脚本或文件中有效。

13.2 局部作用域

在函数内部有效。

13.3 作用域链

内部函数可以访问外部函数的变量。

十四、对象

14.1 创建对象

//1.

var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};

//2.通过new Object()创建的对象

var student = new Object(); // 创建一个空对象

// 添加属性
student.name = '蔡徐坤';
student.height = 175;
student.weight = 170;

// 添加方法
student.sayHello = function() {
    console.log("hello");
};

// 测试对象
console.log(student.name); // 输出：蔡徐坤
console.log(student.height); // 输出：175
console.log(student.weight); // 输出：170
student.sayHello(); // 输出：hello

注意:

在这里的var student = new Object()效果和var student = {}效果一样

14.2 使用构造函数创建对象

function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function() {
        console.log(sound);
    };
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');

14.3 原型链

JavaScript 使用原型链实现继承。

14.3 原型链

JavaScript 使用原型链实现继承。每个对象都有一个内部属性[[Prototype]]，通常通过__proto__或Object.getPrototypeOf()访问。这个属性指向了对象的原型，而原型本身也是一个对象。通过这种方式，对象可以继承原型上的属性和方法。

示例：使用原型链实现继承

假设我们有一个Animal构造函数，它有一个方法eat。我们希望Cat构造函数继承Animal的方法。

// 定义 Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 为 Animal 添加方法
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

// 定义 Cat 构造函数
function Cat(name) {
  Animal.call(this, name); // 调用父构造函数初始化
}

// 设置 Cat 的原型为 Animal 的实例
Cat.prototype = Object.create(Animal.prototype);

// 修复 Cat 的 constructor 指向
Cat.prototype.constructor = Cat;

// 为 Cat 添加自己的方法
Cat.prototype.meow = function() {
  console.log(this.name + " says meow.");
};

// 创建一个 Cat 实例
var myCat = new Cat("Kitty");

// 测试继承
myCat.eat(); // 输出：Kitty is eating.
myCat.meow(); // 输出：Kitty says meow.
console.log(myCat instanceof Animal); // 输出：true
console.log(myCat instanceof Cat); // 输出：true

代码解释：

• 定义Animal构造函数：

• Animal构造函数接受一个name参数，并将其赋值给实例的name属性。

• 通过Animal.prototype.eat添加了一个方法eat，所有通过Animal构造函数创建的实例都可以访问这个方法。

• 定义Cat构造函数：

• Cat构造函数也接受一个name参数，并通过Animal.call(this, name)调用父构造函数进行初始化。

• 通过Object.create(Animal.prototype)设置Cat的原型为Animal的原型，这样Cat的实例就可以继承Animal的方法。

• 修复Cat.prototype.constructor，确保myCat.constructor指向Cat。

• 为Cat添加自己的方法：

• 通过Cat.prototype.meow添加了一个方法meow，这是Cat自己的方法。

• 创建Cat实例并测试：

• 创建一个Cat实例myCat。

• 调用myCat.eat()和myCat.meow()，验证继承和方法调用。

• 使用instanceof操作符检查myCat是否是Animal和Cat的实例。

原型链的工作原理

• 查找属性或方法：当访问一个对象的属性或方法时，JavaScript 会先在对象自身查找。如果找不到，就会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端（Object.prototype）。

• 原型链的末端：所有原型链最终都会指向Object.prototype，这是 JavaScript 中所有对象的根原型。Object.prototype的__proto__属性为null，表示原型链的结束。

通过这种方式，JavaScript 实现了基于原型的继承机制，使得对象可以共享方法和属性，从而实现了代码的复用。

在 JavaScript 中，extend通常指的是一种继承机制，用于将一个对象的属性和方法扩展到另一个对象中。这种机制在 ES5 及之前的版本中非常常见，而在 ES6 及之后的版本中，可以使用class和extends关键字来实现更简洁的继承。

ES5 中的extend继承

在 ES5 中，可以通过手动操作原型链来实现继承。以下是一个常见的实现方式：

// 定义父类
function Animal(name) {
  this.name = name;
}

// 为父类添加方法
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

// 定义子类
function Cat(name) {
  Animal.call(this, name); // 调用父类的构造函数进行初始化
}

// 设置子类的原型为父类的实例
Cat.prototype = Object.create(Animal.prototype);

// 修复子类的 constructor 指向
Cat.prototype.constructor = Cat;

// 为子类添加自己的方法
Cat.prototype.meow = function() {
  console.log(this.name + " says meow.");
};

// 创建子类实例
var myCat = new Cat("Kitty");

// 测试继承
myCat.eat(); // 输出：Kitty is eating.
myCat.meow(); // 输出：Kitty says meow.
console.log(myCat instanceof Animal); // 输出：true
console.log(myCat instanceof Cat); // 输出：true

ES6 中的extends继承

在 ES6 中，可以使用class和extends关键字来实现继承，这种方式更加简洁和直观：

// 定义父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(this.name + " is eating.");
  }
}

// 定义子类
class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的构造函数进行初始化
  }

  meow() {
    console.log(this.name + " says meow.");
  }
}

// 创建子类实例
const myCat = new Cat("Kitty");

// 测试继承
myCat.eat(); // 输出：Kitty is eating.
myCat.meow(); // 输出：Kitty says meow.
console.log(myCat instanceof Animal); // 输出：true
console.log(myCat instanceof Cat); // 输出：true

两种方式的对比

ES5 的extend继承

• 优点：

• 兼容性好，适用于所有支持 ES5 的环境。

• 缺点：

• 代码较为繁琐，需要手动操作原型链。

• 容易出错，尤其是忘记修复constructor指向。

ES6 的extends继承

• 优点：

• 语法简洁，易于理解和使用。

• 自动处理原型链和constructor指向。

• 缺点：

• 需要 ES6 支持，不兼容旧版本的 JavaScript 环境。

总结

在现代 JavaScript 开发中，推荐使用 ES6 的class和extends关键字来实现继承，因为这种方式更加简洁和直观。如果你需要兼容旧版本的 JavaScript 环境，可以使用 ES5 的extend继承方式。

十五、总结

JavaScript 是一门功能强大的语言，其基础语法简单易懂，但功能强大。通过本文的介绍，你已经掌握了 JavaScript 的基本语法，包括变量、数据类型、控制结构、函数、数组和对象等。希望这些知识能帮助你在 JavaScript 开发中更上一层楼！