一小时搞定JavaScript(1)——JS基础

前言,本篇文章是依据bilibili博主(波波酱老师)的学习笔记,波波酱老师讲的很好,很适合速成!!!

文章目录

  • 1.基本语法
    • 1.1 JS语言的特点
    • 1.2 创建一个JS文件
    • 1.3 输入与输出
    • 1.4 变量
      • 1.4.1 命名规则
      • 1.4.2 变量声明
        • 数字类型
        • 字符串类型
        • 布尔类型
        • 未定义类型
      • 1.4.3 类型转换
        • 隐式转换
        • 显示转换
    • 1.4 运算符
      • 1.4.1 String常用的API方法
    • 1.5 控制语句
    • 1.6 循环结构
    • 1.7 断点调试技术
  • 2.函数应用
    • 2.1 函数声明
    • 2.2 匿名函数
    • 2.3 回调函数
    • 2.4 异步编程
  • 3.类与对象
    • 3.1 引用类型对象
      • 3.1.1 普通声明
      • 3.1.2 字变量声明
      • 3.1.3 构造函数
      • 3.1.4 访问方式
    • 3.2 原型概念
    • 3.3 面向对象和继承
      • 3.3.1 for-in遍历对象
  • 4.数组与集合
    • 4.1 数组的声明和遍历
      • 4.1.1 普通数组
      • 4.1.2 动态数组
    • 4.2 表的声明和遍历
      • 4.2.1 字符串和JSON数据的转换
      • 4.2.2 JSON对象和JS对象的总结
        • splice与slice的用法

前言,本篇文章是依据bilibili博主(波波酱老师)的学习笔记,波波酱老师讲的很好,很适合速成!!!

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

本篇文章会与java进行对比学习,因为JS中很多语法和java是相同的,所以大家最好熟悉Java语言后再来进行学习,效果更佳,见效更快.

1.基本语法

1.1 JS语言的特点

  • 是一门 动态弱类型的语言,没有非常强制的数据类型声明,都是通过let来声明对象
  • 作用是可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验.

1.2 创建一个JS文件

  1. 首先打开我们的IDEA软件,新建一个项目.
  2. 之后选中新建的项目,右键找到添加框架支持
  3. 按照下图新建一个Web应用程序

image-20240617144525008

如果你的右键菜单之后发现没有添加框架支持可以进行如下设置:

方法一:在设置中添加按钮;image-20240617144305986

方法二:选中项目,双击shift转到搜索,切换到操作进行搜索;

image-20240617144502334

分别解释一下不同包名的作用:

  • src文件夹添加java代码
  • web文件夹添加html代码

1.3 输入与输出

image-20240617144720099

JS输出:

  1. 后台输出:console.log("字符串")
  2. 在页面上打印:document.weite("字符串")
  3. 打印警告弹窗:alert("字符串")

JS输入:

  • prompt("字符串")

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*JS输出代码*/
        //后台输出
        console.log("字符串");
        //在页面上打印:`
        document.weite("字符串");
        //打印警告弹窗:
        alert("字符串");
        let s = prompt("字符串");
        document.write(s);
        
    </script>
</body>
</html>

小Tips:

alt+回车来生成变量

1.4 变量

1.4.1 命名规则

在Java中命名规则:

  1. 标识符可以包含:英文字母\数字\美元符号和下划线,并且不能以数字开头
  2. 标识符不能以数字开头
  3. 标识符不能是关键字

Java命名规范:

  1. 类名规范:首字母大写,后面每个单词首字母大写(大驼峰).(例如:Student)
  2. 方法名规范:首字母小写,后面每个单词首字母大写(小驼峰).(例如:getStudent)
  3. 变量名规范:全部小写.(例如:student)

在JS名命名规则中与java也是一致的

  1. 只能是字母\数字\美元符号eh下划线,并且不能以数字开头
  2. 字母区分大小写,例如 Age 和 age 就是不同的变量
  3. JS内部已占用的单词(关键字或保留字)不允许使用

