js中数组常用的方法

数组的遍历方式

1. forEach

无法中途退出循环，只能用return退出本次回调，进行下一次回调。
它总是返回 undefined值,即使你return了一个值。

  const arr=[1,23,4,5,6,6,7,NaN];
  arr.forEach((item,index,arr)=>{
    console.log(item);
    //break;没有用
    return false;//return之后的语句不会执行
    console.log(index);
  });

2. every

检测数组所有元素是否都符合判断条件
如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true

  const arr=[1,23,4,5,6,6,7,NaN];
  const flag=arr.every((item,index,arr)=>{
    console.log(item)
    return item>0;
  });
  console.log(flag)

3. some

检测数组所有元素是否都符合判断条件
如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

  const arr=[1,23,4,5,6,6,7,NaN];
  const flag=arr.some((item,index,arr)=>{
    console.log(item)
    return item>0;
  });
  console.log(flag)

4. filter

过滤原始数组，返回新数组

  const arr=[1,23,4,5,6,6,7,NaN];
  const newArr=arr.filter((item,index,arr)=>{
    return item>0;
  });
  console.log(newArr)

5. map

对数组中的每个元素进行处理，返回新的数组

  const arr=[1,23,4,5,6,6,7,NaN];
  const newArr=arr.map((item,index,arr)=>{
    return item+"新数组";
  });
  console.log(newArr)

6. reduce

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
为数组提供累加器，合并为一个值
回调函数的参数:
1. total(必须)，初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身
initialValue(可选): 指定第一次回调 的第一个参数。

  const arr=[1,23,4,5,6,6,7,NaN];
  const value=arr.reduce((total,currentValue,currentIndex,arr)=>{
    return total+currentValue;
  },0);
  console.log(value)

7. reduceRight

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
这个方法除了与reduce执行方向相反外，其他完全与其一致

  //将二维数组转化为一维 将数组元素展开
  const initArr=[[0, 1], [2, 3], [4, 5]];
  const value=initArr.reduceRight((total,currentValue,currentIndex,arr)=>{
    return total.concat(currentValue);
  },[]);
  console.log(value)

8. find

array.find((item, index, arr)=>{});
用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined

  const arr=[1,23,4,5,6,6,7,NaN];
  const newArr=arr.find((item,index)=>{
    return item>2;
  });
  console.log(newArr);

9. findIndex

array.findIndex((item, index, arr)=>{});
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

  const arr=[1,23,4,5,6,6,7,NaN];
  const index=arr.findIndex((item,index)=>{
    return item>2;
  });
  console.log(index);

10. keys、values、entries

三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值

  const arr=[1,23,4,5,6,6,7,NaN];
  for(let index of arr.keys()){
    console.log(index);
  }
  for(let value of arr.values()){
    console.log(value);
  }
  for(let [index,value] of arr.entries()){
    console.log(index,value);
  }

of 生成数组

  const newArr=Array.of(3);//[3]
  const newArr=Array.of(3,4,5,6,7);//[3,4,5,6,7]
  console.log(newArr);

from 将伪数组变成真正的数组，也可以将set结构变成数组

  function fn(){
    console.log(Array.from(arguments))
  }
  fn(1,3,4,5,6,7)
  const newArr=Array.from(new Set(["a","b"]));
  console.log(newArr);

改变原数组的值的方法

1. pop

删除数组最后一项 返回删除的元素

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.pop())

2. shift

删除数组第一项 返回删除的元素

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.shift())

3. push

添加元素到数组最后一项 并返回新的长度

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.push("a"))

4. unshift

添加元素到数组第一项 并返回新的长度

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.unshift())

5. reverse

颠倒数组中元素的顺序 并返回数组

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.reverse())

6. splice

添加/删除数组元array.splice(index,howmany,item1,.....,itemX)
index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目
item1, …, itemX： 可选。向数组添加的新项目。
返回值: 如果有元素被删除,返回包含被删除项目的新数组, 没有删除元素，返回空数组

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.splice(0,2,"a","b"))

7. sort

排序
arr.sort((a,b)=>a-b);
若比较函数返回值<0，那么a将排到b的前面;
若比较函数返回值=0，那么a 和 b 相对位置不变；
若比较函数返回值>0，那么b 排在a 将的前面；
会改变原数组

  const arr=[1,23,4,5,6,6,7,NaN];
  //升序
  console.log(arr.sort((a,b)=>{
    console.log(a,b)
    return a-b;
  }));
  //降序
  console.log(arr.sort((a,b)=>{
    return b-a;
  }))


  var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
  array.sort(function(a,b){
    if(a.id === b.id){// 如果id的值相等，按照age的值降序
    return b.age - a.age
    }else{ // 如果id的值不相等，按照id的值升序
    return a.id - b.id
    }
  })
  console.log(array)

8. copyWithin

在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组
array.copyWithin(target, start = 0, end = this.length)
target 从该位置开始替换数据。如果为负值，表示倒数
start 从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end 到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置

console.log(['a', 'b', 'c'].copyWithin(0, 1, 3));// ["b", "c", "c"]

9. fill

使用给定值，填充一个数组,其实就是替换固定的元素
array.fill(value, start = 0, end = this.length)
value 要填充数组的值
start 填充的开始位置,默认值为0
end 填充的结束位置，默认是为this.length

  const arr=[1,23,4,5,6,6,7,NaN];
  console.log(arr.fill("a"));// ["a", "a", "a", "a", "a", "a", "a"]
  console.log(arr.fill("a",3,7));//[1, 23, 4, "a", "a", "a", "a"]

不会改变原数组的方法

1. concat

合并两个或多个数组，返回一个新数组

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.concat(["a"]));

2. join

数组转字符串
默认使用逗号作为分隔符
返回一个新的数组

const arr=[1,23,4,5,6,6,7,NaN];
console.log(arr.join("-"))

3. slice

删除数组
array.slice(begin, end);
begin 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0
end 索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。

  const arr=[1,23,4,5,6,6,7,NaN];
  console.log(arr.slice());
  console.log(arr.slice(0,5));

4. indexOf

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

const arr=[1,23,4,5,6,6,7,NaN]
console.log(arr.indexOf(6));//4

5. lastIndexOf

方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）

const arr=[1,23,4,5,6,6,7,NaN]
console.log(arr.lastIndexOf(6));//5

6. includes

返回一个布尔值，表示某个数组是否包含给定的值
includes方法是为了弥补indexOf方法的缺陷而出现的:
indexOf方法不能识别NaN
indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

const arr=[1,23,4,5,6,6,7,NaN]
console.log(arr.includes(NaN));

7. flat

flat(num) num表示要拉平num层的嵌套数组。
如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。

  //数组里有一层数组
  console.log([1, 2, [3, 4]].flat());// [1, 2, 3, 4]

  //数组里有二层数组
  console.log([1, 2, [3, [4, 5]]].flat(2));// [1, 2, 3, 4, 5]

  //数组里有多层数组
  console.log([1,[ 2, [3, [4, 5]]]].flat(Infinity));// [1, 2, 3, 4, 5]

8. flatMap(fn)

对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

[2, 3, 4].flatMap((x) => [x, x * 2]);// [2, 4, 3, 6, 4, 8]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

关于更多的es6数组的方法，请狠狠的点击我