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})
相关文章
|
4天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
17天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
26天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
|
28天前
|
机器学习/深度学习 人工智能 JavaScript
js和JavaScript
js和JavaScript
21 4
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
1月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
27 2
|
20天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
5天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1

热门文章

最新文章