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


    请添加图片描述


    👉博__主👈:米码收割机
    👉技__能👈:C++/Python语言
    👉公众号👈:测试开发自动化【获取源码+商业合作
    👉荣__誉👈:阿里云博客专家博主、51CTO技术博主
    👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。


    系列文章目录



    一、变量声明

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

    1. var: 这是传统的方式,但在 ES6 (ECMAScript 2015) 之后,它的使用开始逐渐被限制在函数作用域。

      var name = "ChatGPT";
      
      • 1
    2. let: 从 ES6 开始引入,允许你声明块级作用域的变量。

      let age = 5;
      
      • 1
    3. const: 同样从 ES6 开始引入,用于声明不可变的变量(常量)。一旦给它赋值,你就不能再更改它。

      const PI = 3.141592653589793;
      
      • 1

    二、数据类型

    • Number:表示数值。

      let x = 123;
      let y = 3.14;
      
      • 1
      • 2
    • String:表示文本。

      let greeting = "Hello, World!";
      
      • 1
    • Boolean:表示真或假。

      let isTrue = true;
      let isFalse = false;
      
      • 1
      • 2
    • Object:用于存储键值对。

      let person = {firstName: "John", lastName: "Doe"};
      
      • 1
    • Array:用于存储元素的列表。

      let fruits = ["Apple", "Banana", "Cherry"];
      
      • 1
    • null:表示没有值。

      let emptyValue = null;
      
      • 1
    • undefined:表示变量已声明但尚未赋值。

      let testVar;
      console.log(testVar); // 输出: undefined
      
      • 1
      • 2

    三、控制结构

    • If 语句

      if (age > 18) {
          console.log("Adult");
      } else {
          console.log("Child");
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
    • For 循环

      for (let i = 0; i < 5; i++) {
          console.log(i);
      }
      
      • 1
      • 2
      • 3
    • 函数声明

      function greet(name) {
          console.log("Hello, " + name);
      }
      
      • 1
      • 2
      • 3

    四、函数

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

    1. 函数声明

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

    function sayHello() {
        console.log("Hello, World!");
    }
    
    • 1
    • 2
    • 3

    2. 函数表达式

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

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

    3. 箭头函数(ES6)

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

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

    4. 参数

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

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

    5. 默认参数(ES6)

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

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

    6. 返回值

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

    function square(number) {
        return number * number;
    }
    
    • 1
    • 2
    • 3

    7. 函数作为参数

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

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

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

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

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

    9. 闭包

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

    function outerFunction() {
        let outerVariable = "I'm from outer function!";
        return function() {
            console.log(outerVariable);
        };
    }
    
    const innerFunction = outerFunction();
    innerFunction(); // 输出: "I'm from outer function!"
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    五、类

    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.
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    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.
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3. 静态方法

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

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

    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    本期好书推荐《JavaScript从入门到精通(第5版)》


    【书籍介绍】

    JavaScript入门经典,42万Web前端程序员的入行选择。配备Web前端开发资源库,在线答疑,学习1小时,训练10小时,从入门到项目上线,打造全新学习生态。


    【购买链接】

    京东:https://item.jd.com/13791889.html
    当当:http://product.dangdang.com/29594970.html

    请添加图片描述

  • 相关阅读:
    Mabitys总结
    JVM中的GC如何判断对象可以被回收
    十二、stm32-红外遥控(OLED显示)
    金仓数据库KingbaseES客户端编程接口指南-ado.net(10. 预编译语句)
    redis入门-1-redis概念和基础
    隐私计算头条周刊(9.11-9.17)
    我的创作纪念日
    idea设置某个文件修改后所在父文件夹变蓝色
    DL/ML/RL/TL/FL机器学习框架总结
    图文并茂演示小程序movable-view的可移动范围
  • 原文地址:https://blog.csdn.net/weixin_44244190/article/details/133998563