1.数组对象
定义方式
/* 定义方式 */
var arr=new Array(2,3,9);//方式1
var arr1=[7,8,"10"];//方式2
js数组的特点
1.可以存储任意类型元素
2.长度可变
方法
concat() 连接两个或更多的数组,并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的数组长度。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 跟push方法相反
splice() 删除元素,并向数组添加新元素。
toString() 把数组转换为字符串,并返回结果,会将逗号也转为字符串
reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序 从小到大
* 默认排序方式:字典顺序
* 要想实现自己的比较方式,需要传入比较器方法对
*
案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 定义方式 */
var arr1=new Array(29,45,100,9,23,34,29,10,1);//方式1
var arr2=[7,8,"10"];//方式2 数组可以存储任意类型数据
//1.concat()连接两个或更多的数组并返回
var arr=arr1.concat(arr2);
alert(arr);
//2.join() 把数组的所有元素拼接成字符串,并且可以使用拼接符来连接
var arr3=arr1.join("");
alert(arr3);
//3.pop()删除并返回数组的最后一个元素 shift() 删除并返回数组中的第一个元素
var last=arr1.pop()
alert(last);
//4.push() 向数组的末尾添加一个或更多元素,并返回新的长度
var length=arr2.push("qwe","天")
alert(length);
//5.reverse()颠倒数组中元素的顺序
arr1.reverse()
alert(arr1);
//6.slice()从数组中截取元素
var arr5=arr1.slice(0,3)
alert(arr5)
//7.sort()对元素进行排序
arr1.sort()
alert(arr1)/* 注意: 默认的排序方式并不是按照元素大小来排列 而是按照字典顺序排列的*/
//使用比较器来进行排序
function test(a,b){
return a-b;
}
arr1.sort(test);/* 传入这个比较器 */
alert(arr1);
</script>
</head>
<body>
</body>
</html>
ES6中新增的方法
filter() 检测数值元素,并返回符合条件所有元素的数组。
every() 检测数值元素的每个元素是否都符合条件。
案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.filter() 返回数组中大于18的所有元素
var arr=[12,56,19,7,17,2,30];
var arr1=arr.filter(function(ele){
return ele>18;
});
alert(arr1);
//2.检测数组中的你每个元素是否都符合条件
function test(ele){
return ele>15;
}
var flag=arr.every(test)
alert(flag);//false
</script>
</head>
<body>
</body>
</html>
2.正则表达式
(1)语法
^ 开头 $ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除'\n'外)
\b 是正则表达式规定的一个特殊代码,也叫元字符,\b代表着单词的开头或结尾,也就是单词的分界处。
(2)基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//创建RegExp对象的语法 可以包含属性i,g
//i表示忽略大小写 g表示指定全局匹配
var regx=new RegExp("^[A-Z0-9]+$","i");//方式1
var str="hello11123";
var flag=regx.test(str);
alert(flag);//true
var regx=/^[a-z0-9]+&/;//方式2
var flag1=regx.test(str)
alert(flag1);
//不加^和$时,就不会去整体匹配这个字符串,一旦字符串里面的某个字符符合,就会返回true
var regx3=new RegExp("[A-Z0-9]+");
var str2 = "hello123";
var f= regx3.test(str2);
alert(f);//true
</script>
</head>
<body>
</body>
</html>
(3)字符串中的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//查找出三个字符组成的单词 java中是使用模式器和匹配器实现的
var str = "da jia hao hao xue xi a haha HAO";
var regx=/\b[a-z]{3}\b/gi;
var line='';
//1.js中的exec()方法能够把符合正则的字符串截取出来 需要加上全文检索g
while((line=regx.exec(str))!=null){
document.write(line+"<br/>")
}
//字符串中关于正则的使用
var str="a=ccc=dd=qw=112";
//2.spilt()方法可以字符串分割为字符串数组
var arr=str.split(/=/);
document.write(arr);
</script>
</head>
<body>
</body>
</html>
3.BOM
概述和特点
- 概念:BOM,Browser Object ,Model浏览器对象模型,是将浏览器的各个部分封装为对象。
- 特点:
BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。
组成
1.Window:窗口对象、
(1)使用方式
window.方法名(); window 可以省略
(2)与弹出有关的方法
/* 实际使用过程中我们都会将window省略 */
//1.显示带有一段消息和一个确认按钮的警告
alert("你好,这个世界");
//2.显示带有一段消息以及确认按钮和取消按钮的对话框
confirm("Java全栈工程师");
//3.显示可提示用户输入的对话框
prompt("请输入地址","123")//第二个参数为默认值
(3)与定时器有关的方法
//1.执行一次的定时器setTimeout
var timeid=setTimeout(function() {
alert("执行一次")//可以设置延迟多少毫秒执行 返回值是定时器的id
}, 2000);
//取消定时器 根据定时器的id来取消
clearTimeout(timeid);
//2.循环定时器 setInterval()
var timeid1=setInterval(function(){//间隔2000毫秒 重复执行
document.write("循环计数器"+"<br>")
},2000)
//取消循环定时器
clearInterval(timeid1);
(4)与打开关闭有关的办法
//1.open()打开新窗口 返回新打开窗口的window引用
var open1=window.open("http://www.baidu.com");
//2.关闭窗口
open1.close()
2.location:地址栏对象
属性和方法
port:端口
hostname:ip
protocal:协议
href:返回完整的url,并且可以设置地址栏里面的内容,可以利用href属性进行页面的跳转。
reload():刷新页面
案例演示1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var port=location.port;
document.write(port+"<br/>");/* 端口 */
var hostname=location.hostname;
document.write(hostname+"<br/>");/* ip */
var protocal=location.protocol
document.write(protocal+"<br/>");/* 协议 */
var href=location.href
document.write(href+"<br/>");
</script>
</head>
<body>
</body>
</html>
案例演示2:利用href进行页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test() {
if (confirm("你打开的网站有危险?确认进入?")) {
location.href = "https://www.baidu.com";
}
}
function reload() {
location.reload();
}
</script>
</head>
<body>
<a href="javascript:void(test())">进入百度</a>
<a href="javascript:void(reload())">刷新</a>
</body>
</html>
3.history:历史记录对象
history对象保存了当前窗口访问过的所有页面网址
方法
history.back() 回退到上个页面 相当于浏览器的后退按钮
histroy.forward() 请进一个页面 相当于浏览器的前进按钮
history.go(-n/+n): 前进或后退n个页面, 根据传递整数参数的不同,跳转页面也不同,
histroy.go(1) 前进一个页面
histroy.go(-1) 后退一个页面
history.go(n) 前进n个页面
history.go(-n) 后退n个页面