JavaScript —— JSchallenger Objects 对象练习(测试一下你的 JS 对象基础)【专题三】

简介: JavaScript —— JSchallenger Objects 对象练习(测试一下你的 JS 对象基础)【专题三】

JavaScript 对象练习

1. 键值对,去掉键的引号
  Test: myFunction('a', 'b') Expected: {a: 'b'}
  Test: myFunction('b', 'w') Expected: {b: 'w'}

可以使用 [] 去掉 ''

  function myFunction(a, b){
    return {[a] : b}
  }
  myFunction('a', 'b')
2. 数组 a 和数组 b,创建一个键 a 和相应值 b 属性的对象,并返回
  Test: myFunction(['a', 'b', 'c'], [1, 2, 3])  Expected: {a: 1, b: 2, c: 3}
  Test: myFunction([1, 'b'], ['a', 2])          Expected: {1: 'a', b: 2}

代码实现:reduce() 用法 | 参考链接


acc 是一个对象

cur 相当于直接写一个字符串,但因为是变量,所有用 [] 括起来

总的来说,就是 ...acc 得到的是一个最终的总对象,[cur] 为当前的 key 值,b[i] 为获取对应的 b数组 中的值,{} 传递给函数的初始值是个对象。

9d643468e0bc4cb9ae041e2f8e4c6770.png

  function myFunction(a, b) {
        const res = a.reduce((acc, cur, i) => {
            acc[cur] = b[i]
            return acc
        }, {})
        return res
    }
    myFunction([1, 'b'], ['a', 2])


  function myFunction(a, b) {
        return a.reduce((acc, cur, i) => ({ ...acc, [cur]: b[i] }), {})
    }
    myFunction([1, 'b'], ['a', 2])
3. 以数组的形式返回对象的键
  Test: myFunction({a: 1, b: 2, c: 3})      Expected: ['a', 'b', 'c']
  Test: myFunction({w: 15, x: 22, y: 13})   Expected: ['w', 'x', 'y']

使用 Object.key() 方法,得到键值,并以数组的方式返回

  function myFunction(arr) {
        return Object.keys(arr)
    }
    myFunction({a: 1, b: 2, c: 3})
4. 返回对象 value 值的总和
  Test: myFunction({a: 1, b: 2, c: 3})      Expected: 6
  Test: myFunction({w: 15, x: 22, y: 13})   Expected: 50

使用 Object.values() 方法,得到 value 值,再通过 reduce() 方法累加

  function myFunction(a) {
        return Object.values(a).reduce((sum, cur) => sum + cur, 0)
    }
    myFunction({a: 1, b: 2, c: 3})
5. 返回除键值为 b 的原始对象
  Test: myFunction({ a: 1, b: 7, c: 3 })   Expected: { a: 1, c: 3 }
  Test: myFunction({ b: 0, a: 7, d: 8 })   Expected: { a: 7, d: 8 }

代码实现:

  1. 使用 delete 删除指定键的键值对。(此方法会改变原始对象,不推荐使用)
  2. 使用 ... 扩展运算符,取出键的值不为 b 的剩余对象
  function myFunction(obj) {
        let deleteB = delete obj.b
        return obj
    }
    myFunction({a: 1, b: 2, c: 3})
  function myFunction(obj) {
        const { b, ...rest } = obj
        return rest
    }
    myFunction({a: 1, b: 2, c: 3})
相关文章
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
7月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
433 24
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
259 23
|
10月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
238 32
|
9月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
3029 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
208 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
12月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象

热门文章

最新文章