其实对于 Object中的很多对象 相信 很多初级前端 包括博主 基本上 不会用到吧 可能知道有这个东西得存在

就在昨晚 我看 兄弟写的代码中 if else else if else if 我就说了 下 你咋不用 switch 呢

然后他惊讶道 我工作就没用过 这个东西 不过到可以试试看

看吧 其实有些东西 就怕你用不习惯 但也怕你用习惯了

你会别人 都会的东西 那其实是没啥竞争力的 要会别人不会 懂别人不懂得知识这个才是牛皮

要想做到这点 当然 99% 的人都只是一个普普通通的人 所以我们要付出比那些天才们 十倍的 努力 去追赶 人家 在人家 睡觉 打游戏 跟女朋友亲亲的 时候 我们要起来 学习 总结经验

我怎么感觉上面说话 就好像在喝鸡汤似的 哈哈

博主其实对鸡汤的看发 是 中立 有的时候 生活很苦 确实 需要喝点鸡汤 “补一补”

好了 废话这次 说的又有点多了 我们 开始正题

  1. 给一个 变量赋值成一个 空的变量
var obj = {};   // 这样不就行了嘛

但我非得这样写

var obj = Object.assign({});

是不是下面的写法更高大上点 哈哈 不建议下面这样写哈 杀鸡用牛刀 纯数装逼哈

在这里 我要批判下 那种 面试 找人 上来问对vue 源码的理解 只想说一下 呵呵哦 对于这样的公司 大公司也有 但人家可能更偏向于问你 作者得思想 小公司跟风也问源码的东西 写博客动不动都是 源码 分析 来吸引一些新手 博求关注量

哎 你这个垃圾博主 有跑题了 小的知错 继续 继续继续哈

其实上面 最终产生的效果 应该是 相同得 都是 产生了一个空的对象

好了 正式进入主题

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

听听官方的解释 这是人话嘛 可枚举属性 是什么玩意 一个或多个源对象 这个吧 还可以理解 尽说一些 看完也不知道啥意思的话 但官方就是官方 我就这样说了 你能把我咋地 哈哈

  1. 来来来 我们一个一个拆开进行 讲解
    Object.assign() 方法 将所有得 这里我就不用讲解了吧

所有可枚举属性 这个东西有必要说下了
说一千道一万 不如一个例子 来的更真实得点 (老板天天画饼,不如给钱来的真实)

var obj1 = { name: "zhangsan", age: 20 };// 源对象 1
var obj2 = { group: 3, id: 2 };
var obj = Obejct.assign({},obj1,obj2); // 第一个参数是 目标对象  后面得全是源对象   执行完之后返回目标对象 

console.log(obj);

看哈 他把 对象 源对象 1 和源对象2 得 可枚举属性 全部合到了 obj 对象中
在这里插入图片描述
博主你不是扯淡嘛 不是说 要讲解可枚举属性嘛 你说的啥呢
跑题 跑到 哪里去了

好像是的 我们继续哈

了解 vue2.* 得同学 可能知道 一个 api 是 Object.definedProperty(); 可以更改对象某个属性的 描述符 (数据描述符 和 属性描述符 ) 记住两者不能共存在哈

默认 直接定义的话 那们 对象的属性是 默认 就是不可枚举得 我们把开关关掉之后 再来试试看

var obj1 = { name: "zhangsan", age: 20 };// 源对象 1
var obj2 = { group: 3, id: 2 };

// 将对象 obj1 的   name属性设置成不可枚举 
Object.defineProperty(obj1, "name", {
    enumerable: false // 不可以枚举
})
        
var obj = Obejct.assign(obj1,obj2); 
console.log(obj);

看吧 name 最终 没有 合到 目标对象中
在这里插入图片描述
哎呀 其实可枚举 也就是 使用 循环 可以遍历出来的属性 那就叫做可枚举 奈何官方说的 太官方 哈哈

  1. Object.assign(target,…source); 在源对象 合并的时候 碰见相同的属性 后面的会覆盖前面值
 var obj1 = { name: "zhangsan", age: 20 };// 源对象 1
 var obj2 = { name: "yunchong", id: 2 };
  
  var obj = Object.assign({},obj1, obj2);

  
  console.log(obj);

obj1 和 obj2 都一个 name属性 obj2 是在obj1 后面所以 会 覆盖掉 obj1中的name 最终展示的是 obj2 中的 name属性 博主是不是很罗嗦哈
在这里插入图片描述
4. Object.assin () 实现 浅克隆
浅克隆就是 拷贝一层 深层的拷贝它的引用 啥都不说 上才艺

var obj ={
  name: "yunchong",
    money: [ 5000, 8000, 12000 ]
}

var cloneObj = Object.assign({}, obj);


console.log(obj === cloneObj);   // false

在这里插入图片描述

var obj ={
    name: "yunchong",
     money: [ 5000, 8000, 12000 ]
 }

 var cloneObj = Object.assign({}, obj);

 obj.money.unshift(35000); // 给源对象中 推进去一个 35000

 console.log(cloneObj.money, obj.money)

打印出来的结果是两个 数组都发生了变化 有的童鞋问了 unshift 是干嘛的 (别问我 博主也不知道是干嘛的 )

在这里插入图片描述
然后浅克隆就这样实现了

关注 冲哥 持续更新前端知识

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