1.4.2 变量声明

数字类型
  • 在JS中不管是什么类型,都是用let关键字来进行接收.
  • 如果想要看输出变量的类型使用typeof ___
let num =100;
console.log(typeof num);
字符串类型
  • 不管是单引号还是双引号都是字符串类型.
let A = "123";
let B = '123';
console.log(typeof A);
console.log(typeof B);

JS单引号和双引号的区别:

  • 当我们单独来描述一个字符串的时候,是没有区别的.

  • 当嵌套使用的时候,应该不同引号进行嵌套使用

let a=" '你好' ";
	//打印出来的就是 '你好'
let b=' "你好" ';
	//打印出来的就是 "你好"
console.log(a===b);
	//我们可以通过使a和b进行相等运算,看出这两个字符串是否相等
	//最终结果是false,说明他们两个不是一样的字符串
  • 转义写法

    如果想要在使用双引号的情况下输出的也是双引号,就需要使用转义字符.

    转义字符用\(右斜杠)表示

    let c= " \"你好"\ ";
    console.log(c);		//最后输出的就是"你好"
    
布尔类型

布尔类型于Java一致.

let is = true;
console.log(typeof is);
未定义类型

在JS中专门有一个未定义类型,就是针对那些声明了变量但是没有进行复制的数据.

let tmp;
console.log(typeof tmp);

1.4.3 类型转换

隐式转换

java中的隐式转换

  1. 数据类型之间的自动转换.
public class main{
    public static void main(Srting[]args){
        int i = 1;
        double j = 1.1;
        double res = i+j;
        System.out.println(res);
        //最后输出的是2.1,int变成了double类型进行运算
    }
}
  1. 数字类型自动转换成字符串类型
        String num1 = "123";
        int num2 = 3;
        System.out.println(num1+num2);
//最后输出的是 1233
  1. 字符串类型无法转换成数字类型
	System.out.println(num1-num2);
//这一段会报错,因为不能转换成数字类型

在JS中,

  1. 数值类型自动转换成字符串类型

  2. 字符串类型会自动转换成数值类型

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
        let a=1;
        let b="222";
        document.write(a-b);
    	/*输出-221*/
        </script>
    </body>
    </html>
    

    在上面案例中可以看出来,最后的输出结果是-221,说明b变成了数值类型222进行运算,所以在JS中是可以将字符串类型自动转换成数值类型.

显示转换

java中的显示转换

在Java中的数据类型转换是通过在数值前面添加(转换类型)来实现的.

double num1 = 3.5;
int num2 = (int)num1;
//num1被强制转换成了int类型,该值由3.5->3

JS中的显示转换是通过数据类型(参数)的形式来进行转换.不过转换成字符串是一个特例,见下:

  1. 数值转换成字符串,通过.toString()方法来实现

  2. 字符串转换成数值

    let num = "100";
    let num2 = Number(num);
    console.log(typeof nume2);
    //最后的输出结果是number
    
  3. parse()关键字

    let num = 100.001;
    //转换成整数
    let num2 = parseInt(num);
    //转换成浮点数
    let num3 = parseFloa(num);
    document.write(num2,num3);
    	//最后打印出来的是 100 100.001
    

1.4 运算符

JS的运算符与java的运算符是一摸一样的

不同的在于比较运算符:

  • ==(双等号)表示判断值相等
  • ===(三等号)表示判断值数据类型相等

1.4.1 String常用的API方法

在Java中String常用的API方法

  • 判断字符串长度: .length()
  • 去空格: .trim()
  • 返回出现第一个字符所在下标索引值,找不到字符就返回-1: .indexOf("需要查找的字符")
  • 返回出现最后的一个字符所在下标索引值:.LastIndexOf("需要查找的字符")
  • 字符串是否包含元素: .contains("需要查找的字符")
  • 返回指定位置的单个字符: .charAt(位置)
  • 截取指定范围内字符串: .substring(开始位置,结束位置)
  • 字符串的比较: .equals(需要对比的数据)

