JS数组常用的一些方法合集

一：数组排序--sort()

var arr = [40,100,1,5,25,10];
arr.sort(function(a,b){return a-b});   ==> 升序排列  [1, 5, 10, 25, 40, 100]
arr.sort(function(a,b){return b-a});   ==> 降序排列

二：添加或删除数组指定元素--splice()

splice() 方法用于添加或删除数组中的元素。该方法接收三个参数：

第一个参数表示开始的位置，从哪个位置开始删；

第二个参数表示要截取的个数，如果参数为0则表示不截取，原来的数组不变；

第三个参数表示在这个位置要添加的内容。

splice('从哪个位置开始'，'删除几项'，'添加的元素')
let arr = [1, 2, 3, 4, 5, 6, 7]
arr.splice(1, 2, 8) => 从索引下标是 1 的位置开始截取两个字符(2和3)，并添加 8
打印结果是 arr =  [1, 8, 4, 5, 6, 7]

三：some循环

在找到对应的项之后，可以通过return true固定的语法，来终止some 循环,与 forEach 循环不同的是，当找到对应的 item 项后就立即停止循环，后面的不再执行，而 forEach 仍然继续循环直至循环结束，浪费性能。

const arr = ['张三'，'李四'，'王五'，'赵六']
arr.some((item, index) => {
if (item ==== '李四') {
console.log(index)
return true
}

四：every循环

用来判断数组中的每一项都满足需求，如果满足则返回 true;如果有一项不满足则返回false，常用来判断全选

const arr= [
{ id: 1, name: '西瓜'，state: true  },
{ id: 2, name: ‘榴莲'，state: false }，
{ id: 3, name: ‘草莓’，:state: true },
]
//需求:判断数组中，水果是否被全选了!
const result = arr.every( item => item.state === true)
console.log(result)

五：数组的过滤--filter()

filter() 方法用于把Array中的符合条件某些元素过滤掉，然后返回过滤掉的元素。

返回数组array中所有元素都大于等于14的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]

六：数组的截取--slice()

slice() 方法将数组部分的副本返回到新的数组对象中。这个对象是从 start 到 end 选择的。

start 是一个从 0 开始的索引，用于开始复制数组的一部分;如果为负数表示从末尾开始，slice(-1) 提取数组的最后一个元素。

end 参数是可选的，表示提取此索引之前的元素，不包括索引 end 在内；

slice(1,3) 提取是数组的第二个和第三个元素，即从数组的索引 1 开始，但不包含索引为 3 的元素。

const arr = [1,3,5,6,7];
console.log(arr.slice(0, 3)); // [ 1, 3, 5 ]

七：数组--reduce()

const arr= [
{ id: 1, name: '西瓜'，state: true , price:10 , count:1 },
{ id: 2, name: ‘榴莲'，state: false , price:50 , count:2 }，
{ id: 3, name: ‘草莓’，:state: true , price:30 , count:2 },
]
//需求:把购物车选中的水果结算总金额
arr.filter(item => item.state)  ==> 这是获取所有选中的水果项;
arr.reduce((累加的结果，当前循环项) =>{  }, 初始值);
---------------------
let result = arr.filter(item => item.state).reduce((sum, item) =>{
    return sum += item.price * item.count
},0)

八：find()方法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值,但每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 16
console.log(c)  // undefined

九：findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置，每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(b)  // 索引2
console.log(c)  // 没有找到，返回-1