Object.assign

m0_49471668

已于 2023-08-29 15:36:23 修改

阅读量84

点赞数

分类专栏： react 文章标签： servlet java jvm

于 2022-08-23 12:05:38 首次发布

本文链接：https://blog.csdn.net/m0_49471668/article/details/126481878

版权

react 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(target, ...sources)
参数： target--->目标对象
source--->源对象
返回值：target，即目标对象

使用

1.目标对象和源对象无重名属性

var target={name:'guxin',age:18};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);

在这里插入图片描述
我们可以看到source上的state属性合并到了target对象上。如果只是想将两个或多个对象的属性合并到一起，不改变原有对象的属性，可以用一个空的对象作为target对象。像下面这样：

var result=Object.assign({},target,source);

2、目标对象和源对象有重名属性

var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)

在这里插入图片描述

后面的属性值会覆盖前面的属性值。

3、注意事项：

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。

针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

目标对象自身也会改变

异常会打断后续拷贝任务

与$.extend()的比较

        var target={name:'guxin',age:18}
        var source1={state:'signle',age:22}
        var source2={mood:'happy',age:25}
        var result=Object.assign(target,source1,source2)
        console.log(target,'assign')
        var targetObj={name:'guxin',age:18}
        var sourceObj1={state:'signle',age:22}
        var sourceObj2={mood:'happy',age:25}
        var result=$.extend(targetObj,sourceObj1,sourceObj2)
        console.log(targetObj,'extend')

在这里插入图片描述

js 禁止修改变量：冻结已有对象的属性：Object.defineProperty()

Object.defineProperty()的使用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let people = {
				name: "quanyi",
				position: "developer",
				age: 18
			};

			Object.defineProperty(people, "age", {
				enumerable: false,    //  是否出现在对象的枚举属性中
				configurable: false,  // 是否可以被删除
				writable: false,      // 是否可以被修改
				// value: 2              // 定义该属性的值
			});

			people.age = 3;
			console.log(people.age) // 不会被改
		</script>
	</body>
</html>

const constSettings = {    appName:"fan",    info: {p1:200,p2:300 }};Object.freeze(constSettings);

它的作用是冻结一个对象，被冻结的对象有以下几个特性：

不能添加新属性
不能删除已有属性
不能修改已有属性的值
不能修改原型
不能修改已有属性的可枚举性、可配置性、可写性

Object.freeze()可以提高性能，如果你有一个对象，里面的内容特别特别多，而且都是一些静态数据，你确保不会修改它们，那你其实可以用Object.freeze()冻结起来，这样可以让性能大幅度提升，提升的效果随着数据量的递增而递增。一般什么时候用呢？对于纯展示的大数据，都可以使用Object.freeze提升性能。

Object.freeze()原理主要用到两个关键方法，Object.definedProperty()、Object.seal()

Object.definedProperty()方法可以定义对象的属性的特性。如可不可以删除、可不可以修改等等

Object.defineProperty(person, 'name', {
    configurable: false,// 表示能否通过delete删除属性，能否修改属性的特性...
    enumerable: false,// 表示是否可以枚举。直接在对象上定义的属性，基本默认true
    writable: false,// 表示能否修改属性的值。直接在对象上定义的属性，基本默认true
    value: 'xm'// 表示属性的值。访问属性时从这里读取，修改属性时，也保存在这里。
})

通过上述配置，就能实现不能修改已有属性的值、不能修改已有属性的可枚举性、可配置性、可写性等等功能了

Object.seal()方法可以让对象不能被扩展、删除属性等等。用法：Object.seal(person)

通过Object.seal()方法可以实现不能删除，不能新增对象属性等等功能。通过这两个方法就可以实现一个简单的freeze方法了