前端百题斩【005】—— js中9种遍历对象的方法
对象是在编程中最常见的部分 很多情况下需要遍历该对象上的属性 那么有几种方式可以帮助我们遍历该对象上的属性呢 下面一起来了解九种方法。
下面测试方法所用的对象如下所示
const parentObj {
a: aaaaa ,
b: Symbol( bbbbb ),
c: ccccc
const Obj Object.create(parentObj, {
d: {
value: ddddd ,
enumerable: true
e: {
value: eeeee ,
enumerable: false
[Symbol( f )]: {
value: fffff ,
enumerable: true
});Object.keys(obj)Object.keys 返回一个所有元素为字符串的数组 其元素来自于从给定的object上面可直接枚举的属性(不含Symbol属性 。这些属性的顺序与手动遍历该对象属性时的一致。
console.log( Object.keys() , Object.keys(Obj)); // Object.keys() [ d ]Object.values(obj)
Object.values()返回一个数组 其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
console.log( Object.values() , Object.values(Obj)); // Object.values() [ ddddd ]Object.entries(obj)
Object.entries()返回一个数组 其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
console.log( Object.entries() , Object.entries(Obj)); // Object.entries() [ [ d , ddddd ] ]Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名 包括不可枚举属性但不包括Symbol值作为名称的属性 组成的数组。
console.log( Object.getOwnPropertyNames() , Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ d , e ]Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。
console.log( Object.getOwnPropertySymbols() , Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]for……in
遍历所有可枚举的属性 包括原型上的 然后可利用hasOwnProperty判断对象是否包含特定的自身 非继承 属性 其具有以下特点
1 index索引为字符串型数字 不能直接进行几何运算
2 遍历顺序有可能不是按照实际数组的内部顺序
3 会遍历数组的所有可枚举属性 包括原型
4 for...in更适合便利对象 不要使用for...in遍历数组
for(let key in Obj) {
// for in: d
// for in: a
// for in: b
// for in: c
console.log( for in: , key);
}for……of必须部署了Iterator接口后才能使用。使用范围 数组、Set和Map结构、类数组对象 arguments、DOMNodeList对象…… 、Generator对象以及字符串
for(let value of Object.values(Obj)) {
// for of: ddddd
console.log( for of: , value);
}forEach使用break不能中断循环使用
Object.values(Obj).forEach(value {
// forEach: ddddd
console.log( forEach: , value);
});Reflect.ownKeys(obj)返回一个数组 包含对象自身的所有属性 不管属性名是Symbol还是字符串 也不管是否可枚举。
console.log( Reflect.ownKeys() , Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ d , e , Symbol(f) ]2 特点总结类型特点Object.keys(obj)返回对象本身可直接枚举的属性(不含Symbol属性 Object.values(obj)返回对象本身可直接枚举的属性值(不含Symbol属性 Object.entries(obj)返回对象本身可枚举属性键值对相对应的数组(不含Symbol属性 Object.getOwnPropertyNames(obj)返回对象所有自身属性的属性名 不包括Symbol值作为名称的属性 Object.getOwnPropertySymbols(obj)返回一个给定对象自身的所有 Symbol 属性的数组for……in所有可枚举的属性 包括原型上的 for……of必须部署了Iterator接口后才能使用 例如数组、Set和Map结构、类数组对象、Generator对象以及字符串forEachbreak不能中断循环Reflect.ownKeys(obj)对象自身所有属性3 遍历顺序
上述遍历对象的属性时都遵循同样的属性遍历次序规则
首先遍历所有属性名为数值的属性 按照数字排序其次遍历所有属性名为字符串的属性 按照生成时间排序
最后遍历所有属性名为Symbol值的属性 按照生成时间排序
用下面代码来验证上述遍历规则
const Obj {
[Symbol(0)]: symbol ,
1 : 1 ,
c : c ,
1a1 : 11 ,
22223333: 2 ,
d : d
console.log(Reflect.ownKeys(Obj)); // [ 1 , 22223333 , c , 1a1 , d , Symbol(0) ]前端开发：JS中关于八皇后算法的使用 在前端开发过程中，关于算法的使用也是非常常见的操作，尤其是处理一些复杂的业务场景，还有就是前端获取到后端返回的复杂结构的数据，所以说前端开发中处处都有算法使用的场景。开发者从接触编程开发开始，就与算法脱不了干系了，算法又和数学分不开，总归到底还是对逻辑思维和数学计算知识的使用。但是大部分开发者没有去深度的针对算法领域去深入，而且有时候太深奥的算法也不常用，往往就忽略了。但是作为程序开发人员，无算法无编程，经典的算法还是要掌握的，本篇博文就来分享一下关于八皇后算法在前端领域的运用，记录一下，方便后期查阅使用。
前端开发：JS中使用到的贪心算法场景 在前端开发过程中，除了一般的逻辑使用之外，也会涉及到算法相关的知识，比如冒泡排序、数组去重/合并、贪心算法、八皇后算法等等，这些都是比较常用的前端算法相关的知识点。关于前端实际开发中用到的算法，虽然没有后端要求的那么多，但是也有比较重要的算法知识，本篇博文就来分享一下关于贪心算法的相关知识点，记录一下，方便查阅使用。