Web Day5

最新推荐文章于 2024-09-13 10:46:15 发布

丨陈墨瞳丨

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量118

点赞数 1

文章标签：前端 javascript html5 html

本文链接：https://blog.csdn.net/qq_51944132/article/details/132840966

版权

Web

day5_2023.9.12

JS中的字符串

JavaScript 字符串方法和属性

属性

constructor 返回字符串的构造函数。

length 返回字符串中的字符数。

prototype 允许您向对象添加属性和方法。

方法描述

charAt() 返回指定位置处的字符。

charCodeAt() 返回指定位置处字符编码。

codePointAt() 返回字符串中索引（位置）处的 Unicode 值。

concat() 返回两个或多个连接的字符串。

endsWith() 返回字符串是否以指定值结尾。

fromCharCode() 将 Unicode 值作为字符返回。

includes() 返回字符串是否包含指定值。

indexOf() 返回值在字符串中第一次出现的位置。

lastIndexOf() 返回值在字符串中最后一次出现的位置。

localeCompare() 使用基于本地的顺序来比较字符串。

match() 在字符串中搜索值或正则表达式，并返回匹配项。

repeat() 返回拥有多个字符串副本的新字符串。

replace() 在字符串中搜索值或正则表达式，并返回替换值的字符串。

search() 检索字符串中与正则表达式匹配的子串。

slice() 提取字符串的一部分并返回新字符串。

split() 将字符串拆分为子字符串数组。

startsWith() 检查字符串是否以指定字符开头。

substr() 从字符串中抽取子串，该方法是 substring() 的变种。

substring() 从字符串中抽取子串。

toLocaleLowerCase() 使用主机的语言环境返回转换为小写字母的字符串。

toLocaleUpperCase() 使用主机的语言环境返回转换为大写字母的字符串。

toLowerCase() 返回转换为小写字母的字符串。

toString() 将字符串或字符串对象作为字符串返回。

toUpperCase() 返回转换为大写字母的字符串。

trim() 返回删除了空格的字符串。

trimEnd() 返回从末尾删除空格的字符串。

trimStart() 返回从开头删除空格的字符串。

valueOf() 返回字符串或字符串对象的原始值。


<script>
		var s1 = "helloworld";
		var s2 = "java";
		
		console.log(s1.charAt(4)); // o
		
		var s3 = s1.concat(s2);
		console.log(s3);
		
		console.log(s1.endsWith("D"));
		
		console.log(s1.indexOf("l"));
		console.log(s1.lastIndexOf("l"));
		
		console.log(s1.length);
		
		var s4 = s1.replace("l","x");
		console.log(s4);
		console.log(s1);
		
		var s5 = s1.split("d");
		console.log(s5);
		
		var s6 = s1.substring(1,3); //从第1位截取，截取到第3个
		console.log(s6);
		var s6 = s1.substr(1,3);  //从第1位截取，截取3个
		console.log(s6);
		
		
	</script>

练习
//求大字符串中"aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava"
//中小字符串java出现的次数

//1,
var str1 = "aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava";
var str2 = "java";

var arr = str1.split(str2);
console.log(arr.length-1);

//2,
var count = 0;
var flag = true;
while(flag){
  var str3 = str1.replace(str2,"");
  if(str1 != str3){
    count++;
    // console.log(count);
    str1 = str3;
  }else{
    flag = false;
  }
}
console.log(count);

JS正则表达式

RegExp 对象

正则表达式是一种字符模式。
该模式用于对文本进行模式匹配的“搜索和替换”功能。

修饰符

修饰符用于执行不区分大小写和全局的搜索：

修饰符描述
g 执行全局匹配（查找所有匹配而不是在第一个匹配后停止）。
i 执行不区分大小写的匹配。
m 执行多行匹配。

方括号

方括号用于查找某个范围内的字符：
表达式描述
[abc] 查找括号之间的abc字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[^0-9] 查找任何不在括号内的字符（任何非数字）。
(x|y) 查找任何指定的选项。

