JavaScript基础—对象

作者: OmewSPG | 来源:发表于2021-10-20 08:37 被阅读0次

概论

对象定义.png

对象基础

创建对象

利用字面量创建对象：

        var obj = {};  // 创建了一个空的对象
        var obj1 = {
            name: 'Omew',
            age: 18,
            sex: 'female',
            sayHi: function () {         // 这里只能是匿名函数
                console.log('Hello~');
            }
        }

使用对象

        console.log(obj1.name);    //  Omew
        console.log(obj1.age);      //  18
        console.log(obj1['sex']);    //   female
        obj1.sayHi();                     //   Hello~

利用new Object创建对象

        var obj2 = new Object();    // 创建了一个空对象
        obj2.uname = 'Kana',            // 追加属性
        obj2.uage = 16,
        obj2.sex = 'female',
        obj2.greeting = function () {    // 追加方法
                 console.log('Domo~');
             }

使用对象方式与上面完全一致

利用构造函数创建对象
此方法可以一次创建多个对象
构造函数就是把对象里面的一些相同的属性和代码抽象出来并封装到函数里面

        function Star(uname, age, sex) {    // 构造函数名首字母大写
            this.uname = uname;
            this.age = age;
            this.sex = sex;     // 构造函数无需return即可返回结果
            this.sing = function (song) {
                console.log(song);
            }
        }
        
        var star1 = new Star('Liu',18,'male');   // 调用构造函数（必须使用new关键字）创建对象
        console.log(typeof star1);    // Object
        console.log(star1.uname);      // Liu
        console.log(star1['age']);     // 18
        star1.sing('Rain...')

        var star2 = new Star('Zhang',19,'male');
        console.log(star2.uname);

构造函数与对象的关系：

构造函数与对象的关系.png

new关键字的执行过程：

在内存中创建一个新的空对象；
让this指向这个新的对象；
执行构造函数里面的代码，给这个新的对象添加属性和方法；
返回这个新对象（所以构造函数里面不需要return）

如何遍历一个对象？

        // 对象的遍历
        // 对象内部属性是无序的，故无法用传统的for循环进行遍历
        // for in
        for (var k in obj1){
            console.log(k);     //  遍历属性名
            console.log(obj1[k]);    //  遍历属性值
        }

内置对象：

内置对象.png

一般情况下建议查阅MDN/W3C文档

内置对象：数学

Math对象(非构造函数，无需new关键字调用，可直接使用)

        console.log(Math.PI);     // 内置对象属性，圆周率
        console.log(Math.max(1,5,6,8,4,3));    // 内置对象方法，最大值
        console.log(Math.abs(-56));    // 绝对值

Math内置取整方法

        console.log(Math.floor(1.1));   // 向下取整数
        console.log(Math.floor(1.9));

        console.log(Math.ceil(1.2));    // 向上取证

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

Math内置随机函数

        // Math.random()返回一个区间[0,1)的随机浮点数
        console.log(Math.random());

