ES6之对象的扩展(上)

sarva 发布于2019-08-22 17:08 / 3159人阅读

摘要：狭义的对象字面量形式是中我最喜欢的一种结构，因为其灵活。今天准备介绍中对象的扩展相关的知识点，由于煲剧晚了，先写一半，剩下的下次再介绍。

狭义的对象字面量形式是JavaScript中我最喜欢的一种结构，因为其灵活。今天准备介绍ES6中对象的扩展相关的知识点，由于煲剧晚了，先写一半，剩下的下次再介绍。

主要知识点:

对象属性的简写

动态 · 属性名

Object.is(value1,value2)方法

Object.assign(target,source1,source2...)

1.对象属性的简写 -- 设置对象属性时可省略冒号 ":", 直接用一个变量代替

</>复制代码 
let user = "babe";
let obj = {user};
obj // {user: "babe"}  
//-- 一开始用的时候觉得特别惊奇 转化成:{变量名:变量值} 记住变量名是静态(死)的(string)，值是动态(活)的
//想到应该怎么用了么?没错函数返回值的时候，返回多个数据时
//此时需要注意的是变量命名的时候要契合返回的属性名
function parseData(data){
    //假装有这么个函数 用于解析一个复杂的data 
    //最终解析出列数据、行数据、settings等
    let columns = fn(data);
    let rows = fn2(data);
    let settings = fn3(data);
    return {columns,rows,settings};
    // {columns,rows,settings} <-完全等同-> {columns:columns,rows:rows,settings:settings}
}
//另外一个集中导出的时候，也就是变量名与属性名完全一致的情况下可以简写
//一个公共包，都是一些处理方法，对方法进行导出
//util.ts
function toThousands(){}
function toTenThousandUnit(){}
function parseXml(){}
...
//在文件最后统一进行导出
export {
    toThousands,
    toTenThousandUnit,            
    parseXml
}

</>复制代码 
//阮老师的书上说了，方法也可以简写，这个没有什么特别的感觉
//直观感受就是增加了一种代码书写方式
let user = {
    name:"babe",
    hello(){
        console.log(this.name);
    }
}
//等价于:
let user = {
    name:"babe",
    hello:function(){
        console.log(this.name);
    }
}

2.动态 · 属性名 --意思就是说使用字面量方式定义对象时，对象属性可以是动态的

</>复制代码 
let key = "user";
let obj = {
    [key]:"babe"  // [key] -- 这种方式确实很惊艳，对吧!
};
obj // {user: "babe"}
//这个也不仅限于属性名，对象中的方法名也是可以使用[变量名]的形式的
let obj = {
    username:"babe"
    ["get"+"username"](){
        return this.username;
    }
}
obj.getusername(); // babe

3.Object.is()

用于比较两个对象是否相等：此方法是为了配合其余的扩展接口而设定的，应该说是元比较接口。如:Array.prototype.find()/findIndex()
(规则:NaN与NaN相等、+0与-0不相等、其余跟js的===操作符处理结果一致)

</>复制代码 
Object.is("babe","babe");
// true
Object.is(NaN,NaN);
// true
Object.is({a:1},{a:1});
// false
[19,NaN,23].findIndex(x => Object.is(NaN,x));
// 1

4.Object.assign(target,source1,source2...)

此方法用于将源对象source1、source2、...合并到target对象中，顺序为从右往左，属性不同的时候合并，相同时覆盖，从右往左依次覆盖与合并

</>复制代码 
//定义三个源数据
let source1 = {a:1};
let source2 = {a:2,b:{age:27}};
let source3 = {c:2};
let result = Object.assign({},source1,source2,source3);
result // {a: 2, b: {age:27}, c: 2}
//然而，我们修改source2的b属性的age的时候，result的b的age也会被改掉，也就是说值为引用类型的属性合并过来的只是引用地址。需要特别注意哦
source2.b.age = 26;
result // {a: 2, b: {age:26}, c: 2}

</>复制代码 
//Object.assign() 只传一个参数进去的时候，基本类型会转成对应的包装类型，引用类型原样返回
//null 和undefined就会报错(他俩难兄难弟，走哪都报错)
Object.assign("babe")
// String {"babe"}
Object.assign(10)
// Number {10}
Object.assign(true)
// Boolean {true}
Object.assign({})
// {}
Object.assign([])
// []
Object.assign(undefined)
// Uncaught TypeError: Cannot convert undefined or null to object

</>复制代码 
用途:
    i.一般用来拷贝对象，以防污染源数据 -- 这个很常用，因为大多时候数据就是一维的，浅拷贝也不碍事了
        let temp = Object.assign({},source);
    ii.合并多个对象，这个场景比较少
        let combineObj = Object.assign(source1,source2,...);
    //其实一个知识点有多少种用法都是假的，其实就是这个知识点的使用规则是什么，写逻辑的时候能想到这样写就可以了(不仅要考虑代码的简洁性、还要考虑性能哈)

对象的扩展前半段先写到这里了，如果bug请指正Thanks♪(･ω･)ﾉ!

云服务器 GPU云服务器 es6字符串扩展对象的扩展对象扩展动态扩展对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94898.html

ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6入门之对象的扩展

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法在ES6中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

RiverLi 2019-05-23 11:58 评论0 收藏0
ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0
ES6入门之数值的扩展

摘要：用来表示与大于的最小浮点数之间的差，实际上就是能够表示的最小精度。对象的扩展在对象上新增了个与数学相关的方法。用于去除一个数的小树部分，返回整数部分。对于非数值，则用方法将其转换为数值，对于空值和无法截取整数的值，返回。返回以为底的的对数。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二进制和八进制表示...

tyheist 2019-08-02 16:15 评论0 收藏0
ES6入门之数值的扩展

摘要：用来表示与大于的最小浮点数之间的差，实际上就是能够表示的最小精度。对象的扩展在对象上新增了个与数学相关的方法。用于去除一个数的小树部分，返回整数部分。对于非数值，则用方法将其转换为数值，对于空值和无法截取整数的值，返回。返回以为底的的对数。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二进制和八进制表示...

xi4oh4o 2019-08-23 17:10 评论0 收藏0