首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS ES6通过键数组过滤对象的正确方法

在JavaScript ES6中,如果你想通过键数组来过滤一个对象,你可以使用Array.prototype.reduce()方法来实现。这个方法可以遍历键数组,并根据这些键来构建一个新的对象,这个新对象只包含原对象中对应键的属性。

以下是一个示例代码,展示了如何通过键数组过滤对象:

代码语言:txt
复制
const originalObject = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};

const keysToKeep = ['a', 'c'];

const filteredObject = keysToKeep.reduce((accumulator, currentKey) => {
  if (originalObject.hasOwnProperty(currentKey)) {
    accumulator[currentKey] = originalObject[currentKey];
  }
  return accumulator;
}, {});

console.log(filteredObject); // 输出: { a: 1, c: 3 }

在这个例子中,originalObject是要过滤的对象,keysToKeep是一个包含我们想要保留的键的数组。reduce()方法遍历keysToKeep数组,并检查originalObject是否有对应的属性。如果有,就将这个属性添加到累加器对象accumulator中。最后,reduce()返回一个新的对象,这个对象只包含原对象中指定的键。

这种方法的优势在于它提供了一种简洁且灵活的方式来根据键数组过滤对象。它适用于任何大小的对象,并且可以很容易地与其他ES6特性(如箭头函数)结合使用,以提高代码的可读性和效率。

如果你遇到了问题,比如过滤后的对象不符合预期,可能的原因包括:

  • 键数组中的键名拼写错误或不存在于原对象中。
  • 原对象的属性是不可枚举的,因此不会被reduce()方法遍历到。
  • 原对象被修改了,在过滤过程中添加或删除了属性。

