ECMAScript-数组的遍历方式

文章目录

• • • • • 一、数组的遍历方式【ES5】
        • • 1. for循环
          • 2. forEach()：没有返回值，只是针对每个元素调用func
          • 3. map()：返回新的Array，每个元素为调用func的结果
          • 4. filter()：返回符合func条件的元素数组
          • 5. some()：返回boolean，判断是否有元素是否符合func条件
          • 6. every()：返回boolean，判断每个元素是否符合func条件
          • 7. reduce()：接收一个函数作为累加器
          • 8. for in
        • 二、数组的遍历方式【ES6】
        • • 1. find()：返回第一个通过测试的元素，如果没找到返回undefined
          • 2. findIndex()：返回的值为该通过第一元素的索引
          • 3. for of
          • 4. values()
          • 5. keys()
          • 6. entries()
        • 三、相关注意点
        • • 1. for、forEach、for...of区别
          • 2. some、every
          • 3. filter、map
          • 4. find、findIndex

一、数组的遍历方式【ES5】

1. for循环

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 推荐写法
for (let i = 0, count = arr.length; i < count; i++) {
  console.log(arr[i]);
}
           

2. forEach()：没有返回值，只是针对每个元素调用func

// elem 每个元素 index 下标 arr数组本身
arr.forEach(function (elem, index, arr) {
  console.log(elem, index);
});
// forEach 与 for的区别
forEach是无法中断循环的，无法使用continue,break这些关键字，中断循环
           

3. map()：返回新的Array，每个元素为调用func的结果

// map 返回新的数组，不会改变原有数组的值
let result = arr.map(function (value) {
  console.log(value);
  value += 1;
  return value;
});
console.log(arr, result); // [1, 2, 3] [2, 3, 4]
           

4. filter()：返回符合func条件的元素数组

// filter 从数组中找到符合条件的数据，组成新的数组
let result = arr.filter(function (value) {
  console.log(value);
  return value === 2;
});
console.log(arr, result); // [1, 2, 3] [2]
           

5. some()：返回boolean，判断是否有元素是否符合func条件

// some 从数组中找到符合条件的数据,返回boolean。只要找到一个就会返回true
let result = arr.some(function (value) {
  console.log(value);
  return value === 2;
});
console.log(arr, result); // [1, 2, 3] true
           

6. every()：返回boolean，判断每个元素是否符合func条件

// every 从数组中找到符合条件的数据,返回boolean。每一个都满足才会返回true
let result = arr.every(function (value) {
  console.log(value);
  return value === 2;
});
console.log(arr, result); // [1, 2, 3] false
           

7. reduce()：接收一个函数作为累加器

// 求和 reduce(function,initialValue) 函数和初始值
// function(pre, cur, index, array)
// pre表示上一次计算的值 cur 当前值 index当前值得下标 array 原数组
let result = arr.reduce(function (pre, cur, index, array) {
  return pre + cur;
}, 0);
console.log(arr, result); // [1, 2, 3] 6

// 求最大值
let max = arr.reduce(function (pre, cur, index, array) {
  return Math.max(pre, cur);
});
console.log(max);

// 去重
let arr = [1, 2, 3, 2];
let res = arr.reduce(function (pre, cur, index, array) {
  pre.indexOf(cur) === -1 && pre.push(cur);
  return pre;
}, []);
console.log(res); // [1, 2, 3]
           

8. for in

for (let index in arr) {
  console.log(index, arr[index]);
}
// 看似可以，其实是存在问题的，比如在Array原型定义一个自定义属性
Array.prototype.foo = function () {
  console.log("foo");
};
for (let index in arr) {
  console.log(index, arr[index]); // 会遍历出这个方法
}
           

二、数组的遍历方式【ES6】

1. find()：返回第一个通过测试的元素，如果没找到返回undefined

let res = arr.find(function (value) {
  return value == 2;
});
console.log(arr, res); // [1, 2, 3, 2] 2
           

2. findIndex()：返回的值为该通过第一元素的索引

let res = arr.findIndex(function (value) {
  return value == 2;
});
console.log(arr, res); // [1, 2, 3, 2] 1
           

3. for of

for (let item of arr) {
  console.log(item); // 1 2 3
}
           

4. values()

// 数组值
for (let item of arr.values()) {
  console.log(item); // 1 2 3
}
           

5. keys()

// 数组下标
for (let item of arr.keys()) {
  console.log(item); // 0 1 2
}
           

6. entries()

// 数组值和下标
for (let [index, item] of arr.entries()) {
  console.log(index, item); 
}
           

三、相关注意点

1. for、forEach、for…of区别

• 三者都是基本的由左到右遍历数组
• forEach 无法跳出循环；for 和 for …of 可以使用 break 或者 continue 跳过或中断。
• for …of 直接访问的是实际元素。for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取。
• for …of 与 for 如果数组中存在空元素，同样会执行。

2. some、every

• 二者都是用来做数组条件判断的，都是返回一个布尔值
• 二者都可以被中断
• some 若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false。
• every 与 some 相反，若有益元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true。

3. filter、map

• 二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组是，在回调函数中操作元素对象）
• 二者都会跳过空元素。有兴趣的同学可以自己打印一下
• map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致。
• filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同。
• map 生成的新数组元素是可自定义。
• filter 生成的新数组元素不可自定义，与对应原数组元素一致。

4. find、findIndex

• 二者都是用来查找数组元素。
• find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined。
• findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1。

下一篇：ECMAScript6-数组的扩展