day07

78 阅读6分钟

1.认识对象

*  什么是对象
     *      JS 中的一种数据格式,    对象在 JS 中的数据类型数据为: 引用数据类型(也有喜欢叫 复杂数据类型)
     * 
     *  如何向变量中 存储一个 叫做 对象的数据呢?
     *      语法1: var obj = {键值对}
     * 
     *          键值对 -> key: value
     *          如果对象内部有多个 键值对, 那么需要使用 逗号 间隔
     
     
     
     *  什么是键值对 (拿 对象 obj 为例子)
     *      在这个对象中, akey, 100 为对应 value
     *          另外一种叫法:   a 为 键, 100 为 对应的 值
     *          另外一种叫法:   a 为 属性名, 100 为 对应的 属性值
     * 
     *              bkey, 200 为对应的 value
     *              b 为 键, 200 为对应的 值
     *              b 为 属性名, 200 为对应的属性值
     
     
     

2.创建对象

*  创建对象
     * 
     *      创建对象 分为两种方式:
     *          1. 字面量的形式 (使用频率比较高)
     *              语法: var obj = {键值对}
     *          2. 内置构造函数的创建
     *              语法1: var obj1 = new Object()   // 创建空对象
     * 
     *              语法2: var obj1 = new Object({a: 1, b: 2})  // 创建一个具有属性或者说具有键值对的 对象
     *  
     *              注意: new Object        的 O 是大写的, 不是小写
     * 
     *      面试官: JS 中创建对象的方式有哪些?
     *                  目前暂时是 两种
     *                      1. 字面量的方式
     *                      2. 内置构造函数的方式
     
     
     
      // 1. 字面量的方式
    var obj = {
        b: 2,
        a: 1,
        c: 0,
        e: true,
        d: 'abc',
        q: undefined,
        w: null,
        r: function () {
            console.log('我是 obj 对象 内 r 这个属性 的 属性值, 我是一个函数')
        }
    }
    // console.log(obj)

    // 2. 内置构造函数的方式
    var obj1 = new Object({
        a: 1,
        q: 777,
        w: 666,
        e: 'qwer'
    })
    console.log(obj1)
    
    

3.对象的操作

 *  对象的操作(增删改查)
     * 
     *      换句话说, 就是对内部的属性的操作
     * 
     *      分为两种方式
     *          1. 点语法
     *          2. 中括号语法(数组语法)
     * 
     *      一般来说, 大部分场景使用点语法更简单, 有一些特殊场景只能使用 中括号语法 (下个视频讲)
     
     
     var obj = {
        a: 1,
        b: 'qwe',
        c: true
    }
    console.log('原始对象: ', obj)

    // 1. 点语法---查询:    获取到 对象内部 某一个属性对应的属性值
    // console.log(obj.a)  // 1
    // console.log(obj.b)  // 'qwe'

    // 2. 点语法---新增:    向对象内部新增一个属性
    // obj.q = 'QF001'
    // obj.w = 'QF666'
    // console.log('最新的对象: ', obj)

    // 3. 点语法---修改:        修改对象内部某一个属性对应的属性值
    // obj.c = false
    // obj.b = 'QF001'
    // console.log('修改属性后的对象: ', obj)

    // 4. 点语法---删除:        删除对象内部的某一个属性
    // delete obj.a
    // console.log('删除属性后的 obj: ', obj)


    // 5. 中括号语法---查询
    // console.log(obj['a'])   // 1
    // console.log(obj['c'])   // true

    // 6. 中括号语法---新增 
    // obj['r = 123']
    // obj['r'] = 123
    // obj['w'] = 456
    // console.log('新增后的 obj: ', obj)

    // 7. 中括号语法---修改
    // obj['b'] = 'QF001'
    // obj['c'] = false
    // console.log('修改后的 obj: ', obj)

    // 8. 中括号语法的删除
    // delete obj['a']
    // console.log('删除属性后的 obj: ', obj)
    
    

