1.内置对象
- 面向对象不是一门技术，而是一种解决问题的思维方式
- 面向对象的本质是对面向过程的一种封装
- 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义
- 对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据
- 对象：对现实世界实物的一种抽象。
- 特性: 封装性,继承性,多态性
<script>
/*1.面向对象编程与面向过程编程并不是一门技术，而是一种解决问题的思路和方式
面向对象：注重的是结果
面向过程：注重的是过程
*/
//举例：做饭
//1.1 面向过程：注重的是过程
//买菜
//洗菜
//切菜
//开火热锅
//放油
//把菜放到锅里炒
//放盐，醋，酱油
//把菜装到盘子里
//1.2 面向对象：注重的是结果
//不想自己做，找一个专业的对象来解决
/*是不是有了面向对象就不需要面向过程了呢？，不是，面向对象其实是对面向过程的一个封装 */
//2.2 对象是一个存储数据的容器 ------------键值对的形式存储数据
let student = {
name:'张三',
age:18,
eat:function ( ) {
console.log ( "下次还填非常简单" );
}
}
</script>
- 以一个简单示例介绍面向对象编程的好处
- 体会面向对象思维方式与面向过程的不同之处 举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 50px;
margin-top: 20px;
background-color: greenyellow;
}
p{
height: 50px;
margin-top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<script>
//需求：给三个div和p标签设置边框
//一：以前做法: 面向过程
//弊端：（1）获取元素代码过长 （2）两个for循环，代码冗余 （3）不便于维护
//1.获取页面元素
// let divList = document.getElementsByTagName('div');
// let pList = document.getElementsByTagName('p');
// //2.遍历数组每一个元素，设置边框
// for(let i = 0;i<divList.length;i++){
// divList[i].style.border = '10px solid red';
// }
// for(let i = 0;i<pList.length;i++){
// pList[i].style.border = '10px solid red';
// }
//二：使用函数封装
// //好处：代码复用 弊端：函数名是全局变量，会造成全局变量污染
// let divList = tagName('div');
// let pList = tagName('p');
// setStyle(divList,'10px solid red');
// setStyle(pList,'10px solid red');
//
//
// function tagName ( name ) {
// return document.getElementsByTagName(name);
// }
//
// function setStyle ( eles,value ) {
// for(let i = 0;i<eles.length;i++){
// eles[i].style.border = value;
// }
// }
//三：使用对象封装
//好处：（1）便于维护，以后添加修改方法很方便 （2）避免全局变量污染
let obj = {
tagName:function ( name ) {
return document.getElementsByTagName(name);
},
setStyle:function ( eles,value ) {
for(let i = 0;i<eles.length;i++){
eles[i].style.border = value;
};
}
};
let divList = obj.tagName('div');
let pList = obj.tagName('p');
obj.setStyle(divList,'10px solid red');
obj.setStyle(pList,'10px solid red');
</script>
</body>
</html>
内置对象
内置对象api： js作者提前写好的对象，里面有一些预先定义的方法，我们直接使用即可，无需关心原理
- api : 预先定义的函数
1.1数组对象
<script>
//声明数组
let arr = [1, 2, 3, 4, 5, 6]
//数组的增删改查操作
//新增元素到最后面 ： arr.push( 元素 )
//新增元素到最前面 ： arr.unshift()
//删除最后一个元素 ： arr.pop()
//删除第一个元素 ： arr.shift()
//删除指定位置元素 ： arr.splice(起始下标,删除数量)
// 1.arr.concat(数组)
// 应用场景:下拉加载更多的时候 会把新数组加在旧数组后面
arr = arr.concat([7, 8, 9])
console.log(arr); //[1,2,3,4,5,6,7,8,9]
// 2. arr.join()数组每一个元素凭借成字符串
let str = arr.join('')
//应用场景:歌曲歌手不止一个,服务器会给你一个数组[]
// [周杰伦, 蔡依林].join('&') '周杰伦&蔡依林'
//中间没有空格和逗号
console.log(str); //123456789
// 3. arr.reverse() 反转数组
// 应用场景:电商 销量,价格等
arr.reverse()
console.log(arr); //9,8,7,6,5,4,3,2,1
// 4.arr.sort()数组排序
let newArr = [55, 66, 99, 88, 22, 11, 33, 44, 77]
newArr.sort()
console.log(newArr); //[11, 22, 33, 44, 55, 66, 77, 88, 99]
// 固定格式格式
newArr.sort(function (a, b) {
a - b //从小到大
b - a //从大到小
})
</script>
1.2.字符串对象
<script>
/* 一定要练习哟，不然学完就会忘记 */
let str = '万叶叶天帝'
// 1.字符串类似数组也有长度+下标
console.log(str.length); //5
console.log(str[2]); //叶
for (let i = 0; i < str.length; i++) {
console.log(str[i]);
}
// 2. str.indexOf('字符串')返回字符在字符串里面的下标
// 如果存在,则返回首字符下标
let str1 = str.indexOf('天')
console.log(str1); //3
let str2 = str.indexOf('公')
console.log(str2); //-1
// 寻找的是整体, 不是单个, 当没有处理
let str3 = str.indexOf('万天')
console.log(str3); //-1
// 3.str.split('分隔符') 把str按照分隔符切割成一个数组
// 应用,切换ul网址
let url = 'http://www.baidu.com?uname:pink&password=123'
let arr1 = url.split('?')
console.log(arr1); //"http://www.baidu.com" "uname:pink&password=123"
// 4.str.substr(起始位置,截取长度)
console.log(str.substr(2, 2)); //叶天 从2下标开始截取两个字
//5 大小写转换 (只有英文才有大小写，中文不存在大小写)
console.log("AKlkshflsLKJHDHL".toLowerCase()) //转为小写 aklkshflslkjhdhl
console.log("AKlkshflsLKJHDHL".toUpperCase()) //转为大写 AKLKSHFLSLKJHDHL
console.log("中文不存在大小写".toLowerCase()) //转为小写
</script>
