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

news/2024/5/19 1:34:03/文章来源:https://blog.csdn.net/weixin_44244190/article/details/133998563

请添加图片描述


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


系列文章目录


目录

  • 系列文章目录
  • 一、变量声明
  • 二、数据类型
    • 三、控制结构
  • 四、函数
    • 1. 函数声明
    • 2. 函数表达式
    • 3. 箭头函数(ES6)
    • 4. 参数
    • 5. 默认参数(ES6)
    • 6. 返回值
    • 7. 函数作为参数
    • 8. 立即调用的函数表达式(IIFE)
    • 9. 闭包
  • 五、类
    • 1. 类的声明
    • 2. 继承
    • 3. 静态方法
    • 4. getter 和 setter
  • <center>本期好书推荐《JavaScript从入门到精通(第5版)》
  • 【书籍介绍】
  • 【购买链接】


一、变量声明

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

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

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

    let age = 5;
    
  3. 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;}// getterget diameter() {return this._radius * 2;}// setterset diameter(value) {this._radius = value / 2;}
}const circle = new Circle(5);
console.log(circle.diameter); // 输出: 10
circle.diameter = 14;
console.log(circle._radius); // 输出: 7

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


【书籍介绍】

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


【购买链接】

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

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_376416.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 线程池调度周期性任务“异常“探究

背景 在做性能监控需求的过程中&#xff0c;会存在很多监控任务需要定时执行。比如在卡顿监控的实现中&#xff0c;我们需要每50ms 执行一次主线程调用栈的任务&#xff0c;此时由于任务本身可能存在一些耗时&#xff0c;可能需要对任务下次调度的时间做一些调整&#xff0c;避…

有没有人声和背景音乐分离的神器?

做视频剪辑&#xff0c;二次创作的朋友&#xff0c;需要去除视频中的背景音乐&#xff0c;保留人声&#xff1b;或者去除人声&#xff0c;保留背景音乐。随着用户需求的增多&#xff0c;科技的发展&#xff0c;让我们能通过智能的人声分离软件来实现&#xff0c;下面就来看看如…

XPS的锂电池表征技巧-科学指南针

XPS作为一种表面表征手段&#xff0c;这是它一个很大的限制&#xff0c;同时也是它一个很大的优势&#xff0c;正所谓“其术专则其艺必精”。限于笔者专业背景&#xff0c;此次主要讲述XPS在锂离子电池中的应用。 而由于XPS测试是一种表面分析手段&#xff0c;故其在锂离子电池…

Qt中QFile、QByteArray QDataStream和QTextStream区别及示例

在Qt中&#xff0c;QFile、QByteArray、QDataStream和QTextStream是常用的文件和数据处理类。 主要功能和区别 QFile&#xff1a; QFile是用于读写文本和二进制文件以及资源的I/O设备。可以单独使用QFile&#xff0c;或者更方便地与QTextStream或QDataStream一起使用。 通常在…

最新2023版完美可用的聚合支付系统源码,全开源无后门,适合二开

最新2023版完美可用的聚合易支付系统源码&#xff0c;全开源无后门&#xff0c;真正安全可用。 更新日志&#xff1a; 1.新增微信公众号消息提醒功能 2.重构转账付款功能&#xff0c;支持通过插件扩展 3.商户后台新增代付功能 4.后台新增付款记录列表 5.支付宝插件新增预…

嵌入式养成计划-46----QT--简易版网络聊天室实现--QT如何连接数据库

一百一十九、简易版网络聊天室实现 119.1 QT实现连接TCP协议 119.1.1 基于TCP的通信流程 119.1.2 QT中实现服务器过程 使用QTcpServer实例化一个服务器对象设置监听状态&#xff0c;通过listen()函数&#xff0c;可以监听特定的主机&#xff0c;也可以监听所有客户端&#x…

C++23:多维视图(std::mdspan)

C23&#xff1a;多维视图&#xff08;std::mdspan&#xff09; 介绍 在 C23 中&#xff0c;std::mdspan 是一个非拥有的多维视图&#xff0c;用于表示连续对象序列。这个连续对象序列可以是一个简单的 C 数组、带有大小的指针、std::array、std::vector 或 std::string。 这…

外汇天眼:如何快速玩转外汇市场?这个技巧你必须知道!

在外汇市场中&#xff0c;决定交易成功与否的关键在于投资者的技能和知识扎不扎实&#xff0c;这对投资者获取利润至关重要。然而对于投资者来说&#xff0c;外汇交易市场又是一个复杂且多变的市场&#xff0c;要在外汇市场中获得成功并不容易&#xff0c;需要深入地了解、不断…

