1.对象:万物皆对象
<!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>
</head>
<body>
<script>
//万物皆对象
var obj = {
name: '于谦',
age: '50',
gender: '男',
sing: function () {
console.log('抽烟');
console.log('喝酒');
console.log('烫头');
}
}
console.log(obj.name);
console.log(obj['name']);
obj.sing();
</script>
</body>
</html>
2.对象的创建方法 :字面量 使用new Object() 使用构造函数
<!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>
</head>
<body>
<script>
// 1.字面量
var obj = {
//属性(键):属性值(值)
name: '张胜男',
age: 18,
gender: '男',
sing: function () {
console.log('唱');
console.log('跳');
console.log('rap');
console.log('篮球');
}
}
// 访问对象中的属性
console.log(obj.name);
console.log(obj['name']);
console.log(obj.gender);
console.log(obj['gender']);
// 访问对象中的方法
obj.sing();
// 2.通过new Object 创建对象
var obj2 = new Object();
obj2.name = '老舅';
obj2.age = 20;
obj2.sing = function () {
console.log('抽烟');
console.log('喝酒');
console.log('烫头');
}
console.log(obj2);
// 访问对象方法
obj2.sing();
// 3.构造函数创建对象
</script>
</body>
</html>
3.用构造函数创建对象
<!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>
</head>
<body>
<script>
function Fun(name, age, gender, sing) {
this.name = name;
this.age = age;
this.gender = gender;
this.sing = sing;
}
var Fun2 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); console.log('喝酒'); });
console.log(Fun2);
// 访问对象的属性
console.log(Fun2.name);
console.log(Fun2['name']);
console.log(Fun2.age);
console.log(Fun2['age']);
Fun2.sing();
// 访问对象方法
Fun2.sing();
// 构造函数中的this指向当前实例化对象
// 利用构造函数可以创建多个类似对象
var Fun3 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); console.log('喝酒'); });
console.log(Fun3);
</script>
</body>
</html>
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>
</head>
<body>
<script>
// 普通函数
function fun() {
console.log('我是普通函数');
}
// 直接调用
fun();
//封装构造函数
function Fun(name, age, gender, sing) {
this.name = name;
this.age = age;
this.gender = gender;
this.sing = sing;
}
//通过 new 关键字进行调用
var Fun2 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); });
console.log(Fun2.gender);
// 1.普通函数直接调用,构造函数需要通过 new 关键字进行调用
// 2.this 指向
// 构造函数this指向当前实例化对象
// 普通函数 this 默认指向window,如果成为对象中的方法,则指向当前方法对象
// 3.构造函数不需要 return,默认返回
// 4.构造函数首字母大写,普通函数一般首字母小写
</script>
</body>
</html>
5.new 关键字
<!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>
</head>
<body>
<script>
//封装构造函数
function Fun(name, age, gender, sing) {
this.name = name;
this.age = age;
this.gender = gender;
this.sing = sing;
}
//实例化
var person1 = new Fun('小亮', 20, '男', function () { console.log('唱歌'); console.log('跳舞'); });
console.log(person1);
console.log(person1['name']);
person1.sing();
console.log(new Fun('小虎', 18, '男', function () { console.log('烫头'); console.log('说相声'); }));
// new 关键字都做了什么
// 1.创建一个空对象
// 2.this指向该对象
// 3.通过 this 给对象添加属性和方法
// 4.隐式返回 this
</script>
</body>
</html>
6.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: '于谦',
age: 50,
gender: '男',
sing: function () {
console.log('抽烟');
console.log('喝酒');
console.log('烫头');
}
}
// 遍历对象 for..in 只能通过 []
for (var key in obj) { //key代表属性
console.log(key);
// console.log(obj.key);
console.log(obj[key]);
}
</script>
</body>
</html>
7.对象的分类
<!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>
</head>
<body>
<script>
// 对象
// 1.内部对象
// 1.1 本地对象 Number,String,Boolean,Array,Function,Date,Object,RegExp
// 1.2 内置对象 Global(全局对象)和Math,使用内置对象不需要new 实例化
// 2.宿主对象 window对象 document对象
// 3.自定义对象 开发人员自己定义的对象
</script>
</body>
</html>
8.数组对象
<!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>
</head>
<body>
<script>
// 创建数组的方式
// 1.字面量
var arr = [1, 2, 3, 4, 5];
// 2.使用 new Array()
var arr1 = new Array(6, 7, 89, 0);
// 封装new Aaary() 方法
function newArr() {
var arr = [];
if (arguments.length == 1) {
arr.length = arguments[0];
} else {
for (var i = 0; i < arguments.length; i++) {
arr.push(arguments[i]);
}
}
return arr;
}
var arr2 = newArr(3, 4, 5, 6);
console.log(arr2);
// 数组的排序 sort() 方法
// arr.sort() 只能对十以内的数字进行排序
arr.sort(function (a, b) {
return a - b;//升序 b-a 降序
});
console.log(arr);
</script>
</body>
</html>
9.字符串对象
<!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>
</head>
<body>
<script>
var atr = 'abc';
var str2 = new String('def');
console.log(str2);
// 通过索引下标访问某个字符
console.log(str2[0]);
// 通过.length 属性访问字符串长度
console.log(str2.length);
// 能访问下标和长度,就可以遍历字符串
</script>
</body>
</html>
10.字符串对象的操作方法:!!!字符串的任何操作方法都不改变原字符串
<!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>
</head>
<body>
<script>
var str = ' 朝辞白帝彩云间,千里江陵一日还,两岸猿声啼不住,轻舟已过万重山。 '
console.log(str.length);
//字符串的操作方法都不会改变字符串本身
// charAt() 方法 返回指定索引处的字符
console.log(str.charAt(10)); //传入一个下标
// charCodeAt()方法 返回指定字符的 Unicode 编码
console.log(str.charCodeAt(10)); //传入一个下标
// String.fromcharCode() 方法 输入一个 Unicode编码返回对应的字符
console.log(String.fromCharCode(69)); //65-90 A-Z 97-122 a-z
// concat() 方法 连接两个或多个字符串
console.log(str.concat('唐', '李白'));
// slice() 方法 复制数组的片段,包含开始位置,不包含结束位置
console.log(str.slice(0, 5));
// substring() 方法 用于提取两个指定下标之间的字符,不包含结束位置
console.log(str.substring(0, 5));
// split(分割符号(从哪里开始分割),数组的最大长度) 方法 将字符串分割为字符串数组
console.log(str.split(',', 2));
// 检索方法
console.log(str.includes('山'));
console.log(str.indexOf('云', 6));
console.log(str.lastIndexOf('舟'));
// search() 方法,检索字符串当中的子字符串,如果匹配成功,则返回在字符串中首次匹配项的索引,匹配失败返回‘-1’
console.log(str.search('千里'));
// replace()方法,用于在字符串中用一些字符替换另一些字符
console.log(str.replace('朝辞白帝彩云间', '床前明月光'));
// trim() 方法,用于去除字符串两边的空白
console.log(str.trim());
</script>
</body>
</html>
11.总结
<!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>
</head>
<body>
<script>
// 1.对象 :万物皆对象
// 2.对象的创建方法:字面量 new Object() 构造函数
// 3.构造函数创建对象 要通过new调用,this指向实例化对象
// 构造函数的this 指向实例化对象
// 普通函数的this 默认指向window,如果this作为方法,则指向该方法所属对象
// 4.new 关键字 创建一个空对象,this指向该对象,通过this给对象添加属性和方法,隐式返回this
// 5.遍历对象 :通过for...in遍历对象,只能通过 []进行访问
// 6.对象分类:内部对象(本地对象,内置对象。内置对象使用时不需要实例化),宿主对象,自定义对象
// 7.数组对象:sort() 方法排序
// 8.字符串对象
// 9.字符串对象的操作方法,都不改变字符串本身
// charAt() 输入一个索引,返回索引对应的字符
// charCodeAt() 输入一个索引,返回索引对应字符的Unicode编码
// String.fromCharCode() 返回输入字符的Unicode编码
// concat() 用于连接两个或多个字符串
// slice() 复制字符串,包含开始位置,不包含结束位置
// substring() 提取介于两个下标之间的字符,不包含结束的位置
// substr() 从指定下标开始,抽取指定数目的字符
// split() 把一个字符串分割成字符串数组,第一个参数表示分割符号,第二个参数表示数组长度
// includes() 检索字符串是否包含某个字符
// indexOf() 检索字符串某个字符第一次出现的位置
// lastIndexOf() 检索字符串中某个字符最后一次出现的位置
// search() 检索字符串中指定的子字符串,匹配成功返回首次匹配项的索引,失败返回 -1
// replace() 用于在字符串当中用一些字符替换另一些字符
// trim() 去除字符串两边的空白
// toUpperCase() 将小写字母转换为大写字母
// toLowerCase() 将大写字母转换为小写字母
</script>
</body>
</html>