目录(知识点)

1.面向对象编程
2.使用面向对象方式开发一个页面的步骤
(1)基本结构
(2)按需调用函数
3.日期对象的在项目中的使用
(1)手写一个格式化日期的方法
(2)使用momont库格式化日期
4.数组对象在项目中的使用
(1)forEach
(2)filter
(3)map
(4)find和findIndex
5.正则表达式在项目中的使用
6.本地缓存

网站制作的九大方面

image.png

详情

(一) 面向对象编程

1.概念
(1)1. 面向对象程序设计（Object Oriented Programming，OOP）是一种计算机编程架构。OOP的一条基本原则是计算机程序由单个能够起到子程序作用的单元或对象组合而成。OOP达到了软件工程的三个主要目标：重用性、灵活性和扩展性。
(2) 特点: 封装,继承,多态
2.面向对象知识点
(1)理解对象以及访问对象的两种表示法

image.png

(2)'this'的含义
(2.1)谁调用就指向谁

image.png

image.png

var obj = {
init: function() {
this.a = 100;
this.loading = true;
},

test: function() {
    console.log('this',this);
    console.log('a', this.a);  
}

}

obj.init();
// var fn = obj.test;
// 让fun的this指向obj
var fn = obj.test.bind(obj);
obj.test(); // this => obj a=100
window.fn(); // this => window a=100

image.png

bind和call&apply的异同
1.都能改变this的指向
2.bind是在函数没运行之前使用,call&apply使用函数就马上调用

image.png

(四) 数组在项目的使用

文档地址: https://www.runoob.com/jsref/jsref-obj-array.html

1.forEach 调用时传入一个函数,数组每个元素都执行一次回调函数。

image.png

2.filter 检测数值元素，并返回符合条件所有元素的数
var students = [
{username: '张三',sex: '男'},
{username: 'lisi',sex: '女'},
{username: '王五',sex: '男'}
]

// 查找所有男同学
var man = students.filter(function(item) {
// 查找条件
return item.sex === '男'
});
console.log('man',man);

// 练习,把所有热门城市找出来

var cityList = [{
"cityId": 110100,
"name": "北京",
"pinyin": "beijing",
"isHot": 1
},
{
"cityId": 120100,
"name": "天津",
"pinyin": "tianjin",
"isHot": 0
},
{
"cityId": 130100,
"name": "石家庄",
"pinyin": "shijia",
"isHot": 0
},
{
"cityId": 130200,
"name": "唐山",
"pinyin": "tangshan",
"isHot": 0
}
]
// 使用filter
var hotCity = cityList.filter(function(item) {
return item.isHot === 1;
})
// 使用for循环
var hostCity = [];
for (var i=0;i<cityList.length;i++) {
var item = cityList[i];
if (item.isHot === 1) {
hostCity.push(item);
}
}
console.log(hostCity);
3.indexof判断一个成员是否在数组中,若在,返回成员的下标,不在就返回-1;

image.png

image.png

image.png

image.png