重生前端之我在javascript敲代码（05-对象(重点)）

---

注意：没有对象的朋友们今天过后就都可以自己var一个了

一. 对象

1.1 对象的相关概念

• 什么是对象？

  在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）

• 方法：事物的行为，在对象中用方法来表示（常用动词）

• 为什么需要对象？

  保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

  如果要保存一个人的完整信息呢？

1.2 创建自定义对象的三种方式

1.2.1 利用字面量创建对象

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

  // 1.字面量形式创建对象
        var obj = {
            // 键值对
            // 属性
            name: '宋一康',
            age: 20,
            // 方法
            sleep: function () {
                console.log("睡觉");
            }
        }

        console.log(obj);
        // 访问对象中的属性和方法
        // 1.
        console.log(obj.name);
        console.log(obj.age);
        obj.sleep();
        // 2.
        console.log(obj["name"]);
        console.log(obj["age"]);
        obj["sleep"]();

对象的使用

• 对象的属性

  • 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项

• 对象的方法

  • 对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项

• 访问对象的属性

  • 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”

  • 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号

调用对象的方法

• 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

1.2.2 利用 new Object 创建对象

  // 2.通过 new Object 创建对象
        var obj2 = new Object();    // 创建一个空对象
        console.log(obj2);
        // 给空对象添加属性和方法
        obj2.name = "张三";
        obj2.height = 190;
        obj2.play = function () {
            console.log("CFer");
        }
        console.log(obj2);

注意：

Object() ：第一个字母大写

new Object() ：需要 new 关键字

使用的格式：对象.属性 = 值;  

1.2.3 利用构造函数创建对象

• 构造函数

  一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

• 构造函数的封装格式：

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}  

构造函数的调用格式 ：

var obj = new 构造函数名(实参1，实参2，实参3) 

以上代码中，obj即接收到构造函数创建出来的对象。

构造函数的注意事项

1.构造函数约定首字母大写。

2.函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

3.构造函数中不需要 return 返回结果。

4.当我们创建对象的时候，必须用 new 来调用构造函数。

 

 // 3.通过 构造函数 创建对象
        // 先规定构造函数
        function Person(name, age, fun) {
            // 构造函数中的 this 指向当前实例化对象
            this.name = name;
            this.age = age;
            this.fun = fun;
            console.log(this);
        }
        // 根据构造函数实例化对象
        var person1 = new Person("张三", 18, function () { console.log("刚满18岁"); });
        var person2 = new Person("李四", 24, function () { console.log("PUBG"); });
        // console.log(person1);
        // console.log(person1.name);
        // person1.fun();
        // console.log(person2);

        // **构造函数的注意事项**

        // 1.构造函数约定**首字母大写**。

        // 2.函数内的属性和方法前面需要添加 **this** ，表示当前对象的属性和方法。

        // 3.构造函数中**不需要 return 返回结果**。

        // 4.当我们创建对象的时候，**必须用 new 来调用构造函数**

1.2.4 普通函数和构造函数的区别

 function Person(name, age, fun) {
            // 构造函数中的 this 指向当前实例化对象
            this.name = name;
            this.age = age;
            this.fun = fun;
            console.log(this);
        }

        function fun() {
            console.log("普通函数");
            console.log(this);
        }
        fun();

        // 1.构造函数通过 new 关键字来调用  new Person()
        // 2.构造函数中 this 指向当前实例化对象
        // 3.构造函数不需要 return，默认返回实例化对象
        // 4.构造函数约定首字母大写


        // 1.普通函数 直接调用  fun();
        // 2.普通函数中 this 指向 window
        // 3.普通函数可以 return 返回结果
        // 4.普通函数一般首字母消息  sortFun

1.2.5 new关键字的作用

 function Person(name, age, fun) {
            // 构造函数中的 this 指向当前实例化对象
            this.name = name;
            this.age = age;
            this.fun = fun;
        }

        var person1 = new Person("张三", 20, function () { console.log("睡觉"); });

        // new关键字作用
        // 1.创建一个新对象
        // 2.构造函数中 this 指向该对象
        // 3.属性和方法添加到对象中
        // 4.隐式返回了 this

1.3 遍历对象

