JavaScript --- 对象的种类及属性

JavaScript — 对象的种类及属性

一、创建对象的方法

1.调用系统的构造函数来创建对象

script>
    //1.调用系统的构造函数来创建对象
    // var obj = new Object();
    // console.log(obj);

    var zhanZhan = new Object();
    // 对象有特征和行为
    // 特征相当于属性，添加/设置属性   ---   对象.属性名 = 值;
    zhanZhan.height = "183cm";
    zhanZhan.name = "肖战";
    zhanZhan.birth = "1991.10.05";
    // 行为相当于方法，添加方法   ---   对象.方法名 = 匿名函数;
    zhanZhan.look = function() {
        console.log("看电影");
    }
    // 输出对象的属性
    console.log(zhanZhan.name);
    // 方法的调用
    zhanZhan.look();
</script>

2.自定义构造函数创建对象（结合通过工厂模式创建对象）

<script>
    //  2.自定义构造函数创建对象
    // 函数和构造函数的区别：构造函数的名字首字母大写

    //1.创建一个构造函数
    function Person(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.saiHi = function() {
            console.log("hello world");
        }
    }

    //2.实例化对象
    var MoYang = new Person("moyang","16","男");
    MoYang.saiHi();
</script>

3.以字面量的方式创建对象

<script>
    //3.以字面量的形式创建对象

    var moyang = {};
    moyang.name = "小明";
    moyang.age = "16";
    moyang.sex = "男";
    moyang.eat = function () {
        console.log("吃火锅");
    }

    //优化
    var goudan = {
        name:"小华",
        age:"16岁",
        eat:function () {
            console.log("喝奶茶");
        }
    };
    goudan.name = "小明";
    goudan.sex = "男";
    console.log(goudan);
    goudan.eat();

    //设置属性和方法的另一种写法
    //goudan.age = 3;
    goudan["age"] = 18;
</script>

二、对象的种类及属性

1.Math对象

<script>
    /*
    * 实例对象：通过构造函数创建出来的对象
    * 静态对象：不需要创建，直接就是一个对象，方法/属性可以直接通过这个方法调用
    *
    * Math对象---静态对象
    * ① Math.PI 圆周率
    * ② Math.floor(值) 向下取整
    * ③ Math.ceil(值) 向上取整
    * ④ Math.abs(值) 绝对值
    * ⑤ Math.round(值) 四舍五入，正数四舍五入，负数尽量避免（五舍六入，或略-号）
    * ⑥ Math.max(多个值，逗号隔开) 一串数字的最大值
    * ⑦ Math.min(多个值，逗号隔开) 一串数字的最小值
    * ⑧ Math.pow(a, b) a的b次方
    * ⑨ Math.sqrt(值) 开平方
    * ⑩ Math.random() 取随机数，区间0-1
    *
    * */

    console.log(Math.PI);//3.1415926
    console.log(Math.floor(-3.9));//-4
    console.log(parseInt(3.9));//省略小数点后面的值  3
    console.log(Math.ceil(-2.6));//-2
    console.log(Math.abs(-10));//10
    console.log(Math.round(-3.6));//-4
    console.log(Math.max(1, 4, 5, 6, 7, 8, 3, 5, 4, 9));//9
    console.log(Math.min(5, 4, 3, 7, 89, 9, 7, 1));//1
    console.log(Math.pow(2, 4));//16
    console.log(Math.sqrt(9));//3
    console.log(Math.random());//0~1随机数

    //求0~4的随机整数
    console.log(Math.floor(Math.random() * 4));
</script>

2.Date对象