元字符

元字符是具有特殊含义的字符：
元字符描述
. 查找单个字符，除了换行符或行终止符。
\w 查找单词字符。
\d 查找数字。

量词

量词描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何以 n 结尾的字符串。
^n 匹配任何以 n 开头的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
exec() 测试字符串中的匹配项。返回第一个匹配项。
test() 测试字符串中的匹配项。返回 true 或 false。
toString() 返回正则表达式的字符串值。

<script>
		//匹配电话
		var tel = "我的电话是:13333338888";
		var reg = /1[3-9][0-9]{9}/;
		
		console.log(reg.exec(tel));
		console.log(reg.test(tel));
		
		console.log(tel.match(reg));
		
		//匹配内容
		var s1 = "gagewgweaAAWEGaa";
		var reg = /[a]/gi;
		console.log(s1.match(reg));
		
		//匹配日期格式
		var str1 = "1999-11-10";
		var reg2 = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/;
		console.log(reg2.test(str1));
		
		//写一个邮箱的正则表达式格式
		// 12314@qq.com    gaweg1241@163.com  waggw3e12@yahool.com.cn
		
		var reg3 = /[\w]{2,16}@[\w]{2,10}\.[\w]{2,3}/;
		var str2 = "12314@qq.com";
		console.log(reg3.exec(str2));
	</script>

JS中的对象创建

JS中的对象Object，是以一个键值对的形式存储属性的集合，每个属性都是自己定义的一个名称，以及和名称对应的值。

创建对象的方式

通过对象的构造器来定义

构造器就是一个构造函数

函数的定义方式 : function (参数){ }

通过new Object()来定义

通过{}来定义

<script>
		//1,创建对象，es5中，先去创建对象的构造函数
		var User = function(userid,username){
			this.userid = userid;
			this.username = username;
		}
		//通过new关键字结合对象的构造函数，完成对象的创建及初始化
		var user1 = new User(1001,"jack");
		console.log(user1.userid);
		console.log(user1.username);
		var user2 = new User(1002,"tom");
		console.log(user2.userid);
		console.log(user2.username);
		
		//2,通过new关键字结合Object对象，创建空对象
		var user3 = new Object();
		user3.id = 1003;
		user3.name = 'lucy';
		console.log(user3.id);
		console.log(user3.name);
		//3, js中可以通过 {} 来直接声明对象，声明的时候进行赋值
		var user4 = {id:1004,name:"tonny"};
		console.log(user4.id);
		console.log(user4.name);
		
		var user5 = {};
		user5.id = 1005;
		user5.name = 'jandy';
		console.log(user5.id);
		console.log(user5.name);
	</script>

es6中的面向对象

将来前端开发的过程中，大部分情况下，不需要去通过定义类的方式来完成开发，但是很多时候，我们会去使用别人定义好的类(很多的前端框架中，都有这些定义)

<script>
class Animal{
			//构造函数
			constructor(name,age){
				this.name = name;
				this.age = age;
			}
			say(){
				console.log("我的名字是"+ this.name
					+",年龄是" + this.age);
			}
		}
		
		class Dog extends Animal{
			constructor(name,age,gender){
				super(name,age);
				this.gender = gender;
			}
		}
		var dog = new Dog("旺财",2,"母");
		dog.say();
		console.log(dog.gender);
</script>

JS中对象的属性和方法

JS中的属性可以动态的添加

//添加属性  
		//通过对象.属性 = 值    和  对象["属性名"] = 值
		//动态的添加和删除user1对象的属性，添加和删除不影响其他的相关对象
		user1.userage = 20;
		user1["gender"] = "男";
		console.log(user1);
		//删除属性 
		delete user1.userage;
		console.log(user1);
		//user2的属性不受user1属性添加的影响
		console.log(user2);
		
		//对象中方法的创建
		//对象的方法也可以动态的添加、删除，方法只能通过对象.方法名 来创建
		user1.product = [];
		user1.chooseProduct = function(product){
			user1.product.push(product);
		}
		
		//调用对象方法
		user1.chooseProduct("电脑");
		user1.chooseProduct("手机");
		user1.chooseProduct("pad");
		
		console.log(user1);

