【JavaScript】JavaScript基础详解(文末送书)

简介: 【JavaScript】JavaScript基础详解(文末送书)


👉博__主👈:米码收割机

👉技__能👈:C++/Python语言

👉公众号👈:测试开发自动化【获取源码+商业合作】

👉荣__誉👈:阿里云博客专家博主、51CTO技术博主

👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。



一、变量声明

在 JavaScript 中,可以使用三种方式来声明变量:

  1. var: 这是传统的方式,但在 ES6 (ECMAScript 2015) 之后,它的使用开始逐渐被限制在函数作用域。
var name = "ChatGPT";
  1. let: 从 ES6 开始引入,允许你声明块级作用域的变量。
let age = 5;
  1. const: 同样从 ES6 开始引入,用于声明不可变的变量(常量)。一旦给它赋值,你就不能再更改它。
const PI = 3.141592653589793;

二、数据类型

  • Number:表示数值。
let x = 123;
let y = 3.14;
  • String:表示文本。
let greeting = "Hello, World!";
  • Boolean:表示真或假。
let isTrue = true;
let isFalse = false;
  • Object:用于存储键值对。
let person = {firstName: "John", lastName: "Doe"};
  • Array:用于存储元素的列表。
let fruits = ["Apple", "Banana", "Cherry"];
  • null:表示没有值。
let emptyValue = null;
  • undefined:表示变量已声明但尚未赋值。
let testVar;
console.log(testVar); // 输出: undefined

三、控制结构

  • If 语句
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Child");
}
  • For 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}
  • 函数声明
function greet(name) {
    console.log("Hello, " + name);
}

四、函数

JavaScript 中的函数是其核心概念之一。函数允许将代码块组织在一起并在需要的地方调用它。

1. 函数声明

这是定义函数的一种方式,使用 function 关键字 followed by the function’s name:

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

2. 函数表达式

函数也可以使用表达式来定义,并赋值给一个变量。这样的函数通常是匿名的(没有名称):

const sayGoodbye = function() {
    console.log("Goodbye, World!");
};

3. 箭头函数(ES6)

从 ES6 开始,JavaScript 引入了箭头函数,为我们提供了定义函数的另一种简洁方式:

const add = (a, b) => a + b;

4. 参数

你可以将值传递给函数,这些值称为参数。函数可以接受多个参数:

function greet(firstName, lastName) {
    console.log("Hello, " + firstName + " " + lastName);
}

5. 默认参数(ES6)

如果调用函数时缺少参数,你可以为函数参数设置默认值:

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

6. 返回值

使用 return 语句从函数返回一个值:

function square(number) {
    return number * number;
}

7. 函数作为参数

在 JavaScript 中,函数是第一类对象,这意味着你可以将函数作为另一个函数的参数:

function calculate(x, y, operation) {
    return operation(x, y);
}
const result = calculate(5, 3, (a, b) => a + b); // 8

8. 立即调用的函数表达式(IIFE)

这是一个定义后立即执行的函数:

(function() {
    console.log("This function runs as soon as it's defined!");
})();

9. 闭包

闭包是一个函数与其相关的词法作用域捆绑在一起。这使得函数可以访问其外部函数的变量,即使外部函数已经完成了执行:

function outerFunction() {
    let outerVariable = "I'm from outer function!";
    return function() {
        console.log(outerVariable);
    };
}
const innerFunction = outerFunction();
innerFunction(); // 输出: "I'm from outer function!"

五、类

JavaScript 支持面向对象编程,并且在 ES6 (ECMAScript 2015) 之后,正式引入了 class 语法来模拟经典的面向对象语言中的类的概念。尽管之前的版本中 JavaScript 使用了基于原型的继承,但 ES6 的 class 提供了一种更直观和结构化的方式来创建对象和处理继承。

以下是使用 JavaScript class 的一些基本概念:

1. 类的声明

你可以使用 class 关键字来声明一个类:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
const john = new Person('John', 30);
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

2. 继承

使用 extends 关键字可以从另一个类继承:

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age);
        this.jobTitle = jobTitle;
    }
    introduce() {
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old and I work as a ${this.jobTitle}.`);
    }
}
const jane = new Employee('Jane', 28, 'Software Developer');
jane.introduce(); // 输出: Hello, my name is Jane, I am 28 years old and I work as a Software Developer.

3. 静态方法

使用 static 关键字,你可以在类上定义静态方法,而不是它的实例:

class Utility {
    static addNumbers(a, b) {
        return a + b;
    }
}
console.log(Utility.addNumbers(2, 3)); // 输出: 5

4. getter 和 setter

你可以使用 getset 关键字为类定义访问器和设置器:

class Circle {
    constructor(radius) {
        this._radius = radius;
    }
    // getter
    get diameter() {
        return this._radius * 2;
    }
    // setter
    set diameter(value) {
        this._radius = value / 2;
    }
}
const circle = new Circle(5);
console.log(circle.diameter); // 输出: 10
circle.diameter = 14;
console.log(circle._radius); // 输出: 7


相关文章
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
60 2
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
29 5
|
17天前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
54 4
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
46 4
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
60 4
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
54 3
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
51 3
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
38 3
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
34 2

热门文章

最新文章