JavaScript ES6 - 对象扩展

最新推荐文章于 2023-01-12 15:53:48 发布
最新推荐文章于 2023-01-12 15:53:48 发布
阅读量622 收藏
点赞数
分类专栏： JavaScript ES6语法解析 文章标签： javascript 前端 开发语言 es6 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhiyue2/article/details/122315618
版权

本章节的主要内容是: ES6 对象扩展

一: 对象扩展
    1. 属性的简洁表示方法
    2. 属性表达式
    3. 扩展运算符
    4. Object 新增方法

如图所示:
在这里插入图片描述

1. ES6 属性的简洁表示方法: {}

/**
1.1 普通属性
 */
// ES5 对象写法
{
  // 示例一
  let str1 = '字符'
  let num1 = 11111
  let objES5 = {
    str1: str1,
    num1: num1
  }
  console.log('ES5 对象写法: ', objES5); // ES5 对象写法:  {str1: '字符', num1: 11111}
}
// ES6 写法
{
  // 示例一
  // 对比 ES5 对象写法中的 '示例一', 它们的结果并没有什么不同, 只是写法上更加简洁 。
  let str1 = '字符'
  let num1 = 11111
  let objES6 = {
    str1,
    num1
  }
  console.log('ES6 对象写法: ', objES6); // ES6 对象写法:  {str1: '字符', num1: 11111}
}


/**
1.2 对象中的方法
    1. ES6 中的写法比 ES5 中的写法简洁的多: 我们可以将 " : 与 function " 关键字省去 。
 */
// ES5 写法
{
  let es5_method = {
    hello: function() {
      console.log('ES5 中方法的写法 -- 使用方法对比是否不同 (ES5)');
    }
  }
  es5_method.hello() // ES5 中方法的写法 -- 使用方法对比是否不同 (ES5)
}
// ES6 写法
{
  let es6_method = {
    hello() {
      console.log('ES6 中方法的写法 -- 使用方法对比是否不同 (ES6) ');
    }
  }
  es6_method.hello() // ES6 中方法的写法 -- 使用方法对比是否不同 (ES6)
}


/**
1.3 函数返回值
 */
{
  function fun1() {
    let x = 1
    let y = 2
    // ES6 写法
    return {x, y}

    // // ES5 实现方法
    // return {
    //   x: x,
    //   y: y
    // }
  }
  console.log(fun1()); // {x: 1, y: 2}
}


/**
1.4 CommonJS 模块输出变量
 */
// 假设下面的代码是一个 .JS 文件中的内容, 使用 CommonJS 模块化方法输出内容
{
  var ms = {a: 1}
  function fn1() {
    return 1 + 2
  }
  function fn2() {
    return 2+3
  }
  function fn3() {
    ms = {}
  }
  // moudle.exports = {
  //   ms,
  //   fn1,
  //   fn2,
  //   fn3
  // }
}

2. 属性名表达式: []

/**
2. 属性名表达式: []
   1. 在 ES5 中, 对象的 key 值是固定的; 在 ES6 中 key 值是可以用表达式也可以使用变量来作为 key 使用的 。
   2. 注意细节知识点:
      1. '属性名表达式' 与 '简介表示法' 不能同时使用, 否则会报错 。
 */
// ES5 写法
{
  let a = 'abc'
  let es5_obj = {
    a: 'ddddd'
  }
  console.log(es5_obj); // {a: 'ddddd'}
}

// ES6 写法
{
  let a = 'abc'
  let es6_obj = {
    // 字面量定义对象的属性名
    [a]: 'ddddd',

    // 表达式作为对象的属性名
    ['k' + 'ey' + 'Val']: 'kkkkk',

    // 表达式用于定于方法名
    ['f' + 'un' + '1']() {
      return '表达式用于定于方法名'
    }
  }
  console.log(es6_obj); // {abc: 'ddddd', keyVal: 'kkkkk', fun1: ƒ}
}

