Javascript——数组常用的方法

1.pop和push尾部删除添加

const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的尾端
arr.push(6) //[1,2,3,4,5,6]
//再次调用pop方法就删除了最后一位
arr.pop()//[1,2,3,4,5]

2.unshift和shift头部删除添加

const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的前端
arr.unshift(6) //[6,1,2,3,4,5]
//再次调用shift方法就删除了第一位
arr.shift()//[1,2,3,4,5]

3.sort 排序

var arr = [18, 2, 10, 9, 88, 66, 22];
arr.sort(function (a, b) {
return b - a; //降序排序 从大到小
// return a - b; //升序排序
});

console.log(arr); //[88,66,22,18,10,9,2]

4.reverse 反转，对数组进行就地反转，顺序颠倒

const arr = ["March", "Jan", 6, 2, "A", "a"];
arr.reverse();
console.log(arr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]

5.splice 截取新增数据

可以选择删除数组中的某一个值，也可以在数组中的某个位置添加一些数据，接收可选参数，三个或以上的参数，
第一个为截取的索引位置number类型，
第二个截取的个数number类型，
第三个或更多实在截取位置添加的参数，可以是任何类型

const arr = ["March", "Jan", 6, 2, "A", "a"];
//在索引为2的位置截取一个，并在索引2的位置后添加8
arr.splice(2, 1, 8);
console.log(arr);//[ 'March', 'Jan', 8, 2, 'A', 'a' ]
//截取位数不够，就将有的全部且去掉
arr.splice(2, 6);
console.log(arr);//[ 'March', 'Jan' ]

6.filter 数据过滤
需要一定条件返回对应的数据，接收一个回调函数，有回调函数有三个参数，
第一个是当前遍历的元素，
第二个为当前索引，
第三个是数组本身，需要一个返回值，
filter方法会根据符合这个返回值条件的数据返回一个**新数组，不会改变原数组**

const arr = ["March", "Jan", 6, 2, "A", "a"];
//这里是一个简单的例子，返回类型为string的元素
const newArr = arr.filter((item, index) => typeof item === "string");
console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]

7.map

map方法只是单纯的返回一个新数组，可以是处理后的，也可以是原数组，接收一个会点函数，回调函数有三个参数第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，从map内部处理过后，回调函数的返回值返回一个新数组

const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回一个number的数组，不是number类型的就返回它们的字段长度
const newArr = arr.map((item, index) => (typeof item === "number" ? item : item.length);
console.log(newArr);//[ 5, 3, 6, 2, 1, 1 ]

8.slice数组截取

可以对一个数组进行浅拷贝，接收两个参数，第一个为截取的初始位置，第二个为终止位置（不包括此索引值），如果只填一个参数则从当前索引值截取到最后

const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.slice(0, 3);
console.log(newArr);//[ 'March', 'Jan', 6 ]

const newArr = arr.slice(3);
console.log(newArr);//[ 2, 'A', 'a' ]

9.concat数组合并
需要两个或以上的数组合并的时候就可以使用cancat快速合并，当然在ES6之后大多都使用扩展运算符进行数组合并了，此方法接收一个或以上得任意类型参数

const arr1 = ["March", "Jan"];
const arr2 = [6, 2, "A", "a"];
const arr3 = {
  name: "Tom",
  age: 18,
  sex: "男",
};

//如果参数是数组则会合并
const newArr = arr1.concat(arr2);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]

//一个以上的参数 如果是值类型 则会直接添加到数组得最后面
const newArr = arr1.concat(arr2,'Tom');
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a','Tom' ]

//一个以上的参数，为一个对象类型,会直接添加到对象中
const newArr = arr1.concat(arr2,arr3);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a', { name: 'Tom', age: 18, sex: '男' } ]

ES6扩展运算符合并多个数组： ...
        let arr1 = [0, 1, 3];
        let arr2 = ["a", "b", "c"];
        let arr3 = ["e", "f", "g"];
        let  arr = [...arr1, ...arr2, ...arr3];

