【前端】Js

目 录

  • 一.前置知识
    • 第一个程序
    • JavaScript 的书写形式
    • 注释
    • 输入输出
  • 二.语法概览
    • 变量的使用
    • 理解 动态类型
    • 基本数据类型
  • 三.运算符
    • 算术运算符
    • 赋值运算符 & 复合赋值运算符
    • 自增自减运算符
    • 比较运算符
    • 逻辑运算符
    • 位运算
    • 移位运算
  • 四.条件语句
    • if 语句
    • 三元表达式
    • switch
  • 五.循环语句
    • while 循环
    • continue
    • break
    • for 循环
  • 六.数组
    • 创建数组
    • 获取数组元素
  • 七.函数
    • 语法格式
    • 函数表达式
    • 作用域
  • 八.对象
    • 使用 字面量 创建对象 [常用]
    • 使用 new Object 创建对象(不常用)
    • 使用 构造函数 创建对象
  • 九.JavaScript 的对象和 Java 的对象的区别

一.前置知识

第一个程序

在这里插入图片描述

在这里插入图片描述

JavaScript 的书写形式

  • 1.内部 JS

直接写到 script 标签里

在这里插入图片描述

  • 2.外部 JS

写到单独的文件中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用了 src 属性的 script 标签了之后,标签内部不能再写 JS 代码了,写了也不会生效。

  • 3.行内 JS

在标签里面,通过一些属性来实现。(把 JS 代码,嵌入到标签里)

在这里插入图片描述

onclick 是 div 标签的属性(绝大部分的 HTML 标签都有这个属性),属性的值就是一段 JS 代码,这段 JS 是使用 "" 引起来的,因此 JS 里面如果使用到 字符串,建议使用 ',非要使用双引号则需要 \"。onclick 的意思 " 点击的时候,发生个什么事情 "。用户啥时候点,就啥时候执行,用户点几次,就执行几次。

注释

单行注释 // [建议使用]

多行注释 /* */

输入输出

  • 输入: prompt

弹出一个输入框

prompt(“请输入您的姓名:”);

  • 输出: alert

弹出一个警示对话框, 输出结果

alert(“hello”);

不太好用,由于 alert 弹出的是 " 模拟对话框 " (如果用户不点掉对话框,无法操作界面其他内容)

  • 输出: console.log

在控制台打印一个日志(供程序员看)

console.log(“这是一条日志”);

这个输出是输出到控制台,是程序员调试 JS 代码的重要手段

在这里插入图片描述在这里插入图片描述


二.语法概览

变量的使用

var name = ‘zhangsan’;
var age = 20;

此处没有写 int/String 类型名,而是直接写了 var,var 单纯的表示,这是一个变量,变量的类型如何决定呢?则是看变量的初始化是啥类型的。

理解 动态类型

相较于 C++ 和 Java 而言,JS 有一个很大的差别,同一个变量,是可以改变类型的。

在这里插入图片描述
在这里插入图片描述

动态类型:一个变量在运行的过程中,类型可以发生改变。(JS,Python,PHP…)

静态类型:不能发生改变(编译报错)(C,C++,Java)

注意:很多人把 Java 和 JS 之间的语法差异归结为 " 弱类型 " 其实是错的,其实语法差异大部分是由 " 动态类型 " 带来的,反而弱类型强类型这个区别语法并不大。

基本数据类型

  • number: 数字. 不区分整数和小数
  1. 如果变量 n 当前保存的是一个整数,n 的内存相当于是保存了 64 位的整数
  2. 如果变量 n 当前保存的是一个小数,n 的内存相当于保存了 双精度 浮点数,也遵守 IEEE 754 标准的。
  • 字符串 string

JS 里的 string 和 Java 里的字符串很相似,例如 Java 中支持字符串 + 相加操作符就表示 " 拼接 ",JS 里的字符串也能拼接。

  • 布尔类型 Boolean

也是和 Java 中的类似的, true 和 false。

在这里插入图片描述
如上类型也是允许的,相当于是把 Boolean 类型隐式转换成了一个数字。(如果一个编程语言,不太支持隐式类型转换,强类型,反之。类型强弱,描述的是类型之间的界限是不是非常严格,界限越严,类型越强)

  • undefined(值和类型都是 undefined)

如果某个东西没有被定义,直接去访问,一般不会报错,而是得到一个 undefined

