ES6对象扩展

这篇具有很好参考价值的文章主要介绍了ES6对象扩展。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ES6对象扩展是指在ES6中新增的一些对象属性和方法,包括对象属性的简写、计算属性名、对象方法的简写、对象的可迭代性、拓展运算符等。

下面是一些常用的ES6对象扩展:

  1. 对象属性的简写

ES6中,当对象的属性名和赋值变量名相同时,可以简写属性名称,例如:

let name = 'Tom';
let age = 20;
let obj = {
  name,
  age
};

这里的name和age属性名可以直接使用变量名来表示,不需要再写属性名和变量名。

  1. 计算属性名

在ES6中,可以使用计算属性名来动态设置对象属性名,例如:

let key = 'name';
let obj = {
  [key]: 'Tom'
};
console.log(obj);  // {name: "Tom"}

这里使用了方括号来表示计算属性名,key的值会被动态地赋给属性名。

  1. 对象方法的简写

在ES6中,定义对象方法时可以使用简写语法,例如:

let obj = {
  sayHello() {
    console.log('Hello World!');
  }
};
obj.sayHello();  // "Hello World!"

这里的sayHello方法与函数定义类似,不需要function关键字。

  1. 对象的可迭代性

在ES6中,对象可以通过定义Symbol.iterator属性来实现可迭代性,例如:

let obj = {
  name: 'Tom',
  age: 20,
  [Symbol.iterator]: function* () {
    let keys = Object.keys(this);
    for (let key of keys) {
      yield [key, this[key]];
    }
  }
};
for (let [key, value] of obj) {
  console.log(key + ": " + value);
}

这里使用了Symbol.iterator来定义一个迭代器,使对象可以进行迭代操作。

  1. 拓展运算符

在ES6中,可以使用拓展运算符...来展开数组、对象等,例如:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

let obj1 = {name: 'Tom'};
let obj2 = {age: 20};
let obj3 = {...obj1, ...obj2};
console.log(obj3);  // {name: "Tom", age: 20}

这里使用了拓展运算符...将多个数组或对象合并到一起

        ES6 在 Object 对象上新增了一些方法,包括:

  1. Object.is(): 判断两个值是否完全相等,包括 NaN 和 +0/-0 的区别。

  2. Object.assign(): 将源对象的属性复制到目标对象中,可以同时复制多个对象。

  3. Object.keys(): 返回一个数组,包含目标对象的所有可枚举属性的键名。

  4. Object.values(): 返回一个数组,包含目标对象的所有可枚举属性的键值。

  5. Object.entries(): 返回一个数组,包含目标对象的所有可枚举属性的键名和键值。

  6. Object.getOwnPropertyDescriptors(): 返回一个对象,包含目标对象所有属性的描述对象。

  7. Object.setPrototypeOf(): 设置一个对象的原型对象。

  8. Object.getPrototypeOf(): 返回一个对象的原型对象。

  9. Object.freeze(): 冻结一个对象,使其不可修改。

  10. Object.seal(): 封闭一个对象,使其属性不可新增、删除,但属性值可以修改。文章来源地址https://www.toymoban.com/news/detail-734430.html

到了这里,关于ES6对象扩展的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6基础知识二:ES6中数组新增了哪些扩展?

    一、扩展运算符的应用 ES6通过扩展元素符…,好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列 主要用于函数调用的时候,将一个数组变为参数序列 可以将某些数据结构转为数组 能够更简单实现数组复制 const a1 = [1, 2]; const […a2] = a1; // [1,2] 数组的合并也更为

    2024年02月16日
    浏览(38)
  • 【ES6】—数组的扩展

    ES5 的 slice 方法 arguments 是一个对应于传递给函数的参数的类/伪数组对象 ES6的Array.from()方法 PS: 通过new Array的时候,参数为多个时,参数表示的是数组的值;参数为一个时,参数表示是数组的长度 参数:copyWithin(target, start, end) target: 从哪个索引开始替换 strat: 元素复制的起始

    2024年02月12日
    浏览(32)
  • ES6的面向对象编程以及ES6中的类和对象

    1、面向对象 (1)是一种开发思想,并不是具体的一种技术 (2)一切事物均为对象,在项目中主要是对象的分工协作 2、对象的特征 (1)对象是属性和行为的结合体 (2)属性:体现对象的静态特征、 (3)行为:体现对象的动态特征(具体体现为函数/方法) 3、面向对象的三

    2024年02月09日
    浏览(40)
  • ES6-扩展运算符“...“

    … 称为 “展开运算符” (spread operator),它可以将数组或对象展开成一个列表或一组键值对,常用于组合两个或多个阵列。 说明:不会修改原数组 典型运用场景 求最大最小值 合并数组  组合对象 函数赋值  解构赋值

    2024年02月07日
    浏览(61)
  • ES6中的数值扩展

    二进制和八进制的前缀分别为0b(或0B)和0o(或0O)表示 在ES5的严格模式下,八进制不再允许使用前缀 0 表示 如果要将 0b 和 0x 前缀的字符串数值转为十进制,要使用Number方法 Number.isFinite() 用来检测一个数值是否是有限的(finite)。 Number.isNaN() 用来检测一个值是否为NaN 这两个方法与

    2024年02月07日
    浏览(42)
  • ES6函数新增了哪些扩展?

    ES6允许为函数的参数设置默认值 函数的形参是默认声明的,不能使用let或const再次声明 参数默认值可以与解构赋值的默认值结合起来使用 上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量x和y就不会生成,从而报错,这里设置默认值避免 参

    2024年02月06日
    浏览(45)
  • ES6...扩展操作符骚操作

    复制和合并数组变得更为简洁。不需要使用 concat() 方法或 slice() 方法,一个 … 操作符已经足够: 将数组作为一个需要单独一个个传入参数的函数的参数 对象属性展开复制 如果存在相同的值 后者覆盖前者 合并对象 类似于object.assign 不过,扩展属性并不总能生成与 Object.as

    2024年02月14日
    浏览(39)
  • ES6 对象合并

    在 JavaScript 中,可以使用不同的方法来合并对象的属性。这样可以将两个或多个对象的属性合并到一个新的对象中。这是在编程中常见的一种操作,尤其在处理配置、选项或数据更新时非常有用。 以下是几种常见的对象合并方法: 1. 使用 Object.assign() 方法: Object.assign() 方法

    2024年02月14日
    浏览(35)
  • JavaScript ES6实现继承

    1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处

    2024年02月16日
    浏览(44)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包