es6中的常用数组方法

426 阅读7分钟

some

arr.some(callback(element[, index[, array]])[, thisArg])
参数
callback
用来测试每个元素的函数,接受三个参数:
element
数组中正在处理的元素。
index 可选
数组中正在处理的元素的索引值。
array可选
some()被调用的数组。
thisArg可选
执行 callback 时使用的 this 值。
返回值
数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。
arr.some(function(arrVal) {
    return val === arrVal;
});
示例:当满足条件就直接终止了,返回值是true
var arr = [1,2,3,5,6]
var res = arr.some((value,index,arr)=>{
    console.log(value,index,arr);
    return value == 3
})
console.log(res);
没有满足条件的则返回值是false;数组的每个元素都跑了一次回调函数

image.png

image.png

every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

语法
arr.every(callback(element[, index[, array]])[, thisArg])
参数
callback
用来测试每个元素的函数,它可以接收三个参数:
element
用于测试的当前值。
index可选
用于测试的当前值的索引。
array可选
调用 every 的当前数组。
thisArg
执行 callback 时使用的 this 值。
返回值
如果回调函数的每一次返回都为 truthy 值,返回 true ,否则返回 false。
检测所有数组元素的大小
下例检测数组中的所有元素是否都大于 10。
示例: 当有一项不满足就直接终止了程序,不会往下走了

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。


语法
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数
callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时,用于 this 的值。
返回值
一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。将所有的数组元素都给测试了一遍

---------------------------
下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

find()及findindex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
上面代码找出数组中第一个小于 0 的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

map

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。


语法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
参数
callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 数组中正在处理的当前元素。
index可选
callback 数组中正在处理的当前元素的索引。
array可选
map 方法调用的数组。
thisArg可选
执行 callback 函数时值被用作this。
返回值
一个由原数组每个元素执行回调函数的结果组成的新数组。
-------------------
示例
求数组中每个元素的平方根
下面的代码创建了一个新数组,值为原数组中对应数字的平方根。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

语法
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
参数
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:
currentValue
数组中正在处理的当前元素。
index 可选
数组中正在处理的当前元素的索引。
array 可选
forEach() 方法正在操作的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时,用作 this 的值。
返回值
undefined。
-------------------
示例
不对未初始化的值进行任何操作(稀疏数组)
如你所见,37 之间空缺的数组单元未被 forEach() 调用 callback 函数,或进行任何其他操作。

const arraySparse = [1,3,,7];
let numCallbackRuns = 0;

arraySparse.forEach(function(element){
  console.log(element);
  numCallbackRuns++;
});

console.log("numCallbackRuns: ", numCallbackRuns);

// 1
// 3
// 7
// numCallbackRuns: 3

Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数
callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数:
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。

currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。
array可选
调用reduce()的数组
initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值
函数累计处理的结果
-----------------------------
假如运行下段reduce()代码:

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
callback 被调用四次,每次调用的参数和返回值如下表:

Snipaste_2021-05-08_20-49-36.png

数组实例的 includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

array.from

详见(es6.ruanyifeng.com/?search=som…)

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 SetMap)。

下面是一个类似数组的对象,Array.from将它转为真正的数组。
        // 1、把伪数组转换为真数组
        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        // ES6的写法
        let arr1 = Array.from(arrayLike); // ['a', 'b', 'c']
----------------------
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
        // 2、传入第二个参数,对数组中的每个元素进行处理
        var arr2 = [1, 2, 3];
        var arr3 = Array.from(arr2, (x) => x * 2)
        console.log(arr3);


数组去重的方法:map返回ID,item,提供给new Map,生成Map的数据结构,然后拿到改Map的values,再使用扩展运算符展开在数组里;

image.png