ES6 从入门到精通 # 08:扩展的对象的功能

简介: ES6 从入门到精通 # 08:扩展的对象的功能

说明

ES6 从入门到精通系列(全23讲)学习笔记。




扩展的对象的功能


es6 直接写入变量和函数,作为对象的属性和方法。

const name = "kaimo",
  age = 313;
// es5
const person = {
  name: name,
  age: age,
  getName: function () {
    console.log(this.name)
  }
}
// es6 简写
const person = {
  name,
  age,
  getName() {
    console.log(this.name)
  }
}
person.getName()


4963baa883c9430b9cab57ff28d9c0a0.png



function fn(x, y) {
  return {x, y};
}
console.log(fn(1,2));


1275ef483e0540e3a328626bc630d9fb.png

const obj = {};
obj.isShow = true;
const name = "kaimo";
obj[name + "bc"] = 123;
obj['f'+name] = function() {
  console.log(this)
}
console.log(obj)
// 可以改成
const name = "kaimo";
const obj = {
  isShow: true,
  [name + "bc"]: 123,
  ['f'+name]() {
    console.log(this)
  }
};
console.log(obj)


625c591b649c436a91d5b72906972cb7.png


对象的方法

// is() 比较两个值严格相等
console.log(NaN === NaN);
console.log(Object.is(NaN, NaN));


96acaedfdd574ae2a9c1216856c2471e.png


// assign() 对象的合并(浅拷贝)返回合并之后的新对象
let newObj = Object.assign({}, {name: "kaimo"}, {age: 313});
console.log(newObj);



684fca52099b4ddeb695d37b98ff7b3d.png










目录
相关文章
ES6学习(8)原生继承
ES6学习(8)原生继承
|
4月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
137 4
|
6月前
|
JavaScript 前端开发 开发者
深入解析Angular装饰器:揭秘框架核心机制与应用——从基础用法到内部原理的全面教程
【8月更文挑战第31天】本文深入解析了Angular框架中的装饰器特性,包括其基本概念、使用方法及内部机制。装饰器作为TypeScript的关键特性,在Angular中用于定义组件、服务等。通过具体示例介绍了`@Component`和`@Injectable`装饰器的应用,展示了如何利用装饰器优化代码结构与依赖注入,帮助开发者构建高效、可维护的应用。
54 0
|
9月前
|
算法 JavaScript 前端开发
ES6学习笔记--对象的拓展
ES6学习笔记--对象的拓展
|
网络架构
ES6学习(六)—函数的扩展
ES6学习(六)—函数的扩展
|
JavaScript 前端开发
ES6新增特性学习
ES6新增特性学习
|
JavaScript 前端开发
5个高级ES6特性
5个高级ES6特性
|
前端开发
前端学习笔记202306学习笔记第四十二天-ES12新增的特性2
前端学习笔记202306学习笔记第四十二天-ES12新增的特性2
58 0
|
前端开发
前端学习笔记202306学习笔记第四十二天-ES12新增的特性1
前端学习笔记202306学习笔记第四十二天-ES12新增的特性1
57 0
|
前端开发
前端学习笔记202306学习笔记第四十二天-ES10新增的特性1
前端学习笔记202306学习笔记第四十二天-ES10新增的特性1
67 0