05-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: '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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值