JS学习之路九(基本语法终章~)
本帖最后由 yanghongchen666 于 2021-2-19 14:07 编辑JS中的Date对象
/*
Date对象
-在Js中使用Date对象来表示一个时间
*/
//创建一个date对象
//如果直接使用构造函数一个Date对象，则会封装成为当前执行的时间
var d = new Date();
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串，作为参数
//日期格式: 月份/日/年 时:分:秒
var d2 = new Date("2/03/2021 11:10:30");
console.log(d2);
/*
getDate()
-获取当前日期对象是几日
*/
var date = d.getDate();
console.log("date = " + date);
/*
getDay()
-获取当前日期对象是周几
-会返回一个0到6的值
0表示周日
1表示周一.....
*/
var day = d.getDay();
console.log(day);
/*
getMonth()
-获取当前时间对象的月份
-会返回一个0-11的值
0表示1月
1表示2月
....
11表示12月
*/
var month = d.getMonth();
console.log("month = " + month);
/*
getFullYear()
-获取当前日期对象的年份
*/
var year = d2.getFullYear();
console.log(year);
/*
getTime()
-获取当前日期的时间戳
-时间戳，指的是从格林威治标准时间的1970年1月1日, 0时0分0秒
到当前日期的毫秒数（1s=1000ms）
-计算机底层在保存时间时，都是使用的时间戳
*/
var time = d2.getTime();
console.log(time);
var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
console.log(time);
//利用时间戳来测试代码的执行性能
//获取当前的时间戳
var start = Date.now();
for(var i=0; i<100000; i++){
console.log(i);
}
var end = Date.now();
console.log(end - start);
console.log(time);
----------------------------------
JS中Math对象
/*
Math
-Math和其他的对象不同，它不是一个构造函数,
它属于一个工具类，不用创建对象。它里面封装了数学运算相关的属性和方法
-比如
Math.PI 表示圆周率
*/
console.log(Math.PI);
/*
abs()可以用来计算一个数的绝对值
*/
console.log(Math.abs(-1));
/*
Math.ceil()
-可以对一个数进行向上取整,小数位只要有值，就自动进1
Math.floor()
-对一个数进行向下取整.小数部分会被舍掉
Math.round()
-对一个数进行四舍五入取整
*/
console.log(Math.ceil(1.1));
console.log(Math.floor(1.5))
console.log(Math.round(1.4));
/*
Math.random()
-可以用来生成一个0-1之间的随机数
-生成一个0-10的随机数
-生成一个0-x之间的随机数
Math.round(Math.random()*x)
-生成一个1-10之间的随机数
-生成一个x-y之间的司机数
Math.round(Math.random()*(y-x))+x
*/
//0-10随机数
console.log(Math.round(Math.random()*10));
//1-10随机数
console.log(Math.round(Math.random()*9)+1);
//生成1-6之间的随机数
console.log(Math.round(Math.random()*5)+1);
/*
Math.max(x,y)
-可以获取多个数中的最大值
Math.min(x,y)
-可以获取多个数中的最小值
*/
var max = Math.max(10,20,30);
var min = Math.min(10,30,20);
console.log(max);
/*
Math.pow(x,y)
-返回x的y次幂
*/
console.log(Math.pow(2,2));
/*
Math.sqrt()
-对一个数进行开方运算
*/
console.log(Math.sqrt(4));
----------------------------------------
JS中的包装类
/*
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
在JS中为我们提供了三个包装类，通过三个包装类可以将基本数据类型的数据转换为对象
String()
-可以将一个基本数据类型字符串转换为String对象
Number()
-可以将一个基本数据类型的数字转换为Number对象
Boolean()
-可以将一个基本数据类型的布尔值转换为Boolean对象
注意:
在实际应用中不会使用基本数据类型的对象
如果使用基本数据类型的对象，在做一些比较可能会带来一些不可预料的结果
*/
//创建一个Number类型的对象
//以下的方法不会使用
var num = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
var num2 = new Number(3);
console.log(typeof num);
//向num中添加一个属性
num.hello = "abcdefg";
console.log(num.hello);
/*
方法和属性只能添加给对象，不能添加给数据类型
当我们对一些基本数据类型的值去调用属性和方法时，
浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法
调用完以后，再将其装换为基本数据类型
*/
var s = "123";
s = s.toString();
s.hello = "你好";
console.log(s);
console.log(s.hello);//undefined
console.log(typeof s);
--------------------------------
JS中的字符串的方法
//创建一个字符串
var str = "Hello Atguigu";
/*
在底层字符串是以字符数组的形式保存的
["H","e","l","l","o"]
*/
/*
length属性
-可以获取字符串的长度
*/
console.log(str.length);//13
console.log(str);
/*
charAt()
-可以返回字符串中指定位置的字符
-根据索引获取指定的字符
*/
str = "Hello Atguigu";
var result = str.charAt(6);
//var result = str;跟上面效果一样的
console.log("result = " + result);
/*
charCodeAt()
-获取指定位置字符的字符编码(Unicode编码)
*/
result = str.charCodeAt(0);
console.log(result);
/*
String.fromCharCode()
-可以根据字符编码(Unicode)去获取字符
*/
result = String.fromCharCode(74);
console.log(result);
/*
concat()
-可以用来连接两个或多个字符串
-作用和加号(+)一样
*/
result = str.concat("你好","再见");
console.log(result);
/*
indexOf()
-该方法可以检索一个字符串中是否含有指定内容
-如果字符串中含有该内容，则会返回其第一次出现的索引
如果没有找到指定的内容，则返回-1
-可以指定第二个参数，代表开始查找的位置
*/
str = "hello atguigu";
result = str.indexOf("l",3);
console.log(result);//0
/*
lastIndexOf()
-该方法的用法跟indexOf()一样，
不同的是，indexOf()是从前往后找，
而lastIndexOf()是从后往前找
-也可以指定第二个参数，指定查找的位置
*/
result = str.lastIndexOf("h");
console.log(result)
/*
slice()
-可以从字符串截取指定的内容
-不会影响原字符串，而是将截取到的内容返回
-参数:
1. 开始位置索引(包括开始位置)
2. 结束位置索引(不包括结束位置)
-如果省略第二个参数，则会截取后便所有的
-也可以传递一个负数作为参数，负数的话将会从后边计算
*/
str = "avcaghbsd";
result = str.slice(1,4);
result = str.slice(1,-1);
result = str.slice(1);
console.log(result);
/*
substring()
-可以用来截取一个字符串，跟slice()类似
-参数:
1. 开始截取位置的索引(包括开始位置)
2. 结束位置索引(不包括结束位置)
-不同的是这个方法不能接受负值作为参数,
如果传递了一个负值，则默认使用0
-而且他会自动调整参数的位置,如果第二个参数小于第一个参数
则自动交换
*/
result = str.substring(0,2);
console.log(result);
/*
substr()
-用来截取字符串
-参数:
1. 截取开始位置的索引
2. 截取的长度
-对原字符串没有影响
*/
str = "abcdefg";
result = str.substr(3,2);
console.log(result);
/*
split()
-可以将一个字符串拆分为一个数组
-参数:
-需要一个字符串作为参数，将会根据该字符串去拆分数组
-如果传递空串作为参数，则会将每个字符拆分为数组中的一个元素
*/
str = "abc,bcd,efg,hij";
result = str.split(",");
console.log(result);
/*
toUpperCase()
-把字符串转为大写并返回
*/
str = "abcdefg";
result = str.toUpperCase();
console.log(result);
/*
toLowerCase()
-把字符串转换为小写并返回
*/
str = "ABCDEFG";
result = str.toLowerCase();
console.log(result);
--------------------------------------------
正则表达式
/*
正则表达式
-admin
-admin@atguigu.com
-admin@.com
-邮件的规则:
1.前边可以是xxxxx乱七八糟
2.跟着一个@
3.后边可以使xxxxx乱七八糟
4....com获取其他的乱七八糟
-正则表达式用于定义一些字符串的规则
计算机可以根据正则表达式，来检查一个字符串是否符合规则
或者将字符串中符合规则的内容提取出来
*/
//创建正则表达式对象
/*
语法:
var 变量 = new RegExp("正则表达式","匹配模式");
使用typeof检查正则对象，会返回object
这个正则表达式可以来检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二个参数:
可以是
i: 忽略大小写
g: 全局匹配模式
*/
var reg = new RegExp("a","i");
var str = "a";
/*
正则表达式的方法:
test()
-使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
如果符合规则则返回true,否则返回false
*/
var result = reg.test(str);
//console.log(result);
console.log(reg.test("bcAbc"));
--------------------------------------
JS中字符串和正则相关的方法
var str = "1a2b3c4d5e6f7";
/*
split()
-把字符串拆分为数组
-方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
-这个方法即使不指定全局匹配，也会全部拆分
*/
//根据任意字母来将字符串拆分
var result = str.split(//);
console.log(result);
/*
search()
-可以搜索字符串中是否含有指定内容
-如果搜索到指定内容，则会返回第一次出现的索引
如果没有搜索到则会返回-1
-它可以接受一个正则表达式作为参数，然后会根据正则表达式检索字符串
-search()只会查找第一个，即使设置全局匹配也没用
*/
str = "hello abc helloaec afc";
//搜索字符串中是否含有abc或aec或afc
result = str.search(/ac/);
console.log(result);
/*
match()
-可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
-默认情况下我们的match()只会找到第一符合要求的内容，找到以后就会停止检索
我们可以设置正则表达式设置为全局匹配模式，这样就会匹配到所有的内容
-可以为一个正则表达式设置多个匹配模式，且顺序无所谓
-match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*/
str = "1a2b3c4d5e6f7A8B9C";
result = str.match(//gi);
console.log(result);
/*
replace()
-可以将字符串中指定内容替换为新的内容
-参数:
1. 被替换的内容,可以接受一个正则表达式作为参数
2. 新的内容
-默认只替换第一个
-空串默认删除
*/
str = "1a2a3a4a5e6f7A8B9C";
//result = str.replace(//gi,"@_@");
result = str.replace(//gi,"");
console.log(reuslt);
----------------------------------------
JS中正则表达式语法
//创建一个正则表达式检查一个字符串中是否含有aaa
/*
量词
-通过量词可以设置一个内容出现的次数
-量词只对它前面的一个内容起作用
-{n} 正好出现n次
-{m,n} 出现m到n次
-{m,} m次以上
- + 至少一个，相当于{1,}
- * 0个或多个，相当于{0,}
- ? 0个或1个，相当于{0,1}
*/
var reg = /a{3}/;
console.log(reg.test("aaabc"));
//ababab
reg = /(ab){3}/;
reg = /ab{3}c/;
reg = /b{3}/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
console.log(reg.test("abbc"));
/*
检查一个字符串中是否以a开头\
- ^ 表示开头
- $ 表示结尾
*/
reg = /^a/; //匹配开头a
reg = /a$/; //匹配结尾a
console.log(reg.test("abba"));
/*
如果在正则表达式中同时使用 ^ $ 则要求字符串必须完全符合正则表达式
*/
reg = /^a|a$/;
console.log(reg.test("abc"));
/*
检查一个字符串中是否含有 .
- . 表示匹配任意字符
在正则表达式中使用\作为转义字符
\. 表示 .
\\ 表示 \
注意:
使用构造函数时，由于参数是字符串，而\是字符串的转义字符，
如果要使用\则需要使用\\来代替
*/
var reg = /\./;
reg = /\\/
reg = new RegExp("\\.")
console.log(reg.test("abc"));
/*
\w: 任意字母、数字、_(下划线)
\W: 除了字母、数字、_(下划线) [^A-z0-9_]
\d: 任意的数字
\D: 除了数字 [^0-9]
\s: 空格
\S: 除了空格
\b: 单词边界
\B: 除了单词边界
*/
reg = /\w/;
console.log(reg.test("123"));
reg = /W/;
console.log(reg.test("!@(^$@"));
reg = /\d/;
console.log(reg.test("123"));
reg = /\D/;
console.log(reg.test("abc"));
reg = /\s/;
console.log(reg.test("abc "));
reg = /\S/;
console.log(reg.test(" "));
//创建一个正则表达式检查一个字符串中是否含有单词child
reg = /\bchild\b/;
console.log(reg.test("hello children"));
//接受用户输入
//var str = prompt("请输入您的用户名: ")
str = " hello "
//去除掉字符串开头的空格
var result = str.replace(/^\s*/g, "");
//去除掉字符串结尾的空格
var result = str.replace(/\s*$/g, "");
///^\s*|\s*$/g 匹配开头和结尾的空格
str = str.replace(/^\s+|\s+$/g,"");
console.log(str);
----------------------------------------
试一试:
1.做一个邮箱的正则表达式
提示: 电子邮件
hello @ abc.com.cn
任意字母数字下划线 . 任意字母数字下划线 @任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
**** Hidden Message *****
写在最后: JS到这里的基本语法已经完全学完了，目前正在学DOM本人不是特别想更新DOM的学习笔记，不是因为懒而是因为麻烦，学过JS的朋友应该知道JS的DOM操作涉及到HTML标签，两句话总结就是 找对象 搞对象，发表帖子会非常麻烦并且很长，所以暂时可能不会更新了~ 下次更新可能会等到学习VUE框架或者Python Django框架啦~感谢大家的陪伴!加油鸭！ 这么大方{:10_281:} 老板大气{:10_288:} 永恒的蓝色梦想 发表于 2021-2-19 15:04
这么大方
嘿嘿毕竟VIP不怎么缺，给新来鱼C的小伙伴们发发福利拉~ Rem20020111 发表于 2021-2-19 17:52
老板大气
{:10_257:} 学习 {:5_95:} 学习了，歇歇
学习了，歇歇 大大大佬 {:10_269:} 谢谢 蟹蟹 经过深思熟虑后，还是打算继续更新，只不过后续的样式会不同，会发布一些自己学到的用JS制作一些小网页功能的小教程，可能在最近更新~主要是对于JS DOM的使用，希望大家多多支持鸭~ 来观摩了 学习了
页:
[1]