10.fill填充
对数组内容进行覆盖填充，有三个参数，
第一个为填充的值，
第二个为起始位置（可选），
第三个为结束位置，不包含此索引位置（可选）

const arr1 = ["March", "Jan", 6, 2, "A", "a"];
//将666填充到1-4不包括4索引的位置
const newArr = arr1.fill(666, 1, 4);
console.log(newArr);//[ 'March', 666, 666, 666, 'A', 'a' ]

11.flatMap和flat 扁平化数组
flatMap与map相似，都是接收一个回调函数，进行处理后返回一个数组，但有一处差别就是flatMap可以对数组进行一层扁平化（仅数组）

Array.prototype.flatMap
flat + map
遍历 + 扁平化

const arr = ['123', '456', '789'];
const newArr = arr.flatMap(function (item) {
  return item.split('');
});
console.log(newArr);
// ['1', '2', '3', '4', '5', '6', '7', '8', '9']返回了一个新数组



const newArr = arr1.flatMap((item, index) => {
  return [[item, index]];
});
//仅只能扁平化一层
console.log(newArr);//[[ 'March', 0 ],[ 'Jan', 1 ], [ 6, 2 ], [ 2, 3 ],[ 'A', 4 ],[ 'a', 5 ]]

flat通常在扁平化数组的时候都要使用递归函数，flat方法避免了页面中写递归函数造成大量的代码冗余，flat本身也是使用递归方法来达到数组扁平化的，接收一个number类型的参数，参数是几就可以扁平几层，在不确定有几维数组的情况下，参数为Infinity（无限大），可以扁平任意层次的数组

const arr = [[[[["March"]]]], [[["Jan"]]], [[6]], [[2]], "A", ["a"]];
//扁平参数对等的层数
const newArr = arr.flat(2);
console.log(newArr);//[ [ [ 'March' ] ], [ 'Jan' ], 6, 2, 'A', 'a' ]
//使用Infinity关键字 可以扁平化任意层数数组
const newArr = arr.flat(Infinity);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]

12.includes 判断某个值数组中是否存在

在数组中查抄某一个值，返回一个布尔值，有两个参数，第一个你要查找的值，第二个从哪个索引位置开始找

const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.includes(6);
console.log(newArr);//true

//也可以利用这一特性简化判断条件
let name='a'
//name是一个变量，可能有很多种可能，判断条件中就会非常冗余
if ( name === 'a' || name === 'A' || name === 6...) {
  //...
}

//可以改成这种，看着也非常明了简便
if (['a',"A",6,...].includes(name)) {
  //...
  console.log(true)
}

13.indexOf 判断数组中是否存在某个值，并返回索引
*写法和includes类似，
有两个参数第一个是要找的值，
第二个为开始索引，
indexOf会在查找到第一个符合条件的参数跳出循环并返回索引，没找到则返回-1
*

const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.indexOf(6);
//返回索引值
console.log(newArr);//2

//查找6，从索引为3的位置开始找
const newArr = arr.indexOf(6，3);
console.log(newArr);//5

14.find 查找符合条件的元素

find查找符合条件的的一个元素并返回那个元素本身,没有则返回undefined，接收一个回调函数，回调函数有三个形参，
第一个当前元素，
第二个当前索引，
第三个数组本身

15.some 数组中至少有一个元素通过测试

*some用于数组中参数其中一个或多个通过了测试，返回一个布尔值，如果有一个或以上通过测试就返回true，一个都没通过返回false，接收一个回调函数，有三个形参，第一个为当前元素，第二个为当前索引，第三个为数组本身，另外，当数组为空时使用some，不论判断条件如何，都会返回false，并且他不会改变数组
*

const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.some((item) => typeof item === "string");
//其中一个或以上的元素符合条件就返回true
console.log(newArr);//true
//只要是数组是空数组，后面的条件不管跟什么返回的永远为false
console.log([].some((item) => item==undefined));//false