解决这些问题的方法包括:

  • 确保键数组中的键名正确无误,并且确实存在于原对象中。
  • 使用Object.getOwnPropertyNames()Reflect.ownKeys()来获取所有属性,包括不可枚举的属性。
  • 在过滤过程中避免修改原对象,或者在修改后重新获取原对象的最新状态。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【说站】js创建数组对象方法

    js创建数组对象方法 说明 1、返回新创建并初始化数组。如果调用构造函数数组()时没有参数,则返回数组为空,长度字段为0。...调用构造函数时,只向其传递一个数值参数,构造函数将返回一个包含指定数量元素和未定义元素数组。 2、当使用其他参数调用array()时,构造函数使用参数指定值初始化数组。...当构造函数在没有新运算符情况下作为函数调用时,其行为与使用新运算符调用时完全相同。...定义 方法一: new Array(); 方法二: new Array(期望数组元素个数); 方法三: new Array(参数列表1,参数列表2, ..., 参数列表n); 实例 var arr ...= new Array(3); arr[0] = "one"; arr[1] = "two"; arr[2] = "three"; console.log(arr.length); 以上就是js创建数组对象方法

    5K40

    总结几个对象数组方法是_js对象转为数组

    大家好,又见面了,我是你们朋友全栈君。...a', 1: 'b', 2: 'c' } => ayy=['a','b','c'] ---- 1、Array.from(object) 注: 1️⃣ object中必须有length属性,返回数组长度取决于...length长度 2️⃣ key 值必须是数值 2、Object.values(object) 注:与第一种不同是不需要length属性,返回一个对象所有可枚举属性值 返回数组成员顺序...100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"] 3、Object.keys(object) 注:返回一个对象自身可枚举属性组成数组...,数组中属性名排列顺序和使用 for…in 循环遍历该对象时返回顺序一致 4、Object.entries(object) 注:返回一个给定对象自身可枚举属性键值对数组 const obj

    3.4K30

    JavaScript数组去重—ES6两种方式

    Map对象 Map是ES6 提供数据结构。 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个或一个值。 下表列出了 Map 对象方法。...数组 filter() 方法 filter() 方法创建一个新数组,新数组元素 是 通过检查 指定数组 中 符合条件所有元素。...//返回arr数组过滤结果,结果为一个数组 //过滤条件是,如果res中没有某个,就设置这个值为1 return arr.filter((a) => !...方法二 分析 function unique(arr) { //通过Set对象,对数组去重,结果又返回一个Set对象 //通过from方法,将Set对象转为数组 return Array.from...朋友,可以看这里 js扩展运算符 参考 ES6新特性:Javascript中Map和WeakMap对象 http://www.cnblogs.com/diligenceday/p/5484130.

    1.2K70

    关于JS那些事:数据类型判断方法几种方法和判断是不是空数组对象

    在我们日常写代码时候会有要判断数组或者对象类型时候。 而JS也给了我们很多判断类型方法,但还是有很多特殊情况导致我们判断失误。...这玩意不是个不是个数组吗?怎么打印出来是对象? 原因是的本质是就是对象,所以typeof 会打印出来是个对象类型。...和数组一样特殊类型还有很多,比如说: null(空),空用typeof打印出来是一个这玩意("")类型为字符串,这你说得清???就是如此,所以衍生出了一些专属方法。...(2) instanceof 这是一个万能方法,基本上类型都能检测 用法: console.log(cars instanceof Array) 如果是数组返回true否则返回false (小thips...这个方法返回结果是false才是数字,因为NaN意思是不是一个数字,也就是非数字,所以跟正常方法是反过来,正常是如果是数字就返回true,它这个判断是意思是 是不是一个非数字。

    1.7K30

    JavaScript基础知识梳理(上)

    普通函数和箭头函数this 原始数据类型及其判断和转化方法 深浅拷贝及实现 JS 事件模型 常见高阶函数 普通函数和箭头函数 this 还是一道经典题目,下面的这段代码输出是什么?...① es5 普通函数: 函数被直接调用,上下文一定是window 函数作为对象属性被调用,例如:obj.foo(),上下文就是对象本身obj 通过new调用,this绑定在返回实例上 ② es6 箭头函数...原始数据类型和判断方法 题目:JS原始数据类型?...对于数组判断,使用Array.isArray(): typeof: typeof 基本都可以正确判断数据类型 typeof null和typeof [1, 2, 3]均返回”object” ES6...(src)):这种方法有局限性,如果属性值是函数或者一个类实例时候,无法正确拷贝 借助 HTML5 MessageChannel:这种方法有局限性,当属性值是函数时候,会报错 <script

    54330

    ECMAScript 6 新特性总结

    注: 1、ES6支持性可以查看:http://kangax.github.io/compat-table/es6/ 2、Google V8引擎已经部署了ES6部分特性,使用Node.js 0.12...全局对象是最顶层对象,在浏览器环境指的是window对象,在Node.js指的是global对象。...五、数组扩展 5.1 数组推导 数组推导就是直接通过现有数组生成新数组一种简化写法,通过for...of结构,允许多重循环。...Object.setPrototypeOf()方法作用与proto相同,用来设置一个对象prototype对象,它是ES6正式推荐设置原型对象方法。...6.5 Proxy Proxy用于修改某些操作默认行为,等于在目标对象之前,架设一层“拦截”,外界对该对象访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界访问进行过滤和改写。

    1.5K60

    ESMAScript 6.0高级

    这给它使用带来了很大限制。 ES6提供了Map数据结构。它类似于对象,也是键值对集合,但是“范围不限于字符串。         ...1.6Set数据结构(Set集合) ES6提供了新数据结构Set。它类似于数组,但是成员值都是唯一,没有重复值。...,需要借助keys转换成“数组” console.info(`对象是${key},值是${obj4[key]}`); } for(let [k,v] of Object.entries(obj4...)){//也可以借助entries转换成“键值对” console.info(`entries : 对象是${k},值是${v}`); } //补充:自定义对象通过特殊处理([Symbol.iterator...( 处理函数 ); //旧数组每一个元素,都将通过“处理函数”进行处理 //实例:将数组 ['a','b','c'] 转换成字符串 'cba' var m = arr4.map( s => {

    73820

    ECMAScript 6 新特性总结

    注: 1、ES6支持性可以查看:http://kangax.github.io/compat-table/es6/ 2、Google V8引擎已经部署了ES6部分特性,使用Node.js 0.12...---- 五、数组扩展 5.1 数组推导 数组推导就是直接通过现有数组生成新数组一种简化写法,通过for...of结构,允许多重循环。...---- 六、对象扩展 6.1 增强对象写法 ES6允许直接写入变量和函数,作为对象属性和方法。...6.5 Proxy Proxy用于修改某些操作默认行为,等于在目标对象之前,架设一层“拦截”,外界对该对象访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界访问进行过滤和改写。...在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组对象、Set和Map结构。

    81910

    Uncaught SyntaxError: Cannot use import statement outside a module解决方法(使用Es6语法引入js对象文件报错)

    目录结构 本地html文件中script标签引入ES6模块,直接在浏览器中打开该html文件,发现报错了:Uncaught SyntaxError: Cannot use import statement...html> 对应indexes.js: import app from '../...../siteinfo.js' // es6语法---准备跳过jQuery直接使用面向对象vue console.log(app.domain); 对应 siteinfo.js import app.../siteinfo.js' // es6语法---准备跳过jQuery直接使用面向对象vue console.log(app.domain); 这里报错原因是用了es6语法, 浏览器默认将它作为...未经允许不得转载:肥猫博客 » Uncaught SyntaxError: Cannot use import statement outside a module解决方法(使用Es6语法引入js对象文件报错

    1.5K20

    扶我起来,前端还没倒下,我不能睡

    1.4 mounted 实例挂载到 dom 之后被调用,可以当成是 vue 对象 ready 方法来使用,一般用它来做 dom 初始化操作。...它会根据控件类型自动选取正确方法来更新元素 2.1单行文本框 Message is: {{ message...,从而做相应操作,侦听属性是一个对象,它是要监听对象或者变量,值一般是函数,当你侦听元素发生变化时,需要执行函数,这个函数有两个形参,第一个是当前值,第二个是变化后值。...,之前做 js 模块化开发,是用一些 js 库来模拟实现,在 ES6 中加入了模块功能,和 python 语言一样,python 中一个文件就是一个模块,ES6 中,一个 js 文件就是一个模块,...6.4 对象简写 javascript 对象ES6 中可以做一些简写形式,了解这些简写形式,才能方便我们读懂一些在 javascript 代码中简写对象

    82110
    领券