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(): 封闭一个对象,使其属性不可新增、删除,但属性值可以修改。

相关推荐
speedoooo7 分钟前
在现有App里嵌入一个AI协作者
前端·ui·小程序·前端框架·web app
全栈胖叔叔-瓜州19 分钟前
关于llamasharp 大模型多轮对话,模型对话无法终止,或者输出角色标识User:,或者System等角色标识问题。
前端·人工智能
三七吃山漆26 分钟前
攻防世界——wife_wife
前端·javascript·web安全·网络安全·ctf
用户479492835691530 分钟前
面试官问"try-catch影响性能吗",我用数据打脸
前端·javascript·面试
GISer_Jing1 小时前
前端营销技术实战:数据+AI实战指南
前端·javascript·人工智能
GIS之路1 小时前
使用命令行工具 ogr2ogr 将 CSV 转换为 Shp 数据(二)
前端
嘉琪0011 小时前
Vue3+JS 高级前端面试题
开发语言·前端·javascript
vipbic2 小时前
用 Turborepo 打造 Strapi 插件开发的极速全栈体验
前端·javascript
天涯学馆2 小时前
为什么 JavaScript 可以单线程却能处理异步?
前端·javascript
Henry_Lau6172 小时前
主流IDE常用快捷键对照
前端·css·ide