JavaScript #

ES5

let arr = [1,2,3,4,5]

// for 循环
for (let i = 0; i < arr.length; i++) {
	console.log("for循环：",i,arr[i]) // i 为 index，arr[i] 为对应元素
}
// for 循环优化版
for(let i = 0; len = arr.length,i < len; i++) {
	console.log("for循环：",i,arr[i]) // i 为 index，arr[i] 为对应元素
}



/*
 * forEach
 * value: 当前值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：无
 * 不改变原数组
 */ 
arr.forEach((value, index, array) => {
	return value * 2;
});
console.log('forEach',arr);  //[1, 2, 3, 4, 5]



/*
 * map
 * value: 当前值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：符合表达式的新数组
 * 改变原数组
 */
let mapArr = arr.map((value, index, array) => {
	return value * 2;
});
console.log('map',mapArr,arr); // [2, 4, 6, 8, 10], [1, 2, 3, 4, 5]



/*
 * filter：过滤
 * value: 当前值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：符合filter表达式的数组
 * 不改变原数组
 */
let filterArrs = arr.filter((value, index, array) => {
	if (value > 2) {
		return true;
	} else {
		return false;
	}
});
console.log('filter',filterArrs,arr); //[3, 4, 5], [1, 2, 3, 4, 5]



/*
 * reduce：累加器
 * prev：前两个值的和；next：下一个值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：所有元素累加后的结果
 * 不改变原数组
 */
let reduceArrs = arr.reduce((prev, next, index, array) => {
	console.log('reduceArrs',prev, next, index, array)
	console.log(prev);   // 1，3，6，10
	console.log(next);   // 2，3，4，5
	return prev + next;
});
console.log('reduce',reduceArrs, arr);  // 15, [1, 2, 3, 4, 5]



/*
 * some
 * value: 当前值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：数组中存在一个符合表达式的值则返回true，否则返回false
 * 不改变原数组
 */
let someArrs = arr.some((value, index, array) => {
	return value > 3;
});
console.log('some',someArrs, arr);  // true, [1, 2, 3, 4, 5]

/*
 * every
 * value: 当前值；index：下标；array：当前数组
 * return不能中断函数继续执行，
 * 返回值：数组中每一项都符合表达式则返回true，否则返回false
 * 不改变原数组
 */
let everyArrs = arr.every((value, index, array) => {
	return value > 3;
});
console.log('every', everyArrs, arr);  //false, [1, 2, 3, 4, 5]



/*
 * for...in
 * 不能使用return
 * 返回值：无
 * 不改变原数组
 */
let arr = [1, 2, 3, 4, 5];
for(let i in arr) {
	console.log(i,arr[i]);  // i 为 index，arr[i] 为对应元素
}




/*
 * for...of
 * 不能使用return
 * 返回值：无
 * 不改变原数组
 */
let arr = [1, 2, 3, 4, 5];
for (let i of arr) {
	console.log(i);  // i：数组中每个元素
}


ES6
/*
 * find、findIndex
 * 不能使用return
 * 返回值：符合表达式的值的数组元素/下标
 * 不改变原数组
 */
let arrFind = [
	{name: 'a', age: 1},
	{name: 'b', age: 2},
	{name: 'c', age: 3},
	{name: 'd', age: 4},
];
console.log(arrFind.find((value => value.age === 3)))
console.log(arrFind.findIndex((value => value.age === 3)))


/*
 * keys(键名/下标)，values(值)，entries(键值对)   
 * 不能使用return
 * 返回值：无
 * 不改变原数组
 */
for (let index of arr.keys()) {
	console.log(index)
}
for (let elem of arr.values()) {
	console.log(elem)
}
for (let [index, elem] of arr.entries()) {
	console.log(index, elem)
} 
    
    
    
    
`
总结：
一般的循环用for,for in,for of 和 forEach
需要映射为新数组的用map，
需要筛选出想要的用filter，
数值需要进行累加的用reduce，
找值用some和every，
数组对象查找用find、findIndex
获取下标、值、或键值对用keys，values，entries   
并且想知道值的具体位置的可以用indexOf和lastIndexOf
`


// 性能对比测试
let arr = Array(100).fill(5);

console.time("for循环");
for(let i = 0; i < arr.length; i++) {
	arr[i] = arr[i] * 2;
}
console.timeEnd("for循环");  // for循环: 0.041ms

console.time("for...in循环");
for(let i in arr) {
	arr[i] = arr[i] * 2;
}
console.timeEnd("for...in循环"); // for...in循环: 0.126ms

console.time("for...of循环");
for(let i of arr) {
	arr[i] = arr[i] * 2;
}
console.timeEnd("for...of循环");  // for...of循环: 3532.695ms

console.time("forEach循环");
arr.forEach((value, index, arr) => {
	arr[index] = value * 2;
});
console.timeEnd("forEach循环");  // forEach循环: 0.103ms

console.time("map循环");
arr.map((value, index, arr) => {
	arr[index] = value * 2;
});
console.timeEnd("map循环"); //map循环: 0.086ms

`
结论：for > for in > for of > forEach > map
`

// 引用链接：https://juejin.cn/post/6844903865947521031

let obj = {
	name: "Elliot",
	age: 30,
	isAdmin: true
};

/*
 * for...in
 * 不能使用return
 * 返回值：无
 * 不改变原数组
 */
for (let i in obj) {
	console.log(i, arr[i]);  // name, Elliot; age, 30;  isAdmin, true
}



/*
 * Object.keys：返回 key 值的数组
 * Object.values：返回 values 值的数组
 * Object.entries：返回 key 及 values 值的二维数组
 */
let keys = Object.keys(obj);
console.log(keys);  // ['name', 'age', 'isAdmin']

let values = Object.values(obj);
console.log(values); // ['Elliot', 30, true]

var entries = Object.entries(obj);
console.log(entries);