image-20240617153401027

image-20240617153404204

JS中大致上与Java无差别,但是在length,includes,substing等上面由一点差别,具体见下:

image-20240617153452309

  • length变为了一个属性,而不是方法了,后面不需要加括号.
  • 去空格: .trim()
  • 返回出现第一个字符所在下标索引值,找不到字符就返回-1: .indexOf("需要查找的字符")
  • 返回出现最后的一个字符所在下标索引值:.LastIndexOf("需要查找的字符")
  • 字符串是否包含元素: .includes("需要查找的字符")
  • 返回指定位置的单个字符: .charAt(位置)
  • 截取指定范围内字符串: .substring(开始位置,结束位置)
  • 字符串的比较: 使用方法与JS运算符一致

1.5 控制语句

image-20240617152409001

  • JS语法分子语句中,if语句支持非布尔类型的判断.
if(1){
	document.write("支持非布尔类型判断");
}
  • 多分支语句与java多分支语句一摸一样
let a = "1";
switch(a){
	case 1:
		document.write("1");
		break;
	case 2:
		document.write("2");
		break;
	case 3:
		document.write("3");
		break;
	case 4:
		document.write("4");
		break;
}

1.6 循环结构

  • JS的循环结构与java是一致的.

1.7 断点调试技术

  • 同样与java语言一致.

2.函数应用

2.1 函数声明

  • 通过使用function关键字来实现,因为JS是没有参数类型这个概念的,所有声明方法的时候不需要返回值类型.

模板:

function 方法名(参数1,参数2){
	return参数1+参数2;
}

如果方法出现重名,后面的方法会把前面的方法覆盖了.

函数的内部内置了一个参数arguments,会自动或获取传递过来的参数

image-20240617172352731

2.2 匿名函数

  • 在JS中是可以直接把函数直接赋值给变量,没有方法名的方法就是匿名函数(函数表达式).

模板:

let sum = function(nmu1,nmu2){
	return nmu1+nmu2
}

2.3 回调函数

  • 在Java中没有回调函数这个概念,这个是JS特有的方法,但是它类似于Java中的接口.
  • 另外回调函数还有一个重要的作用就是可以实现异步操作.

模板:

function 方法1(方法2,参数1){
	if(参数1==1){
		方法2()	//这里就是回调函数
	}else{
		//别的方法
	}
}

方法1(方法2(){
	//定义方法2里面的方法
},参数2)

通过回调函数写一个数组排序案例:

let arr=[1,2,3,4,5,6];
arr.sort(function(o1,o2){
	return o2-o1;	//通过匿名函数来实现回调
})
document.write(arr);

2.4 异步编程

JS的异步操作是通过回调函数来实现的.

function f(fn){
	let num =10;
	setTimeout(function(){
		num+=10;
		fn(num);
	},1000);	//1秒钟后加10
}
let res = f(function(num){
	document.write(num);
});

前置知识

定时器setTimeout()

3.类与对象

3.1 引用类型对象

3.1.1 普通声明

通过给对象赋值来实现声明的方式;

模板:

let 对象名 = new Object();
	对象名.属性1 = A;
	对象名.属性2 = b;
	对象名.方法名 = function(){
		//定义一个方法
	}

image-20240617193409388

3.1.2 字变量声明

通过键值对的方式声明;

模板:

let 对象名 = {
	属性1:a,
	属性2:b,
	方法:function(){
		//定义方法
	}
}

image-20240617193456840

原则上来说,key的值是可加可以不加,但是当key的值是非法标识符的时候一定要添加双引号!!!

image-20240617195859629

3.1.3 构造函数

JS中的构造方法与Java当中的构造方法类似.在JS中我们可以通过构造方法中定义类的属性和方法;

模板:

function 方法名(属性1,属性2){
	this.属性1 = 属性1;
	this.属性2 = 属性2;
	this.方法1 = function(){
		//定义方法
	}
}

//调用构造方法
let 对象1 = new 方法名(参数1,参数2)

image-20240617193642530