由于 JS 是弱类型,如果拿一个 undefined 和其他类型进行混合运算,不会报错,而是把 undefined 转成了 string。

在这里插入图片描述
注意加单引号,不然计算的结果就是 NaN(not a number)

  • 空值类型 null

这个类型里只有一个值 null

类似于 Java 中的空引用,使用 null 表示无效值

undefined 表示的是未定义 " 非法的值 ";null 表示的是 " 无效 ",合法的值。

在官方显示是 object 类型,但是这是个 bug,为了考虑到兼容性,所以没有改动,实则是 null 类型。

  • object 对象

JS 中的重要的部分,类似于 Java 中的对象了。Java 中的对象,每个对象都是各自的类型(每个类都代表不同的类型),JS 中没有 类 这样的概念,所有的对象都是 object 类型。


三.运算符

JavaScript 中的运算符和 Java 用法基本相同,此处不做详细介绍了。

算术运算符

  • +
  • -
  • *
  • /
  • %

赋值运算符 & 复合赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

自增自减运算符

  • ++ 自增1
  • -- 自减1

比较运算符

  • <
  • >
  • <=
  • >=
  • == 比较相等(会进行隐式类型转换)
  • !=
  • === 比较相等(不会进行隐式类型转换)
  • !==

在 JS 中,比较字符串内容,也是使用 = =,绝大部分编程语言,比较字符串内容,都是使用 = =,只有 C(strcmp)和 Java(equals)例外。

逻辑运算符

用于计算多个 boolean 表达式的值

  • && 与: 一假则假
  • || 或: 一真则真
  • !

位运算

  • & 按位与
  • | 按位或
  • ~ 按位取反
  • ^ 按位异或

移位运算

  • << 左移
  • >> 有符号右移(算术右移)
  • >>> 无符号右移(逻辑右移)

四.条件语句

if 语句

基本语法格式:条件表达式为 true,则执行 if 的 { } 中的代码。

// 形式1
if (条件) {
  语句
}
 
// 形式2
if (条件) {
   语句1
} else {
   语句2
}
 
// 形式3
if (条件1) {
   语句1
} else if (条件2) {
   语句2
} else if … {
   语句…
} else {
   语句N
}

三元表达式

条件 ? 表达式1 : 表达式2

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值

switch

switch (表达式) {
case 值1:
    语句1;
    break;
case 值2:
    语句2:
    break;
default:
    语句N;
}


五.循环语句

while 循环

while (条件) {
    循环体;
}

执行过程:

  • 先执行条件语句
  • 条件为 true, 执行循环体代码.
  • 条件为 false, 直接结束循环

continue

结束这次循环

break

结束整个循环

for 循环

for (表达式1; 表达式2; 表达式3) {
     循环体
}

  • 表达式1: 用于初始化循环变量
  • 表达式2: 循环条件
  • 表达式3: 更新循环变量

执行过程:

  • 先执行表达式1, 初始化循环变量
  • 再执行表达式2, 判定循环条件
  • 如果条件为 false, 结束循环
  • 如果条件为 true, 则执行循环体代码.
  • 执行表达式3 更新循环变量

六.数组

创建数组

使用 new 关键字创建

let arr = new Array();

使用字面量方式创建 [常用]

let arr2 = [];
let arr3 = [1,2,3,4];
let arr4 = [1,‘hello’,true,null];

注意:JS 的数组不要求元素是相同类型

获取数组元素

使用下标的方式访问数组元素(从 0 开始)

在这里插入图片描述
在这里插入图片描述

  • 读数据

当 JS 中的下标越界了,不会报错!而是返回 undefined 。

  • 修改数据

在这里插入图片描述
在这里插入图片描述

修改数据会给对应下标放上元素

如果下标是负数会怎样?

在这里插入图片描述
在这里插入图片描述

如果下标是字符串会怎样呢?

在这里插入图片描述
在这里插入图片描述

可以看到键值对也出现在结果里了,此时此刻这个数组已经不仅仅是一个数组了,更是一个 map。

数组里存储的数据就是两个部分了:

  1. 正经数组储存的元素
  2. 键值对储存的元素(类似于 map)

-1 这个下标的内容存在于第二个部分

  • 新增元素

1.最常用的方法是往末尾新增
在这里插入图片描述
在这里插入图片描述

2.往中间新增,本质上是进行替换了,把数组中的部分元素替换成别的元素了

  • 删除元素

