导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

常规遍历

准备数据

let arr = [
  {
    name: 'Lance',
    age: 27
  },
  {
    name: 'GC',
    age: 30
  },
  {
    name: 'Jerry',
    age: 28
  }
]
// 给 arr 原型上加属性
arr.__proto__["12"] = {
  name: 'Sherry',
  age: 25
}
arr.__proto__["13"] = {
  name: 'Summer',
  age: 27
}
Object.defineProperty(arr.__proto__, '14', {
  value: {
    name: 'Elephant',
    age: 34
  },
  enumerable: true, // 使其可枚举
})

标准 for 循环

• 可退出循环
  • break/return 退出循环
  • continue 跳过本次循环

for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  if (item.name === 'GC') break;
  console.log(item);
}
// 打印完 { name: 'Lance', age: 27 } 就退出

for-in 遍历对象

• 遍历顺序：先按从小到大顺序遍历出整数属性（integer properties，按照升序），然后其他属性按照创建时候的顺序遍历出来。
  1. 自身属性（1.1 整数属性 1.2 其他按创建顺序）
  2. 原型链属性（小步骤同自身属性）
• 特性：原型链上的可枚举属性也会遍历出来
• 可退出循环
  • break/return 退出循环
  • continue 跳过本次循环

for (const key in arr) {
  let item = arr[key];
  if (item.name === 'Elephant') break;
  console.log(item);
}

// 顺序：1. 自身属性（1.1 整数属性 1.2 其他按创建顺序） 2. 原型链属性（小步骤同自身属性）
// { name: 'Lance', age: 27 }
// { name: 'GC', age: 30 }
// { name: 'Jerry', age: 28 }
// { name: 'Sherry', age: 25 }
// { name: 'Summer', age: 27 }

var obj = {
  name: 'Lance',
  "1": "1",
  "2": "2",
  age: 27
}
obj.__proto__.aa = "aa";
obj.__proto__["22"] = "22";
obj.__proto__["11"] = "11";

for (const key in obj) {
  console.log(key, obj[key]);
}

// 打印
// 1 1
// 2 2
// name Lance
// age 27
// 11 11
// 22 22
// aa aa

⭐️ forEach

• 无法退出循环
  • break、continue 都会报错
  • 但可用 return 跳出本次回调，直接进行下次回调
  • 要想跳出 forEach ，得用 try-catch 包裹 forEach 抛错实现
• forEach 总是返回 undefined，即使你 return 了一个值

// 跳出本次循环
arr.forEach((cur, idx, arr) => {
  if (cur.name === 'GC') return;
  console.log(cur);
});
// 打印
// { name: 'Lance', age: 27 }
// { name: 'Jerry', age: 28 }

// try-catch + throw Error 退出循环
try {
  arr.forEach((cur, idx, arr) => {
    if (cur.name === 'GC') throw new Error('退出循环');
    console.log(cur);
  });
} catch (err) {
  console.log(err);
}
// 打印
// { name: 'Lance', age: 27 }
// Error: 退出循环

// 总是返回 undefined
const ret = arr.forEach((cur, idx, arr) => {
  if (cur.name === 'GC') return '123';
  console.log(cur);
  return '321';
});
console.log(ret); // undefined

for-of 遍历可迭代对象

• for...of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
• 可退出循环
  • break/return 退出循环
  • continue 跳过本次循环

for (const value of arr) {
  if (value.name === 'GC') break;
  console.log(value);
}
// { name: 'Lance', age: 27 }

ES5 遍历

• map (不改变原数组) 会给原数组中的每个元素都按顺序调用一次 callback 函数
• reduce (不改变原数组) 数组中的前项和后项做某种计算,并累计最终值

// arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// callback 参数
// (累积器, 当前元素, 当前元素索引, 当前数组)
// initialValue:指定第一次回调 的第一个参数
var wallets = [4, 7.8, 3]
var totalMoney = wallets.reduce(function (countedMoney, curMoney) {
    return countedMoney + curMoney;
}, 0)

• filter (不改变原数组)

var arr = [2, 3, 4, 5, 6]
var morearr = arr.filter(function (number) {
    return number > 3
}) // [4,5,6]

• every (不改变原数组) 测试数组的所有元素是否都通过了指定函数的测试
  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测
  • 如果所有元素都满足条件，则返回 true
  • 对于空数组，此方法返回 true

var arr = [1,2,3,4,5]
var result = arr.every(function (item, index) {
    return item > 2
}) // false

console.log([].every(v => v === undefined)); // true
console.log([].every(v => v === 'something')); // true

• some (不改变原数组) 测试是否至少有一个元素通过 callback 中的条件.
  • 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测
  • 如果没有满足条件的元素，则返回false
  • 对于放在空数组上的任何条件，此方法返回 false

// some(callback, thisArg)
// callback:
//  	(当前元素, 当前索引, 调用some的数组)

var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
    return item > 3
}) // true

console.log([].some(v => v === undefined)); // false
console.log([].some(v => v === 'something')); // false

ES6 遍历

• find() & findIndex() 根据条件找到数组成员
  • find() 定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回 undefined 。
  • findIndex() 定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。

// 语法
let new_array = arr.find(function(currentValue, index, arr), thisArg)
let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

// 这两个方法都可以识别NaN,弥补了 indexOf 的不足

// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素 -5
let b = [1, 4, -5, 10, NaN].find((n) => Object.is(NaN, n));  // 返回元素 NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引 2
let b = [1, 4, -5, 10, NaN].findIndex((n) => Object.is(NaN, n));  // 返回索引 4

• keys() & values() & entries() 遍历键名、遍历键值、遍历键名 + 键值
  • 三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。

// 语法
array.keys()   array.values()   array.entries()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

⭐️ 不要轻易在 forEach 中改变当前遍历元素本身

forEach 如果数组在迭代时被修改了，则其他元素会被跳过。

下面的例子会输出 "one", "two", "four"。当到达包含值 "two" 的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 "four" 正位于在数组更前的位置，所以 "three" 会被跳过。 forEach() 不会在迭代之前创建数组的副本。

var words = ['one', 'two', 'three', 'four'];
words.forEach(function(word) {
  console.log(word);
  if (word === 'two') {
    words.shift();
  }
});
// one
// two
// four