JavaScript零基础入门速通(中)

news2024/11/30 3:57:06

目录

1. 函数

1.1 函数声明

1.2 返回值

1.3 匿名函数

1.4 箭头函数

2. 对象

2.1 创建对象

2.2 访问和修改对象的属性

2.3 对象方法

3. 数组

3.1 创建数组

3.2 数组方法

3.3 遍历数组

4. 作用域

4.1 全局作用域

4.2 局部作用域

4.3 块级作用域

5. 事件处理

5.1 事件监听

5.2 事件对象

结语


大家好,我是小黄。

昨天我们介绍了 JavaScript 的基础概念和语法,包括变量声明、数据类型、运算符和控制流语句。今天,我们将继续深入探讨 JavaScript 的中级知识,包括函数、对象、数组、作用域以及事件处理等内容。

1. 函数

函数是 JavaScript 中的基本构建块,用于封装一段可复用的代码。通过函数,我们可以将常用的逻辑抽象成一个单元,并根据需要进行调用。

1.1 函数声明

函数可以通过关键字 function 来声明。以下是一个简单的函数声明示例:

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

greet("Alice");  // 输出 "Hello, Alice!"

这个函数名为 greet,接受一个参数 name,然后输出一条问候消息。你可以在函数体内执行任意 JavaScript 代码。

1.2 返回值

函数可以返回值,使用 return 语句来指定返回的结果。如果没有显式的返回值,函数默认返回 undefined

function add(a, b) {
    return a + b;
}

let result = add(5, 3);  // result 的值为 8
console.log(result);

1.3 匿名函数

有时我们不需要给函数起一个名字,这时可以使用匿名函数。匿名函数通常用于回调或事件处理。

let sum = function(a, b) {
    return a + b;
};

console.log(sum(2, 3));  // 输出 5

1.4 箭头函数

ES6 引入了箭头函数,它是函数的一种简化写法,语法更加简洁。箭头函数不会创建自己的 this,而是继承外部作用域的 this

const multiply = (a, b) => a * b;
console.log(multiply(4, 5));  // 输出 20

箭头函数与普通函数的区别在于省略了 function 关键字,并且只有一行代码时,函数体可以省略大括号 {}return

2. 对象

在 JavaScript 中,对象 是一种复杂数据类型,用于存储一组数据和功能(属性和方法)。对象通常由多个键值对(属性)组成,每个键是一个字符串,值可以是任何数据类型。

2.1 创建对象

你可以通过大括号 {} 创建一个对象,并在其中定义键值对。

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

console.log(person.name);  // 输出 "Alice"
person.greet();            // 输出 "Hello, Alice"

2.2 访问和修改对象的属性

你可以使用点语法或方括号语法访问和修改对象的属性。

let car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

// 使用点语法访问
console.log(car.make);  // 输出 "Toyota"

// 使用方括号语法访问
console.log(car["model"]);  // 输出 "Corolla"

// 修改属性
car.year = 2021;
console.log(car.year);  // 输出 2021

2.3 对象方法

对象可以包含方法(即函数),这些方法可以通过对象来调用。

let calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};

console.log(calculator.add(5, 3));  // 输出 8
console.log(calculator.subtract(5, 3));  // 输出 2

3. 数组

数组是 JavaScript 中用于存储有序数据的对象。数组的元素可以是任何数据类型,并且可以包含多个不同类型的元素。数组在 JavaScript 中的下标从 0 开始。

3.1 创建数组

你可以使用方括号 [] 来创建数组,数组中的元素用逗号分隔。

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);  // 输出 "Apple"
console.log(fruits[1]);  // 输出 "Banana"

3.2 数组方法

数组有许多内建方法,用于操作数组元素。以下是一些常见的方法:

  • push(): 向数组末尾添加一个或多个元素。
  • pop(): 移除数组末尾的元素。
  • shift(): 移除数组开头的元素。
  • unshift(): 向数组开头添加一个或多个元素。
let numbers = [1, 2, 3];

// 添加元素
numbers.push(4);
console.log(numbers);  // 输出 [1, 2, 3, 4]

// 移除元素
numbers.pop();
console.log(numbers);  // 输出 [1, 2, 3]

// 移除开头元素
numbers.shift();
console.log(numbers);  // 输出 [2, 3]

3.3 遍历数组

你可以使用 for 循环或者数组的内建方法(如 forEach())来遍历数组。

let colors = ["red", "green", "blue"];

// 使用 for 循环遍历
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

// 使用 forEach 方法遍历
colors.forEach(function(color) {
    console.log(color);
});

4. 作用域

作用域是指变量、函数和对象可访问的区域。在 JavaScript 中,有两种主要的作用域:全局作用域局部作用域

4.1 全局作用域

在 JavaScript 中,声明在函数外部的变量是全局变量,这些变量在整个程序中都可以访问。

