对象
对象的相关概念
-
什么是对象？
在 JavaScript 中，对象是一组
无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 -
属性：事物的特征，在对象中用属性来表示（常用名词）
-
方法：事物的行为，在对象中用方法来表示（常用动词）
-
为什么需要对象？
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。
如果要保存一个人的完整信息呢？
创建自定义对象的三种方式
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:18,
gender:true,
weight:120,
sing:function(){
console.log("唱歌");
}
}
console.log(obj);
// 访问对象中的属性
console.log(obj.name);
console.log(obj.age);
console.log(obj["name"]);
console.log(obj["gender"]);
// 访问对象中的方法
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>
// new Object 创建对象
var obj2 = new Object();
obj2.name = "李四";
obj2.age = 20;
obj2.dance = function(){
console.log("跳舞");
}
console.log(obj2);
obj2.dance()
</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 Person(name, age, gender, rap) {
console.log(this);
this.name = name;
this.age = age;
this.gender = gender;
this.rap = rap;
}
// 实例化
var person1 = new Person("小好", 18, "男", function() {
console.log("Rap");
})
var person2 = new Person("小谷", 20, "女", function() {
console.log("不会Rap");
})
console.log(person1);
console.log(person2);
// console.log(person1.name);
// person1.rap();
// 构造函数中的 this 指向当前实例化对象
// 构造函数创建多个类似对象
var person3 = new Person("小好", 18, "男", function() {
console.log("Rap");
});
var person4 = new Person("小好4", 18, "男", function() {
console.log("Rap");
});
var person5 = new Person("小好5", 18, "男", function() {
console.log("Rap");
});
var person6 = new Person("小好6", 18, "男", function() {
console.log("Rap");
});
console.log(person3);
console.log(person4);
console.log(person5);
console.log(person6);
</script>
</body>
</html>普通函数和构造函数的区别
<!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 Person(name, age, gender, rap) {
console.log(this);
this.name = name;
this.age = age;
this.gender = gender;
this.rap = rap;
}
// 普通函数
function fun() {
console.log("普通函数");
console.log(this);
}
// 1.调用
// 构造函数通过 new 关键字调用
var person1 = new Person("小好", 18, "男", function () { console.log("Rap"); console.log(this);})
// 普通函数 直接调用
fun();
// 2.this指向
// 构造函数 this 指向当前实例化对象
// 普通函数 this 默认指向window；如果成为对象中的方法，则指向该方法所属对象。
person1.rap(); // this person1
// 3.构造函数不需要 return
// 4.构造函数首字母大写，普通函数一般首字母小写
</script>
</body>
</html>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 Person(name, age, gender, rap) {
console.log(this);
this.name = name;
this.age = age;
this.gender = gender;
this.rap = rap;
}
// 实例化
var person1 = new Person("小好", 18, "男", function () { console.log("Rap"); })
var person2 = new Person("小谷", 20, "女", function () { console.log("不会Rap"); })
// new 关键字都做了什么
// 1.创建一个对象
// 2.this指向该对象
// 3.通过 this 将属性和方法添加到对象中
// 4.隐式返回 this
</script>
</body>
</html>遍历对象
<!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: 18,
gender: "男",
say: function () {
console.log("全民制作人们大家好，我是练习时常两年半的个人练习生小好！");
}
}
// obj."name"
// obj["name"]
// for in
for (var key in obj) {
console.log(key);
console.log(obj.key);
console.log(obj[key]);
}
</script>
</body>
</html>对象的分类
1.内部对象
1.1 本地对象 Number、String、Boolean、Array、Function、Date、Object、RegExp
1.2 内置对象 Global（全局对象）和Math，使用内置对象不需要进行实例化
2.宿主对象 window对象 document对象
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>
// 创建数组的方式
var arr = [1, 2, 3, 4, 5];
var arr1 = new Array(1, 2, 3, 4, 5);
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(1, 2, 3, 4, 5);
console.log(arr2);
// 数组排序
// sort方法
arr.sort(); // 只能排 10 以内的数
arr.sort(function (a, b) {
return b-a;
})
console.log(arr);
</script>
</body>
</html>字符串对象
<!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 = "abc";
var str2 = new String("def")
console.log(str2);
// 通过索引下标访问某个字符
console.log(str2[0]);
// 通过 .length 属性访问字符串长度
console.log(str2.length);
// 遍历字符串
</script>
</body>
</html>字符串对象的使用方法
<!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(5));
// String.fromCharCode() 将 Unicode 编码转为对应字符
console.log(String.fromCharCode(69)); // 65-90 A-Z 97-122 a-z
// concat() 链接两个或多个字符串
console.log(str.concat("唐","李白"));
console.log(str);
// slice() 截取字符串的片段,包含开始，不包含结尾
console.log(str.slice(0,5));
// substring() 用于提取两个指定下标之间的字符
console.log(str.substring(0,5));
// substr() 从开始下标开始的指定数目的字符
console.log(str.substr(5,5));
// split(分割符号,数组最大长度) 将字符串分割为字符串数组
console.log(str.split("。"));
// 检索方法
console.log(str.includes("唐"));
console.log(str.indexOf("，",6));
console.log(str.lastIndexOf("，"));
// serch() 检索字符串中的子字符串，如果匹配成功，则 `search()` 返回在字符串中首次匹配项的索引;否则，返回 `-1`。
console.log(str.search("疑是地上霜"));
// replace() 用于在字符串中用一些字符替换另一些字符
console.log(str.replace("床","窗"));
// trim() 用于去除字符串首尾空白
console.log(str.trim());
// toUpperCase() 小写转大写
var str2 = "where there is a will, there is a way."
console.log(str2.toUpperCase());
// toLowerCase() 大写转小写
var str3 = "WHERE THERE IS A WILL, THERE IS A WAY."
console.log(str3.toLowerCase());
</script>
</body>
</html>数值对象(Number)
number对象的方法
| 方法 | 描述 |
|---|---|
| toFixed(x) | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toString([radix]) | 把数字转换为字符串，<br />radix可选参数，指定要用于数字到字符串的转换的基数 (从 2 到 36)。如果未指定 radix 参数，则默认值为 10。 |
| toLocaleString() | 返回这个数字在特定语言环境下的表示字符串。 |
<!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 num = 10;
var num2 = new Number(20);
console.log(num2);
// Number() parseInt() parseFloat()
// toFixed() 四舍五入保留小数点后几位,保留后变为字符串
var num3 = 123.456;
console.log(num3.toFixed(2));
console.log(num3);
// toString() 进行进制转换,转换后变为字符串形式
var num4 = 6;
console.log(num4.toString(2)); // "110"
</script>
</body>
</html>日期对象
Date对象，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
使用Date实例化日期对象
<!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>
// Date()
// 实例化日期对象
var date = new Date();
console.log(date); // Thu Aug 17 2023 10:40:52 GMT+0800 (中国标准时间)
// 获取指定日期对象
var date1 = new Date("2023/8/13");
console.log(date1.getDay());
console.log(date1);
var date2 = new Date("2021-08-17 10:47:20");
console.log(date2);
// 日期对象的方法
// getFullYear() 获取当前年
var year = date.getFullYear();
console.log(year); // 2023
// getMonth() 获取当前月,比当前月份少1
var month = date.getMonth() + 1;
console.log(month);
// getDate() 获取当前日
var day = date.getDate();
console.log(day);
// getDay() 获取周几
var week = date.getDay();
console.log(week);
// getHours() 获取小时
var hour = date.getHours();
console.log(hour);
// getMinutes() 获取分钟
var minutes = date.getMinutes();
console.log(minutes);
// getSeconds() 获取秒
var second = date.getSeconds();
console.log(second);
function trueTime(t) {
if (t < 10) {
t = "0" + t;
}
return t;
}
hour = trueTime(hour);
minutes = trueTime(minutes);
second = trueTime(second);
var weekArr = ["日", "一", "二", "三", "四", "五", "六"];
var trueWeek = weekArr[week];
document.write("北京时间:" + year + "年" + month + "月" + day + "日 " + "星期" + trueWeek + " " + hour + ":" + minutes + ":" + second);
</script>
</body>
</html>通过Date实例获取总毫秒数（时间戳）
总毫秒数的含义
基于1970年1月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 now = new Date();
console.log(now); // Thu Aug 17 2023 14:24:32 GMT+0800 (中国标准时间)
console.log(now.valueOf()); // 1692253507299 当前时间戳，毫秒数 1970年
var nationalDay = new Date("2023-10-01 00:00:00");
console.log(nationalDay.valueOf());
// 案例
var time = nationalDay.valueOf() - now.valueOf();
console.log(time); // 得到两个时间只差
// 国庆倒计时
var seconds = parseInt(time / 1000);
console.log(seconds); // 总秒数
var minutes = parseInt(seconds / 60);
console.log(minutes); // 总分钟数
var hour = parseInt(minutes / 60);
console.log(hour); // 总小时数
var day = parseInt(hour / 24);
console.log(day); // 总天数
var seconds2 = seconds % 60;
console.log(seconds2); // 倒数秒
var minutes2 = minutes % 60;
console.log(minutes2); // 倒数分钟
var hour2 = hour % 24;
console.log(hour2); // 倒数小时
console.log("距离国庆节还剩：" + day + "天" + hour2 + "时" + minutes2 + "分" + seconds2 + "秒");
</script>
</body>
</html>Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.max()/Math.min() | 求最大和最小值 |
| Math.abs() | 绝对值 |
| Math.pow(x,y) | pow() 方法可返回 x 的 y 次幂的值。 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 (往大的取) |
| Math.random() | 获取范围在[0,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 PI = Math.PI;
console.log(PI);
// 求最大值和最小值
var max = Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(max);
var min = Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(min);
// 绝对值
var num = -10;
console.log(Math.abs(num));
// 求次幂
console.log(Math.pow(2, 10));
// 向下取整
var num2 = 123.556;
console.log(Math.floor(num2));
// 向上取整
console.log(Math.ceil(num2));
// 四舍五入
console.log(Math.round(num2));
// 随机数
console.log(Math.random()); // 0-1 之间取随机数 [0,1)
console.log(parseInt(Math.random() * 10)); // 0-10 之间的随机数 [0,10)
console.log(parseInt(Math.random() * 51 + 50)); // [0,50) [50,100)
</script>
</body>
</html>JavaScript全局对象
全局对象(global object)在javascript中有着重要的用途：全局对象的属性是全局定义的符号，通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。
-
顶层对象在浏览器环境中指的是window对象，在Node环境中指的是global对象。在ES5中顶层对象的属性与全局变量是等价的。
-
全局对象，Global中封装的方法不需要对象就可以直接调用。 直接写：方法名();
-
分类
-
1.全局属性：比如undefined、Infinity以及NaN。
-
2.全局对象：比如Math、JSON
-
3.全局函数：比如isNaN()、isFinite()、parseInt()和eval()等。
-
4.全局构造器(constructor)，也即全局类。比如Date()、String()、Object()、 Function()和Array()、Number()、Boolean()等。
-
顶层函数（全局函数）
| 函数 | 描述 |
|---|---|
| decodeURI() | 解码某个编码的 URI。 |
| decodeURIComponent() | 解码一个编码的 URI 组件。 |
| encodeURI() | 把字符串编码为 URI。 |
| encodeURIComponent() | 把字符串编码为 URI 组件。 |
| escape() | 可对字符串进行编码。 |
| unescape() | 对由 escape() 编码的字符串进行解码。 |
| eval() | 计算 JavaScript 字符串，并把它作为脚本代码来执行。 |
| isNaN() | 检查其参数是否是非数字值。 |
| Number() | 把对象的值转换为数字。 |
| parseFloat() | 解析一个字符串并返回一个浮点数。 |
| parseInt() | 解析一个字符串并返回一个整数。 |
| String() | 把对象的值转换为字符串。 |
JavaScript检测数据类型
基本数据类型(简单数据类型)：number string boolean undefined null; 存储时变量中存储的是值本身
引用数据类型(复杂数据类型)：object Date function Array Math...; 存储时变量中存储的仅仅是地址（引用）
instanceof检测复杂数据类型
在 JavaScript 中，判断一个变量的类型常常,会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。
2147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