3.1.4 访问方式

  1. 通过.的方式进行访问
  2. 通过[](中括号)进行对象的访问
    image-20240617195809129

3.2 原型概念

需要一个静态的区域来实现属性和方法的共享,目的就是为了节省内存空间.(类似于Java的静态static变量)

关键字.prototype

模板:

引用对象名字.prototype.原型变量名字 = 数量;
引用对象名字.prototype.原型方法名字 = function(){
	//定义原型方法
}

简写方式:

引用对象名字.protofype = {
	原型变量名字:100,
	原型方法名字:function(){
		//定义原型方法
	}
}

另外原型还有一个功能就是可以在原先的类里面扩展其他方法:

image-20240617195200655

3.3 面向对象和继承

在JS中也是没有一个严格定义的继承方法,但是我们可以模拟一个继承的概念

模板:

function 父类名(属性1,属性2){
	this.父类属性1=父类属性1;
	this.父类属性2=父类属性2;
	this.父类方法1 = function(){
		//定义父类方法
	}
}

//用构造函数来模拟一个子类
function 子类名(子类属性1){
	this.子类属性1 = 子类属性1;
	this.子类方法1 = function(){
		//定义子类方法
	}
}

//巧妙的通过原型类来实现一个原型链
子类名.prototype = new 父类名(参数1,参数2);

//通过创建一个对象来调用
let 子类对象名 = new 子类名(子类属性1);
子类对象名.子类方法1();
子类对象名.父类方法1();

案例: image-20240617195433555

3.3.1 for-in遍历对象

模板:

for(let key in 对象名){
	doucument.write(key+" "+对象名[key])
}

4.数组与集合

4.1 数组的声明和遍历

4.1.1 普通数组

声明一个固定长度的数组,声明方式与Java无区别.

模板:

let 数组名 = new Array(输入一个数值决定长度);
	//输入数组
	数组名[0]=1;
	数组名[1]=2;
	数组名[2]=3;

**for-of:**增强for循环

for(let 键 of 数组名){
	document.write(键);
}

4.1.2 动态数组

在JS中的动态数组就相当于Java中的ArrayList.

但是不同的是JS的动态数组只支持头插和尾插,下面是插入方法汇总:

  • .unshift("添加的元素")头插
  • .shift()头删
  • .push("添加的元素")尾插
  • .pop()尾删

image-20240617200404164

JS中的数组可以是任意类型的,不规整的都可以,例如:

let array=[
	11,
	"jack",
	null,
	undefined,
	new 0bject(),
	function(){console.log("haha")},
	[1,2,3]
];
for(let item of array){
	document.write(typeof item+" "+item);
}

4.2 表的声明和遍历

  • 在JS中并没有严格定义的表集合,与之比较相似的就是我们的JSON数据.
  • 通过[](中括号)进行拿值.

模板:

let 对象名 = {key1:值1,key2:key2~~~};
for(let key in 对象名){
	document.write(key+" "+对象[key]);
}

JSON对象集合

image-20240617201630140

4.2.1 字符串和JSON数据的转换

通过JSON.parse(对象名)来实现String类型转换成JSON数据

image-20240617201952369

通过.stringify(对象名)来实现JSON数据转换成String类型

image-20240617202141480

4.2.2 JSON对象和JS对象的总结

JSON对象本质是个字符串,主要作用就是传递数据,客户端拿到服务器的JSON格式数据字符串,先要转换成JS对象数据.

  • 属性必须要双引号(包括属性的属性).

  • 属性对应的值可以是nuLl、true/faLse、数字、字符串(必须双引号)、对象、数组.

    let json0bject='{' +
        '"id":1,' +
        '"name"' +
        '"flaq":ture,' +
        '"address":{id:1,area:"1001"}.' +
        '"course":[1,2,3]' +
    '}'
           
    let json0bject='{"id":1,"name""flaq":ture,"address":{id:1,area:"1001"}."course":[1,2,3]}'
    

无法通过JSON对象访问属性

