🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
*遍历对象* * * * * * 比较常见的引用类型有 `Object`、`Array`,下面首先来看下遍历 `Object` 常用的方法: ``` 1.最常用的就是 for in 循环, 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性), 该循环会把实例原型对象上面可枚举的属性遍历出来。 let obj = {name: 'zep', age: 25} Object.prototype.abc = 'abc' for (let key in obj) { console.log(obj[key]) } ``` ![](https://box.kancloud.cn/c9b08c788c0bac75c2aaf3626d468586_300x206.png) * * * * * ``` 2.使用Object.keys(), 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性), 该循环不会把实例原型对象上面可枚举的属性遍历出来。 let obj = {name: 'zep', age: 25} Object.prototype.abc = 'abc' Object.keys(obj).forEach(key => { console.log(obj[key]) }) ``` ![](https://box.kancloud.cn/37edc3201076dfc72fcabc131d2330e5_293x200.png) * * * * * ``` 3.使用Object.getOwnPropertyNames(obj)遍历, 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。 let obj = {name: 'zep', age: 25} Object.prototype.abc = 'abc' Object.getOwnPropertyNames(obj).forEach(key => { console.log(obj[key]) }) ``` ![](https://box.kancloud.cn/2b1ac1844a53b70868440af512311894_361x207.png) * * * * * 接下来是遍历 `Array` 常用的方法: ``` 1.最常用的就是普通for循环 let arr = [1, 2, 3, 4] for (let i = 0, len = arr.length; i < len; i++) { console.log(arr[i]) } ``` ``` 2.使用forEach循环, forEach这种方法也有一个小缺陷: 你不能使用break语句中断循环, 也不能使用return语句返回到外层函数。 let arr = [1, 2, 3, 4] arr.forEach((val, index) => { console.log(val, index) }) ``` ``` 3.使用 map 遍历, map 即是"映射"的意思, 用法与 forEach 相似, 但是比 forEach 好的一点是 map 支持 return。 let arr = [1, 2, 3, 4] let result = arr.map((val, index) => { return val * 2 }) ``` ![](https://box.kancloud.cn/f07682490822a301f64e7524ffb2a1c9_322x170.png) * * * * * ``` 4.使用 ES6 提供的 for of 循环, 它支持数组、类数组和字符串循环 for of这个方法避开了for in循环的所有缺陷, 与 forEach 不同的是,它可以正确响应break、continue和return语句 缺点是没有 index, 不能遍历对象 let arr = [1, 2, 3, 4] for (let val of arr) { console.log(val) } ``` ![](https://box.kancloud.cn/da6acab00340ef35d768ed8ed7925bc3_208x208.png)