12.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script type="text/javascript">
// 容器 装东西
// python 叫 列表list
// js 叫 数组 Array 对象 属性和方法 数组得 属性是 索引和length; 其他都是方法;
/*
数组得创建
1.字面量方式创建（推荐大家使用这种方式创建数组 简单粗暴）
2.使用构造函数得方式创建，使用new关键词对构造函数进行创建对象
*/
//1.
var colors = ['red','color','yellow'];
console.log(colors);
// 空数组
var emptyArray = [];
console.log(emptyArray);
//2.
var colors2 = new Array(); // 空数组
console.log(colors2);
var colors3 = new Array('white','red','orange');
console.log(colors3);
//对数组赋值
var arr = [];
arr[0] = 123;
arr[1] = 'abc';
arr[2] = '哈哈哈';
console.log(arr);
// 通过下标取到相应得值
console.log(arr[2]);
console.log(arr.length);
//for 循环遍历 arr 数组得遍历
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>
</body>
</html>
13.数组常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
</head>
<body>
<script type="text/javascript">
/*
网站：学习网站
开发者网络 https://developer.mozilla.org/zh-CN/
*/
//1.数组得合并 concat
var north = ['北京','天津','河北'];
var south = ['深圳','上海','湖南'];
var newArr = north.concat(south);
console.log(newArr);
//2.将数组转换成字符串
var score = [98,97,66,100];
//toString() 直接转换为字符串 每个元素使用逗号隔开
var str = score.toString();
console.log(str);
//join()方法 将数组中得元素使用指定得字符串连接起来，形成一个新得zifuchuan
var str2 = score.join('|');
console.log(str2);
//3.查找下标
//indexOf() 正向查找 如果查找得值 不在数组中 返回-1
var index = score.indexOf(101);
console.log(index);
//方向查找
var lastIndex = score.lastIndexOf(66);
console.log(lastIndex);
//4.数组得排序
//反转数组
var names = ['alice','alex','egon','xiaoma'];
var reverseNames = names.reverse();
console.log(reverseNames);
console.log(':',names);
//sort() 按照26个字母排序得 数组
var enames = names.sort();
console.log(enames);
console.log(',,,',names);
//5.移除元素和添加元素
//shift() 移除第一个元素 返回第一个元素
var firstName = names.shift();
console.log(firstName);
console.log(names);
console.log(reverseNames);
console.log(enames);
//unshift() 向数组得开头添加一个多个元素，并返回新的长度
var newLength = names.unshift('shanshan','haha');
console.log(newLength);
console.log(names);
//push() pop()
//push() 向数组得末尾添加一个或者多个元素，并返回新的长度
var newNames = names.push('老村长','哈哈');
console.log(newNames);
console.log(names);
//pop() 返回被删除得元素，删除数组得最后一个元素
var a = names.pop();
console.log(a);
console.log(names);
//练习 对字符串反转
var str11 = 'hello luffy';
console.log(str11.split('').reverse().join(''));
</script>
</body>
</html>
14.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
//函数得声明
/*
python:函数得应用
def add():
pass
调用
add()
*/
//1.js 中函数得声明
function add() {
// alert('函数被调用了')
}
//调用
add();
//2.带参数 形参 实参
function add2(a,b) {
// alert(a+b);
}
add2(3,4);
//3.函数有返回值
function add3(x,y) {
return x+y;
}
var sum = add3(4,5);
alert(sum);
</script>
</body>
</html>
15.Object 构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object构造函数</title>
</head>
<body>
<script type="text/javascript">
//对象得创建
//1.字面量方式创建 推荐使用这种方式 简单 直观
//key:value
var stu = {
name:'alex',
age:22,
fav:'鸡汤'
};
console.log(stu);
console.log(window);
// 点语法 包括get 方法 set 方法
var n = stu.name; // get
console.log(n);
console.log(stu.name);
stu.age = 34; // set
console.log(stu.age);
//2.使用Object() 创建
function add() {
}
add();
// Object() 构造函数 1.首字母大写 碰见构造函数 要想创建对象new
var obj = new Object();
obj.name = 'xiaoma';
console.log(obj);
//使用构造函数得方式创建对象
//---------构造函数---------
//1.函数名首字母要大写
//2.构造函数不需要return
//3.为对象添加成员变量 this.name = 'alex'
var Stu = function () {
this.name = 'alex';
this.age = 18;
this.fav = function () {
console.log('吃饭饭')
}
};
//创建对象
var s = new Stu();
console.log(s);
var s1 = new Stu();
console.log(s1);
//弊端：每次 new 一个对象，里面得成员变量和方法都一样；
//推荐大家使用的构造函数的方式：
function Animal() {
this.name = 'doudou';
this.age = 12;
// this.fav = function () {
// console.log(this.age)
// }
}
Animal.prototype.showname = function () {
//执行相应的操作
alert(this.name)
};
Animal.prototype.showname2 = function () {
alert(this.age)
};
var a = new Animal();
a.showname();
a.showname2();
</script>
</body>
</html>
16.对象补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script type="text/javascript">
var json1 = {
name : '张三',
age : '李四',
fav : '唱歌'
}
var str1 = '{"name": "Alex", "age": 18}';
//将JSON转化为JSON字符串
var jsonStr1 = JSON.stringify(json1)
console.log(jsonStr1)
//将json字符串转化为JSON
var json2 = JSON.parse(str1);
console.log(json2)
</script>
</html>
17.String Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String Number</title>
</head>
<body>
<script type="text/javascript">
//内置对象
//String 字符串对象
var str = 'hello alex';
console.log(str.length);
// 变大写
var bigStr = str.toUpperCase();
console.log(bigStr);
console.log(str);
// 变小写
console.log('small:',bigStr.toLowerCase());
//切割 第一个参数 以什么样的字符串切割，第二个返回数组的最大长度； var newArr = str.split(' ',1);
var newArr = str.split(' '); // var newArr = str.split(' ',1);
console.log(newArr);
//提取 从哪到哪 >=2 <6 左闭右开 会返回一个新的字符串
console.log(str.substring(2,6));
//Number
//1.将number 转换成zifuchuan
var num = 132.325643;
var numStr = num.toString();
console.log(numStr);
console.log(typeof numStr);
//2.四舍五入
var newNum = num.toFixed(2);
console.log(newNum);
</script>
</body>
</html>
18.Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript">
//W3C 文档 js chm 手册
// http://www.w3school.com.cn/
//http://www.w3school.com.cn/jsref/jsref_obj_date.asp
//创建日期对象
var myDate = new Date();
//获取一个月中的某一天
console.log(myDate.getDate());
//获取当天的日期
console.log(Date());
//获取一年中的某一个月
console.log(myDate.getMonth()); //month+1
console.log(myDate.getDate());
console.log(myDate.getFullYear());
</script>
</body>
</html>
19.Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math</title>
</head>
<body>
<script type="text/javascript">
//Math http://www.w3school.com.cn/jsref/jsref_obj_math.asp
var x = 1.8;
//天花板函数 大于等于x 并且与它最接近的整数
var a = Math.ceil(x);
console.log(a);
//地板函数 小于等于x 并且与它最接近的整数
console.log(Math.floor(x));
//求两个数的最大值，最小值
console.log(Math.max(2.8,5));
console.log(Math.min(2.8,5));
//random 随机数 0-1 之间的随机数 包含0 不包含1
var ran = Math.random();
console.log(ran);
//100-200之间的随机数
var c = 100 + Math.random()*100;
console.log(c);
//min - max 之间的随机数 min + Math.random()*(max-min)
// 5-15之间的数
var d = 5 + Math.random()*(15-5);
console.log(d);
</script>
</body>
</html>
20.定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script type="text/javascript">
//setInterval() 一直操作 setTimeout() 执行一次
var n = 0;
var time = null;
time = setInterval(function () {
n++;
console.log(n)
},1000);
//setTimeout(code,1000)
var tt=setTimeout(function () {
console.log(time);
window.clearInterval(time);
},5000)
</script>
</body>
</html>
21.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
</body>
<script type="text/javascript">
//RegExp对象
//创建正则对象方式1
//参数1 正则表达式（不能有空格）
//参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧）
var str = 'hello World';
var reg1 = new RegExp('e','ig');
console.log(reg1)
//2.字面量方式创建
var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配
//正则对象提供的检索方式
//test() 检测字符串中是否包含定义字符模式，返回布尔
//要检索的字符在字符串str中 返回true
console.log(reg2.test(str));
//2.2 exec() 具体执行匹配，返回数组
console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标
console.log(reg2.exec(str)); //["o", index: 7, input: "hello world"]
console.log(reg2.lastIndex); //2
//3.常用方法
//match
var reg3 = /d/g;
console.log(str.match(reg3))
//2.replace替换： str.replace(被替换的，替换的)
console.log(str.replace(reg3,'*'));
//3.search()
console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标
//4.split()
console.log(str.split(reg3));
</script>
</html>
22.元字符
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>元字符</title>
<script>
window.onload = function (){
//元字符
//1.单个字符和数字
//1 . 匹配除换行符以为的任意字符
var str = "oweb";
var reg = /./g;
console.log(reg.exec(str));
var str = "www/baidu/com";
var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\
console.log(reg.exec(str));
//2. [] 匹配[]里面的任意一个字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字
console.log(reg1.exec(str1));
var str2 = "1s34";
var reg2 = /[0-9][0-9][0-9]/g;
console.log(reg2.exec(str2));
//3. [^] 所有不在这个范围内的字符
var str3 = "abd";
var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符
console.log(reg3.exec(str3));
//4. \
var str4 = "web";
var reg4 = /\d/g; //匹配数字
var reg5 = /\D/g; //非数字
console.log(reg4.exec(str4)); //null
console.log(reg5.exec(str4)); //w
var reg6 = /\w/g; //匹配数字 字母 下划线_
var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符
console.log(reg6.exec(str4)); //w
console.log(reg7.exec(str4)); //null
var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str4)); //null
console.log(reg9.exec(str4)); //w
//5 锚字符 ^以什么开头 $以什么结尾
var str = "www.";
var reg10 = /^www/g; // ^字符
console.log(reg10.exec(str));
var reg11 = /www\.$/g; //字符$
console.log(reg11.exec(str));
//重复的字符
//? 匹配前面的字符0个或一个 ，
var strs = "webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs));
//* 匹配0个或任意多个字符 尽可能多的匹配
var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个
console.log(reg13.exec(strs));
//+ 至少匹配一次
var reg14 = /\d+/g;
console.log(reg14.exec(strs));
//{4}
var stra = "11274567800";
var rega = /^1\d{10}$/g; //匹配连续的四个数字
console.log(rega.exec(stra));
//{1,4} 最少一个最多4个
var strb = "edg";
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb));
//|| 竖线 或者
var strc = "www.google"; //baidu google ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc));
//() 分组
var strc = "www.google"; //baidu google ujiuye
var regc = /www.(baidu)|(google)|(ujiuye)/g;
console.log(regc.exec(strc));
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
var str = "helloworld";
var reg = /(hello)(world)/g;
/* console.log(reg.exec(str));
console.log(RegExp.$1);*/
console.log(str.replace(reg,"$2 $1"));
}
</script>
</head>
<body>
</body>
</html>
23.正则表达式相关练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式相关练习</title>
</head>
<body>
<script type="text/javascript">
//正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
window.onload = function () {
//1.检索字符串中是否不包含字母
var str = '12';
var reg1 = /[^a-zA-Z]/g;
console.log(reg1.test(str));
if(reg1.test(str)){
console.log('不包含');
}else{
console.log('包含');
}
//2.去除字符串首尾空格
var str2 = ' hello world! ';
//开头的空格
var reg =/^\s+/ig; // + 1到多次！
var str3 = str2.replace(reg,"");
var reg2 = /\s+$/ig;
var str4 = str3.replace(reg2,"");
console.log("|"+str4+"|");
//3.检查用户账号
function checkUser(str) {
var re = /^[a-zA-Z]\w{3,15}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkUser('alex_haha');
//4.手机号码 11位数字以1开头
function checkMobile(str) {
var re = /^1\d{10}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkMobile('13788881239');
checkMobile('137893813323');
//5.电话号码 区号+号码 区号以0开头 3位或4位
// 号码由7位或8位数字组成
// 区号与号码之间可以无连接符，也可以"-"连接
function checkPhone(str) {
var re = /^0\d{2,3}-?\d{7,8}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkPhone("095-12345678");
//6.邮箱
//规则：第一部分@第二部分
//第一部分：由字母 数字 下划线 短线 - 点号 . 组成
//第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成
// 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn,
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkEmail('alex@cnbolgs.cn');
}
</script>
</body>
</html>