image-20240617202603346

JS对象是一个真实的对象,有属性和方法.

splice与slice的用法

.splice(从哪里开始截,要截取的个数)拼接用法:截取后原数组会发生改变

  1. 截取功能

image-20240617203044510

  1. 截取后替换功能

.splice(从哪里开始截,要截取的个数,替换的新数据)

image-20240617203233622

  1. 增添功能

.splice(从哪里开始截,0,替换的新数据)

slice(从哪里开始截,要截取的个数)切片用法:截取后原来数组不发生改变

slice()也和splice用法一样,拥有截取功能\替换功能\增添功能

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

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

相关文章

数据可视化实验一:Panda数据处理及matplotlib绘图初步

目录​​​​​​​ 2024-6-17 一、请将所有含有发明家“吴峰”的发明专利的“申请日”打印出来。并将含有“吴峰”的所有发明专利条目保存到Excel中 1.1 代码实现 1.2 运行结果 二、读取文件创建城市、人口、性别比、城镇化率DataFrame对象&#xff0c;计算指标排名&…

嘴尚绝卤味:传统与创新的味蕾碰撞,尝鲜必备美食!

在当今的餐饮市场中&#xff0c;各式各样的美食层出不穷&#xff0c;让人目不暇接。而在这一片美食的海洋中&#xff0c;嘴尚绝卤味以其独特的魅力和口感&#xff0c;成功吸引了众多食客的目光。今天&#xff0c;就让我们一起来探索一下&#xff0c;嘴尚绝卤味究竟有何魔力&…

MongoDB~分片数据存储Chunk;其迁移原理、影响,以及避免手段

分片数据存储&#xff1a;Chunk存储 Chunk&#xff08;块&#xff09; 是 MongoDB 分片集群的一个核心概念&#xff0c;其本质上就是由一组 Document 组成的逻辑数据单元。每个 Chunk 包含一定范围片键的数据&#xff0c;互不相交且并集为全部数据。 分片集群不会记录每条数据…

Java多线程下载工具,多线程,多任务,断点续传,GUI

目录 一、题目要求 二、效果展示 三、功能实现 四、代码 一、题目要求 序号 功能名称 功能需求标识 简要描述 1 下载功能 Download 当用户输入一个下载链接后&#xff0c;能识别链接并开始多线程下载工作&#xff0c;包括线程监听、线程管理等。 2 续传功能 …

[面试题]Spring

[面试题]Java【基础】[面试题]Java【虚拟机】[面试题]Java【并发】[面试题]Java【集合】[面试题]MySQL[面试题]Maven[面试题]Spring Boot[面试题]Spring Cloud[面试题]Spring MVC[面试题]Spring[面试题]MyBatis Spring 是一个很庞大的技术体系&#xff0c;可以说包容一切&…

APP Android

APP Android 安卓源生应用程序 APP IOS-CSDN博客 05.04 06:11Testing

MySQL修改用户权限(宝塔)

在我们安装好的MySQL中&#xff0c;很可能对应某些操作时&#xff0c;不具备操作的权限&#xff0c;如下是解决这些问题的方法 我以宝塔创建数据库为例&#xff0c;创建完成后&#xff0c;以创建的用户名和密码登录 这里宝塔中容易发生问题的地方&#xff0c;登录不上去&#…

电离层对流层延迟解算

前言&#xff1a; 本章节代码均在Gitee中开源&#xff1a; 电离层对流层延迟解算https://gitee.com/Ehundred/navigation-engineering/tree/master/%E5%8D%AB%E6%98%9F%E5%AF%BC%E8%88%AA%E5%8E%9F%E7%90%86/%E7%94%B5%E7%A6%BB%E5%B1%82%E5%AF%B9%E6%B5%81%E5%B1%82%E8%AF%A…

Python学习笔记12:进阶篇(一),类的相关知识

