Javascript对象的基础理解与运用(六)

对象

对象：也是一个容器，可以实现数据一 一对应，将数据的关系一 一对应保持起来
万物皆对象：我们可以将任何一个具体的事物，在程序中抽象描述成一个对象。

1. 对象的组成

1. 属性：就是对对象的特征的描述，一般用名词表示
2. 方法：描述对象具体的功能，一般用动词表示，本质就是一个函数

2. 定义对象

1. 通过字面量方式定义一个变量，对象里面没有值就是空对象

    <script>
        //定义一个对象
        //1.通过字面量方式定义一个变量
        var 自定义对象名 = {};//这就是一个对象

    </script>

2. 给对象赋值
   2.1. 对象中的值是以 ‘键：值’ 对的形式保存的：

• 键：可以是对象中的属性---------》键后面跟着一个简单的名词
• 键：还可以是对象中的方法--------》键后面跟着一个函数

3. 获取对象中的值：两种方法
   语法：对象.键
   修改值：对象.键=修改的值
   案例：

    <script>
        var obj = {
            username: '张三',
            age: 18,
            gender: '男',
            height: 210,
            shazhi: ['sa', 'sa', 'cv'],
            //sing就是obj这个对象中的方法
            sing: function () {
                console.log('shabipp')
            },
            dance: function () {
                console.log('dashazi')
            }
        }
        console.log(obj)
        //获取对象中的值，用户名
        obj.username;
        console.log(obj.username)
        //获取对象中的值，年龄
        obj.age;
        console.log(obj.age)
        //获取sahzhi
        for (var i = 0; i < obj.shazhi.length; i++) {
            console.log(obj.shazhi[i])
        }
    </script>

语法：[键]

    <script>
        var dog = {
            dog_name: 'sahzhi',
            color: 'pin',
            age: 3,
            age: '公',
            run: function () {
                console.log('杀掉')
            },
            buken: function () {
                console.log('吃肉')
            }
        }
        //第二种方式
        dog['dog_name']
        console.log(dog['dog_name'])
    </script>

总结：如果对象中没有对应的属性
那么 对象.属性 = 追加的值；=》相当于动态给对象添加一个元素
对象.方法名 = function（）{}；========》相当于动态给对象添加一个方法

4.对象的其它定义方式

1.通过构造函数的方式定义对象

    <script>
        //1.通过构造函数的方式定义对象
        //var 对象的名称 = new Object()

        //定义张三
        //new-----》关键字就是用来调用构造函数创建对象的
        //Object() -----》js中内置的一个函数，作用是创建对象
        var zs = new Object();//此类方式就是构造函数
        zs.username = '张三'//给对象里面赋值
        console.log(zs)
    </script>

2. 通过工厂方式创建对象
   特点:
   1. 可以批量创建多个对象
   2. 具有共同的属性与方法

    <script>
        // 特点:
        // 1. 可以批量创建多个对象
        // 2. 具有共同的属性与方法
        function zhu(name, zx) {
            var obj = new Object();
            obj.username = name,
                obj.age = zx
            return obj
        }
        var zs = zhu('张三', 29)
        var ls = zhu('李四', 27)
        console.log(zs, ls)

    </script>

3. 自定义创建构造函数对象
   特点：
   使用自定义构造函数的时候必须使用关键字 new

    <script>
        function cx(name, age, obj) {
            this.name = name;
            this.age = age;
            this.obj = obj
        }
        var p = new cx('张三', 24, 'shabi1')//使用new关键字
        console.log(p)

    </script>

5. this指向

1. 在构造函数中，this关键字就指向（赋值）通过该构造函数创建对象（谁调用构造函数，this就指向谁）
2. 在1普通函数中的this，指向的是函数调用者window
3. 在方法中的this，指向的是当前调用方法的对象（谁调用就指向谁）

6. 遍历对象

语法：
for （key in 对象）{
}
注意：
1. key只是一个用来动态获取对象中键的一个变量
2. 对象 就是我们要遍历的对象
3. 获取对象的值

    <script>
        var obj = {
            name: '张三',
            age: 21,
            aihao: ['88', '66', '11'],
            etc: function () {
                console.log('77')
            }
        }
        //遍历
        for (key in obj) {
            console.log(obj[key])//获取了对象里面的键

            obj[key]
        }

    </script>

7. instanceof关键字

与typeof关键字的区别：

1. typeof关键字是用来获取变量的数据类型的
2. instanceof关键字是用来判断当前对象是不是通过对呀的构造函数创建的

8. Math对象

    Math.max(值);//获取最大值
    Math.abs(值);//获取绝对值
    Math.min(值);//获取最小值
    Math.pow(x, y);//获取x底数，y指数(幂数)
    Math.round(值)//四舍五入
    Math.sin(a)//a的单位是弧度制，不是角度制

弧度 = 角度*pi/180
角度 = 弧度 *180 /PI

    Math.PI//获取圆周率

9. 数组方法

1. 获取数组的长度 数组对象.length

2. 清空数组
   *给数组赋值一个空数组
   *将数组的长度设置为0
   *可以赋值数组为null

3. 判断是不是一个数组
   检测一个对象是否是数组 instanceof 常用
   Array.isArray(数组) HTML5中提供的方法，有兼容性问题

4. 通过对应的方法给数组赋值
   push()-----》数组名.push(值)在数组尾部追加一个值
   数组名.pop() //取出数组中的最后一项，修改length属性
   数组名.shift() //取出数组中的第一个元素，修改length属性
   数组名.unshift() //在数组最前面插入项，返回数组的长度

操作方法
concat() //把参数拼接到当前数组
slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)

位置方法
indexOf()、lastIndexOf() //如果没找到返回-1

排序方法
reverse() //翻转数组
sort(); //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
方法将数组的所有元素连接到一个字符串中。
join()

10. 字符串方法

charAt() //获取指定位置处字符
str[0] //HTML5，IE8+支持 和charAt()等效

1. 截取字符串操作方法
   concat() //拼接字符串，等效于+，+更常用
   slice(start，end) //从start位置开始，截取到end位置，end取不到
   字符串名.substring(start，end) //从start位置开始，截取到end位置，end取不到
   substr( ) //从start位置开始，截取length个字符
2. 位置方法 - 没有兼容性问题
   indexOf() //返回指定内容在元字符串中的位置
   lastIndexOf() //从后往前找，只找第一个匹配的。如果没找到返回-1
3. 去除空白
   == trim() //只能去除字符串前后的空白，HTML5，IE8+支持==
4. 大小写转换方法
   toUpperCase() //转换大写
   toLowerCase() //转换小写
5. 其它
   replace()替换
   split()