在这里插入图片描述
在这里插入图片描述

从下标为 2 的元素开始删除,删除几个元素

在这里插入图片描述
在这里插入图片描述
删除并且进行替换

在这里插入图片描述
在这里插入图片描述

后面的参数不写就是直接删除,写了多个就是 删除/替换 多个。

如果第二个参数写作 0 ,那么就不是删除 / 替换元素了,而是插入元素

在这里插入图片描述
在这里插入图片描述


七.函数

语法格式

 
函数定义:

function 函数名(形参列表) {函数体return 返回值;
}
  • function --> 关键字
  • 函数名 --> 当前函数名字
  • 形参列表 --> 写几个形参
     
    注意:没有看到 “返回值类型” ,所以返回啥都行。(在 Java 中里面的方法,只能返回一种类型的数据。JS 则不要求,一个函数的返回类型可以不相同,包括参数形参,每个参数是啥类型也可以随意指定)

在这里插入图片描述

例如在一个函数中,形参不必写类型,啥类型都行,只要保证传入的类型可以正常执行即可

函数调用

在这里插入图片描述
 
在这里插入图片描述

JS 中的函数,只要传入的实参,能够满足函数体中的运算要求,就是可以的。

在这里插入图片描述

别的语言中,一般是要求,函数的形参个数要和实参个数匹配,JS则不要求,实参是多还是少,都无所谓,如果实参多了,多出来的实参,就忽略了;如果实参少了,多出来的形参,就是undefined,也不会报错。

在这里插入图片描述

在这里插入图片描述

写一个函数 能够支持 N 个值的相加

在这里插入图片描述

由于上述代码看起来不简洁,于是想到在 JS 中 || 的返回值不是 true 或者 false,而是a || b的时候,如果 a 是true,整个表达式返回a的值,如果 a 是 false,则整个表达式返回 b 的值。

在这里插入图片描述

万一参数超过了 6 个,想要任意参数咋办?

类似于 splice 能支持任意个参数一样,咱们自己写的函数也是可以的

JS 函数的内部,有一个内置的变量,叫做arguments,相当于一个数组,这个数组里就放了所有的实参。

在这里插入图片描述


函数表达式

在这里插入图片描述

创建了变量,名字叫做add。对add进行初始化,拿着一个函数进行初始化。add这个变量的类型,就是函数类型。

上述操作很多语言都支持,但是 Java 不支持,有人说 Java 是一个纯粹的面向对象的编程语言,但是 Java 中很多东西不是对象,比如一个方法,import 的包,都不是对象。(判定是不是对象很好判定:能不能取属性,能不能调用方法,能不能获取到对象的身份)
 
但是在JS里,函数也是一个对象,就和普通的对象没啥区别,可以把函数保存到一个变量中,也可以把函数作为另一个函数的参数,还可以把函数作为另一个函数的返回值,这个设定称为 “函数是一等公民” 。


作用域

使用 let 定义的变量是 “块级作用域” ,在当前 {} 里生效的。

在使用某个变量的时候,就会先在当前{}去找,如果找不到,就往外层 {} 去找。一直找到最顶层还找不到,就认为变量未定义。

在这里插入图片描述
例如这个代码,他会一直向上面逐级去找 n 。

从代码块里面一级一级往外找变量的这个过程,称为 “作用域链”


八.对象

使用 字面量 创建对象 [常用]

在这里插入图片描述

对象里面的数据,就非常类似于 "键值对” 结构,每个键值对都是使用,来分割。
键和值使用:来分割。值也可以是函数。

在这里插入图片描述

在这里插入图片描述

还可以在运行的时候增加属性

在这里插入图片描述
在这里插入图片描述

同样是通过this表示当前对象的实例,进一步的就可以获取到对象中的属性和方法了


使用 new Object 创建对象(不常用)

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

注意, 使用 { } 创建的对象也可以随时使用 student.name = “蔡徐坤”; 这样的方式来新增属性.


使用 构造函数 创建对象

var mimi = {name: "咪咪",type: "中华田园喵",miao: function () {console.log("喵");}
};
var xiaohei = {name: "小黑",type: "波斯喵",miao: function () {console.log("猫呜");}
}

此时写起来就比较麻烦. 使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程

基本语法:

function 构造函数名(形参) {this.属性 =;this.方法 = function...
}var obj = new 构造函数名(实参);

