JavaScript操作Object的方法合集

壹、assign() 拷贝、合并

Object.assign() 方法将所有可枚举（Object.propertyIsEnumerable() 返回 true）的自有（Object.hasOwnProperty() 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj1: {
        name: 'Ect.End'
      },
      obj2: {
        sex: '男'
      },
      obj3: {
        age: 28,
        interest: 'sing'
      },
    })

    console.log('输出:', JSON.stringify(Object.assign(data.obj1, data.obj2))) // 输出: {"name":"Ect.End","sex":"男"}

    console.log('输出:', JSON.stringify(Object.assign(data.obj1, data.obj2, data.obj3))) // 输出: {"name":"Ect.End","sex":"男","age":28}

    // 复制对象  下面的输出值可以发现  Object.assign(target, ...sources)  只有目标对象target会发生变化,sources不受影响

    console.log(JSON.stringify(Object.assign({}, data.obj1))) // {"name":"Ect.End","sex":"男","age":28}

    console.log(JSON.stringify(Object.assign({}, data.obj2))) // {"sex":"男"}

    // 使用扩展运算符进行合并

    console.log('输出:', {...data.obj1, ...data.obj2, ...data.obj3}) // 输出: {name: 'Ect.End', sex: '男', age: 28, interest: 'sing'}

  }
})
</script>

贰、entries() 循环遍历

**Object.entries()**方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      }
    })

    for (const [key, value] of Object.entries(data.obj)) {
      console.log('输出:', `${key}: ${value}`);
      // 输出: name: Ect.End
      // 输出: sex: 男
      // 输出: age: 28
    }

  }
})
</script>

叁、keys() 输出一个以可直接枚举的属性(key)的数组

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      }
    })

    console.log('输出:', Object.keys(data.obj)); // 输出: ['name', 'sex', 'age']

  }
})
</script>

肆、values() 输出一个以可直接枚举的属性值(value)的数组

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for...in 循环的顺序相同（区别在于 for-in 循环枚举原型链中的属性）。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      }
    })

    console.log('输出:', Object.values(data.obj)); // 输出: ['Ect.End', '男', 28]

  }
})
</script>

伍、hasOwn() 属性是否存在

如果指定的对象自身有指定的属性，则静态方法 Object.hasOwn() 返回 true。如果属性是继承的或者不存在，该方法返回 false。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      }
    })

    console.log('输出:', Object.hasOwn(data.obj, 'name')); // 输出: true

    console.log('输出:', Object.hasOwn(data.obj, 'Ect.End')); // 输出: false

    console.log('输出:', Object.hasOwn(data.obj, 'age')); // 输出: true

  }
})
</script>

陆、is() 两个值是否为同一个值

Object.is() 方法判断两个值是否为同一个值。

<script lang="ts">
export default defineComponent({
  setup() {
    const data = reactive({
      obj: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      },
      obj1: {
        name: 'Ect.End',
        sex: '男',
        age: 28
      }
    })

    console.log('输出:', Object.is(data.obj, data.obj1)); // 输出: false

    console.log('输出:', Object.is(1, 1)); // 输出: true

    console.log('输出:', Object.is('Ect.End', 'Ect.End')); // 输出: true

    console.log('输出:', Object.is('Ect.End', '男')); // 输出: false

  }
})
</script>

纯属学习记录。我是Etc.End，如果文章对你有帮助，记得帮我点个赞😄 😆 😊 😃 😏