使用for...in遍历:语句用于循环对象属性。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

 // var arr = [1, 2, 3, 4, 5, 6, 7];
        // // 遍历数组
        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        // 遍历对象 for...in
        var obj = {
            name: '张三',
            age: 20,
            sleep: function () {
                console.log("睡觉");
            }
        }

        for (var key in obj) {
            console.log(key);
            // 不能使用 obj.key 访问
            // console.log(obj.key);
            // key 是字符串形式，通过 obj[key] 访问
            console.log(obj[key]);
        }

二.对象分类

2.1 对象

  // 对象分为 内部对象、宿主对象、自定义对象

        // 1.内部对象分为 本地对象 和 内置对象
        // 本地对象需要使用 new 关键字进行实例化，如：new Array()  new Function()  new Object()  new Date()
        // 内置对象是浏览器已经准备好的对象，不需要使用 new 关键字进行实例化，如 Math.PI

        // 2.宿主对象 Window  Document

        // 3.自定义对象  程序员自己定义的对象

2.2 数组对象的方法sort

sort()
功能描述	对数组的元素进行排序（默认是从小到大来排序 并且是根据字符串来排序的）
语法	array.sort(sortfunction)
参数	sortfunction:可选。规定排序顺序。必须是函数。
返回值	排序后新数组
是否改变原数组	改变

注意:sort在不传递参数情况下，只能处理10以内（个位数）数字排序  

 var arr = [1, 6, 2, 4, 3, 7, 8, 9, 5];

        // sort() 数组排序
        arr.sort();
        console.log(arr);

        var arr2 = [9, 18, 2, 55, 3, 6, 79, 100];
        // arr2.sort();
        console.log(arr2.sort(function (a, b) {
            return b - a;
        }));;
        console.log(arr2);

        // 函数作为参数，返回排序后的数组，改变原数组

2.3字符方法

1. charAt()

charAt()
功能描述	返回指定索引处的字符。索引范围为从 0 到 length- 1
语法	string.charAt(index)
参数	index -- 字符的索引。
返回值	返回指定索引处的字符。

注意:str[index]:和charAt(index)等效

2. charCodeAt()

charCodeAt()
功能描述	可返回指定位置的字符的 Unicode 编码()
语法	string.charCodeAt(index)
参数	index -- 字符的索引。
返回值	返回在指定的位置的字符的 Unicode 编码。

3. fromCharCode()

fromCharCode()
功能描述	可接受一个指定的 Unicode 值作为参数，然后返回相应字符
语法	String.fromCharCode(number1,number2,....numberX )
参数	必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码
返回值	返回代表 Unicode 编码的字符。

4.concat()

concat()
功能描述	用于连接两个或多个字符串。
语法	string.concat(string1, string2, ..., stringX)
参数	必需。将被连接为一个字符串的一个或多个字符串对象。
返回值	两个或多个字符串连接后生成的新字符串。

5.slice()

slice()
功能描述	提取字符串的片断，并在新的字符串中返回被提取的部分。
语法	slice(start,end)
参数	start必须. 要抽取的片断的起始下标。第一个字符位置为 0 end可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
返回值	提取的字符串

6.substring()

substring()
功能描述	用于提取字符串中介于两个指定下标之间的字符。
语法	substring(from，to)
参数	from必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。to可选。一个非负的整数，规定要提取的子串结束位置的下标（不包含）。 如果省略该参数，那么返回的子串会一直到字符串的结尾。
返回值	提取后生成的新字符串。

7.substr()

substr()
功能描述	可在字符串中抽取从 开始 下标开始的指定数目的字符。
语法	substr(start,length)
参数	start必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。length可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
返回值	抽取从 开始 下标开始的指定数目的字符

8.split()

split()
功能描述	用于把一个字符串分割成字符串数组。
语法	split(separator,limit)
参数	separator可选。字符串或正则表达式，从该参数指定的地方分割 string Object。 limit*可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
返回值	一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身

注意点： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

9. includes()

includes()
功能描述	用于判断字符串是否包含指定的子字符串。
语法	array.includes(item, [start])
参数	item必需，要查找的字符串。start:可选，设置从那个位置开始查找，默认为 0。 如果该参数为负数,将按照索引为0开始检索
返回值	如果找到匹配的字符串返回 true，否则返回 false。

10. indexof()

indexOf()
功能描述	返回指定内容在元字符串中的第一次出现的位置。
语法	indexOf(item,[start])
参数	item 必需,规定需检索的字符串值，start可选的,整数参数。规定在字符串中开始检索的位置。 它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。 如果该参数为负数,将按照索引为0开始检索。
返回值	返回查找指定字符串第一次出现的位置，如果没找到匹配的字符串则返回 -1。