注意:

  • 在构造函数内部使用 this 关键字来表示当前正在构建的对象.
  • 构造函数的函数名首字母一般是大写的.
  • 构造函数的函数名可以是名词.
  • 构造函数不需要 return
  • 创建对象的时候必须使用 new 关键字.

使用构造函数重新创建猫咪对象:

function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 别忘了作用域的链式访问规则}
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

九.JavaScript 的对象和 Java 的对象的区别

  1. JavaScript 没有 “类” 的概念

对象其实就是 “属性” + “方法” .

类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”

在 JavaScript 中的 “构造函数” 也能起到类似的效果.

而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象

在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.

  1. JavaScript 对象不区分 “属性” 和 “方法”

JavaScript 中的函数是 “一等公民”, 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.

  1. JavaScript 对象没有 private / public 等访问控制机制.

对象中的属性都可以被外界随意访问.

  1. JavaScript 对象没有 “继承”

继承本质就是 “让两个对象建立关联”. 或者说是让一个对象能够重用另一个对象的属性/方法.
JavaScript 中使用 “原型” 机制实现类似的效果.

  1. JavaScript 没有 “多态”

多态的本质在于 “程序猿不必关注具体的类型, 就能使用其中的某个方法”.

C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过 子类继承父类, 并重写父类的方法的方式 来实现多态的效果.

但是在 JavaScript 中本身就支持动态类型, 程序猿在使用对象的某个方法的时候本身也不需要对对象的类型做出明确区分. 因此并不需要在语法层面上支持多态.

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

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

相关文章

ORA-12541:TNS:no listener 无监听程序

问题截图 解决方法 1、删除Listener 新建一个新的 2、主机为服务器ip 3、设置数据库环境 只需要设置实例名不需要设置路径 4、服务命名 一样设置为ip 服务名与监听名一直 eg&#xff1a;orcl

Variations-of-SFANet-for-Crowd-Counting记录

论文&#xff1a;Encoder-Decoder Based Convolutional Neural Networks with Multi-Scale-Aware Modules for Crowd Counting 论文链接&#xff1a;https://arxiv.org/abs/2003.05586 源码链接&#xff1a;GitHub - Pongpisit-Thanasutives/Variations-of-SFANet-for-Crowd-C…

云原生场景下高可用架构的最佳实践

作者&#xff1a;刘佳旭&#xff08;花名&#xff1a;佳旭&#xff09;&#xff0c;阿里云容器服务技术专家 引言 随着云原生技术的快速发展以及在企业 IT 领域的深入应用&#xff0c;云原生场景下的高可用架构&#xff0c;对于企业服务的可用性、稳定性、安全性越发重要。通…

GFS分布式文件系统实验

GFS概念 Gluster 是一个开源的分布式文件系统 它是一个C/S架构 由存储服务器、客户端以及NFS/Samba存储网关组成 没有元数据服务器组件&#xff0c;这有助于提升整个系统的性能&#xff0c;可靠性和稳定性 文件系统定义 负责实现数据存储方式&#xff0c;以什么格式保存在…

Spring5应用之高级注解开发

作者简介&#xff1a;☕️大家好&#xff0c;我是Aomsir&#xff0c;一个爱折腾的开发者&#xff01; 个人主页&#xff1a;Aomsir_Spring5应用专栏,Netty应用专栏,RPC应用专栏-CSDN博客 当前专栏&#xff1a;Spring5应用专栏_Aomsir的博客-CSDN博客 文章目录 参考文献前言Conf…

CentOS 7 部署Jellyfin详细教程

前言 Jellyfin是免费、开源的媒体服务器解决方案&#xff0c;它能让我们轻松地管理和访问个人媒体文件&#xff0c;如电影、音乐等。本文将向您介绍如何快速搭建和部署Jellyfin&#xff0c;并分享一些最佳实践和技巧&#xff0c;帮助您更好地利用这个强大的媒体服务器解决方案。…

2.MySQL表的操作

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 表的操作 (1)表的创建 CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎; 存储引擎的不同会导致创建表的文件不同。 换个引擎。 t…

xcode打包macos报错:FlutterInputs.xcfilelist 和 FlutterOutputs.xcfilelist

xcode 打包macos的时候&#xff0c;报错如下&#xff1a; Unable to load contents of the file list: ‘macos/ephemeral/FlutterInputs.xcfilelist’ ‘macos/ephemeral/FlutterOutputs.xcfilelist’ 解决方案&#xff1a; 我的项目macos下没有找到FlutterInputs.xcfilelis…

