JavaScript入门学习笔记(一)(下)

简介: JavaScript入门学习笔记(一)(下)

🍑运算符

JS和运算符有很多是和java是相似,这里我们就不再一一列举,下面我们只说不同点


不同点1

30d5c0d79f4c425c8cefe331a616b14b.png不同点2


重点在于,比较 相等/不相等 的 符号。

JS中比较相等的符号,有两种:

== 和 ===

不相等的符号也有两种:

!= 和 !==

== 和 != 是一组风格、

=== 和 !== 是一组风格。

————————————————

先说, == 和 != 这一组。

只是比较两个变量的值,不比较 两个变量的类型。

如果两个变量能够通过隐式类型转换,转换相同的值,

那么,此时就认为 两个变量 是相等的。

再来看,=== 和 !== 这一组。

既要比较 两个变量的值,又要比较两个变量的类型。

如果类型不相同,就直接认为两个变量不相等。

比较的过程中,就不存在隐式类型转换的说法。


🌰栗子

94d98a25c93248498eeb0407f98ab2b7.png

注意哦!这里和 java的 equals 是不一样的!

在java中,重写后的equals 是 比较值。

重写前的equals和== 是比较身份——在内存中的储存位置

而且 equals 涉及到对象的比较。

谈到对象的比较,有三个维度的比较

1、比较身份(比较地址,看是不是同一个对象)【JS中没有比较身份的函数】

2、比较值(标对对象中存储的数据是否相同)

3、比较类型(两个对象的类型是否是同一个类型)


在Java中的 instanceOf 就是比较类型的。


🍑数组

温馨提示,JS的数组与java、c中的传统数组相比,是有很大差异的——这可能会颠覆你以往对数组的认知

1、创建数组

35fb6948bd6f421a8da8e7bdcb22e1eb.png

此外我们的JS数组,还可以这么写

 

14a0b3b3f0204beaaaaaecb31a281680.png

 

什么类型的元素,都可以往里面放。

这是 Java 普通数组所做不到的,需要借助数据结构才能实现。
但是 一般也不是这么用,都是会指定一个类型放入数组中。

有的人可能会问:这是一个什么类型的数组?
我只能说兄弟们格局小了!

1edfc525460f4543b59c2527609ebdb8.png

没有什么类型,这就是一个数组。

在 JS 中,只有一种数组,就叫做数组,里面的元素可以是不同类型的!

另外,JS 中数组,是不分类型的,并且无法强制要求数组只能放入一种类型的数据。

要想数组里存入的都是同一种类型的数据,就只能通过“人为”的方式去完成。

就是 你给这个数组的元素都是 同一种类型的。


而且,还没完!

JS 中数组的元素,还可以是数组类型的元素


🍑打印数组

这个没什么好说的,通过console.log来打印

🍑获取数组元素

b1573ef2e94a4c6aa9203d8fa2f7551a.png

这是不是就已经很离谱了,但下面还要更离谱的

离谱+1


d9d7c139e07d4fb993edd051665fa09e.png

离谱+2


097ee961bf7d469b9c6f2863c628ac01.png

相信大家也能猜到,这样写其实是有一定的风险的

f47a721bee2046dd96929f752600de20.png

🍑JS数组中的一些操作

获取数组长度

通过.length来获取,这个和Java的操作基本相同,我们刚才也一直在用

但要注意这里我们的数组长度length是可以随时更改的


b87474c19d424a2a88b1d65dd5628ab7.png

往数组中新增元素

16dab311807140ad912a9ddbf8f793c0.png


删除+替换操作

JS中删除数组中的元素,所依赖的方法,非常厉害。

该方法叫做 splice,这个方法,准确的说是针对 数组中的某个片段,进行替换。
所以,这个方法既可以用来插入元素,又可以用来删除元素


a8803525eca041a3a4a924b9b13b35c0.png


🍑函数

1、函数的简单使用

首先,大家要明白,JS中的函数(function),在 Java中 叫做 方法(Method)。

注意!函数就是方法,方法就是函数,两者就是同一个东西,只是叫法不同而已

通常情况下,我们不需要考虑这两个概念的具体区别


15675c61f03b4c74887a53fb08387157.png

a demo 

8bda15ce1ec1487285b30c9d4eaa3717.png

上述代码中,有两个点需要我们注意

首先,我们要知道,JS是动态类型的语言,所以我们并不关注参数的类型

其次你会发现,好像在JS中,参数个数也没有要求


346d15b53a784f97b8e4526f8550d61f.png

正因为如此,所以JS也不需要有泛型和重载这样的语法,但这种灵活性,往往并不是好事

有了这个特性,我们只用写一个add函数就能完成N个数相加的功能了

370e917b62e946d3bde0397847ee80c6.png


那么我们如何来解决这个问题呢?


b8dc5cd024ee4086a7d62891635f47de.png

2、函数表达式

在 JS中,函数是 “一等公民”。

一等公民:一个“一等公民”的函数,函数可以像一个普通的变量一样,赋值给 其他的变量。同时,可以作为另一个函数的参数,还可以作为另一个函数的返回值。

简单来说:函数和普通的变量,并没有本质区别。

只不过函数这个变量,相对于普通变量来说,多了一个功能(可调用)。

所谓的函数表达式,其实就是把一个函数赋值给一个变量了


343acf65a73c490c893c6dbc03a095d7.png

3、作用域

41f73d2de6814b1ca40fe8b8f9ad47f8.png


🍑JS对象

基本概念

对象,就是一些属性 和 方法的集合。

这个概念,与传统意义上的Java对象的概念是类似的。

但是有一个比较大的区别。

在 Java中,我们的对象是需要先有类,然后针对类进行实例化才能产生对象。

等于就是说,类就是一个模具,可以批量生产相同规格的产物。

而在 JS 中,对象 是不依托于 类的。

就是说:在 JS 中,无需借助类,就能创建一个对象。

另外,Java 中的类,可以视为是一种 自定义类型的类。

例如: Cat 类 和 Dog 类,是两个不同类型。

但是在 JS 中,所有的对象,都是一个类型【object类型】。


1、对象的创建和使用

6ae9b83086ff4ead98bbe1ee0b15c105.png

在 js 对象中,我们可以很直观的看到 js的对象是有方法 和 变量。

js的对象,与其说是一个对象,不如说是一个 键值对 结构 更加合适。


js对象中的每个属性和方法,其实都是通过“键值对” 这样的方式来表达的。

  • {} 表示这是一个对象
  • 键值对之间,采用 逗号 进行分割。
  • 键和值之间,采用 冒号 进行分割。


定义出这样的一个对象之后,我们就可以采用 student.属性名 / 方法名 的方式 来进行访问了。


2200e2410f0741208800f4b79be2e90f.png




相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
507 2
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
82 10
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
29 1
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
577 1
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示