11.search()

search()
功能描述	方法用于检索字符串中指定的子字符串，或与正则表达式相匹配的子字符串，在字符串中首次匹配项的索引。
语法	search(searchvalue)
参数	必须。查找的字符串或者正则表达式。
返回值	如果匹配成功，则 search() 返回在字符串中首次匹配项的索引;否则，返回 -1。

12. 替换方法replace()

replace()
功能描述	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法	replace(searchvalue，newvalue)
参数	searchvalue必需。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 newvalue必需。一个字符串值。规定了替换文本或生成替换文本的函数。
返回值	一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

13 去除空白trim()

trim()
功能描述	trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等
语法	trim()
参数	无
返回值	返回移除头尾空格的字符串。

14.toUpperCase()

toUpperCase()
功能描述	所有小写字符全部被转换为大写字符
语法	string.toUpperCase()
参数	无
返回值	生成的新字符串。

15.toLowerCase()

toLowerCase()
功能描述	所有大写字符全部被转换为小写字符
语法	string.toLowerCase()
参数	无
返回值	生成的新字符串。

 

<script>
        // 基本数据类型 string boolean number undefined  null
        // 引用数据类型 object function array

        // 基本包装类型 将基本数据类型包装为引用数据类型，就拥有了自己的方法

        var str = "abcdefg";
        console.log(str.length);

        var str2 = new String("ABCDEFG");
        console.log(str2);

        // 字符串操作方法都不会改变字符串，都是以返回值的形式存在
        // 1.charAt()
        console.log(str2.charAt(3));
        console.log(str2[3]);

        // 2.charCodeAt()
        console.log(str2.charCodeAt(3));        // 68

        // 3.fromCharCode()
        console.log(String.fromCharCode(65));   // A

        // 4.concat()
        console.log(str.concat(str2));
        console.log(str + str2);

        // 5.slice()
        console.log(str2.slice(0));          // BCD

        // 6.substring()
        console.log(str2.substring(1, 4));

        // 7.substr()
        console.log(str2.substr(1, 4));

        // 8.split()    将字符串分割为数组
        console.log(str2.split("E"));
        var str3 = "hello-world";
        console.log(str3.split("-", 1));

        // var urlData = "https://landing.zhaopin.com/register?utm_source=360pcpz&utm_medium=cpt&utm_provider=partner"

        // 9.search()
        console.log(str2.search("DF"));

        // 10.replace()
        console.log(str2.replace("ABC", "abc"));

        // 11.trim()
        var str4 = " abc de ";
        console.log(str4);
        console.log(str4.trim());

        // 12.toUpperCase()
        console.log(str.toUpperCase());

        // 13.toLowerCase()
        console.log(str2.toLowerCase());

总结String 对象操作方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
String.fromCharCode()	将 Unicode 编码转为字符。
concat()	连接两个或更多字符串，并返回新的字符串。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引
substring()	提取字符串中两个指定的索引号之间的字符。
substr()	从起始索引号提取字符串中指定数目的字符。
split()	把字符串分割为字符串数组。
includes()	查找字符串中是否包含指定的子字符串。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
search()	查找与字符串或正则表达式相匹配的字符。
replace()	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
trim()	参数值无。去除字符串前后的空白。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。

2.4 Number对象

方法	描述
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toString([radix])	把数字转换为字符串， radix可选参数，指定要用于数字到字符串的转换的基数 (从 2 到 36)。如果未指定 radix 参数，则默认值为 10。
toLocaleString()	返回这个数字在特定语言环境下的表示字符串。

// 创建 Number 对象
var objNum = new Number(23);
var num = 123.456;
//把 Number 四舍五入为指定小数位数的数字
console.log(num.toFixed(2)); 

 // Number对象
        var num = 123.452;
        console.log(num.toFixed(2));

        var num2 = 10;
        console.log(num2.toString(2));

        console.log(num.toLocaleString('ar-IQ'));

2.5 Boolean对象

var bool1 = false;
var bool2 = new Boolean(true);
console.log(bool1)
console.log(bool2)

2.6 日期对象

Date对象，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

• 获取当前时间必须实例化：

var now = new Date();

• 获取指定时间的日期对象