angular项目指定端口,实现局域网内ip访问

直接修改package.json文件 "dev": "ng serve --host 0.0.0.0 --port 8080"终端运行npm run dev启动项目。 这里就指定了使用8080端口运行项目&#xff0c;同时局域网内的其他电脑可以通过访问运行项目主机的ip来访问项目 例如项目运行在ip地址为192.168.2…

jmeter压测

jmeter强大到很强大 hh~也要压测go的一些东西&#xff0c;这是三年前做的东西了&#xff0c;jmeter不支持grpc调用所以写了一个spring小服务中间层&#xff1a; 具体的jmeter开始了 这里设置线程相关 <h3>调用哪个服务的哪个方法</h3> <h3>BeanShell PrePro…

喜报 | 擎创科技实力亮相2023科创会并荣获科技创新奖

近日&#xff0c;由国家互联网数据中心产业技术创新战略联盟&#xff08;NIISA&#xff09;主办的“2023第二届国际互联网产业科技创新大会暨互联网创新产品展览会”于北京圆满落幕。 擎创科技副总裁冯陈湧受邀出席本次论坛&#xff0c;并发表了“银行分布式核心智能运维体系思…

Unity3D 基础——使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果

使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果&#xff0c;让物体的移动不是那么僵硬&#xff0c;而是做减速的缓冲效果。将以下的脚本绑定在相机上&#xff0c;然后设定好 target 目标对象&#xff0c;即可看到相机的缓动效果。通过设定 smoothTime 的值&#xff0c;可以…

洗地机什么牌子好用?洗地机排名

洗地机是如今清洁工作中非常重要的设备&#xff0c;它可以提高清洁效率&#xff0c;保持地面卫生&#xff0c;并减轻人力劳动的负担&#xff0c;市面上有许多不同品牌的洗地机&#xff0c;那么洗地机哪个牌子最好用呢?下面我们来介绍一下洗地机排名&#xff0c;并分析其热门型…

DIY私人图床:使用CFimagehost源码自建无需数据库支持的PHP图片托管服务

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

点云处理【三】(点云降采样)

点云降采样 第一章 点云数据采集 第二章 点云滤波 第二章 点云降采样 1. 为什么要降采样&#xff1f; 我们获得的数据量大&#xff0c;特别是几十万个以上的点云&#xff0c;里面有很多冗余数据&#xff0c;会导致处理起来比较耗时。 降采样是一种有效的减少数据、缩减计算量…

【LeetCode刷题(数据结构)】:翻转二叉树

方法一&#xff1a;递归 思路与算法 这是一道很经典的二叉树问题。显然&#xff0c;我们从根节点开始&#xff0c;递归地对树进行遍历&#xff0c;并从叶子节点先开始翻转。如果当前遍历到的节点 root\textit{root}root 的左右两棵子树都已经翻转&#xff0c;那么我们只需要交…

如何在C程序中使用libcurl库下载网页内容

概述 爬虫是一种自动获取网页内容的程序&#xff0c;它可以用于数据采集、信息分析、网站监测等多种场景。在C语言中&#xff0c;有一个非常强大和灵活的库可以用于实现爬虫功能&#xff0c;那就是libcurl。libcurl是一个支持多种协议和平台的网络传输库&#xff0c;它提供了一…

天锐绿盾透明加密、半透明加密、智能加密这三种不同加密模式的区别和适用场景——@德人合科技-公司内部核心文件数据、资料防止外泄系统

由于企事业单位海量的内部数据存储情况复杂&#xff0c;且不同公司、不同部门对于文件加密的需求各不相同&#xff0c;单一的加密系统无法满足多样化的加密需求。天锐绿盾企业加密系统提供多种不同的加密模式&#xff0c;包括透明加密、半透明加密和智能加密&#xff0c;用户可…

解码自然语言处理之 Transformers

自 2017 年推出以来&#xff0c;Transformer 已成为机器学习领域的一支重要力量&#xff0c;彻底改变了翻译和自动完成服务的功能。 最近&#xff0c;随着 OpenAI 的 ChatGPT、GPT-4 和 Meta 的 LLama 等大型语言模型的出现&#xff0c;Transformer 的受欢迎程度进一步飙升。这…