3. ES6 对象扩展运算符: …

/**
3. 扩展运算符 ...
   1. 结构赋值:
      1. 对象的解构赋值用于从一个对象取值, 相当于将所有可遍历的、但尚未被读取的属性分配到指定的对象上 。
      2. 注意:
         1. 对象的解构赋值要求等号右边是一个对象; 如果等号右边是 undefined 或 null 会报错, 因为它们不能转换为对象 。
         2. 解构赋值的复制是浅复制 。
   1. 注意:
      1. 为了正常运行当前语法, 我们需要安装: cnpm install babel-preset-stage-2 --save; 在 .babelrc 文件中 presets 选项中, 添加 "stage-2" 。
      2. 通常安装到 stage-2 就够用了, 如果还不行, 再安装 stage-1 或者 stage-0 <越小越新> 。
   1.
 */

{
  // 解构赋值:
  let {a, b, ...c} = {a: '1', b: '2', c: '3', d: '4'}
  console.log('对象的扩展运算符: ', c); // 对象的扩展运算符:  {c: '3', d: '4'}


  // undefined 或 null 会报错
  // let {a1, b1, ...c1} = undefined // 报错
  // let {a2, b2, ...c2} = null // 报错


  // 解构赋值的复制是浅复制

}

4. ES6 Object 新增方法

4.1 ES6 新增方法: Object.is()

/**
4.1 Object.is()
    1. 判断两个值是否相等
 */
{
  console.log('判断两个字符串是否相等: ', 'ES6: ', Object.is('abc', 'abc'), 'ES5: ', 'abc' === 'abc'); // 判断两个字符串是否相等:  ES:  true ES5:  true

  /**
   * 1. 数组是引用类型, 虽然都是空数组, 在值上都是空, 但是这两个数组引用的是两个不同的地址, 所以在严格意义上来讲它们是不相等的 。
   * 2. Object.is() 的功能与 ===(严格相等运算符) 的功能没有区别 。
   */
  console.log('判断两个数组是否相等<引用类型>', 'ES6: ', Object.is([], []), 'ES5: ', [] === []); // 判断两个数组是否相等<引用类型> ES6:  false ES5:  false
}

4.2 ES6 新增方法: Object.assign()

/**
4.2 Object.assign()
    1. 拷贝功能
    2. 细节知识点:
       1. Object.assign 实现的是浅拷贝  。
          1. 浅拷贝只拷贝引用地址, 而不是将值真正的拷贝过去 。
          2. 这个方法拷贝的只是自身的属性, 如果这个对象还有继承属性, 它是不会拷贝继承属性的 。
          3. 同时也不能拷贝不可枚举的属性 。
 */
{
  let obj1 = {a: 'a'}
  let obj2 = {b: 'b'}
  let objAss = Object.assign(obj1, obj2)
  console.log('拷贝功能: ', objAss, obj1, obj2); // 拷贝功能:  {a: 'a', b: 'b'} {a: 'a', b: 'b'} {b: 'b'}
  // 修改
  obj2.b = '111111111'
  console.log('修改: 单层深拷贝 ----- : ', objAss, obj1, obj2) // 修改 ----- :  {a: 'a', b: 'b'} {a: 'a', b: 'b'} {b: '111111111'}

  // 源对象属性的值为对象 <Object.assign 不算是真正的深拷贝>
  let a1 = {a: '111'}
  let a2 = {b: '222', c: {d: '3333'}}
  let asA = Object.assign({}, a1, a2)
  console.log(asA, a1, a2); // {a: '111', b: '222', c: {d: '3333'}} {a: '111'} {b: '222', c: {d: '3333'}}
  a2.c.d = '修改属性值为对象的结果---3333'
  console.log(asA, a1, a2); // {a: '111', b: '222', c: {d: '修改属性值为对象的结果---3333'}} {a: '111'} {b: '222', c: {d: '修改属性值为对象的结果---3333'}}



  // 注意: 如果目标对象与源对象有同名属性, 或者多个源对象有同名属性, 则后面的属性会覆盖前面的属性
  let o1 = {a:1, b:2}
  let o2 = {b: 3, c: 4}
  let o3 = {c: 5}
  Object.assign(o1, o2, o3)
  console.log('属性覆盖 -- o1: ', o1); // 属性覆盖 -- o1:  {a: 1, b: 3, c: 5}


  // 如果只有一个参数, Object.assign 会直接返回该参数
  let b1 = {a: 2}
  console.log('只有一个参数 -- b1: ', Object.assign(b1) === b1); // 只有一个参数 -- b1:  true
}