返回一个区间内的随机整数，并包含边界

        function getRandomNumber(min,max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        console.log(getRandomNumber(1,100));

内置对象：日期

Date对象（只能通过调用Date构造函数来创建日期对象）

        var arr = new Array();   // 必须使用new关键字的几种对象类型
        var obj = new Object();
        var day = new Date();  // 若没有参数，即输出当前时间
        console.log(day);       //    "2021-10-19T03:44:00.755Z"

向 Date() 中添加参数

        var day1 = new Date(2021,5,1);    // 实际输出为6月，因为月份计数是从0开始的
        console.log(day1);         //  "2021-05-31T16:00:00.000Z"
        var day2 = new Date('2021-5-1 8:8:8')
        console.log(day2);         //   "2021-05-01T00:08:08.000Z"

日期格式化

        console.log(day.getFullYear());  // 返回当前年份
        console.log(day.getMonth() + 1);     // 返回当前月份（0-11月）
        console.log(day.getDate());     // 返回几号
        console.log(day.getDay());      // 返回星期几（星期天为0）
        console.log(`Today is ${day.getFullYear()}.${day.getMonth() + 1}.${day.getDate()}`);

时间格式化

        console.log(day.getHours());
        console.log(day.getMinutes());
        console.log(day.getSeconds());
        function getTime() {         // 时间格式封装函数
            var h = day.getHours();
            h = h < 10 ? '0' + h : h;
            var m = day.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = day.getSeconds();
            s = s < 10 ? '0' + s : s;
            var time = `${h}:${m}:${s}`
            return time;
        }

        console.log(getTime());

获取日期的总的毫秒数（时间戳）
计算机预制起始时间统一为 1970 年 1 月 1 日

        console.log(day.valueOf());   // 返回现在距离1970年1月1日的毫秒数
        console.log(day.getTime());   // 同上

简单写法：

        var  date1 = +new Date();
        console.log(date1);

或直接写成：

        console.log(Date.now());    // H5新增方法

倒计时案例
倒计时并不能直接用显示的时间相减
这里采用时间戳相减得到剩余时间毫秒数
再将毫秒数转换为显示的时间格式

        function countDown(time) {
            var nowTime = +new Date();    // 返回当前时间的时间戳
            var deadLine = +new Date(time);   // 返回指定时间的时间戳
            var times = (deadLine - nowTime) / 1000; // time是剩余时间的时间戳(单位是秒)

            var min = parseInt(times / 60 % 60);
            min = min < 10 ? '0' + min : min;
            var hour = parseInt(times / 60 / 60 % 24);
            hour = hour < 10 ? '0' + hour : hour;
            var day = parseInt(times / 60 / 60 / 24);
            var sec = parseInt(times % 60);
            sec = sec < 10 ? '0' + sec : sec;

            var countTime = `${day}day  ${hour}:${min}:${sec}`;
            return countTime;

        }

        console.log(countDown('2022-1-1 00:00:00'));

内置对象：数组

数组对象

        var arr = [];    // 利用数组字面量创建空数组
        var arr1 = new Array(3);    // 创建的还是一个空数组，里面有3个空的数组元素
        console.log(arr1);
        var arr2 = new Array(1,2,3);  
        console.log(arr2);   // [1,2,3]

检测是否为数组

利用 instanceof 运算符

        console.log(arr1 instanceof Array);   // true
        console.log(arr instanceof Array);    // true
        var obj = new Object;
        console.log(obj instanceof Array);    // false

利用内置方法 Array.isArray() IE9以上版本支持

        console.log(Array.isArray(arr1));    // true

添加或删除数组元素

push() 在数组末尾追加元素

        console.log(arr2.push(4,'apple'));   // push()操作完毕之后，会返回新数组长度
        console.log(arr2);

unshift() 在数组开头追加元素

        console.log(arr2.unshift('head',0));
        console.log(arr2);

pop() 删除数组末尾的一个元素

        var arr3 = arr2;
        console.log(arr3.pop());  // pop()操作完毕之后也会返回值，返回值为被删除的元素
        console.log(arr3);

shift() 删除数组开头的一个元素

        console.log(arr3.shift());
        console.log(arr3);

翻转数组

        console.log(arr3.reverse());

排序

        var arr4 = [3, 7, 5, 9, 6, 2, 1]
        arr4.sort();
        console.log(arr4);    //   1,2,3,5,6,7,9

当数组中包含两位数以上的元素时，仅仅使用 sort() 不会带给你想要的结果：

        var arr5 = [1, 15, 6, 8, 22, 54, 5, 9, 96, 72]
        console.log(arr5.sort());   //  [1, 15, 22, 5, 54, 6, 72, 8, 9, 96]

造成这种情况的原因是 sort() 仅仅是按照首个字符大小进行排序
如果需要按照数值大小排序，可以这样操作：

        arr5.sort(function (a, b) {
            return a - b;  // 升序排列
            // return b - a;   降序排列
        });
        console.log(arr5);

返回数组元素索引号

如果数组内有相同元素，则返回第一个元素的索引号
如果数组内没有对应元素，则返回-1

        var colors = ['red', 'blue', 'yellow', 'green'];
        console.log(colors.indexOf('yellow'));   // 2
        console.log(colors.indexOf('black'));   // -1

同样返回数组元素的索引号，区别是从后往前查找

        console.log(colors.lastIndexOf('green'));    // 4

实例，数组去重

算法：遍历旧数组，取得旧数组的元素到新数组里去查询，如果该元素在新数组里没有出现过，则添加进去，反之则不添加

        function uniqueArr(arr) {
            var newArr = [];
            for(var i = 0; i < arr.length; i++){
                if (newArr.indexOf(arr[i]) == -1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

        var demo = ['a', 'z', 'h', 'z', 'b', 'a', 'k', 'z', 'h'];
        console.log(uniqueArr(demo));    // ["a", "z", "h", "b", "k"]

实例，数组转换为字符串

        var arr = [1, 2, 3];
        console.log(arr.toString());  // 1,2,3

        var arr1 = ['apple', 'orange', 'banana'];
        console.log(arr1.join());    // apple,orange,banana
        console.log(arr1.join(' & '));   // apple & orange & banana

内置对象：字符串

字符串对象

根据字符返回位置

        var str = 'this is a para but contain nothing interesting...'
        console.log(str.indexOf('s'));   // 3 
                                                       // 仅返回该字符首次出现的位置

indexOf() 可以添加第二个参数作为起始位置，即从给定的起始位置开始查找

        console.log(str.indexOf('s', 4));    // 6

同样地，也有 lastIndexOf() 方法，可以从后向前查找，这里不再赘述

实例，查找字符串内某个字符重复出现的位置和次数

算法：先查找第一个字符串的位置
只要 indexOf() 的值不是 -1 ，就继续查找下去
indexOf() 方法只能查找一个元素，所以每一次查找完毕后，都要从当前索引 + 1 的位置开始继续查找

        function  getSameChara(str,le) {
            var index = str.indexOf(le);
            var num = 0;
            var arr = [];
            while(index != -1){
                arr.push(index);
                num++;
                index = str.indexOf(le,index + 1);
            }
            return [arr,num]
        }

        console.log(getSameChara(str,'i'));

根据索引位置返回字符

charAt() 方法返回字符

        var str = 'omewspg'
        console.log(str.charAt(5));   // p

遍历所有字符

        var arr1 = [];
        for(i = 0; i < str.length; i++){
            arr1.push(str.charAt(i));
        }
        console.log(arr1);     // ["o", "m", "e", "w", "s", "p", "g"]

charCodeAt() 方法返回字符ASCII码

        console.log(str.charCodeAt(5));   // 112

str[index] H5新增方法，同样用来返回字符

        console.log(str[5]);   // p

实例，统计出现次数最多的字符

算法：利用charAt()遍历字符串
将字符串存的每个字符储为对象的属性，如果遍历到重复的字符串，则该属性+1
遍历对象，得到属性值最大的属性与该字符

        var str = 'this is a para but contain nothing interesting...'
        var obj = {};
        for (var i = 0; i < str.length; i++){
            var chars = str.charAt(i);
            if(obj[chars]){     // 通过中括号+变量的方式来追加属性，点表示法做不到这一点
                obj[chars] ++;
            }else{
                obj[chars] = 1;
            }
        }
        console.log(obj);
        // 遍历对象
        var max = 0;
        var ch = '';
        for(var k in obj){
            if(obj[k] > max){
                max = obj[k];
                ch = k;
            }
        }
        console.log(max);
        console.log(ch);

字符串操作方法

拼接

        var str1 = 'omew';
        console.log(str1.concat('spg'));   // 效果类似于 + 号

截取

        var str2 = 'this is a para...'
        console.log(str2.substr(5,2));   // 第一个参数表示起点索引号；第二个参数表示取几个字符

        console.log(str2.slice(5,7));   // 第一个参数表示起点索引号；第二个参数表示截止索引号（该索引对应字符无法取得）
                                        // 上面两个例子的输出都是 is

替换

        console.log(str2.replace('para','apple'));   // 将首个para字符替换为apple

如果需要替换所有相同字符，可以使用循环操作

        while(str2.indexOf('a') !== -1){
            str2 = str2.replace('a','*');
        }
        console.log(str2);

字符串转换为数组 split() (数组转换为字符串 join)

        var str3 = 'car&plane&boat'
        console.log(str3.split('&'));    // ["car", "plane", "boat"]

字符串的不可变性

字符串的不可变性.png