let globalVar = "I am a global variable";

function showVar() {
    console.log(globalVar);  // 可以访问全局变量
}

showVar();  // 输出 "I am a global variable"

4.2 局部作用域

在函数内部声明的变量是局部变量,只在函数内部可见,外部无法访问。

function localScope() {
    let localVar = "I am a local variable";
    console.log(localVar);  // 可以访问局部变量
}

localScope();
// console.log(localVar);  // 错误:localVar 在外部无法访问

4.3 块级作用域

ES6 引入了 letconst,它们有块级作用域,即它们只能在声明它们的代码块内部访问。

if (true) {
    let blockVar = "I am inside a block";
    console.log(blockVar);  // 输出 "I am inside a block"
}
// console.log(blockVar);  // 错误:blockVar 只在 if 块内可见

5. 事件处理

JavaScript 允许我们监听并响应用户与网页的互动。常见的事件包括点击事件、鼠标事件、键盘事件等。

5.1 事件监听

你可以使用 addEventListener() 方法来监听元素的事件,并为事件指定回调函数。

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("按钮被点击了!");
});

在这个例子中,当用户点击按钮时,网页会弹出一个提示框。

5.2 事件对象

当事件发生时,浏览器会创建一个事件对象,并将其传递给事件处理函数。这个事件对象包含了事件的详细信息,例如鼠标位置、按键代码等。

button.addEventListener("click", function(event) {
    console.log("点击位置: " + event.clientX + ", " + event.clientY);
});

结语

在这一部分中,我们学习了 JavaScript 中的重要概念,包括函数、对象、数组、作用域以及事件处理。这些是编写交互性强的网页应用和 JavaScript 程序的基础。

各位小伙伴还在BOSS直聘hr已读不回?!试试这个宝藏小程序!大家快看这里。

创作不易,各位帅气漂亮的小伙伴点个关注再走呗!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

外卖点餐系统小程序

目录 开发前准备 项目展示项目分析项目初始化封装网络请求 任务1 商家首页 任务分析焦点图切换中间区域单击跳转到菜单列表底部商品展示 任务2 菜单列表 任务分析折扣信息区设计菜单列表布局请求数据实现菜单栏联动单品列表功能 任务3 购物车 任务分析设计底部购物车区域添加商…

内网不出网上线cs

一:本地正向代理目标 如下&#xff0c;本地(10.211.55.2)挂好了基于 reGeorg 的 http 正向代理。代理为: Socks5 10.211.55.2 1080python2 reGeorgSocksProxy.py -l 0.0.0.0 -p 1080 -u http://10.211.55.3:8080/shiro/tunnel.jsp 二&#xff1a;虚拟机配置proxifer 我们是…

ThinkPHP Nginx 重写配置

目录 NGINX 重写 Admin项目隐藏入口文件&#xff0c;且禁用Admin模块&Admin.php 1️⃣配置仅用模块 2️⃣新增admin_xyz.php文件&#xff08;自定义入口文件名&#xff09;&#xff0c;并绑定admin模块 3️⃣配置nginx 重写规则 NGINX 重写 在Nginx低版本中&#xff0…

宠物电商对接美团闪购:实现快速配送与用户增值

随着宠物行业的快速发展&#xff0c;宠物电商市场也在不断扩张。消费者的需求不再局限于传统的线上购物模式&#xff0c;越来越多的人开始追求更快捷的配送服务和更优质的购物体验。为了适应这一趋势&#xff0c;许多宠物电商平台开始寻求与本地配送平台合作&#xff0c;以提供…

Flink高可用配置(HA)

从Flink架构中我们可以看到,JobManager这个组件非常重要,是中心协调器,负责任务调度和资源管理。默认情况下,每个Flink集群只有一个JobManager实例。这会产生单点故障(SPOF):如果JobManager崩溃,则无法提交新程序,正在运行的程序也会失败。通过JobManager的高可用性,…

Vue使用Mockjs插件实现模拟数据

官方文档&#xff1a;Mock.js 一.引言 在前端开发过程中&#xff0c;我们经常会遇到后端接口尚未完成&#xff0c;但前端需要进行页面构建和功能测试的情况。这时候&#xff0c;Mockjs就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据&#xff0c;拦截 Ajax 请求并返…

Liinux——进程间通信之共享内存与信号量

进程间通信之共享内存与信号量 System V进程间通信 system V 进程通信是一组在 Unix 和类 Unix 系统中用于进程间通信的机制&#xff0c;主要三种方式&#xff1a;共享内存、消息队列与信号量 今天我们一起来对共享内存进行详细的学习&#xff0c;并了解信号量的基本概念 1.…

阿里发布 EchoMimicV2 :从数字脸扩展到数字人 可以通过图片+音频生成半身动画视频