var date1 = new Date('2022/1/16');
var date2 = new Date('2022-1-16 0:0:0');

注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

2.6.1 使用Date实例的方法和属性

方法名	说明	代码
getFullYear()	获取当年	dateObj.getFullYear()
getMonth()	获取当月(0-11)	dateObj.getMonth()
getDate()	获取当天日期	dateObj.getDate()
getDay()	获取星期几(周日0到周六6)	dateObj.getDay()
getHours()	获取当前小时	dateObj.getHours()
getMinutes()	获取当前分钟	dateObj.getMinutes()
getSeconds()	获取当前秒钟	dateObj.getSeconds()

  // 实例化日期对象
        var date = new Date();
        console.log(date);
        // console.dir(date);

        // 获取指定时间
        var date2 = new Date("2024-2-10");
        console.log(date2);

        // 日期对象的方法
        // 获取年
        var year = date.getFullYear();
        console.log(year);
        // 获取月
        var month = date.getMonth() + 1;
        console.log(month);
        // 获取日
        var day = date.getDate();
        console.log(day);
        // 获取星期
        console.log("1111111111111111");
        var week = date.getDay();
        console.log(week);
        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        // 获取小时
        var hours = date.getHours();
        console.log(hours);
        // 获取分钟
        var minutes = date.getMinutes();
        console.log(minutes);
        // 获取秒钟
        var seconds = date.getSeconds();
        console.log(seconds);

        // 时间纠正函数
        function trueTime(time) {
            if (time < 10) {
                time = "0" + time;
            }
            return time;
        }

        document.write("好谷时间：" + year + "年" + month + "月" + day + "日 " + trueTime(hours) + ":" + trueTime(minutes) + ":" + trueTime(seconds) + " " + weeks[week])
   

2.6.2 通过Date实例获取总毫米数(时间戳)

• 总毫秒数的含义

  基于1970年1月1日（世界标准时间）起的毫秒数

• 获取总毫秒数

 

  // 获取时间戳（总毫秒数）

        // 实例化日期对象
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        var now = date.valueOf();

        // var now = +new Date();
        // console.log(now);

        var qingmingDay = new Date("2024/4/4");
        console.log(qingmingDay.valueOf());
        var future = qingmingDay.valueOf();

        var time = future - now;
        console.log(time);

        // 距离清明踏青还剩： xx天xx时xx分xx秒
        var sec = parseInt(time / 1000 % 60);
        console.log(sec);
        var min = parseInt(time / 1000 / 60 % 60);
        console.log(min);
        var hours = parseInt(time / 1000 / 60 / 60 % 24);
        console.log(hours);
        var day = parseInt(time / 1000 / 60 / 60 / 24);
        console.log(day);

        document.write(" 距离清明踏青还剩：" + day + "天" + hours + "时" + min + "分" + sec + "秒");

2.7 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)内的随机值

 // Math 对象
        // 1.圆周率
        console.log(Math.PI);
        // 2.求最大最小值
        // Math.max() Math.min()
        console.log(Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9));

        // 3.绝对值
        console.log(Math.abs(-10));

        // 4.求次幂
        console.log(Math.pow(2, 3));

        // 5.Math.floor()向下取整  Math.ceil()向上取整
        console.log(Math.floor(3.14));
        console.log(Math.ceil(3.14));

        // 6.Math.round() 四舍五入
        console.log(Math.round(3.5));

        // 7.取随机数   [0,1)
        console.log(Math.floor(Math.random() * 101));
        // 取区间随机数
        // Math.floor(Math.random() * (max - min + 1) + min)
        // [30-50]
        console.log(Math.floor(Math.random() * (50 - 30 + 1) + 30));

2.8 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()等。

  console.log(1 + 2);

        eval("console.log(1 + 2);")

三. 简单数据类型和复杂数据类型

 // 1.基本数据类型

        // number string boolean undefined null

        // 2.引用数据类型

        // Object Function Array Date Math...

在 JavaScript 中，判断一个变量的类型常常,会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

 // 1.typeof返回值：number string boolean undefined object function
        // typeof 一般用于检测基本数据类型
        var arr = [];
        console.log(typeof arr);    // object
        var date = new Date();
        console.log(typeof date);   // object

        // instanceof   方法要求开发者明确地确认对象为某特定类型;
        console.log(arr instanceof Array);
        console.log(arr instanceof Date);
        console.log(arr instanceof Object);