思维导图
https://www.kdocs.cn/view/l/spKXPnIWtQvf
一.构造函数和创建对象
1.两种函数
2.创建对象的俩种方式
1.两种函数
- 普通函数：用来实现某个功能
- 构造函数： 用来创建对象
<script>
// 实现两个数相加的功能
function add(a,b){
var sum = a+b;
return sum;
}
// 用来创建猫对象的一个函数
function Cat(name,age) {
this.name = name;
this.age = age;
}
var cat = new Cat('小白',2);
var cat2 = new Cat('小花',3);
console.log(cat,typeof cat);
console.log(cat2,typeof cat2);
</script>
2.创建对象的两种方式
<script>
//字面量方式创建对象
var obj = {
name: '张三',
age: 20,
}
//声明构建函数，使用new的方式创建对象
function cat(name,age){
this.name = name;
this.age = age;
}
var cat1 = new cat('小白',2);
console.log(cat1,typeof cat1);
</script>
三.日期对象常用方法和插件
1.创建日期对象
2.日期常用的方法
3.日期函数的应用
4.日期函数库 Moment.js 中文网
1.创建日期的3种方式
<script>
// 方式1: 无参数
var date = new Date();
console.log('date', date);
// 方式2: 参数为日期数字字符串
var date2 = new Date('2020-12-12 00:00:00');//不设置时分秒默认时0,0,0
console.log('date2', date2);
// 方式3: 参数为数字0, 表示1970-01-01:8:00:00
var date3 = new Date(0);
console.log('date3', date3);
// 方式4: 参数为距离1970年的毫秒数, 1970-01-02
var date4 = new Date(86400000);
console.log('date4', date4);
// 2021-12-26
var date5 = new Date(16405069127160);
console.log('date5', date5);
</script>
2.日常常用方法
1.new Date() //输出当前的时间
2.getFullYear() //输出当前年份
3.getMonth() + 1 //输出月份，但需要加1，因为外国是从0开始算月份
4.getDate() //输入日
5.getHours() //输出小时
6.getMinutes() //输出分
7.getSeconds() //输出秒
8.getDay() //输出星期
9.getTime() //输出1970到现在的毫秒数
10.Date.now() //同上
<script>
var date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getDay());
console.log(date.getTime());
console.log(Date.now());
</script>
3.日期函数应用
1.格式化日期
<script>
function formatDate(str){
var date;
if(!str){
date = new Date();
}else{
date = new Date(str);
}
var Y = date.getFullYear();
var M = date.getMonth()+1;
var D = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
M = M<10?'0'+M:M;
D = D<10?'0'+D:D;
h = h<10?'0'+h:h;
m = m<10?'0'+m:m;
s = s<10?'0'+s:s;
return `${Y}年${M}月${D}日 ${h}:${m}:${s}`
}
var date1 = formatDate();
console.log('date1',date1);
var date2 = formatDate('2020-11-11 7:20');
console.log('date2',date2);
</script>
2.比较日期
? ? ? ? 年纪越小，毫秒数越大? ? ? ?
ps：根据离1970年到指定的时间的毫秒数相减,所以得出的也是毫秒
var oDate = new Date('2001-10-06');
var yDate = new Date('2001-11-17');
console.log(oDate-yDate); // -3628800000
4.日期函数应用
具体使用方法函数日期库里都有介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
</head>
<body>
<script>
var date1 = moment('2001-11-17').format('YYYY-MM-DD HH:mm:ss');
document.write('陈*元的生日是: '+date1);
var date2 = moment().add(3, 'days').format('MM-DD');
document.write('<br/>')
document.write('三天后是: '+date2);
</script>
</body>
</html>
四.Math对象
常用方法
1.Math.round(x)? ? ? ?//四舍五入
2.Math.abs（x）? ? ? ?//求x的绝对值
3.Math.floor(x)? ? ? ? ? ? //向下取整
4.Math.ceil(x)? ? ? ? ? ? //向上取整
5.Math.random()? ? ? ?//随机数
6.其他：正弦，余弦，平方根...
相关方法
1.toFixed(x)? 保留x位小数
2.parseInt? ?把小数变整数
应用 获取某个范围内的随机数
五.字符串常用方法
https://kdocs.cn/l/sh7WxQWpyMX2
1.基本类型添加属性无效
// 对象可以添加属性
var obj = {
name:'zs',
age:18,
say() {
console.log('我叫zs');
}
}
obj.addr = '广东深圳';
obj['hobby'] = 'codeing';
console.log('obj',obj);
// 数组(也是对象)可以添加属性
var arr = [1,2,3];
arr.name = '数组';
console.log('name',arr.name);
// 函数(也是对象)可以添加属性
function say() {
console.log('say');
}
say.cname = '函数';
console.log('cname',say.cname);
// 基本数据类型不能添加属性
var num = 100;
num.aa = 5;
console.log('aa',num.aa);
2.字符串常用方法
1.length? ? ? ????????//字符串的长度
2.trim()? ? ? ? ? ?//去掉字符串前后的空格
3.split()? ? ? ? ? //字符串转数组，接收一个参数，作为转换的标志
// 1.字符串长度和下标
var str1 = 'abcdef';
console.log('str1长度:', str1.length);
console.log('第1个字符:',str1[0]);
console.log('最后1个字符:',str1[str1.length-1]);
// 2.去空格
var str2 = ' asdfasdfas ';
console.log('str2长度',str2.length);
var newStr2 = str2.trim();
console.log('新字符串的长度',newStr2.length);
// 3.转数组
var str3 = '张三,李四,王五';
var arr3 = str3.split(',');
console.log('arr3',arr3);
str3 = 'asdfjal;sjfasjkf;asjfl;asjkdfl;ak';
arr3 = str3.split('a');
console.log('arr3',arr3);
4.截取字符串
? ? ? ? 1.substring()? ? //截取字符串，接收两个参数，开始的位置和结束的位置
? ? ? ? 2.slice()? ? ? ? ? ?//截取字符串，用法类似substring，但可以是负数，也可以是接收一个参数
? ? ? ? 3.substr? ? ? ? ?//截取字符串，接收两个参数，第一个参数是开始位置，第二个参数是字符串的个数
var str = '13812345678';
var str1 = str.substring(2,5); // 812
console.log('str1',str1);
var str2 = str.slice(2,5);
console.log('str2',str2);
str2 = str.slice(2,-1); // 从2开始, -1表示倒数第一个
console.log('str2负数',str2);
str2 = str.slice(2);
console.log('str2一个参数',str2);
str2 = str.slice(-4);
console.log('str2一个负数参数',str2);
var str3 = str.substr(2,5);
console.log('substr',str3);
5.检测字符串
? ? ? ? 1.charAt()? //下表对应的字符,若没有返回空
? ? ? ? 2.indexOf? // 返回检测字符串的位置
? ? ? ? 3.lastIndexOf()? //同上,但从后面开始检查
? ? ? ? 4.includes() //检查字符串是否包含指定字符
? ? ? ?
// 1.charAt
var str = 'abcdefgabcdefg';
var str1 = str.charAt(2);
// var str1 = str.charAt(10);
console.log('str1',str1);
// 2.includes
var boo2 = str.includes('a'); // true
var boo2 = str.includes('x'); // false
console.log('boo2',boo2);
// 3. indexOf
var index3 = str.indexOf('b'); // 1
var index3 = str.indexOf('bb'); // -1
console.log('index3',index3);
// 4.lastIndexOf
var index4 = str.indexOf('f'); // 5
var index4 = str.lastIndexOf('f'); // 12
console.log('index4',index4);
6.toLowerCase() //转小写字母
7.toUpperCase() //转大写字母
8.match()? ?//检查有没有包含某个值,返回符合一个数组,存放符合条件的字符
9.replace()? //替换
var str = 'myName,myAge';
var str1 = str.toLowerCase();
console.log('str1',str1);
var str2 = str.toUpperCase();
console.log('str2',str2);
// 3.match
var str3 = str.match('my'); // 匹配
var str3 = str.match('ny'); // null
console.log('str3',str3);
str3 = str.match(/Name/);
console.log('str3正则',str3);
str3 = str.match(/my/g);
console.log('str3正则',str3);
// 4.replace
var str4 = str.replace('my','you');
console.log('str4',str4);
str4 = str.replace(/my/g,'you');
console.log('str4正则',str4);
六.常用的数组方法
<数组的常用方法>
https://kdocs.cn/l/cdAwv1hETvhJ
1.join()把数组的所有元素放入一个字符串?
//无参数将数组转化为字符串用逗号隔开,有参数将数组隔开用参数
<script>
var arr = [1,2,3];
console.log( arr.join()); //1,2,3
console.log(arr.join('-')); //1-2-3
</script>
2.reverse() 反转数组的元素顺序
var arr = [1,2,3];
console.log(arr.reverse()); //arr = [3,2,1]
//将数组反转一遍
3.添加和删除数组成员
ps: 添加和删除都是在原来数组进行,会改变原来的数组
? ? ? ? 1.pop() 删除数组的最后一个元素并返回删除的元素
? ? ? ? 2.push() 向数组的末尾添加一个或更多元素,并返回新的长度
? ? ? ? 3.shift() 删除并返回数组的第一个元素
? ? ? ? 4.unshift() 向数组的开头添加一个或多个元素,并返回新的长度
var arr = [2,3,4,5];
console.log(arr.pop()); //在数组后面删除一个数组成员 =>[2,3,4]
返回删除的数组成员5
console.log(arr.push(6,7,8)); //在数组后面添加一个或多个数组成员 =>[2,3,4,6,7,8]
返回数组添加后的长度
console.log(arr.shift()); //在数组前面删除一个数组成员 =>[3,4,6,7,8]
返回删除的数组成员2
console.log(arr.unshift(0,0,0)); //在数组前面添加一个或多个数组成员 =>[0,0,0,3,4,6,7,8]
返回数组的长度8
console.log(arr); //添加和删除都是在原数组上进行,会改变原数组=>[0,0,0,3,4,6,7,8]
4.数组检测
1.Array.isArray() 判断对象是否为数组
var arr = [1,2,3,4,5];
console.log(Array.isArray(arr)); //判断该东西是否为数组,是为true,不是为falese;
2.includes() 判断一个数组是否包含一个指定的值? ps:数组成员只能是基本类型
var arr = [1,2,3];
console.log(arr.includes(1)); //包含返回true
console.log(arr.includes(0)); //不包含返回false
3.every() 检测数组成员每一个是否符合要求都是返回true,有一个不是返回false
var arr = [10,4,5,6];
var result = arr.every(function(item){
return item>6;
})
console.log(result); //有数组不满足要求返回false
4.some()数组成员只要有一个符合要求,就返回true.没有返回false
var arr = [10,4,5,6];
var result = arr.some(function(item){
return item>6;
})
console.log(result); //有一个数组满足要求返回true
5.find()返回符合传入测试(函数)条件的数组成员 //只返回第一个测试成员,若是没有返回undefined
<script>
var arr = [10, 4, 5, 6];
var result = arr.find(function (item) {
return item == 1;
});
console.log(result); //有则返回数组,无则undefined
</script>
<script>
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
var result = arr.find(function (item) {
return item.name === "张三";
});
console.log(result); //当数组成员是对象的时候,返回对象
</script>
6.findIndex() 返回符合传入测试(函数)条件的数组元素索引,不符合条件返回-1
<script>
var arr = [10, 4, 5, 6];
var result = arr.findIndex(function (item) {
return item == 2;
});
console.log(result); //有则返回数组元素下标,无则-1
</script>
<script>
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
var result = arr.findIndex(function (item) {
return item.name === "张三";
});
console.log(result); //当数组成员是对象的时候,有数组对象成员下表,无返回-1
</script>
7.indexOf()? 搜索数组中的元素,并返回它所在的位置.
var arr = [10, 4, 5, 6];
var result = arr.indexOf(2)
console.log(result); //有则返回数组元素下标,无则-1
5.map()
对原本的数组进行改装
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
var newArr = arr.map(function(item,index){
return 22
})
console.log(newArr);//map也有遍历的效果,将元素组可以任意更改起内容,
6.filter()
检测数值元素,并返回符合条件所有元素的数值.
//称起为过滤器一点都不为过,将满足条件的过滤出来
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "李三", age: 48 },
{ name: "陈六", age: 48 },
];
var list = arr.filter(function(item,index){
return item.age > 30; //过滤条件
})
console.log(list);
7.forEach
遍历数组
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
//for循环
var str = '';
for(var i=0;i<arr.length;i++){
str += `<li>${arr[i].name} - ${arr[i].age}</li>`
}
document.write(str);
document.write('-----------------');
//forEach
var str = '';
arr.forEach(function(item,index){
str += `<li>${index}.${item.name} - ${item.age}</li>`
})
document.write(str);
8.slice()
选取数组的一部分,并返回一个新数组.??
ps: 用法和字符串slice相似,不过数组的却是返回一个新的数组
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
var newArr = arr.slice(1, 3);
console.log("newArr", newArr);
9.splice()
从数组添加和删除元素
var arr = [1,2,3,4,5];
arr.splice(3,4);//前面是删除的索引下标,后面是删除个数
console.log(arr);
var arr = [1,2,3,4,5];
arr.splice(3,2,6);//前面是删除的索引下标,后面是删除个数,第三个参数是替换的数组成员
console.log(arr);//arr的数组成员为[1,2,3,6]
10.sort()
对数组的元素进行排序
<script>
var arr = ['ouzhixiang','chenjingyuan','chenpeipeng','tubobin','liuxinsu'];
arr.sort(); //按字母升序
arr.reverse(); //降序排序
console.log(arr);
</script>
<script>
// 数字数组排序
var arr = [1, 3, 4, 345, 7, 8, 33];
//升序排序
arr.sort(function(a,b){
return a-b;
})
console.log(arr);
//降序排序
arr.sort(function(a,b){
return b-a;
})
console.log(arr);
</script>
<script>
// 对象数组排序
var arr = [
{ username: "zhangsan", nickName: "张三", age: 18 },
{ username: "lisi", nickName: "李四", age: 28 },
{ username: "wangwu", nickName: "王五", age: 13 },
{ username: "lisan", nickName: "李三", age: 48 },
{ username: "chenliu", nickName: "陈六", age: 48 },
];
function computerFn(attr) {
function sortFn(a, b) {
if (a[attr] > b[attr]) {
return 1;
} else if (a[attr] < b[attr]) {
return -1;
} else {
return 0;
}
}
console.log(sortFn);
return sortFn; //注意了sortFn 后面不接括号,接就报错,不理解,sortFn返回的是一个函数;
}
arr.sort(computerFn("age"));
console.log(arr);
</script>
11.reduce()
数组累加器
// 数组成员为对象, initValue不能省略
var arr = [
{ name: "张三", age: 10 },
{ name: "李四", age: 1 },
{ name: "王五", age: 1 },
{ name: "张三", age: 1 },
{ name: "陈六", age: 1 },
];
var total = arr.reduce(function (sum, item) {
console.log(sum);
return sum + item.age;
}, 0);
console.log(total);
|