Web基础——JavaScript的内置对象
目录
-
-
- 1.String 对象
- 2.Number对象
- 3.Date 对象
- 4.使用第三方的工具类来处理日期
- 5.Math 对象
- 6.全局函数
- 7.数组对象
- 8.数组对象常用方法
- 9.ES6中数组对象新增的方法
- 10.正则表达式对象
- 11.JS中正则表达式注意的细节
- 12.根据正则截取字符串
- 13.字符串对象关于正则的方法
- 14.Boolean对象
-
1.String 对象
1. 定义方式1： String str=new String("abckdddd");
定义方式2：var str="我爱你爱你";
2. 属性：length: 字符串的长度
3. 方法：
charAt() 返回在指定位置的字符。
例子：var v="abcd";
var a=v.charAt(2);
concat() 连接字符串。
例子：var v="ab"; var a="cd";
var z=v.concat(a);
indexOf() 根据字符检索此符在字符串中的索引。
例子：var v="abcde";
var z=v.indexOf("c");
lastIndexOf() 从后向前搜索字符串。
substring() 提取字符串中两个指定的索引号之间的字符。
var v="abcde";
var z=v.substring(0,3); 含头不含尾
toLowerCase() 把字符串转换为小写。
例子：
var str = "Hello World!";
document.write(str.toLocaleLowerCase());
toUpperCase() 把字符串转换为大写。
replace() 替换字符串。
例子：
var v="abceaaaa";
var z=v.replace("a","h"); 参1：被替换的字符/或字符串 参数2：替换成哪个字符/或字符串
split() 把字符串分割为字符串数组。
例子：
var v="a#b#c#d";
var z=v.split("#");
trim():去除字符串两端的空格
例子：
var v=" abcd ";
var z=v.trim();
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
// String 对象
// String 对象用于处理文本（字符串）。
//创建的对象的方式
//方式1
//当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
var str=new String("hello");
//方式2
//当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
var s=String("abc");
//方式3
var ss="abc"
// instanceof 判断一个引用是不是该类型的一个引用
alert(str instanceof String); //true
alert(s instanceof String); //false
//查看原始数据类型
alert(typeof str); //object
alert(typeof s); //string
script>
head>
<body>
body>
html>
2.Number对象
定义方式： var num=new Number(555.6666);
var num1=Number(5694);
方法：
toString() 把数字类型转成字符串类型
例子：
var v=Number(695444);
var z=v.toString();
toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位
例子：
var v=Number(3.5999999999999);
var z=v.toPrecision(4);
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//Number 对象
//Number 对象是原始数值的包装对象。
//类似于Java中的 Integer Double 包装类
//创建 Number 对象的语法：
//当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象
var myNum=new Number(1000);
//如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。
var myNum2=Number("3.25");
alert(myNum instanceof Number); //true
alert(myNum2 instanceof Number); //false
alert(typeof myNum); //object
alert(typeof myNum2); //number
//静态属性
//MAX_VALUE 可表示的最大的数。 、
//MIN_VALUE 可表示的最小的数。
var max=Number.MAX_VALUE;
var min=Number.MIN_VALUE;
//方法
var v=new Number(3.58585858585);
//保留有效的五位数字，包含整数部分在内,返回的是 字符串类型的数字
//var strNum=v.toPrecision(5);
//alert(strNum);
//toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
var ss=v.toFixed(5);
alert(ss);
//把字符串的数字，转成数字
var yy="100";
var n=yy*1;
var n2=+yy;
var n3=Number(yy);
script>
head>
<body>
body>
html>
3.Date 对象
定义方式： var myDate=new Date();
方法：
getTime() 获取从1970-01-01 00:00：00 到当前的毫秒值
toLocaleString() 将时间转化成本地格式 利于阅读
例子
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
// Date 对象
// Date 对象用于处理日期和时间。
// 创建 Date 对象的语法：
// var myDate=new Date()
//注释：Date 对象会自动把当前日期和时间保存为其初始值。
var myDate=new Date();
var year=myDate.getFullYear();
//从0开始数月份
var month=myDate.getMonth();
//获取的是星期
var day=myDate.getDay();
//获取日
var d=myDate.getDate();
//获取时
var hour=myDate.getHours()
var minu=myDate.getMinutes();
var sec=myDate.getSeconds();
//getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
var time=myDate.getTime();
alert(year)
alert(month);
alert(day)
alert(d)
alert(hour);
alert(minu);
alert(sec)
alert(time)
// 2022-01-05 10:27:30 自己单独获取出来拼接成自己要的的格式
//获取当前日期字符串 2022/1/5 上午10:32:30
var localTime=myDate.toLocaleString();
document.write(localTime);
//alert(localTime);
script>
head>
<body>
body>
html>
4.使用第三方的工具类来处理日期
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/moment.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//格式化现在的日期
var dateStr = moment().format('YYYY-MM-DD HH:mm:ss');
alert(dateStr);
//把指定的毫秒值毫秒值，格式化成日期字符串。
var time = new Date().getTime(); //获取当前的毫秒值
var dateStr2 = moment(time).format('YYYY-MM-DD HH:mm:ss');
document.write(""
+ dateStr2 + "");
//把日期字符串转换成毫秒值 unix()
var a = moment('2019-08-22 12:30:23').unix()
//1566448223
alert(a);
script>
head>
<body>
body>
html>
5.Math 对象
特点： 该对象不需要创建 直接对象名点上方法
Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//Math 对象不用new 直接使用对象名Math来调用方法接口
/* Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整 */
// Math.random();
// 生成 1-100 之间的随机整数
//生成 6位随机验证码
script>
head>
<body>
body>
html>
6.全局函数
functions
全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。
全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//全局函数，直接使用
//==判别不出来NaN
//判断是不是NaN用方法判断
var b=isNaN(NaN);
alert(b);
var b1=isNaN("abc"*1);
alert(b1);
//把字符串的数字转换成数字
//把字符串的数字，转成数字
var yy="100";
var n=yy*1;
var n2=+yy;
var n3=Number(yy);
//使用全局函数来转换
//从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
var num=parseInt("100abc");
alert(num);
var num2=parseFloat("3.25abc");
alert(num2);
script>
head>
<body>
body>
html>
7.数组对象
定义方式： var arr=new Array(2,6,8);
var arr1=[6,"a",6];
属性： length 数组的长度
特点：
在js中数组可以存储任意类型元素
在js中数组的长度可变
方法：
concat() 连接两个或更多的数组，并返回结果。
例子：var v=[1,2]; var v2=[3,4];
var z=v.concat(v2);
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var v=[1,2,3];
var z=v.join("-"); 给数组元素之间添加分隔符
pop() 删除并返回数组的最后一个元素
例子：
var arr = [1, 6, 20];
alert(arr.pop());
push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。
例子：var arr = [1, 6, 20];
alert(arr.push(28));
reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序 从小到大
默认排序方式：字典顺序
要想实现自己的比较方式，需要传入比较器方法对象
例子：var arr = [1, 6, 20, 100];
alert(arr.sort(bijiao));
function bijiao(a, b) {
if(a > b) {
return 1;
} else if(a == b) {
return 0;
} else {
return -1;
}
//return a-b;
}
遍历数组：
forEach() 数组每个元素都执行一次回调函数。
Array 对象创建、遍历
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//Array 对象
//Array 对象用于在单个的变量中存储多个值。类似于我们Java中的ArrayList
//创建 Array 对象的语法：
//new Array();
//new Array(size);
//new Array(element0, element1, ..., elementn);
//1. JS中的数组对象，他的长度是可变，没有角标越界的异常。
//2.JS中的数组，可以存储多种数据类型的元素。
var arr=new Array();
//通过角标来存元素
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
arr[4]=50;
var ele=arr[arr.length-1];
alert(ele);
//获取不到就是 undefined 不会报角标越界
var ele2=arr[10];
alert(ele2);
//定义数组的方式2 可以定义数组的长度，但是你超过了也不报错
var arr2=new Array(3);
arr2[0]=20;
arr2[1]=30;
arr2[2]=40;
arr2[3]=200;
alert(arr2[3]);
//方式3：定义数组的时候，直接存储元素
var arr3=new Array(10,false,"abc",304,3.25);
//方式4：简写方式 注意是中括号
var arr4=[10,false,"abc",304,3.25];
//数组的遍历
for(let i=0;i<arr4.length;i++){
console.log(arr4[i])
}
script>
head>
<body>
body>
html>
8.数组对象常用方法
concat() 连接两个或更多的数组，并返回连接好的新数组。
join() 把数组的所有元素拼接成一个字符串。
pop() 删除并返回数组的最后一个元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素。
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
var arr=[10,20,30,40,50,60];
var arr2=[100,200,300,400,500,600];
//concat() 连接两个或更多的数组，并返回连接好的新数组。
var newArr=arr.concat(arr2,arr2);
console.log(newArr);
//join() 把数组的所有元素拼接成一个字符串。"10-20-30"
var str=arr.join("-"); //10-20-30-40-50-60
console.log(str);
//不要分隔符，就给个空串
var str2=arr.join("");
console.log(str2);
//pop() 删除并返回数组的最后一个元素
var arr3=[100,200,300,400,500,600];
var ele=arr3.pop();
ele=arr3.pop();
ele=arr3.pop();
ele=arr3.pop();
console.log(arr3);
console.log(ele);
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var arr4=[]; //定义一个空数组
arr[0]=10; //使用角标存元素
arr4.push(20);
arr4.push(100,200,300);
console.log(arr4);
//reverse() 颠倒数组中元素的顺序。
console.log(arr4.reverse());
// shift() 删除并返回数组的第一个元素
var arr5=[100,200,300,400,500,600];
var ele2=arr5.shift();
ele2=arr5.shift();
ele2=arr5.shift();
console.log(ele2);
console.log(arr5);
script>
head>
<body>
body>
html>
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//slice() 从某个已有的数组返回选定的元素
var arr = [100, 200, 300, 400, 500, 600];
//根据起始索引和终止索引，截取原数组一部分元素，到新数组中，含头不含尾。
var newArr = arr.slice(0, 3);
console.log(newArr);
//sort() 对数组的元素进行排序
var arr2 = [10, 2, 38, 4, 50, 600];
//arr2.sort(); //默认按照元素的字典顺序来拍的。
//如果我们要按照元素的大小来排序，需要传入比较函数
var bjq=function(a,b){
return a-b; //按照返回值的 正 负 0 进行排序
}
arr2.sort(bjq);
alert(arr2);
script>
head>
<body>
body>
html>
pop() 删除并返回数组的最后一个元素
shift() 删除并返回数组的第一个元素
splice() 删除元素，并向数组添加新元素。
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//pop() 删除并返回数组的最后一个元素
//shift() 删除并返回数组的第一个元素
//splice() 删除元素，并向数组添加新元素。
var arr = [100, 200, 300, 400, 500, 600];
//从2索引处开始，删除1个元素
arr.splice(2,1);
console.log(arr);
var arr2 = [100, 200, 300, 400, 500, 600];
//从2索引处开始，删除2个元素
arr2.splice(2,2);
console.log(arr2);
//替换功能
var arr3 = [100, 200, 300, 400, 500, 600];
//从2索引开始删除一个元素，在插入进去一个i7000
arr3.splice(2,1,7000);
console.log(arr3)
//替换功能
var arr4 = [100, 200, 300, 400, 500, 600];
//从2索引开始删除一个元素，在插入进去多个 元素 7000 8000 9000
arr4.splice(2,1,7000,8000,9000);
console.log(arr4)
script>
head>
<body>
body>
html>
9.ES6中数组对象新增的方法
every() 检测数值元素的每个元素是否都符合条件。
find() 返回符合传入测试（函数）条件的数组元素。
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
indexOf() 搜索数组中的元素，并返回它所在的位置。
查找该元素第一次出现的索引，如果找不到返回 -1
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//es6 数组新增额方法，可以参考下面网址
//https://www.runoob.com/jsref/jsref-obj-array.html
//every() 检测数值元素的每个元素是否都符合条件。
//判断数组中的元素，是不是都是偶数
var arr = [10, 20, 30, 50, 50];
var b = arr.every(function(ele) {
return ele % 2 == 0;
});
alert(b);
//filter() 检测数值元素，并返回符合条件所有元素的数组。
//把数组中所有的偶数过滤出来,放到新数组中
var arr2 = [10, 20, 30, 50, 60, 4, 3, 1, 7, 8, 11, 13, 52];
var newArr=arr2.filter(function(ele){
return ele%2==0; //true 表示符合条件，false表示不符合
});
alert(newArr);
//find() 返回符合传入测试（函数）条件的数组元素。
//findIndex() 返回符合传入测试（函数）条件的数组元素索引。
//获取数组中第一个符合条件的元素
var arr3 = ["张三","李四","王五","王老虎","王百万"];
//获取数组中王开头的第一个元素
var name=arr3.find(function(ele){
return ele.startsWith('王');
});
alert(name);
//遍历数组
//forEach() 数组每个元素都执行一次回调函数。
arr2.forEach(function(ele,index){
console.log(index,ele);
})
//indexOf() 搜索数组中的元素，并返回它所在的位置。
var arr3 = [10, 10,20, 30, 50, 50];
//查找该元素第一次出现的索引，如果找不到返回 -1
var index=arr3.indexOf(100);
alert(index);
script>
head>
<body>
body>
html>
isArray() 判断是不是数组对象
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()把数组中的元素累加起来 total 上次累加的结果，num 数组的元素
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
var arr = [10, 10,20, 30, 50, 50];
//判断是不是数组对象
var b=Array.isArray(arr);
alert(b);
alert(arr instanceof Array);
//map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
var arr2 = ["abc","hello","index","hehe","haha"];
//把数组中的元素变为大写,放到一个新数组中
var newArr=arr2.map(function(ele){
return ele.toUpperCase();
});
console.log(newArr);
var numbers = [65, 44, 12, 4,10];
//把数组中的元素累加起来 total 上次累加的结果，num 数组的元素
var sum=numbers.reduce(function(total, num,index,arr) {
console.log("元素索引",index)
return total + num;
},10);
alert(sum);
script>
head>
<body>
body>
html>
10.正则表达式对象
RegExp(**):正则表达式对象
正则表达式
位置：
^ 开头
$ 结尾
次数：
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个，最多m个
通配符：
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
组合：
[a-z]
[0-9]
等
组：
(正则) 匹配括号中正则表达式对应的结果，并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果，但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具（RegExp类与相关方法）
创建：
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明：
正则表达式：
参见上面的规则
标志：
g （全文查找出现的所有 pattern）
i （忽略大小写）
方法：
Regexp.test( str )
String.replace( regex, str )
正则表达式对象常用的方法：
test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。
模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
// RegExp 对象
// RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
//1.直接量语法
// /pattern/attributes
//2.创建 RegExp 对象的语法：
// new RegExp(pattern, attributes);
//创建 RegExp 对象的语法： "i" 可选参数，表示不区分大小写
var regx=new RegExp("[a-b]+","i");
//匹配的方法
var flag=regx.test("ABC");
alert(flag);
//1.直接量语法，定义正则表达式对象 常用 /正则表达式/可选模式
var regx2=/[a-b]+/i ;
var flag2=regx2.test("ABC");
alert(flag2);
script>
head>
<body>
body>
html>
11.JS中正则表达式注意的细节
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
var str = "hello123";
//^开头 $结尾 这里要加上 开头和结尾，防止部分匹配
var reg = /^[A-Z0-9]+$/;
alert("匹配吗？" + reg.test(str));
script>
head>
<body>
body>
html>
12.根据正则截取字符串
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
// exec() 根据正则表达式去查找字符串符合规则的内容。
//查找出三个字符组成的单词。
var str = "da jia YAO hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi; //g 全文匹配，i 不区分大小写
var s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
/* var line = "";
while ((line = reg.exec(str)) != null) {
document.write(line + "
")
} */
script>
head>
<body>
body>
html>
13.字符串对象关于正则的方法
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
var str="aaa=bbb=ccc=ddd=eee=AAA";//aaabbbccc
//g 全文匹配
var newStr=str.replace(/=/g,""); //根据正则替换，注意全文匹配
alert(newStr);
script>
head>
<body>
body>
html>
14.Boolean对象
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
/* Boolean 对象
Boolean 对象表示两个值："true" 或 "false"。
创建 Boolean 对象的语法：
new Boolean(value); //构造函数
Boolean(value); */ var flag=Boolean("true");
if(flag){
alert(flag);
}
script>
head>
<body>
body>
html>