我在项目中es6中数组的常用方法

  Array.from() :从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例;典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串

Array.from('foo');//["f", "o", "o"] 从String生成数组
function foo(){ //函数参数,大家都知道函数的arguments是一个类数组
  return Array.from(arguments)
}
foo([1,2,3])
//[1,2,3]

const set = new Set(['foo', 'bar', 'baz', 'foo']);//Set也可以
Array.from(set);// [ "foo", "bar", "baz" ]
const map = new Map([[1, 2], [2, 4], [4, 8]]);//Map也行哦
    Array.from(map);// [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([['1', 'a'], ['2', 'b']]);
    Array.from(mapper.values());// ['a', 'b'];
    Array.from(mapper.keys());// ['1', '2'];

 Array.of():将一系列值转换成数组;比如:

Array.of(1,2,3)//会得到[1,2,3]
let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2

  Array.find()与Array.findIndex() 这两个是干嘛的嘞,.find()是用于找出第一个符合条件的数组成员;而 .findIndex()是用于找出第一个符合条件的数组成员下标;使用方法如下:

[1, 2, 4, 8].find((n) => n > 4)   // 8
[1, 2, 4, 8].findIndex((n) => n > 4)   // 3

  数组实例的 entries(),keys() 和 values();这三个方法是在遍历的时候才会用到;分别是遍历【下标、值】、下标和值;使用方法如下:

const array=[7,8,9]
for(let [index, item] of array.entries()){
    console.log(index)
    console.log(item)        
}
// 0    7
// 1    8
// 2    9
for(let index of array.keys()){
    console.log(index)    
}
// 0   
// 1
// 2
for(let item of array.values()){
    console.log(item)        
}
// 7
// 8
// 9

  Array.includes()方法;此方法返回一个布尔值,用于判断数组里是否有我们要找的,某个值;与indexOf方法类似(不过indexOf返回的是-1或者下标)。使用方法如下:

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true   这里需要注意NaN的查询;我们如果使用indexOf方法去查找,会得到什么值,是-1还是2

  Array..reduce()方法;此方法是数组的归并方法;可同时将前面数组项遍历产生的结果与当前遍历项进行运算;(我也是通过自己实践慢慢理解的);

完整的array.reduce(function(pre, cur, currentIndex, arr), initialValue);一看,哇!这么多参数啊?干啥呢??
pre:必需。初始值initialValue, 或者计算结束后的返回值。
cur: 必需。当前元素
currentIndex: 可选。当前元素的索引,如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始 //重点
arr: 可选。当前元素所属的数组对象。

  其实我们常用的参数只有两个,pre和cur;下面我们来看下怎么回事儿

var result = [10,20,30];
var sum = result.reduce((pre, cur)=> {
    return cur + pre;
}, 0);
console.log(sum) //60 由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项10,相加之后返回值为10作为下一轮回调的total值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

还可以拉平二维数组哦
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

数组去重?也行
let arr = [1,2,3,3,3,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3]

  

  我在项目中常用的es6+的数组方法就介绍完了,有些方法可能没有讲到,我有些没有用过有些用过一两次,就不献丑了,希望对大家有帮助

猜你喜欢

转载自www.cnblogs.com/maomao93/p/12522751.html