// 为对象添加属性:
{
  class Point {
    constructor(x, y) {
      // 通过 Object.assign 方法将 x 、 y 属性添加到 Point 类的对象实例中 。
      Object.assign(this, {x, y})
    }
  }
  // let point = new Point
  // console.log(point.x);
}



// 为对象添加方法:
{
  class SomeClass {}
  Object.assign(SomeClass.prototype, {
    // 直接将两个函数放在大括号中, 使用 Object.assign 方法添加到 SomeClass.prototype 中
    someMethod(arg1, arg2) {

    },
    anotherMethod() {

    }

  })
}

6. ES6 Object.getOwnPropertyDescriptor()

/**
5. Object.getOwnPropertyDescriptor()
   1. 可以获取属性的描述对象 。

   1. 属性的可枚举型:
 */
{
  let obj1 = {foo: 123}
  console.log(Object.getOwnPropertyDescriptor(obj1, 'foo'));
  // 打印结果:
  // {
  //   value: 123,
  //   writable: true, // 对象属性是否可修改; flase 为不可修改, 默认值为 true 。
  //   enumerable: true, // 可枚举型; 如果为 false, 某些操作可以忽略当前属性 。
  //   configurable: true // 能否使用 delete / update, 能否需改属性特性 、 或能否修改访问器属性; false 为不可重新定义, 默认值为 true 。
  // }
  /**
   * 1. Object.assign 会忽略 enumerable 为 false 的属性, 只赋值对象的可枚举属性 。
   * 2. 注意:
   *    1. ES6 规定, class 的原型的方法都是不可枚举的 。
   */
}

7. ES6 属性的遍历

/**
6. 属性的遍历
   1. for...in    : 循环遍历对象自身和继承的可枚举属性(不含 Symbol 属性) 。
   2. Object.keys(obj)    : 返回数组; 对象自身<不包含继承>和可枚举属性(不含 Symbol 属性) 。
   3. Object.getOwnPropertyNames(obj)    : 返回数组; 包含自身的所有属性 <不含 Symbol 属性, 但是包含不可枚举的属性> 。
   4. Object.getOwnPropertySymbols(obj)  : 返回一个数组; 包含自身所有的 Symbol 属性 。
   5. Reflect.ownKeys(obj)   : 返回一个数组; 包含对象自身的所有属性, 不管属性名是 Symbol 还是字符串, 也不管是否可枚举 。

   细节知识点:
   1. Object.keys() 与 Reflect.ownKeys() 的区别:
      1. Object.keys() 返回属性 key, 但不包括不可枚举的属性 。
      2. Reflect.ownKeys() 返回所有属性 key 。
 */
{
  let obj = {
    a: 1,
    b: {b1: 2},
    c: [3, 4],
    d: {
      d1: 5,
      d2: {d3: 6},
      d4: {d5: [7,8]}
    },
    [Symbol()]: 123
  }
  // for...in
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) {
      console.log('属性的遍历--for...in: ', key);
      // // 打印结果:
      // 属性的遍历--for...in:  a
      // 属性的遍历--for...in:  b
      // 属性的遍历--for...in:  c
      // 属性的遍历--for...in:  d
    }
  }

  // Object.keys(obj)
  console.log('属性的遍历--Object.keys: ', Object.keys(obj)); // 属性的遍历--Object.keys:  ['a', 'b', 'c', 'd']

  // Object.getOwnPropertyNames
  console.log('属性的遍历--Object.getOwnPropertyNames: ', Object.getOwnPropertyNames(obj));
  // 打印结果:
  // 属性的遍历--Object.getOwnPropertyNames:  ['a', 'b', 'c', 'd']

  // Object.getOwnPropertySymbols
  console.log('属性的遍历--Object.getOwnPropertySymbols: ', Object.getOwnPropertySymbols(obj));
  // 打印结果:
  // 属性的遍历--Object.getOwnPropertySymbols:  [Symbol()]

  // Object.ownKeys
  console.log('属性的遍历--Reflect.ownKeys: ', Reflect.ownKeys(obj));
  // 打印结果:
  // 属性的遍历--Reflect.ownKeys:  ['a', 'b', 'c', 'd', Symbol()]
}