EchoMimicV2 是由阿里蚂蚁集团推出的开源数字人项目&#xff0c;旨在生成高质量的数字人半身动画视频。以下是该项目的简介&#xff1a; 主要功能&#xff1a; 音频驱动的动画生成&#xff1a;EchoMimicV2 能够使用音频剪辑驱动人物的面部表情和身体动作&#xff0c;实现音频与…

node.js nvm 安装和使用

个人笔记记录。 参考文档&#xff1a;https://blog.csdn.net/weixin_45811256/article/details/130860444 1、下载nvm-setup.exe 安装程序 2、将本地的node卸载&#xff0c;然后点击进行安装。 3、安装 node.js 方法一&#xff1a; 去nodejs官网搜索历史版本&#xff0c;找…

js:函数

函数 函数&#xff1a;实现抽取封装&#xff0c;执行特定任务的代码块&#xff0c;方便复用 声明 函数命名规范 尽量小驼峰 前缀应该为动词&#xff0c;如getName、hasName 函数的调用 函数体是函数的构成部分 函数传参 参数列表里的参数叫形参&#xff0c;实际上写的数据叫实…

【大模型】基于LLaMA-Factory的模型高效微调

LLaMA-Factory项目介绍 LLaMA Factory 是一个简单易用且高效的大型语言模型&#xff08;Large Language Model&#xff09;训练与微调平台。通过 LLaMA Factory&#xff0c;可以在无需编写任何代码的前提下&#xff0c;在本地完成上百种预训练模型的微调&#xff0c;框架特性包…

论文笔记 SliceGPT: Compress Large Language Models By Deleting Rows And Columns

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 数学知识 秩&#xff1a; 矩阵中最大线性无关的行/列向量数。行秩与列秩相等。 线性无关&#xff1a;对于N个向量而言&#xff0c;如果任取一个向量 v \textbf{v} v&#xff0c;不能被剩下的N-1个向量通过线性组合的方式…

hadoop_zookeeper详解

Zookeeper秒懂 工作机制特点数据结构应用场景安装选举机制初始化启动无法和Leader保持连接 节点类型监听器原理写数据流程Paxos算法算法流程 客户端命令 Zookeeper 是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的 Apache 项目。 工作机制 Zookeeper是一个基于观察…

MD5算法加密笔记

MD5是常见的摘要算法。 摘要算法&#xff1a; 是指把任意⻓度的输⼊消息数据转化为固定⻓度的输出数据的⼀种密码算法. 摘要算法是 不可逆的, 也就是⽆法解密. 通常⽤来检验数据的完整性的重要技术, 即对数据进⾏哈希计算然后⽐ 较摘要值, 判断是否⼀致. 常⻅的摘要算法有: MD5…

【LeetCode每日一题】——717.1比特与2比特字符

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 简单 三【题目编号】 717.1比特与2比特字符 四【题目描述】 有两种特…

ATTCK红队评估实战靶场(二)

http://vulnstack.qiyuanxuetang.net/vuln/?page2 描述&#xff1a;红队实战系列&#xff0c;主要以真实企业环境为实例搭建一系列靶场&#xff0c;通过练习、视频教程、博客三位一体学习。本次红队环境主要Access Token利用、WMI利用、域漏洞利用SMB relay&#xff0c;EWS re…

SpringMVC |(一)SpringMVC概述

文章目录 &#x1f4da;SpringMVC概述&#x1f407;三层架构&#x1f407;异步调用 &#x1f4da;SpringMVC入门案例&#x1f407;入门案例&#x1f407;注意事项 &#x1f4da;小结 学习来源&#xff1a;黑马程序员SSM框架教程_SpringSpringMVCMaven高级SpringBootMyBatisPlus…

uniapp实现APP版本升级

App.vue 直接上代码 <script>export default {methods: {//APP 版本升级Urlupload() {// #ifdef APP-PLUSplus.runtime.getProperty(plus.runtime.appid, (info) > {// 版本号变量持久化存储getApp().globalData.version info.version;this.ToLoadUpdate(info.versi…

visionpro官方示例分析(一) 模板匹配工具 缺陷检测工具

1.需求&#xff1a;找出图像中的这个图形。 2.步骤 使用CogPMAlignTool工具&#xff0c;该工具是模板匹配工具&#xff0c;见名知意&#xff0c;所谓模板匹配工具就是说先使用该工具对一张图像建立模板&#xff0c;然后用这个模板在其他图像上进行匹配&#xff0c;匹配上了就说…

QT:多ui界面显示

文章目录 1.多ui界面添加2.跳转函数3.返回函数4.Qt5源码工程5.模态显示 1.多ui界面添加 最终生成这个目录 2.跳转函数 void MainWindow::on_pushButton_clicked() {//this->setWindowModality(Qt::WindowModal);test1 *t1 new test1();t1->setParentData(this);this-…