//创建一个Student对象的构造函数，有姓名、年龄两个属性
		//创建好构造函数之后，完成对象的创建，通过构造方法完成初始化
		//动态的添加一个班级属性、一个课程属性，
		//然后添加一个选课方法，将所选课程，加入到课程属性中
		//最后，完成对象的遍历
		
		function Student(name,age){
			this.name = name;
			this.age = age;
		}
		var student = new Student("jack",20);
		student.className = "1班";
		student.course = [];
		student.chooseCourse = function(cname){
			student.course.push(cname);
		}
		student.chooseCourse("oracle");
		student.chooseCourse("mysql");
		
		var stuJson = JSON.stringify(student);
		console.log(stuJson);

JS中的函数

Js中的函数，其实就是java中的方法

在js中，通过函数可以对代码进行有效的组织，可以让代码更加结构化，易于理解和维护

js中的函数，是事件的驱动，函数可以将重复使用的代码，进行封装，完成调用

js中一般通过事件或者在其他的代码中调用函数

JS中函数的创建

js中的函数主要由，函数名、参数、函数体、返回值4个部分组成

语法 :

function 函数名(参数){

函数体；

return 返回值;

}


<script>
		//函数的声明和调用
		//1，声明的时候指定函数名
		function fun1(){
			console.log("函数fun1被调用了");
		}
		//调用
		fun1();
		//2，将匿名函数赋值给变量
		var fun2 = function(){
			fun1();
			console.log("函数fun2被调用了");
		}
		fun2();
		//3,通过new关键字 ，调用Function()构造函数
		var fun3 = new Function(console.log("函数fun3被调用了"));
		
	</script>

函数声明提升现象


//1，
	    fun = function(x,y){
			return x-y;
		}
		//函数声明的提升
		//使用function声明的函数，提升优先级比变量提升要高
		//不会被变量声明覆盖，但是会被变量的赋值覆盖
		//2，
		function fun(x,y){
			return x+y;
		}
		//为什么返回-1，因为2处声明的函数提升到了最顶部，之后
		//又被1处的函数赋值所覆盖，所以，这里执行的fun其实是
		//1处的函数
		var num = fun(1,2); // -1
		console.log(num);

JS中的函数是一个对象

通过typeof()方法测试发现，函数是一个function对象
所以，js中函数也存在一些属性和方法
属性：
arguments.length 可以返回函数被调用的时候，传入的参数的个数
方法：
toString() 返回函数的字符串格式

function fun4(a,b){
			return arguments.length;
		}
		var num = fun4(1,2);
		console.log(num);
		//toString()方法
		console.log(fun4.toString());

es6中的函数

箭头函数的用法

箭头函数就是允许使用更简单的写法来表示函数表达式，使用箭头函数的时候，可以不用function关键字、return、花括号

	//es5
		var f1 = function(a,b){
			return a+b;
		}
		var n = f1(1,2);
		console.log(n);
	//es6  箭头函数, 箭头函数没有提升
		 const f2 = (a,b) => a+b;
		 var n1 = f2(1,2);
		 console.log(n1);

JS函数中的参数

js的函数的参数在函数声明的时候，并没有指定类型，参数可以传入任意类型

//无参的函数
		function f3(){
			console.log("abc");
		}
		//有参的函数
		function f4(a,b){
			console.log(a+b);
		}
		//不定长的参数
		function f5(...param){
			for (var i = 0; i < param.length; i++) {
				console.log(param[i]);
			}
		}
		
		f5(1,2,3,4,5);

参数的默认值设置

//参数的默认值 
		function f6(name,age){
			name = name || "jack";
			age = age || 20;
			console.log( name + "--" + age);
		}
		f6();
		f6("tom");
		f6("lucy",22);

