认识对象及数组,如何使用数组

160 阅读4分钟

了解对象

什么是对象?
    就是一个数据的集合(复杂数据)

JS 的数据类型?  1. 基本数据    2. 复杂数据
    对象属于复杂数据类型(引用数据类型)
        说起来是复杂数据,但也不复杂
        引用数据类型:object  function    array

var obj = {
    // 内部存放键值对   (还有人叫 key/value;   属性名: 属性值)
    name: 'QF', // 逗号间隔
    age: 18 // 冒号左边: 健;    冒号右边: 值;
}

创建对象

1. 字面量的形式
    var obj = {
        name: 'QF',
        age: 18
    }
    console.log(obj)

2. 通过内置构造函数
    var obj = new Object()          //创建一个空对象
    console.log(obj)

对象对于 key 的要求
    1. 推荐使用 符合变量命名规范和规则的
    2. 可以使用数字作为 key
    3. 可以使用特殊符号

    var obj = {
        123: '112233',
        '@': '特殊符号@',
        '#': '特殊符号#'
    }

#对象的操作 (增删改查) 1. 点语法 var obj = { name: 'wy' }

    // 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)

2. 中括号语法(数组语法)
    
    // 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)

3.如何选择两种方式
    1. 对象 的 key 符合命名规范的时候 都可以
    2. 出现纯数字 为 key 或者 特殊符号 @#,我们需要使用 中括号语法
    3. 当出现变量的时候(想用变量作为 key) 也需要使用 中括号语法

遍历对象

就是拿到对象的所有的键值对

var obj = {
    a: 123,
    b: 456,
    c: 789
}

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

数组数据类型

  • 什么是数组 是存放一些数据的集合

创建数组数据类型

使用字面量的方式创建数组

var arr = [1, 2, 3, 4, 5]
console.log(arr)

内置构造函数创建数组

var arr1 = new Array()  // 空数组
console.log(arr1)

var arr2 = new Array(5) // 创建一个长度为 5 的数组(虽然有长度, 但是实际的值为 空)
console.log(arr2)

var arr3 = new Array(5, 10) // 创建一个有内容的数组, 第一个值为 5 第二个值为 10
console.log(arr3)

数组的 length 属性

数组的 length,代表了 数组的 成员数量

语法: 数组.length

var arr = [1, 2, 3, 4, 5, undefined]
console.log(arr.length)

数组的索引概念

数组的索引就代表了当前数据在数组的第几个位置(注意!!! 下标 从 0开始)

// 通过 下标获取数组对应的成员
console.log(arr[0])         // 1 获取数组的第一个成员

console.log(arr[4])         // 5

console.log(arr[arr.length - 1])    // 相当于 arr[4] ---> 5

for 循环遍历数组

var arr = [1, 2, 3, 4, 5]

for (var i = 0; i < arr.length; i++) {
    // console.log(i)
    console.log(arr[i])
}

数据类型之间的区别

存储的区别

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

赋值的区别

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

var a = 100
var b = a
b = b * 2
console.log(a)  // 100
console.log(b)  // 200

var a = {
    name: 'wy'
}
var b = a
b.name = '修改后的name'
console.log(a)
console.log(b)

比较的区别

1. 基本数据类型
    比较时, 是拿变量实际的值, 去做对比
2. 引用数据类型
    比较时, 是拿引用地址做对比, 判断是不是执行一个地址

var a = 100
var b = 200
console.log(a === b) // false

var c = {
    name: 'wy'
}
var d = c
var e = {
    name: 'wy'
}
console.log(c === d)    // true
console.log(c === e)    // false

传参的区别

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

var a = 100
var b = {
    name: 'wy'
}

function fn(x, y) {
    x = 500
    y.name = 'wwwww'
}
fn(a, b)

console.log(a)  // 100
console.log(b.name) // wwwww