目录
1.数组
1.常用API
1.toString()
作用:将数组转换为字符串,默认是将数组的元素使用，连接成字符串再进行返回
ex:
var arr = ['三国演义','水浒传','西游记'];
console.log(arr.toString());
结果:三国演义,水浒传,西游记
2.join(seperator)
作用:将数组的元素使用seperator字符串拼接并返回
var arr = ['三国演义','水浒传','西游记'];
var ret = arr.join('-');
ret:三国演义-水浒传-西游记
var ret = arr.join('');
ret:三国演义水浒传西游记
3.reverse()
作用:将数组进行反转
注意:该函数会改变现有数组的结构
练习:
1.随意从弹框中录入一个数字
2.将该数字转换为二进制，并输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 将指定的数字转换为二进制
//使用 join()拼接
function decode2Bin(){
var num = Number(prompt('请输入一个数字'));
// 声明一个数字，并存每次num%2的结结果
var arr = [];
do{
// 将num%2的结果保存进arr中
arr[arr.length] = num % 2;
// 将num/2转换为整数，再赋值给num
num=parseInt(num/2);
}while(num != 0);
// 将arr进行反转
arr.reverse();
// 将arr使用''拼接
var ret = arr.join('');
console.log('二进制为:'+ret);
}
</script>
<button onclick="decode2Bin()">转换为二进制</button>
</body>
</html>4.sort()
1.作用
对现有数组的内容进行排序
默认是按照元素的Unicode码进行排序的
2.注意
该函数会改变现有数组的内容
3.允许通过自定义的排序规则(排序函数)来指定数字的排序方式
语法:arr.sort(排序函数);
1.升序的排序函数
function sortAsc(a,b){
通过 返回值 表示a,b的大小关系
返回值为正数,说明a>b
要交换 a 和 b 的位置
返回值为0，说明a=b
两个数字不动
返回值为负数，说明啊a<b
两个数字不动
return a-b;
}
练习:
1.声明一个全局数组
2.网页中创建两按钮
1.升序:点击时，数组升序并打印输出
2.降序:点击时，数组降序并打印输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var arr = [121,35,245,4567,78,34,658,45,467,52,468,436];
function sortArr1(){
//使用匿名函数完成排序
arr.sort( function(a,b){
return a-b
} );
console.log(arr)
}
function sortArr2(){
arr.sort(function(a,b){
return b-a
})
console.log(arr)
}
</script>
<button onclick="sortArr1()">数组升序排序</button>
<button onclick="sortArr2()">数组降序排序</button>
</body>
</html>5.进出栈操作
1.push()
入栈(压栈),向数组的尾部添加新元素，并返回新数组的长度
等同于:arr[arr.length]="";
2.pop()
出栈(弹栈),删除并返回数组尾部的元素
3.unshift()
向数组头部添加新元素并返回新数组的 长度
4.shift()
删除并返回数组头部的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function atackOper(){
var arr = ['宋江','阎惜姣','鲁智深','李逵'];
//增加新元素到arr的尾部
var len = arr.push('张飞')
console.log("新数组："+arr);
console.log("新数组长度："+len);
//删除数组的最后一项
var elem = arr.pop();
console.log("删除后的数组是："+arr);
console.log("删除的元素是："+elem);
//增加新元素到arr的头部
var len1 = arr.unshift("吴用");
console.log("新数组："+arr);
console.log("新数组长度："+len1);
//删除数组的第一项
var len2 = arr.shift();
console.log("删除后的数组是："+arr);
console.log("删除的元素是："+len2);
}
</script>
<button onclick="atackOper()">数组的栈式操作</button>
</body>
</html>2.二维数组
1.声明二维数组
var names = [
["孙悟空","猪八戒","沙师弟"],
["潘金莲","马蓉","李小璐"]
];
获取 马蓉:
var uname = name[1][1];
2.字符串 - string
1.声明字符串
var str1 = "字符串1";
var str2 = String("字符串2");
var str3 = new String("字符串3");
2.length 属性
作用:返回当前字符串的长度
3.String API
1.大小写转换函数
1.toUpperCase()
返回字符串的完全大写形式
2.toLowerCase()
返回字符串的完全小写形式
练习:模拟验证码的生成和验证
1.创建一个数组，初始化若干数据(英文大小写，数字)
2.生成一个四位的随机验证码
验证码需要从数组中获取
Math.random():生成一个0-1(取不到)之间的随机小数
3.将随机生成的验证码字符串通过prompt()展示给用户
4.比较用户输入的字符与生成的验证码是否一致并给出提示
(忽略大小写)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
/**
* 验证码
* 练习点:toUpperCase(),toLowerCase()
*/
function checkCode(){
//1.创建一个数组保存用于生成验证码的字符们
var arr = ['a','b','c','d','e','F','G','H','I','J','K',0,1,2,3,4,5,6,7,8,9];
//2.生成四位随机验证码
var code = "";
for(var i=0;i<4;i++){
var r = parseInt(Math.random() * arr.length);
code += arr[r];
}
//3.通过prompt将code提示给用户看并接受用户输入的验证码
var input = prompt("请输入验证码:"+code);
//4.比较 input 与 code 是否相等(忽略大小写)
if(input.toUpperCase() == code.toUpperCase()){
alert("验证通过!");
}else{
alert("验证失败!");
}
}
</script>
<button onclick="checkCode()">字符串替换</button>
</body>
</html>2.去掉字符串两端空格
方法:trim()
注意:该方法不会改变现有字符串，是将去掉空格后的字符串进行返回
3.获取指定位置的字符
1.获取指定位置的字符
方式:charAt(index)
ex:
var str = "Hello World";
var s = str.charAt(3);
console.log(s); // l
2.获取指定位置字符的Unicode码
方法:charCodeAt(index)
ex:
var str = "Hello World";
var code = str.charCodeAt(6);
输出的是 W 的Unicode码
4.检索字符串
1.indexOf(value,fromIndex)
value:查找的子字符串
fromIndex:从哪个位置处开始查找，如果省略，则从第一个字符处开始查找
返回值:返回子字符串第一次出现的下标，如果没有查询到子字符串的话，则返回-1
var str = "Hello World";
var r = str.indexOf("l");
console.log(r); // 2
r = str.indexOf("l",7);
console.log(r); // 9
2.lastIndexOf(value,fromIndex)
作用:查找value最后一次出现的下标
注意:该函数的查找方式是从后向前找
ex:
var str = "Hello World";
var r = str.lastIndexOf("l");
console.log(r); // 9
r = str.lastIndexOf('l',7);
console.log(r); // 3
练习:
判断一个字符串是否满足邮箱的格式
1.字符串中必须包含 @ 符号
2.字符串中必须包含 . 符号
3.最后一个 . 必须出现在 @ 之后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function checkEmail(){
var email = prompt("请输入邮箱");
var atIndex = email.indexOf('@');
var dotIndex = email.lastIndexOf('.');
if (atIndex != -1 && dotIndex > atIndex){
console.log("满足");
}else{
console.log("不满足");
}
}
</script>
<button onclick="checkEmail()">验证</button>
</body>
</html>5.截取子字符串
函数:substring(start,end)
作用:返回从start到end-1之间的字符串，如果省略end的话，则截取到整个字符串的尾部
练习:
1.从指定邮箱中截取用户名
[email protected]
2.从指定邮箱中截取邮箱服务商
[email protected]
3.从身份证号中提取生日
220101160806086621
生日:1608年6月8日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
/**
* 截取邮箱用户名,服务商
* 练习点:substring()
*/
function testSubstring(){
var email = prompt("请输入邮箱:");
var uname = email.substring(0,email.indexOf("@"));
console.log("用户名:"+uname);
var server = email.substring(email.indexOf("@")+1,email.lastIndexOf("."));
console.log("服务商为:"+server);
}
/**
* 从身份证号中提取生日
* 练习点:substring()
*/
function getBirth(){
var idCard = "220101200507056621";
var year = idCard.substring(6,6+4);
var month = idCard.substring(10,10+2);
var day = idCard.substring(12,12+2);
console.log(year+"年"+month+"月"+day+"日");
}
</script>
<button onclick="checkCode(testSubstring())">获取邮箱信息</button>
<button onclick="checkCode(getBirth())">获取生日</button>
</body>
</html>6.分割字符串
作用:将具备特殊连接符的字符串拆成字符串数组
函数:split(seperator)
ex:
var str = "1001_5&1002_4&1053_1";
商品ID:1001
购买数量:5
商品ID:1002
购买数量:4
商品ID:1053
购买数量:1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 模拟拆分购物车内容
function testSplit(){
var str = "1001_5&1002_4&1053_1";
// 先按&将str拆分成一个数组
var gArray = str.split('&');
// 循环遍历aArray中的每套产品，再拆分
for (var i = 0;i < gArray.length;i++){
var good = gArray[i];
// 继续按照 _ 拆分 good
var dArray = good.split('_');
console.log('商品ID是'+dArray[0]);
console.log('商品数量是'+dArray[1]);
}
}
</script>
<button onclick="testSplit()">验证</button>
</body>
</html>7.模式匹配
1.作用
配合 子字符串 和 正则表达式完成字符串的查找，替换
2.正则表达式
语法：
/正则表达式/修饰符
修饰符：
i:ignorecase(忽略大小写)
g:global(全局匹配)
m:multiple(允许多行匹配)
ex:
1./\d{2,6}/g
2./你大爷/g
3.函数
1.replace(substr/regexp,replacement)
在一个字符串中，将substr或满足regexp格式的字符串替换成replacement
2.match(substr/regexp)
按照指定的子字符串或正则表达式进行匹配，并返回满足格式的子字符串数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function testReplace(){
var str = "一大爷,二大爷都是他大爷!!!";
// 声明一个正则，匹配'大爷',而且是全局的
var reg = /大爷/g;
// 统计共有多少个 大爷
var arr = str.match(reg);
// 将 大爷 替换成 **
var ret = str.replace(reg,'**');
console.log(ret);
console.log('共出现了'+ arr.length + '个大爷');
}
</script>
<button onclick="testReplace()">字符串替换</button>
</body>
</html> 4.练习
Microsoft is a big company,microsoft's color is red and has MICROSOFT logo like Microsoft
1.将所有的 microsoft(大小写)都替换成微软
2.统计 共替换了多少处 microsoft
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function testReplace(){
var str = "Microsoft is a big company,microsoft's color is red and has MICROSOFT logo like Microsoft";
var reg = /microsoft/ig;
var arr = str.match(reg);
var ret = str.replace(reg,'微软');
console.log(ret);
console.log('共出现了'+ arr.length + '微软');
}
</script>
<button onclick="testReplace()">字符串替换</button>
</body>
</html>3.RegExp 对象
1.创建RegExp对象
1.创建RegExp对象
1.var reg = /正则表达式/修饰符;
var reg = /你大爷/gim
2.var reg = new RegExp("匹配模式","修饰符");
var reg = new RegExp("^\\d{6}$");
2.RegExp 常用方法
1.test(string)
string:要验证的字符串
如果string满足reg对象的格式的话，则返回true,否则返回false
4.Math 对象
1.属性
Math.PI
Math.E
2.方法
1.三角函数
Math.sin()
Math.cos()
Math.tan()
2.计算函数
Math.sqrt(x) 开平方
Math.log(x) 求对数
Math.pow(x,y) 求 x 的 y 次方
3.数值函数
Math.abs(x) 获取 x 的绝对值
Math.max(a,b,c,d) 获取最大值
Math.min(a,b,c,d) 获取最小值
Math.random() 生成随机数(0,1)
Math.round(x) 将x四舍五入到整数
5.Date 对象
1.作用
获取客户端的日期时间
2.创建Date对象
1.获取当前日期对象
var date = new Date();
2.初始化自定义日期时间对象
var date = new Date("2018-8-14 17:29:35");
2.方法
1.读取或设置当前时间的毫秒数
1.getTime()
返回自1970-1-1 00:00:00 到 date 所经过的毫秒数
2.setTime()
根据给定的毫秒数，结合1970-1-1计算日期时间
2.读取时间分量
1.getFullYear()
获取当前时间对象的年份
2.getYear()
返回自1900年以来到当前日期对象所经过的年数
3.getMonth()
返回0~11的数字来表示 1~12 月
4.getDate()
返回date对象所对应的日
5.getDay()
返回date对象所对应的是星期?
返回 0-6 表示星期日-星期六
6.获取时间()
getHours():获取小时
getMinutes():获取分钟
getSeconds():获取秒
getMilliseconds():获取毫秒
7.转换为字符串
1.toString()
2.toLocaleString() 将日期对象转换成本地字符串
3.toLocaleTimeString() 转换本地时间字符串(时分秒)
4.toLocaleDateString() 转换成本地日期字符串(年月日)