js关于数组的常用方法总结

接着上次关于对字符串的方法总结，本篇文章将对js中常用的数组方法进行总结。同样是建立在vue3+ts的基础上做示例~
1.join
join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。

let arr = ref<number[]>([1,2,4,5])
let reason = arr.value.join()
let reason2 = arr.value.join('|')
console.log('reason:',reason)
console.log('reason2:',reason2)

2.reverse
reverse() 方法用于颠倒数组中元素的顺序。

let arr = ref<number[]>([1,2,4,5])
let reason = arr.value.reverse()
console.log('reason:',reason)

3.sort
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

let arr = ref<number[]>([1,6,4,5])
let arr2 = ref<string[]>(["Banana", "Orange", "Apple", "Mango"])
let arr3 = ref<number[]>([2,6,3,1])
let arr4 = ref<string[]>(["pinia", "Orange", "Apple", "Mango"])
let reason = arr.value.sort(function(a,b){ return a-b })  // 数字升序
let reason2 = arr2.value.sort() // 默认按字母升序
let reason3 = arr3.value.sort(function(a,b){ return b-a }) // 数字降序
let reason4 = arr4.value.sort().reverse() // 字母降序
console.log('reason:',reason)
console.log('reason2:',reason2)
console.log('reason3:',reason3)
console.log('reason4:',reason4)

4.concat
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

let arr = ref<string[]>(["pee", "table", "Orange"])
let arr2 = ref<string[]>(["Banana", "Orange", "Apple", "Mango"])
let reason = arr.value.concat(arr2.value) 
console.log('reason:',reason)

5.forEach
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

let arr = ref<string[]>(["pee", "table", "Orange"])
arr.value.forEach((item,index,arr)=>{
  console.log('reason:',item,index,arr)
})

6.map
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

let arr = ref<Array<number | string>>([1, 2, 3])
let arr2 = arr.value.map((item)=>{
  if(item===1){
    item='apple'
  }else if(item===2){
    item='pinaia'
  }else if(item===3){
    item='pink'
  }
  return item
})
console.log('arr:',arr.value)
console.log('arr2:',arr2)

7.every
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

let arr = ref<Array<number | string>>([1, 2, 3])
let flag = arr.value.every((item)=>{
  return item > 2
})
console.log('flag:',flag)

8.some
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。刚好与every相反
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

let arr = ref<Array<number | string>>([1, 2, 3])
let flag = arr.value.some((item)=>{
  return item > 2
})
console.log('flag:',flag)

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

let arr = ref<Array<number | string>>([1, 2, 3])
let flag = arr.value.find((item)=>{
  return item > 2
})
let flag2 = arr.value.findIndex((item)=>{
  return item > 2
})
console.log('flag:',flag,flag2)

10.filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr = ref<Array<number | string>>([1, 2, 3])
let arr2 = arr.value.filter((item)=>{
  return item > 1
})
console.log('arr2:',arr2)

11.splice
splice() 方法用于添加或删除(替换）数组中的元素。
删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
注意：这种方法会改变原始数组。

let arr = ref<Array<number>>([1,3,5,7,9,11]);
let arrRemoved = arr.value.splice(0,2);
console.log(arr.value);
console.log(arrRemoved);
let arrRemoved2 = arr.value.splice(2,0,4,6);
console.log(arr.value); 
console.log(arrRemoved2); 
let arrRemoved3 = arr.value.splice(1,1,2,4);
console.log(arr.value); 
console.log(arrRemoved3);

12.slice
slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。

let arr = ref<Array<number>>([1,3,5,7,9,11]);
let arrCopy = arr.value.slice(1);
let arrCopy2 = arr.value.slice(1,4);
let arrCopy3 = arr.value.slice(1,-2);
let arrCopy4 = arr.value.slice(-4,-1);
console.log('arr:',arr.value)
console.log('arrCopy:',arrCopy)
console.log('arrCopy2:',arrCopy2)
console.log('arrCopy3:',arrCopy3)
console.log('arrCopy4:',arrCopy4)

13.push()和pop()
push(): 把里面的内容添加到数组末尾，并返回修改后的长度。
pop()：移除数组最后一项，返回移除的那个值，减少数组的length。

let arr = ref<Array<number>>([1,3,5,7,9,11,10]);
let arrCopy = arr.value.push(13,14);
console.log('arrCopy:',arrCopy)
console.log('arr:',arr.value)
let arrCopy2 = arr.value.pop();
console.log('arrCopy2:',arrCopy2)
console.log('arr:',arr.value)

14.shift() 和 unshift()
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头，并返回数组的长度 。
不难发现，这与上面push、pop刚好相反

let arr = ref<Array<number>>([1,3,5,7,9,11,10]);
let arrCopy = arr.value.unshift(13,14);
console.log('arrCopy:',arrCopy)
console.log('arr:',arr.value)
let arrCopy2 = arr.value.shift();
console.log('arrCopy2:',arrCopy2)
console.log('arr:',arr.value)

总结：js数组的方法在日常开发中所用到的频率非常多，所以其方法比字符串的显得更为重要，其中有许多可以相似之处需要在开发中谨慎挑选出最适合的方法才能事半功倍。