部署Vue项目到githubPage中

上传Vue项目到githubPage 例如: 看我发布的地址 前提条件 1. github上有一个仓库并且仓库下有两个分支(main 和 gh-pages) 1.1 main分支保存你的vue项目源码(react或者其他框架的都行) 1.2 gh-pages分支保存的是你项目打包之后的代码(如Vue项目打包完之后是个dist包,…

【Javascrpt】比较,逻辑运算符

目录 比较运算符 逻辑运算符 &&(与&#xff09; ||&#xff08;或&#xff09; 两真&#xff08;||左侧为真&#xff0c;||右侧为真&#xff09; 两假&#xff08;||左侧为假&#xff0c;右侧为假&#xff09; 一真一假&#xff08;||一侧为假&#xff0c;另一侧为…

数据集的特征提取

1、 特征提取 1.1、 将任意数据&#xff08;如文本或图像&#xff09;转换为可用于机器学习的数字特征 注&#xff1a;特征值化是为了计算机更好的去理解数据 字典特征提取(特征离散化)文本特征提取图像特征提取&#xff08;深度学习将介绍&#xff09; 2 特征提取API sklear…

物联网AI MicroPython传感器学习 之 GC7219点阵屏驱动模块

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 一、产品简介 LED-8 * 32点阵屏显示板由 4 块单色 8x8 共阴红色点阵单元组成&#xff0c;通过 SPI 菊花链模式将多块显示屏连接后可以组成更大的分辨率显示屏幕&#xff0c;任意组合分辨率。可用于简单仪表显…

1、VMware虚拟机及网络配置

一、VMware虚拟网络编辑器 1、选择NAT模式并配置子网 2、进入NAT设置&#xff0c;配置网关 3、宿主机网络适配器设置 二、创建虚拟机 在这里插入图片描述 三、开启虚拟机&#xff0c;安装操作系统 在该网段内配置静态ip&#xff0c;指定网关为前面NAT配置的网关地址…

Java8 BiConsumer<T, U> 函数接口浅析分享(含示例,来戳!)

文章目录 Java8 BiConsumer<T, U> 函数接口浅析分享&#xff08;含示例&#xff0c;来戳&#xff01;&#xff09;源码accept 方法示例示例一示例二 andThen 方法示例示例一示例二 示例相关代码类dohandler 方法student.javaStudentScore.javaStudentScoreDto.java Java8…

运行报错(三)git bash报错fatal: detected dubious ownership in repository at

报错现象 在运行git 命令时&#xff0c;出现报错 “fatal: detected dubious ownership in repository at” 报错原因 文件夹的所有者和现在的用户不一致 栗子&#xff1a; 文件夹的所有者是root&#xff0c;而当前用户是admin 解决方案 方法一、 将文件夹的所有者替换成ad…

【JAVA学习一:基础语法】

记录学习过程和代码编写&#xff0c;小白纯属记录。 目录 一、运算符 二、数组 三、面向对象 一、运算符 赋值运算符 public class Demo01 { public static void main(String[] args){ System.out.println(11); System.out.println(1-1); System.out.printl…

【Javascript】运算符(赋值,算术,自增,自减)

目录 赋值 算术 单个变量&#xff1a; 多个变量&#xff1a; 在字符串&#xff0c;数组中充当连接符 自符串与字符串 数组与数组 数组与字符串 自增与自减 前置 自增 自减 后置 自增 自减 赋值 var a 1;算术 单个变量&#xff1a; var a 1;a 1;console.l…

【WCA-KELM预测】基于水循环算法优化核极限学习机回归预测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

文心一言 VS 讯飞星火 VS chatgpt (119)-- 算法导论10.3 4题

四、用go语言&#xff0c;我们往往希望双向链表的所有元素在存储器中保持紧凑&#xff0c;例如&#xff0c;在多数组表示中占用前m 个下标位置。(在页式虚拟存储的计算环境下&#xff0c;即为这种情况。)假设除指向链表本身的指针外没有其他指针指向该链表的元素&#xff0c;试…

nginx安装详细步骤和使用说明

下载地址&#xff1a; https://download.csdn.net/download/jinhuding/88463932 详细说明和使用参考&#xff1a; 地址&#xff1a;http://www.gxcode.top/code 一 nginx安装步骤&#xff1a; 1.nginx安装与运行 官网 http://nginx.org/1.1安装gcc环境 # yum install gcc-c…