1.数组的遍历
首先我们先简单介绍了跳出循环的几种方式
// 跳出循环的方式有如下几种
// return 函数执行被终止
// break 循环被终止
// continue 循环被跳过
1.普通版for:最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间
for 循环中的变量 i,由于 ES5并没有块级作用域的存在,它在循环结束以后仍然存在于内存中,所以建议使用函数自执行的方式来避免;
let arr1 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6]
for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i])
}
2.优化版for:使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
这种方法基本上是所有循环遍历方法中性能最高的一种
let arr2 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6], len, i;
for (i = 0, len = arr2.length; i < len; i++) {
console.log(arr2[i]);
}
3.foreach循环:数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱
注意:最重要的一点,可以添加第二参数,为一个数组,而且回调函数中的this会指向这个数组。而如果没有第二参数,则this会指向window。
let arr3 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
arr3.forEach((value, index) => {
console.log(index + ':' + value);
})
4.foreach变种:由于foreach是Array型自带的,对于一些非这种类型的,无法直接使用(如NodeList),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。实际性能要比普通foreach弱
let arr4 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6]
Array.prototype.forEach.call(arr4, (value, index) => {
console.log(index + ':' + value)
});
5.for...in:这个循环很多人爱用,但实际上,经分析测试,在众多的循环遍历方式中 它的效率是最低的;for...in循环会遍历一个object所有的可枚举属性。for...in循环主要是为遍历对象而设计的,不适用于遍历数组。
let arr5 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
for (i in arr5) {
console.log(i + ':' + arr5[i])
}
6.map遍历:这种方式也是用的比较广泛的,虽然用起来比较优雅,但实际效率还比不上foreach
let arr6 = [1, 2, 3, 4, 5, 3, 2, 3, 4, 6];
arr6.map((value, index) => {
console.log(index + ':' + value)
})
7.for...of:这种方式是es6里面用到的,性能要好于for in,但仍然比不上普通for循环;for...of会遍历具有iterator接口的数据结构
let arr7 = ['da', 'fadf', '34ea', 'dfqa', 'dfaefea'];
for (let value of arr7) {
console.log(value);
}
8.
let arr8 = [1, 1, 2, 3, 5, 43, 3, 4, 3, 5, 3, 5]
for (let [index, value] of arr8.entries()) {
console.log(index + ':' + value)
}
对象的遍历
1. for in:or in 主要用于遍历对象的可枚举属性,包括自有属性、继承自原型的属性,示例中的属性age为不可可枚举,所以没有输出
let obj1 = { "name": "tom", "sex": "male" };
Object.defineProperty(obj1, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性,为一个函数
Object.prototype.protoPer2 = 2;////通过原型链增加属性,为一个整型值2
for (let key in obj1) {
if (obj1.hasOwnProperty()) //hasOwnProperty() 方法来确定属性是否时对象自身属性
{
console.log(key + ':' + obj1[key])
}
}
2. Object.keys:Object.keys主要用于遍历对象自有的可枚举属性,不包括继承自原型的属性和不可枚举的属性。
let obj2 = { "name": "tom", "sex": "male" };
Object.defineProperty(obj2, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性,为一个函数
Object.prototype.protoPer2 = 2;////通过原型链增加属性,为一个整型值2
console.log("Object.keys:")
console.log(Object.keys(obj2));
3.Object.getOwnProperty此方法用于返回对象的自有属性,包括可枚举和不可枚举的属性
let obj3 = { "name": "tom", "sex": "male" };
Object.defineProperty(obj3, "age", { value: "18", enumerable: false });//增加不可枚举的属性age
Object.prototype.protoPer1 = function () { console.log("name is tom"); };//通过原型链增加属性,为一个函数
Object.prototype.protoPer2 = 2;////通过原型链增加属性,为一个整型值2
console.log("Object.getOwnPropertyNames:");
console.log(Object.getOwnPropertyNames(obj3));
最后来简单的讨论下:for of 与 forEach 与 for in
for of 用于循环可迭代对象,包括有 Array, Set, Map, 字符串
而 Array, Set, Map 都有 forEach 方法
另外,NodeList 不是 Array, Set, Map,但是一个可迭代对象,可以用 for of 遍历
此外,用 for of 循环对象时可以通过 break 提前终止,而 forEach 无法提前跳出循环
for in 遍历对象的可枚举属性,包括其原型链上的属性,且不保证顺序
若要遍历对象自身的可枚举属性,使用 hasOwnProperty()
方法来确定属性是否时对象自身属性
Object.getOwnPropertyNames(obj)
, 返回对象自身可枚举或不可枚举属性
反正已经扯远了,那就再扯远一点, Object.assign()
方法将所有可枚举属性的值从一个或多个源对象复制到目标对象