ES6—数组方法的扩展

目录

一、概述

二、常用方法

1、Array.prototype.forEach

2、Array.prototype.filter

3、Array.prototype.map

4、Array.prototype.find

5、Array.prototype.includes

6、Array.prototype.indexOf

7、Array.prototype.some

8、Array.prototype.every

9、Array.prototype.fill

三、拓展方法 

1、Array.from

2、Array.of

3、Array.isArray

4、Array.prototype.copyWithin

5、Array.prototype.findIndex

6、Array.prototype.reduce

7、Array.prototype.entries

8、Array.prototype.keys

9、Array.prototype.values

10、Array.prototype.flat

11、 Array.prototype.flatMap

12、数组的空位

---

一、概述

集中整理数组的操作方法，ES5部分方法参考：https://blog.csdn.net/weixin_42472040/article/details/88369060

二、常用方法

1、Array.prototype.forEach

作用

遍历数组，每个数组元素均执行一次回调函数，不检测空数组，且无返回值。

语法

array.forEach((currentValue, index, origin) => {}, thisValue)

forEach有两个参数，参数一设置回调函数，必填。参数二选填，用来设置回调函数内部的this指向，若省略，或传入null、undefined，则回调函数内部的this指向全局对象或undefined（严格模式）。

回调函数有三个参数，第一个参数必填，表示当前元素的值，第二个参数选填，表示当前元素的索引值，第三个参数选填，表示当前遍历的数组本身，即原数组。

const arr = [1, 2, 3];
arr.forEach((item, index, origin) => {
  console.log(arr === origin); // true
});

注意，使用参数二设置this指向时，回调函数不能使用箭头函数，否则参数二无效。箭头函数没有自己的this，其this继承自该函数定义时所处的对象，而不是执行时的对象。

const arr = [1, 2, 3];
// 使用箭头函数
arr.forEach(() => {
  console.log(this); // VueComponent{...}
}, 'demo');

// 使用普通函数
arr.forEach(function(){
  console.log(this); // demo
}, 'demo')

拓展实例1

forEach本身不改变原数组，仅仅遍历数组，但回调函数被调用时，是有办法改变原数组的。如下代码所示，回调函数第一个参数表示当前遍历的数组元素，修改它对原数组没有任何影响。

<script>
export default {
  methods: {
    btn() {
      const arr = [1, 2, 3];
      arr.forEach((item) => {
        item = 'demo';
        console.log(item); // 'demo'
      });
      console.log(arr); // [1, 2, 3]
    }
  }
}
</script>

回调函数的第三个参数表示当前遍历的数组本身，即原数组，可以用来修改原数组。

<script>
export default {
  methods: {
    btn() {
      const arr = [1, 2, 3];
      arr.forEach((item, index, origin) => {
        origin[index] = 'demo';
      });
      console.log(arr); // ['demo', 'demo', 'demo']
    }
  }
}
</script>

拓展实例2

forEach本身不支持continue语句，可以使用return语句代替跳过本次循环。

const arr = [1, 2, 3, 4, 5];
arr.forEach((item) => {
    if (item === 3) {
        return;
    }
    console.log(item); // [1, 2, 4, 5]
});

forEach本身不支持break语句，可以使用every方法代替。

var arr = [1, 2, 3, 4, 5];
arr.every((item) => {
  if (item === 3) {
    return false; // 返回false终止循环
  } else {
    console.log(item);
    return true; // 返回true继续循环
  }
});
// every方法中的return语句不能省略, 否则, 回调函数只会执行一次

2、Array.prototype.filter

作用

过滤目标数组，并返回一个新数组，不检测空数组。

新数组包含所有符合条件的原数组成员，若没有符合条件的，则返回空数组。

语法

array.filter((currentValue, index, origin) => {}, thisValue)

filter有两个参数，第一个参数用来设置回调函数，必填。原数组中每个元素都会执行一次回调函数，返回结果为true，则当前元素加入返回的新数组。参数二选填，用来设置回调函数内部this的指向，若省略，则函数内部的this指向全局对象或undefined（严格模式）。

回调函数有三个参数，第一个参数必填，表示当前元素的值，第二个参数选填，表示当前元素的索引值，第三个参数选填，表示当前过滤的目标数组，即原数组。

const demo = [1, 2, 3, 4];
const ret = demo.filter(p => p > 2);
console.log(ret); // [3, 4]

注意，使用参数二设置this指向时，不能使用箭头函数，否则参数二无效。

拓展实例1

