js内置对象

Js 标准内置对象

Object

Object 是 JavaScript 的一种数据类型。它用于存储各种键值集合和更复杂的实体。可以通过 Object() 构造函数或者使用对象字面量的方式创建对象。

Object.assign()

Object.assign() 静态方法将一个或者多个源对象 中所有可枚举自有属性复制到目标对象,并返回修改后的目标对象。

js 复制代码
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source); 
// target 目标对象 需要应用源对象属性的目标对象,修改后将作为返回值
// source 源对象

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

描述

如果目标对象与源对象具有相同的键(属性名),则目标对象中的属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的同名属性。

Object.assign() 方法只会拷贝源对象可枚举的自有属性 到目标对象。该方法在源对象上使用 [[Get]],在目标对象上使用 [[Set]],因此它会调用 gettersetter。故它对属性进行赋值,而不仅仅是复制或定义新的属性。如果合并源对象包含 getter 的新属性到原型中,则可能不适合使用此方法。

如果要将属性定义(包括它们的可枚举性)复制到原型中,则应改用 Object.getOwnPropertyDescriptor()Object.defineProperty() 方法。

字符串Symbol 类型属性都会被复制。

如果赋值期间出错,例如如果属性不可写,则会抛出 TypeError;如果在抛出异常之前已经添加了一些属性,则这些属性会被保留,而 target 对象也会被修改。

备注: Object.assign() 不会在源对象值为 nullundefined 时抛出错误

  1. 复制对象
js 复制代码
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

深拷贝问题

针对深拷贝,需要使用其他办法,因为 Object.assign() 只复制属性值。

js 复制代码
const obj1 = { a: 0, b: { c: 0 } };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 0, b: { c: 0 } }

obj1.a = 1;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 0, b: { c: 0 } }

obj2.a = 2;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 2, b: { c: 0 } }

// 假如源对象是一个对象的引用,它仅仅会复制其引用值。
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 2, b: { c: 3 } }

// 深拷贝
const obj3 = { a: 0, b: { c: 0 } };
const obj4 = JSON.parse(JSON.stringify(obj3));
obj3.a = 4;
obj3.b.c = 4;
console.log(obj4); // { a: 0, b: { c: 0 } }
  1. 合并对象
js 复制代码
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 },目标对象本身发生了变化

// 合并具有相同属性的对象   
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

属性会被后续参数中具有相同属性的其他对象覆盖。
4.

复制代码
  ### [拷贝 Symbol 类型属性](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#%E6%8B%B7%E8%B4%9D_symbol_%E7%B1%BB%E5%9E%8B%E5%B1%9E%E6%80%A7)
js 复制代码
const o1 = { a: 1 };
const o2 = { [Symbol("foo")]: 2 };

const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
复制代码
  ### [原型链上的属性和不可枚举的属性不能被复制](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#%E5%8E%9F%E5%9E%8B%E9%93%BE%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E4%B8%8D%E5%8F%AF%E6%9E%9A%E4%B8%BE%E7%9A%84%E5%B1%9E%E6%80%A7%E4%B8%8D%E8%83%BD%E8%A2%AB%E5%A4%8D%E5%88%B6)
复制代码
  ### [基本类型会被封装为对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B%E4%BC%9A%E8%A2%AB%E5%B0%81%E8%A3%85%E4%B8%BA%E5%AF%B9%E8%B1%A1)
js 复制代码
const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo");

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 基本类型将被封装,null 和 undefined 将被忽略。
// 注意,只有字符串封装对象才拥有可枚举的自有属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
复制代码
  ### [异常会中断后续的复制](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#%E5%BC%82%E5%B8%B8%E4%BC%9A%E4%B8%AD%E6%96%AD%E5%90%8E%E7%BB%AD%E7%9A%84%E5%A4%8D%E5%88%B6)
相关推荐
苏打水com18 小时前
第十五篇:Day43-45 前端性能优化进阶——从“可用”到“极致”(对标职场“高并发场景优化”需求)
前端·css·vue·html·js
布茹 ei ai2 天前
7、基于GEE 平台的 VIIRS 夜间灯光监测工具
云计算·js·遥感·gee
lxh01133 天前
二叉树中的最大路径和
前端·算法·js
心.c3 天前
初步了解Next.js
开发语言·前端·javascript·js
苏打水com6 天前
第十篇:Day28-30 工程化优化与部署——从“能跑”到“好用”(对标职场“项目上线”需求)
前端·css·vue·html·js
RollingPin7 天前
React Native与Flutter的对比
android·flutter·react native·ios·js·移动端·跨平台开发
我命由我123459 天前
微信小程序 - 页面返回并传递数据(使用事件通道、操作页面栈)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
小曹要微笑9 天前
HTTP与WebSocket协议深度解析
websocket·网络协议·http·js
酒尘&9 天前
JS数组不止Array!索引集合类全面解析
开发语言·前端·javascript·学习·js
我命由我1234512 天前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js