前言 在讲类之前&#xff0c;我们简单介绍一些Python的知识。这些知识在入门篇没讲&#xff0c;想学Python的&#xff0c;基本都对Python有基础的了解&#xff0c;但是今天开始的进阶知识&#xff0c;会涉及到一些Python的特性&#xff0c;所以在这里介绍一下。 Python是一种高…

数据仓库与数据挖掘(期末复习)

数据仓库与数据挖掘&#xff08;期末复习&#xff09; ETL的含义Extract 、 Transformation、Load。 ODS的全称Operational Data Store。 DW全称 Data Warehourse DM全称是Data Mart 数据仓库数据抽取时所用到技术是增量、全量、定时、调度 STAGE层作用是提供业务系统数据…

HTC手机卷土重来,价格和配置给我看麻了

第一眼看到我是不敢相信的&#xff0c;HTC 竟然还活着。 提到 HTC&#xff0c;相信不少同学会发出「那是我在夕阳下奔跑并逝去的青春」这样的感叹吧。 曾经辉煌一时的手机大佬&#xff0c;市占率曾一度达到 15%。 璀璨就如同天边一闪而过的流星。关于它的风光地位&#xff0c;…

FinalShell 连接虚拟机超时,主机ping不通虚拟机,解决

出现问题&#xff1a; 连接主机...java.net.ConnectException: Connection timed out: connect 在排查错误时发现&#xff1a; 虚拟机内能互相ping通&#xff0c;虚拟机能ping通主机 但是主机的cmd命令ping不通虚拟机 问题原因&#xff1a; 虚拟机内能互相ping通&#xff0…

基于Java+Swing贪吃蛇小游戏(含课程报告)

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

计算机组成原理历年考研真题对应知识点(数制与编码)

目录 2.1数制与编码 2.1.1进位计数制及其相互转换 【命题追踪——采用二进制编码的原因(2018)】 【命题追踪——十进制小数转换为二进制小数(2021、2022)】 2.1.2 定点数的编码表示 【命题追踪——补码的表示范围(2010、2013、2014、2022)】 【命题追踪——补码和真值的相…

Debian/Ubuntu linux安装软件

1、官方软件商店安装 2、deb包安装 报错不是sudoers&#xff0c;首先将用户添加到sudo su -l adduser USERNAME sudo exit然后&#xff0c;退出桌面环境并再次登录。 您可以通过输入以下内容来检查上述过程是否成功&#xff1a; groups下载deb包 altshiftf4或右键打开命令行…

【第16章】Vue实战篇之跨域解决

文章目录 前言一、浏览器跨域二、配置代理1.公共请求2.代理配置 总结 前言 前后端项目分离衍生出浏览器跨域问题&#xff0c;开发之前我们通过配置代理解决这个问题。 一、浏览器跨域 浏览器的跨域问题主要是由于浏览器的同源策略导致的。同源策略是浏览器的一个安全功能&…

XZ后门故事:初始分析

2024年3月29日&#xff0c;Openwall OSS安全邮件列表上的一条消息“炸醒”了整个信息安全、开源和Linux社区&#xff1a;XZ出现了一个CVSS评分10.0的恶意后门。 这个后门库的特殊危险在于OpenSSH服务器进程sshd使用它。在多个基于systemd的发行版上&#xff08;包括Ubuntu、De…

信用VS抵押:贷款的两面镜子

说到贷款这事儿&#xff0c;大家首先想到的可能是有稳定工作、房子或车子的人。 其实&#xff0c;没这些也能贷款&#xff0c;比如咱们还在学校时&#xff0c;银行就来办信用卡了&#xff0c;这就是信用借款的起点。 毕业后&#xff0c;刚工作没钱又想闯&#xff0c;不少人宁愿…

C# 通过Win32API设置客户端系统时间

在日常工作中&#xff0c;有时可能会需要获取或修改客户端电脑的系统时间&#xff0c;比如软件设置了Licence有效期&#xff0c;预计2024-06-01 00:00:00到期&#xff0c;如果客户手动修改了客户端电脑时间&#xff0c;往前调整了一年&#xff0c;则软件就可以继续使用一年&…