JS中的对象与数组

111 阅读3分钟

创建对象

  • 字面量的形式
  •   // 1. 字面量的形式
            var obj = {
                name: 'QF',
                age: 18
            }
            console.log(obj)
    
  • 通过内置构造函数
  •  // 2. 通过内置构造函数
            var obj1 = new Object() // 创建一个空对象
            console.log(obj1)
    

对象的操作

  • 对象的key就是属性名
  • 点语法:
  • 查--------(对象.key)
  • 修改-------(对象.key=新值)
  • 增加-------(对象.新key=值)
  • 删除------(delete obj.key)
  •  var obj = {
                name: 'QF'
            }
            console.log(obj)
            // 1. 点语法
    ​
            // 1.1 查   (对象.key)
            console.log(obj.name)
    ​
            // 1.2 修改 (对象.key = 新值)
            obj.name = 'QF666'
            console.log(obj)
    ​
            // 1.3 增加 (对象.新key = 值)
            obj.age = 18    // 向 对象 obj 中 新增一个 key --> age  对应的值为 18
            console.log(obj)
    ​
            // 1.4 删除 (delete obj.key)
            delete obj.name
            console.log(obj)
    ​
            var obj = {
                name: 'QF'
            }
    
  • 中括号语法(数组语法)
  • 查----(对象['key'])
  • 修改-----(对象['key']=新值)
  • 增加-----(对象['新key']=值)
  • 删除----(detele 对象['key']
  •  var obj = {
                name: 'QF'
            }
    ​
    // 2.1 查 (对象['key'])
            console.log(obj['name'])
    ​
            // 2.2  修改 (对象['key'] = 新值)
            obj['name'] = 'QF999'
            console.log(obj)
    ​
            // 2.3 增加 (对象['新key'] = 值)
            obj['age'] = 18
            console.log(obj)
    ​
            // 2.4 删除 delete 对象['key']
            delete obj['name']
            console.log(obj)
    
  • 如何选择两种方式
  • 对象的key符合命名规范的时候都可以
  • 出现纯数字为key或者特殊符号@# 我们需要使用中括号语法
  • 当出现变量的时候(想用变量作为key)也需要使用中括号语法
  • 对象的点语法,会将点后边的Key作为 字符串 去使用,所以点后边不能书写变量

遍历对象

  • for....in循环
  •   // for...in 循环
            for (var key in obj) {
                // console.log(key)    // 每一轮循环拿到的都是 对象 的 key 
    ​
                console.log(key, obj[key])
            }
    

创建数组

  • 字面量
  •   // 1. 字面量
            var arr = [1, 2, 3, 4, 5]
            console.log(arr)
    ​
    
  • 内置构造函数
  •   // 2. 内置构造函数
            var arr1 = new Array()  // 空数组
            console.log(arr1)
    ​
    
  • 数组的长度(length)
  • 语法:数组.length
  •   var arr = [1, 2, 3, 4, 5, undefined]
           console.log(arr.length)
    
  • 数组的索引下标-----从0开始
  •  var arr = [1, 2, 3, 4, 5]
            // 下标    0   1 2  3  4
            console.log(arr)
    ​
            // 通过 下标获取数组对应的成员
            console.log(arr[0]) // 1    获取数组的第一个成员
    ​
            console.log(arr[4]) // 5
    ​
            console.log(arr[arr.length - 1])    // 相当于 arr[4] ---> 5
    

数组的练习

 // 1. 计算数组内所有成员的和
        /**
         *  需求:
         *      计算数组内所有成员的和
         * 
         *      1. 数组内所有成员
         *      2. 求和
        */
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
​
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {  // i 就是数组 arr 的所有下标
            // console.log(arr[i])
            // sum = sum + arr[i]
            sum += arr[i]
        }
        console.log(sum)
​
        // 2. 计算数组内所有成员中 最大值
        var arr1 = [1, 2, 103, 4, 5]
        var sum = 0
        console.log(arr1[5])
        /**
         *  逻辑:   数组内所有成员中 最大值
         *  
         *      1. 拿到数组内所有成员
         *      2. 找到最大值
        */
        for (var i = 0; i < arr1.length; i++) { // i 相当于 数组 arr 所有的 下标
            // console.log(arr1[i])
            if (arr1[i] > sum) {
                sum = arr1[i]
            }
        }
        console.log(sum)
​
 // 2. 计算数组内所有成员中 最大值  的 下标
        /**
         *  需求: 计算数组内所有成员中 最大值  的 下标
         * 
         *  1. 拿到数组所有的成员
         *  2. 计算出最大值
         *  3. 拿到最大值的 下标
        */
​
        var arr = [1, 2, 103, 4, 5]
        var sum = 0
        for (var i = 0; i < arr.length; i++) {
            if (sum < arr[i]) {
                sum = arr[i]
                console.log(i)
            }
        }
        console.log(sum)
  // 3. 交换数组下标0 和下标1 的值
        var arr = [1, 2, 3, 4, 5]
​
        /**
         *  处理后应该打印出
         * 
         *      [2, 1, 3, 4, 5]
        */
        var temp = arr[0]
        arr[0] = arr[1]
        arr[1] = temp
​
        console.log(arr)

数据类型之间的区别(重点*)

存储的区别

  1. 基本数据类型: 存储在栈内存中, 变量内部就是实际的值
  2. 引用数据类型: 变量存储在栈内存中, 变量内部存储的是 指向 堆内存 的 地址(对象实际的值, 存储在 堆内存中)

赋值的区别

  1. 基本数据类型: 是 值的 传递 可以理解为, 将我自身的值 复制一份 给到另一个变量, 后续修改另一个变量时 与我自身没有任何关系

    1. 引用数据类型: 是 地址 的传递 可以理解为, 将自身的 地址 复制一份 给到另一个变量, 后续修改互相会有影响

比较的区别

  1. 基本数据类型 比较时, 是拿变量实际的值, 去做对比

    1. 引用数据类型 比较时, 是拿引用地址做对比, 判断是不是执行一个地址

传参的区别

  1. 基本数据类型 是 值 的传递, 将自身的值 复制一份 传递给函数的形参

    1. 引用数据类型

      是 地址 的传递, 将自身的地址 复制一份 传递给函数的形参