JS函数中的arguments对象
如果函数中调用的参数太多了，可以使用arguments来得到某些参数

//写一个函数，可以找到最小值,调用函数的可以传入一些数值
		function findMin(){
			var min = 0;
			for (var i = 0; i < arguments.length; i++) {
				if(arguments[i] < min){
					min = arguments[i];
				}
			}
			return min;
		}
		
		var n = findMin(10,-5,25,12,-3,-85,52);
		console.log(n);

JS中的this

js中的this，表示拥有当前代码的对象

1、this表示全局对象

当我们声明的函数的时候，没有将函数声明在对象中，那么函数中的this，就表示当前的窗口对象，也称为全局对象，在浏览器中，全局对象，指的就是window对象

2，this表示当前对象

如果将函数声明在对象中的时候，函数中的对象，就表示函数的所属对象

//在页面上声明的函数，就是属于页面，页面对象是window对象
		function fun1(){
			return this;
		}
		var i = fun1();
		console.log(i);
		
		
		var user = {
			name : "jack",
			age : 20,
			// this在箭头函数中，指向全局对象
			say : ()=>{ return this;},  
			show : function(){
				return this;
			}
		}
		var j = user.say();
		console.log(j);
		var k = user.show();
		console.log(k);

JS中函数的返回值

//js中函数返回数组
		
		function fun1(a,b){
			arr = [];
			arr.push(a*10);
			arr.push(b*10);
			return arr;
		}
		var arr = fun1(4,5);
		console.log(arr);
		//js函数中返回对象
		function fun2(name,id){
			user = {};
			user.name = name;
			user.id = id;
			return user;
		}
		var user = fun2("jack",20);
		console.log(user);

JS中函数参数的传值方式

<script>
		//传值调用
		function fun1(s){
			s = "hello";
		}
		var s1 = "你好";
		fun1(s1);
		console.log(s1); //你好
		
		//传地址调用
		function fun2(user){
			user.name = "李四";
		}
		var stu = {name:"张三"};
		
		fun2(stu);
		console.log(stu.name); // 李四
		
		//传函数调用,根据传入的函数完成实际调用
		function add(a,b){
			return a+b;
		}
		function sub(a,b){
			return a-b;
		}
		
		function operate(a,b,fun){
			return fun(a,b);
		}
		
		var n = operate(10,20,sub);
		console.log(n);
	</script>

JS中的比值函数

用来比较两个数值的大小的，返回值是一个正数、负数、0

返回值是负数，从小到大，正数，从大到小

funciton(a,b){

return a-b;

}

JS中内置函数(对象)

数学对象Math

基本和Java中的Math类相同

Math 对象方法

方法描述

abs(x) 返回 x 的绝对值

ceil(x) 对 x 进行上舍入

floor(x) 对 x 进行下舍入

max(x,y,z,…,n) 返回最高值

min(x,y,z,…,n) 返回最低值

pow(x,y) 返回 x 的 y 次幂

random() 返回 0 ~ 1 之间的随机数

round(x) 把 x 四舍五入为最接近的整数

日期对象Date

创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()

new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(milliseconds)

new Date(date string)

日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法描述

getDate() 以数值返回天（1-31）

getDay() 以数值获取周名（0-6）

getFullYear() 获取四位的年（yyyy）

getHours() 获取小时（0-23）

getMilliseconds() 获取毫秒（0-999）

getMinutes() 获取分（0-59）

getMonth() 获取月（0-11）

getSeconds() 获取秒（0-59）

getTime() 获取时间（从 1970 年 1 月 1 日至今）

         <script>
			var date = new Date();
			console.log(date.getFullYear());
			console.log(date.getMonth()+1);
			console.log(date.getDate());
			console.log(date.getDay());
			console.log(date.getHours());
			console.log(date.getMinutes());
			console.log(date.getSeconds());
			console.log(date.getTime());
		</script>