<script>
    //创建指定的时间
    var dt = new Date("2222-02-22 22:22:22");//Fri Feb 22 2222 22:22:22
    //console.log(dt);

    //创建实例对象
    //当前时间
    //var dt2 = new Date();//Fri Feb 22 2222 22:22:22

    //获取毫秒 1s == 1000ms
    console.log(dt.getTime());//7956886942000--- 从1970年-01-01 00:00:00开始计算

    //获取年份
    console.log(dt.getFullYear());//2222
    //获取月份 国外的时间是从0开始的  0-11
    console.log(dt.getMonth() + 1);
    //获取日期
    console.log(dt.getDate());
    //获取星期     0-日 1-一 2-二 3-三 4-四 5-五 6-六
    console.log(dt.getDay());
    //获取时分秒
    console.log(dt.getHours());
    console.log(dt.getMinutes());
    console.log(dt.getSeconds());

    //英文日期----Fri Feb  22  2222
    console.log(dt.toDateString());
    //本机的数据格式的日期---2222/2/22
    console.log(dt.toLocaleDateString());
    //时分秒---22:22:22  GMT+0800(中国标准时间)
    console.log(dt.toTimeString());
    //下午10:22：22
    console.log(dt.toLocaleTimeString());
</script>

3.String对象

<script>
    // String：字符串对象

    var str = "萨瓦迪卡~";
    console.log(str.length);
    // 字符串可以看成是多个字符组成的数组（但是js当中没有字符类型），可以用length属性的，可以通过for循环遍历
    // 特性：不可变性-->字符串的值是不能改变的
    console.log(str[2]);// 可以访问
    str[1] = "wa";
    console.log(str);
    str = "重新赋值";// 重新赋值，不是修改，因为指向改变了并不是真正的值改变
    console.log(str);

    for(var i = 0; i < str.length; i++) {
        console.log(str[i]);
    }

    /*
     * 字符串常用的方法和属性
     * ① .length --- 返回字符串的长度
     * ② .charAt(索引) --- 返回值是指定索引位置的字符串，如果该索引值超出，返回的结果是空字符串
     * ③ .concat(字符串1, 字符串2, ...) --- 返回值是拼接之后的新字符串
     * ④ .indexOf(要找的字符串, 从某个位置开始找的索引) --- 返回值是这个字符串的索引值，没找到就返回-1
     * ⑤ .lastIndexOf(要找的字符串, 从某个位置开始找的索引) --- 从后往前找，但是索引仍然是从左向右，同样找不到返回-1
     * ⑥ .replace("原来的字符串", "新的字符串") --- 用来替换字符串的
     * ⑦ .slice(开始的索引a, 结束的索引b) --- 从索引为a的位置开始截取，到b位置结束，不包含b的位置，包前不包后，返回值是提取后的字符串
     * ⑧ .substr(开始的位置, 截取的个数) --- 用来截取，返回值是截取后的字符串
     * ⑨ .substring(开始的索引a, 结束的索引b) --- 从索引为a的位置开始截取，到b位置结束，不包含b的位置，包前不包后
     * ⑩ .split("要干掉的字符串", [分隔后留下的个数]) --- 用来分隔字符串，返回的是数组形式分隔后的数据
     * ⑪ .trim() --- 去除字符串前后端的后台
     * ⑫ toLowerCase() --- 转小写
     * ⑬ toUpperCase() --- 转大写
     */

    var str1 = "What are you nong sha lei ?"
    console.log(str1.charAt(29));

    var str2 = "What";
    console.log(str2.concat("are", "you", "弄啥嘞？"));

    var str3 = "no zuo no die why you try ?"
    console.log(str3.indexOf("o"));// 不写第二个参数，默认从索引为0的位置开始找
    console.log(str3.indexOf("o", 6));
    console.log(str3.lastIndexOf("o"));// 不写第二个参数，默认从索引为lenrth - 1的位置开始找

    console.log(str3.replace("o", "哈哈"));
    console.log(str3.replace(/o/, "啦啦"));// 正则表达式语法
    console.log(str3.replace(/o/g, "沙沙"));// 全局匹配

    console.log(str3.slice(4, 6));
    console.log(str3.substr(4, 6));
    console.log(str3.substring(4, 6));

    var str4 = " 迪奥|纪梵希|娇兰|古驰|YSL|萝卜丁 ";
    console.log(str4.split("|", 3));
    var arr = str4.split("|");
    for(var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    console.log(str3.trim());

    console.log(str3.toUpperCase());
</script>

4.Array对象

<script>
    /*
     * Array.isArray(对象名) --- 判断这个对象是不是数组
     * 对象 instanceof 类型
     *
     * ① .concat(数组1, 数组2, ...) --- 组合成一个新的数组
     * ② .push(值) --- 把值追加到数组的末尾，返回值是追加数据之后数组的长度
     * ③ .unshift(值) --- 把值追加到数组的最前面，返回值是追加数据之后数组的长度
     * ④ .pop(值) --- 删除数组的最后一个，返回值是删除的这个值
     * ⑤ .shift(值) --- 删除数组的第一个，返回值是删除的这个值
     * ⑥ .every(函数) --- 返回值是布尔类型，函数当做参数使用，函数中有三个形参：元素的值、元素对应的索引值、要遍历的数组名（可省略）
     * ⑦ .some(函数) --- 返回值是布尔类型，函数当做参数使用，函数中有三个形参：元素的值、元素对应的索引值、要遍历的数组名（可省略）
     * ⑧ .filter(函数) --- 返回值是数组中每一个符合条件的元素，组成一个新的数组，函数中有三个形参：元素的值、元素对应的索引值、要遍历的数组名
     * ⑨ .forEach(函数) --- 遍历数组，相当于for循环，函数中有三个形参：元素的值、元素对应的索引值、要遍历的数组名
     * ⑩ .indexOf(元素值) --- 返回的是元素所对应的索引，找不到返回-1
     * ⑪ .join("字符串") --- 返回的是通过这个字符分隔的字符串
     * ⑫ .reverse() --- 翻转数组
     * ⑬ .slice(开始的索引, 结束的索引) --- 把截取的数组的值放到新的数组，包前不包后
     * ⑭ .sort() --- 排序，不稳定，根据MDN中的固定方法
     * ⑮ .splice(开始的位置, 要删除的个数, 替换元素的值) --- 一般用于删除数组中的某个元素，或者替换元素，或者插入元素
     */

    // 1.判断类型
    var arr = [];
    console.log(arr instanceof Array);
    console.log(Array.isArray(arr));

    var arr1 = [1, 2, 3, 4, 5];
    var arr2 = ["a", "b", "c", "d", "e"];
    console.log(arr1.concat(arr2));

    console.log(arr1.push(100));
    console.log(arr1);
    console.log(arr1.unshift(50));
    console.log(arr1);

    console.log(arr1.pop());
    console.log(arr1);
    console.log(arr1.shift());
    console.log(arr1);

    // 一假即假
    var arr3 = [1000, 2000, 3000, 4000]
    // ① 要遍历的元素
    // ② 元素所对应的索引
    // ③ 要遍历的数组名
    var flag = arr3.every(function(item, index, arr3) {
        console.log(item, index, arr3);
        return item > 2000;
    })
    console.log(flag);

    // 一真即真
    var flag2 = arr3.some(function(item, index, arr3) {
        console.log(item, index, arr3);
        return item > 2000;
    })
    console.log(flag2);

    var newArr = arr3.filter(function(item, index, arr3) {
        return item > 2000;
    })
    console.log(newArr);

    var sum = 0;
    arr3.forEach(function(item, index) {
        sum += item;
    })
    console.log(sum);

    console.log(arr3.join("❀"));

    var arr4 = ["虞姬", "甄姬", "蔡文姬", "妲己"];
    // 在索引为2的位置插入一个“小明” --- 增加
    console.log(arr4.splice(2, 0, "小明"));
    // 删除
    console.log(arr4.splice(4, 1));
    // 替换
    console.log(arr4.splice(3, 1, "凯"));
    console.log(arr4);
</script>