带你读《现代Javascript高级教程》五、JavaScript对象(3)

简介: 带你读《现代Javascript高级教程》五、JavaScript对象(3)

带你读《现代Javascript高级教程》五、JavaScript对象(2)https://developer.aliyun.com/article/1349678?groupCode=tech_library


3. 实现对象 API

下面是一个简单的示例,展示了如何模拟实现几个常用的对象 API:Object.keys()Object.values() Object.entries()

 

// 模拟实现 Object.keys()function getKeys(obj) {
  const keys = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      keys.push(key);
    }
  }
  return keys;}
// 模拟实现 Object.values()function getValues(obj) {
  const values = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      values.push(obj[key]);
    }
  }
  return values;}
// 模拟实现 Object.entries()function getEntries(obj) {
  const entries = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      entries.push([key, obj[key]]);
    }
  }
  return entries;}
const person = {
  name: 'John',
  age: 25,};
console.log(getKeys(person)); // 输出: ['name', 'age']
console.log(getValues(person)); // 输出: ['John', 25]
console.log(getEntries(person)); // 输出: [['name', 'John'], ['age', 25]]

 

在上面的示例中,我们使用自定义函数 getKeys()、getValues() getEntries() 来模拟实现了 Object.keys()、Object.values() Object.entries() 的功能。

 

4. 应用场景

JavaScript 对象在前端开发中有广泛的应用场景,包括但不限于以下几个方面:

 

  • 数据存储和操作:对象允许我们以键值对的形式存储和操作数据,非常适合表示复杂的数据结构。
  • 面向对象编程:对象是面向对象编程的核心概念,允许我们创建和管理对象的行为和属性。
  • DOM 操作:在前端开发中,我们经常需要操作网页的 DOM 元素,使用对象可以更方便地访问和操作 DOM。
  • 数据交互和传输:在与后端进行数据交互时,常常使用对象来传输和接收数据,例如通过 AJAX 请求返回的 JSON 数据。

5. 参考资料

  • MDN Web Docs - Working with objectsopen in new window
  • MDN Web Docs - Object

 

相关文章
|
1天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
25 10
|
2天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
10 1
|
3天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
9 1
|
10天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
10天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
10天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
10天前
|
JavaScript 前端开发
JavaScript 日期对象
JavaScript 日期对象
|
10天前
|
存储 JavaScript 前端开发
JavaScript对象
JavaScript对象
|
10天前
|
JavaScript 前端开发
JavaScript的math对象
JavaScript的math对象
|
10天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)