8. keys() / values() / entries()

/**
7. keys() / values() / entries() : 用于遍历对象 <与数组的 keys() / values() / entries() 用法相同, 可参考数组中的用法>
   1. keys(): 对 键名 的遍历 。
   2. values(): 对 键值 的遍历 。
   3. entries(): 对 键值对 的遍历 。
 */

以上代码执行结果, 如图所示:
在这里插入图片描述
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端ES6基础” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。
黑木令
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES6-learning：学习ES6的笔记
02-05
目录 思维导图第一章块级绑定第二章弦和正则表达式第三章函数第四章扩展的对象功能第五章解构：更方便的数据访问第六章符号和符号属性第七章与地图第八章迭代器（Iterator）和生成器（Generator）第九章JavaScript中...
es6-module-transpiler-yui-formatter:ES6 模块转译器扩展到输出`YUI.add()` 格式
06-29
es6-module-transpiler-yui-formatter ES6 Module Transpiler Formatter 输出YUI.add()格式概述ES6 模块转换器es6-module-transpiler是一个实验性编译器，它允许您使用当前 ES6 模块语法的子集编写 JavaScript，并将...
js-es6-对象扩展
diandiwang的博客
10-03 310
更简洁的表示法 let a=1; let obj={a}; console.log(obj)//{a: 1}const obj={ fn:function(){ console.log('old'); }, fn2(){ console.log('new'); } } obj.fn();//old obj.fn2();//new 属性表达式 let a='b';
javascript 之 扩展对象
weixin_30263277的博客
08-09 332
注意点：在js中常见的几种方进行扩展 第一种：ES6提供的 Object.assign(); 第二种：ES5提供的 extend()方法 第三种：Object对象提供的 defineProperty() 第四种：灵活使用prototype 第一种:ES6t提供的Object.assign(target,.......source)方法 理解：提供了将一个或多个sourc...
Javascript 对象扩展
weixin_33910137的博客
12-15 53
String.prototype.ToCharArray=function(){returnthis.split("");}String.prototype.Reverse=function(){returnthis.split("").reverse().join("");}String.prototype.IsContains=function(str){return(t...
JS基础知识总结（十三）：ES6 对象的扩展
weixin_44991965的博客
07-01 231
“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！ 上一节主要是总结了ES6中和数组有关的内容。本节主要总结ES6中对象的扩展，具体内容包括以下几个方面： 会介绍以下内容： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lFS4DgYE-1593584250123)(https://static01.imgkr.com/temp/1e7c8a927b014fe8b46f69ae9e9a20a5.png)] 1.ES6对
ES6 对象的扩展
Maisuluo的博客
08-17 182
对象（object）是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级 属性的简洁表示法 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo};...
es6-class-mixin:ES6类的Mixins
05-02
mixin通过具有功能或属性的对象扩展给定的类。 mixin ( ParentClass , ... mixins ) // return new MixedClass extended by Mixins 例子 // Basic const mixin = require ( 'es6-class-mixin' ) ; class ListItem {...
es6-react-mixins:通用Mixin适配器，用于React
03-31
您还可以使用它将传统的ES6 React之前的mixin对象合并到您的ES6 React类中。 灵感来自由的策略是暂时的类层次结构-而不是锁定类放入永久是一个角色，类realtionships组装，并在会重新组装。 ES6 mixins是返回类的...
ES6-基础学习笔记
08-24
ES6 的出现极大地改变了 JavaScript 的发展方向，引入了许多新的语法特性和功能，提高了 JavaScript 的编程能力和可靠性。本笔记涵盖了 ES6 的基础知识和小 demo，旨在与大家分享和学习。 ES6 简介 ES6 是 ...
es6 对象的扩展
wangyoucaoxiaoxiao的专栏
01-02 578
1 属性的简洁表示法【es6对象中，直接写变量，属性名为变量名，属性值为变量值】 2 方法的简写 3 属性名表达式 4 对象中的扩展运算符   5  疑问： a   Object.assign  与  $.extend的区别  Object.assign是es6中提供的方法   $.extend 是jquery提供的方法 Symbol 可以确保  属性的唯一性 Set...
扩展javascript内置对象
黄彪博客
09-07 841
扩展了内置对象Array Date String的方法     /******************Array 对象扩展***********************/ /** 去除数组中的重复项 **/ Array.prototype.removeRepeat = function () { var reset = [], done = {}; for (var
JS 对象之扩展、密封和冻结
似水流年QC的博客
09-15 1218
JS 对象之扩展、密封和冻结
六、javascript扩展的对象功能
weixin_42710036的博客
01-12 363
javascript扩展的对象功能
JavaScript继承和扩展对象
Id_cat的博客
05-22 252
面向对象编程，必须熟悉子类（Subclassing）和继承（Inheritance）。 如果继承得到了一个坏声明，这是因为有些开发人员在需要修改程序时将其视为一个全面的解决方案，导致class层次结构可能变得难以管理。 我们还可以使用其他设计模式来使我们的应用程序更易于理解并随时可以进行更改。下面我将向你们展示如何使用继承以及装饰器和复合模式来改进您的程序设计。 继承 继承的理念是“一个对象“是...
JS中定义对象方式一：基于已有对象扩充其属性和方法
Geek_ymv的专栏
03-12 2029
var object = new Object(); object.name = "zhangsan"; object.sayName = function(name) { this.name = name; alert(this.name); } object.sayName("lisi");
js 扩展对象以及对象下的方法
sun
08-22 481
//扩展对象以及对象下的方法 const extend = (...arguments) => { let obj = {}; //Array.prototype.slice.call(arguments) 将类数组转化为真正的数组 //Array.from()方法或扩展运算符将参数转换为真实数组：Array.from(arguments); [].slic...
js 对象常用扩展
a83982451的博客
07-11 94
//js string对象扩展 (function() { // 除去两边空白 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }; //截取字符串了 String.prototype.cutStr ...
js 内建对象的拓展 shim/polyfill （ 内含js 判断对象的属性是否存在的方法）
朝阳39的博客
03-18 838
通过内建对象的原型，可以为内建对象拓展一些实用的方法 范例1 —— 检测指定元素是否在数组中 inArray() Array.prototype.inArray = function(needle) { for (var i = 0, len = this.length; i < len; i++) { if (this[i] === needle) { return true; } } return false; }; > var colors =
用es6如何合并两个对象
最新发布
09-01
在ES6中，我们可以使用对象解构和扩展运算符来合并两个对象。 首先，假设我们有两个对象 `obj1` 和 `obj2`： ```javascript const obj1 = { name: 'Alice', age: 25 }; const obj2 = { gender: 'female', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑木令

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值