filter方法本身不改变原数组，仅仅过滤数组，与forEach类似。

3、Array.prototype.map

作用

遍历数组，并返回一个新数组，不检测空数组。新数组中的元素为原数组元素经过回调函数处理后的值。

语法

array.map((currentValue, index, arr) => {}, thisValue)

map有两个参数，第一个参数用来设置回调函数，必填，原数组中每个元素都会执行一次回调函数，返回值插入新数组。参数二选填，用来设置回调函数内部的this指向，若省略，或传入null、undefined，则回调函数内部的this指向全局对象。

回调函数有三个参数，第一个参数必填，表示当前元素的值，第二个参数选填，表示当前元素的索引值，第三个参数选填，表示当前遍历的目标数组，即原数组。

let arr = [1, 5, 10, 15];
let doubles = arr.map((x) => {
   return x * 2;
});
console.log(doubles); // [2, 10, 20, 30]

注意，使用参数二设置this指向时，不能使用箭头函数，否则参数二无效。

拓展实例1

map方法本身不改变原数组，仅仅遍历数组，与forEach类似。

拓展实例2

使用map方法获取字符串中每个字符所对应的ASCII码。 

<script>
export default {
  methods: {
    btn() {
      const ret = Array.prototype.map.call("Hello", (item) => {
        return item.charCodeAt(0);
      });
      console.log(ret); // [72, 101, 108, 108, 111]
    }
  }
}
</script>

拓展实例3

使用map方法遍历用querySelectorAll得到的动态对象集合。

<script>
export default {
  methods: {
    btn() {
      var elems = document.querySelectorAll('select option:checked');
      var values = Array.prototype.map.call(elems, (obj) => {
        return obj.value;
      });
      console.log(values);
    }
  }
}
</script>

4、Array.prototype.find

作用

检索数组，返回数组中满足条件的第一个数组成员，没有则返回undefined，不检测空数组。

语法

array.find((currentValue, index, origin) => {}, thisValue)

find有两个参数，第一个参数用来设置回调函数，必填。参数二选填，用来设置回调函数内部的this指向，若省略，则回调函数内部的this指向undefined。

回调函数有三个参数，第一个参数必填，表示当前元素的值，第二个参数选填，表示当前元素的索引值，第三个参数选填，表示当前检索的目标数组，即原数组。

注意，使用参数二设置this指向时，不能使用箭头函数，否则参数二无效。

拓展实例1

find方法本身不改变原数组，仅仅检索数组，与forEach类似。

拓展实例2

如下代码所示，依次遍历数组成员，当有成员满足条件使回调函数返回true时，立即停止遍历，并返回该成员。

<script>
export default {
  methods: {
    btn() {
      const numbers = [1, 2, 3, 4, 5];
      const ret = numbers.find(item => {
        return item > 2;
      });
      console.log(ret); // 3
    }
  }
};
</script>

5、Array.prototype.includes

作用

判断数组是否包含指定值，包含则返回true，否则返回false。

语法

array.includes(searchElement, fromIndex)

includes有两个参数，第一个参数用来设置需要查询的值，必填。参数二选填，用来设置查询的起始位置，默认值为0，如果参数值为负数，表示倒数。

<script>
export default {
  methods: {
    btn() {
      const numbers = [1, 2, 3, 4, 5];
      console.log(numbers.includes(2)); // true
      console.log(numbers.includes(6)); // false
    }
  }
};
</script>

拓展实例1

若参数二大于等于数组长度，则数组不会被检索，方法的返回结果为false。

<script>
export default {
  methods: {
    btn() {
      const numbers = [1, 2, 3, 4, 5];
      console.log(numbers.includes(2, 5)); // false
    }
  }
};
</script>

拓展实例2

区分大小写。

<script>
export default {
  methods: {
    btn() {
      const str= ['a', 'b'];
      console.log(str.includes('a')); // true
      console.log(str.includes('A')); // false
    }
  }
};
</script>

拓展实例3

includes方法有意设计为通用方法，它不要求this一定指向数组对象，所以includes可被用于其它类型的对象，比如类数组对象，如下代码所示。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

6、Array.prototype.indexOf

作用

返回数组中指定元素第一次出现的索引，若没有找到指定元素，则返回-1。

语法

array.indexOf(item, start);

indexOf有两个参数，第一个参数用来设置需要查询的值，必填。参数二选填，用来规定开始检索的位置，默认值为0。

<script>
export default {
  methods: {
    btn() {
      const numbers = [1, 2, 3, 4, 5];
      console.log(