阅读 122

js基础篇-对象的理解与分析

前言

首先对象的理解一定要跟类区别开来,对象就是对js中object的理解,类的理解后续继续分析

基础

对象的创建

  1. 对象的创建:对象的创建方式有两种
    字面量创建

    const obj = {
        a:1,
    }
    obj.c = 3
    复制代码

    new object对象

    const obj = new Object()
    obj.a = 1
    复制代码

    区别:通过new Object创建的对象需要逐一添加属性

  2. 基本类型
    js中有六种主要类型string、number、boolean、null、undefined(基本类型),object(复杂类型包括function、array) 。 特殊:null是基本类型,但是typeof null = 'object'

内置对象

内置对象包括一下几个,不一一阐述每一个内置对象

  • Number
  • String
  • Object
  • Boolean
  • Array
  • Function
  • Date
  • RegExp
  • Error

内置对象从写法上来看就是首字母大写,要跟首字母小写的同一单词做出区分,它们并不指同一个概念 例: 小写的string表示变量的类型是字符串
应用: typeof 'test' === 'string'

而大写的String表示js的内置对象
应用:

    var string1 = new String('test')
    console.log(string1 instanceof String) //true
复制代码

string和Sting的差异和联系 例:

var string1 = 'test'
typeof string1 //string
string1 instanceof String //false
var string2 = new String('test')
typeof string2 //object
string instanceof String //true
string1 === string2 //false
string1 == string2 //true
复制代码

直接通过字面量定义的字符串是可以调用String的属性的如string1.length,通过字面量定义的变量并不是对象,但是却能查看它的length属性,是因为在某些时候,js会自动把通过字面量定义的string类型的变量转换成String的对象,类似的还有Number

对象属性的访问方式和计算属性

  1. 直接通过点访问
var obj = {
    a:1
}
console.log(obj.a)
复制代码
  1. 键名访问(键名还可以计算)
    const arr = [3,1,2]
    const obj = {
        test1: 1,
        test2: 2,
        test3: 3
    }
    console.log(obj['test1']) //1
    arr.forEach((item)=>{
        console.log(obj[`test${item}`]) //3,1,2
    })
复制代码
  1. 计算属性(当定义一个变量,属性名需要计算时可如下)
const obj = {
 ['test'+1]:1
}
console.log(obj.test1)
复制代码

对象(包括数组)的复制,浅复制,深复制

复制

  1. 对象的存储:对象的属性值并不存储在对象容器中,而是存储在另外的地方,属性将会指向存储在另外地方的值(类似于指针),而对象内部则存储了属性的引用

2.复制,直接的复制,只是复制引用,被复制的对象和新的对象引用相同,都是指向同一值,此时如果改变存储在另外地方的值,则两个对象的属性值都会发生改变 例:

var obj1 = {
    a: 1
}
var obj2 = obj1 //复制引用
obj2.a = 4
console.log(obj1.a) //4
复制代码

浅复制

浅复制:对于第一层属性会复制值,但是属性内部的引用类型数据还是直接复制。es6中的assign、扩展运算符 例子:

    const obj = {
        a: 1,
        b: [1,2,3]
    }
    const obj1 = Object.assign({},obj)
    obj1.a = 10
    obj1.b[0] = 100
    console.log(obj.a) //1
    console.log(obj.b) //[100,2,1](obj1中引用属性的值中的第一个元素发生变化,obj中引用属性的值中的第一个元素也会发生变化)
复制代码

深复制

深复制,就是将一个对象或者是数组下层的每一个引用类型的值都进行复制。 通过递归实现:

const oldObj = {
    a: { 
        a: 1,
        b: 3,
        c: 4
    },
    b:{
        o: {
            k:[1,2,3]
        },
        j:[4,5]
    }
}
function copy(obj){
    if(!obj) return null 
    let newObj = {}
    if(obj instanceof Array){
        newObj = []
        obj.forEach(item=>{
            newObj.push(item)
        })
    }else{
        Object.keys(obj).forEach((item)=>{
            if(typeof obj[item] !== 'object'){
                newObj[item] = obj[item]
            }else{
                newObj[item] = copy(obj[item])
            }
        })
    }
    return newObj
}
const copyObj = copy(oldObj)
复制代码

通过JSON实现

const oldObj = {
    a: { 
        a: 1,
        b: 3,
        c: 4
    },
    b:{
        o: {
            k:[1,2,3]
        },
        j:[4,5]
    }
}
const copyObj = JSON.parse(JSON.stringify(oldObj))
复制代码

对象的遍历

遍历

  1. 数组的遍历

es5: forEach、some、every es6: map、filter

2.对象的处理 Object.keys(),将对象的属性名变成数组

const obj = {
    a:1,
    b:2
}
const c = Object.keys(obj) //[a,b]
复制代码

for ··· in和for ··· of

  1. for ··· in:获取可枚举的属性名
//在对象中使用
const obj = {
    a:1,
    b:2
}
for(key in obj){
    console.log(key)
} //a,b
//在数组中使用
const arr = [1,3]
for(key in arr){
    console.log(key)
}//0,1(会把下标打印出来)
复制代码
  1. for ··· of获取可枚举的属性值(不可以在对象中使用)
//在数组中使用
const arr = [1,3]
for(key in arr){
    console.log(key)
}//1,3
复制代码

总结

  1. 创建对象的方式有两种
  2. js的内置对象和直接创建变量之间是有联系的
  3. 对象的存储方式有所了解之后,对象的复制也就懂了。深复制浅复制还是比较重要的
  4. for···in是对可枚举的属性进行获取,而for···of是对可枚举的属性值进行获取,并且不能作用于对象
文章分类
前端
文章标签