对象的概念,创建,操作(增删改查),点语法和中括号语法的差距,for...in 循环遍历对象,数组的概念,创建,length 属性,索引,遍历数组

对象

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


    var obj = {
        a: 100,
        b: 200,
        c: 300,
        q: 666
    }

    console.log(obj)

    
       什么是键值对 (拿 对象 obj 为例子)
           在这个对象中, a 为 key, 100 为对应 value
               另外一种叫法:   a 为 键, 100 为 对应的 值
               另外一种叫法:   a 为 属性名, 100 为 对应的 属性值
      
                   b 为 key, 200 为对应的 value
                   b 为 键, 200 为对应的 值
                   b 为 属性名, 200 为对应的属性值
                   
        对象关于 key 的要求     或者说 对于属性名的要求     或者说 对于 键值对的键 的要求
       
           1. 推荐使用符合变量命名规则与规范的名字
           2. 对象的 key 也可以使用 纯数字 来当作键名(属性名/key)
           3. 可以使用任何特殊符号 (但是需要使用引号包裹)
      
           一般只推荐使用第一种, 二三了解即可
    
    var obj = {
        a: 1,
        q: 'qwe',
        t: true,
        u: undefined
    }

创建对象

           创建对象 分为两种方式:
               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)

对象的操作(增删改查)

           换句话说, 就是对内部的属性的操作
      
           分为两种方式
               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)

两种语法的差距

     一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以
      
           特殊情况下我们需要使用中括号语法
               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 的属性名, 找到之后 打印在页面
           
    

    

for...in 循环遍历对象

           for...in: 一个循环语句
           对象: 一种数据格式
      
      
           遍历: 一般我们会说 '遍历对象' / '遍历数组'
               '遍历对象' 想办法拿到对象内部所有的 属性名与属性值
      
      
       语法: for (var i in 要遍历的对象) { 循环要执行的代码 }
    
    for (var i in obj) {
        // console.log(1)
         console.log(i)  // a q t u   这四个 是 对象 obj 的 所有       属性名 / 键名 / key

         需求: 打印对象所有的属性值
         console.log(obj)    // 此时打印的是完整的对象, 所以不合适
         console.log(obj.i)  // undefined  点语法会将后边的字符当成字符串来使用, 而不是当成变量, 如果相当变量来使用, 那么应该使用中括号语法
         console.log(obj[i]) // 该对象的所有属性值
    }

认识 数组

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

       创建一个变量 并在内部存储一个 数组
    var arr = [2, 1, 3, 'q', 'w', 'e', true, false, undefined]

    console.log(arr)
    

创建数组

           分两种方式
               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)
    

数组的 length 属性

           length 翻译过来就是 长度的意思
               代表 这个数组内, 有多少个成员
      
           语法:   数组名.length
    
    var arr1 = [1, 2, 3, 4, 5]
    var arr2 = ['q', 'w', 'e', 'r']
    var arr3 = new Array(1, 2, 3, 4, 5, 6)

     console.log(arr1)
     console.log(arr2)

     console.log(arr1.length)    // 5
     console.log(arr2.length)    // 4




     能用, 但是一般不会有人这样写代码
    console.log(++arr3.length)        // 6   ->   7
    console.log(arr3)

数组的索引

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

    var arr = ['b', 'a', 'c', 1, 2, 3]
    //  下标    0    1    2   3  4  5
    // console.log(arr)


    console.log(arr[0]) // b
    console.log(arr[3]) // 1
    
    

遍历数组

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

    var arr = ['b', 'a', 'c', 1, 2, 3]
    //          0    1    2   3  4  5

    var arr1 = ['b', 'a', 'c', 1, 2]
    //           0    1    2   3  4

    // console.log(arr)
    // console.log(arr1)


         需求, 就是根据 arr 这个数组, 拿到他的所有下标
    for (var i = 0; i < arr.length; i++) {
        // console.log(i)  // 0 1 2 3 4 5

         需求: 拿到数组所有的值, 输出在控制台
        console.log(arr[i])
    }