4.两种语法的差别

     *  一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以
     * 
     *      特殊情况下我们需要使用中括号语法
     *          1. 对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
     *          2. 如果涉及变量相关的时候, 也需要使用中括号
     
     
     
     // 特殊情况1
    // var obj = {
    //     100: '我的属性名是 纯数字 100',
    //     '!': '我的属性名是 特殊符号 !',
    //     '@': '我的属性名是 特殊符号 @'
    // }

    // // 此时不能使用点语法, 可以使用中括号语法
    // // console.log(obj.100)
    // // console.log(obj.!)
    // // console.log(obj.@)
    // console.log(obj[100])
    // console.log(obj['100'])
    // // console.log(obj[!]) // 有问题, 需要将 特殊符号用引号包裹
    // console.log(obj['!'])
    // console.log(obj['@'])
    
    
    
     // 特殊情况2
    var obj = {
        a: 1,
        b: 2,
        name: 'QF001'
    }

    var myName = 'name'

    // console.log(obj.myName)
    /**
     *  obj.myName      我们猜想他这个 myName 是一个变量, 所以实际的应该是 obj.'name',    所以应该打印 obj 的name属性
     * 
     *  但实际的输出结果是 undefined
     * 
     * 
     *      原因:
     *          因为 对象的 点语法, 会将 点 后边的 字符 当成一个 字符串去使用, 而不会当成变量
     * 
     *              拿 obj.myName 举例
     *                  他会将 myName 当成一个 字符串 去 对象中查找, 有没有一个叫做 myName 的属性名
     *                  找完之后 发现对象中没有这个属性名, 所以打印的值 为 undefined
    */
    console.log(obj[myName])    // 'QF001'
    /**
     *  中括号语法, 内部书写的字符, 如果不加引号, 会把它当成变量去使用, 所以找到实际的值之后, myName 这个变量对应的值为 'name'
     * 
     *      所以 obj[myName]  相当于 写了 obj['name']
     * 
     *      所以会去 对象 obj 中 找一个 叫做 name 的属性名, 找到之后 打印在页面
     
     
     

5.for...in遍历对象

  *  for...in 循环遍历对象
     * 
     *      for...in: 一个循环语句
     *      对象: 一种数据格式
     * 
     * 
     *      遍历: 一般我们会说 '遍历对象' / '遍历数组'
     *          '遍历对象' 想办法拿到对象内部所有的 属性名与属性值
     * 
     * 
     *  语法: for (var i in 要遍历的对象) { 循环要执行的代码 }
     
     

6.认识数组数据类型

*  认识 数组
     * 
     *      数组 是一种数据类型, 他也是属于 引用数据类型(复杂数据类型)
     * 
     *  根据字面意思来说, 存放数字的一个组合, 但这样说有点片面了
     * 
     *      更完善的说法: 数组是存放一些数据的集合
     * 
     *  换句话说: 我们把数据放在一个盒子中, 这个盒子就叫做数组, 注意! 数组内的数据是有顺序的
     
     
     
     

7.创建数组

 *  创建数组
     * 
     *      分两种方式
     *          1. 字面量的方式
     *                  语法: var arr = [1, 2, 3, 'q', 'w', 'e']
     *          2. 内置构造函数的方式
     *                  语法1: var arr = new Array()    创建一个空数组
     *                  语法2: var arr = new Array(5)   创建一个有长度的数组
     *                  语法3: var arr = new Array(1, 2, 3)     创建一个有内容的数组
    */

    // 1. 字面量的方式
    var arr = [1, 2, 3, 'q', 'w', 'e']
    console.log(arr)

    // 2. 内置构造函数的方式

    // 2.1 创建一个空数组
    var arr1 = new Array()
    console.log(arr1)

    // 2.2 创建一个有长度的数组
    var arr2 = new Array(5)
    console.log(arr2)

    // 2.3 创建一个有内容的数组
    var arr3 = new Array(1, 2, 3, 'q', 'w', 'e')
    console.log(arr3)
    

8.数组的length

*   数组的 length 属性
     *      length 翻译过来就是 长度的意思
     *          代表 这个数组内, 有多少个成员
     * 
     *      语法:   数组名.length
     

9.数组的索引

 *  数组的索引
     * 
     *      索引 也有人叫做 下标
     *          就是指一个数据, 在这个数组内排列在第几个 位置上
     * 
     *          注意: 在 JS 中, 索引(下标) 是从 0 开始计算的
     * 
     * 
     *      如果想要获取到数组指定位置的值, 可以通过下标来获取
     * 
     *          语法: 数组名[下标]  -> 能够获取到这个数组中对应下标的成员具体的值
     
     

10.遍历数组

*  遍历数组
     *      想办法 拿到 数组的每一个成员
     * 
     *  想拿到数组的所有成员, 需要先想办法拿到数组的所有下标
     * 
     *      规律:   所有数组的下标都是从 0 开始的,  然后到   数组.length - 1 结束
     
     

11.