js常见数组处理方法以及区别

数组的方法

push（在数组的末尾添加新元素，改变原数组）
pop（删除数组最后一项，改变原数组）
unshift（在数组的开头添加新元素，改变原数组）
shift（删除数组第一项，改变原数组）
concat（连接数组，不会改变原始数组）
join（用指定分隔符将数组拼接为字符串，不会改变原始数组）
split（将字符串分割成字符串数组，不会改变原始数组）
splice（用于添加或删除数组中的元素，改变原数组）
slice（数组部分的副本返回到新的数组对象中，不会改变原始数组）
indexOf（可返回数组中某个指定的元素开始位置，不会改变原始数组）
lastIndexOf（可返回数组中某个指定的元素最后位置，不会改变原始数组）
map（通过指定函数处理数组的每个元素，并返回处理后的数组，不会改变原始数组）
forEach（数组每个元素都执行一次回调函数，简单数据类型不会改变原始数组，引用数据类型会）
filter（检测数值元素，并返回符合条件所有元素的数组，不会改变原始数组）
sort（对数组的元素进行排序，改变原数组）
reverse（颠倒数组中元素的顺序，改变原数组）
find（返回通过测试（函数内判断）的数组的第一个元素的值，不会改变原始数组）
findIndex（返回传入一个测试条件（函数）符合条件的数组第一个元素位置，不会改变原始数组）
some（检测数组元素中是否有元素符合指定条件，不会改变原始数组）
every（检测数值元素的每个元素是否都符合条件，不会改变原始数组）
reduce（将数组元素计算为一个值（从左到右），不会改变原始数组）
includes（判断一个数组是否包含一个指定的值，不会改变原始数组）
fill（使用一个固定值来填充数组，改变原数组）
copyWithin（从数组的指定位置拷贝元素到数组的另一个指定位置中，改变原数组）
toLocaleString（返回格式化对象后字符串，不会改变原始数组）
toString（把数组转换为字符串，并返回结果,）
flat（创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，改变原数组）
flatMap（使用映射函数映射每个元素，然后将结果压缩成一个新数组，不改变原始数组）
entries（返回数组的可迭代对象，不改变原始数组）
keys（返回数组的可迭代对象，包含原始数组的键(key)，不改变原始数组）
values（返回数组的可迭代对象，包含原始数组的元素值(value)，不改变原始数组）
valueOf（返回数组对象的原始值，不改变原始数组）
isArray（判断对象是否为数组，不改变原始数组）

1.push、pop、unshift、shift

let arr = [1];
arr.push(2) // [1,2]
arr.pop() // [1]
arr.unshift(0) // [0,1]
arr.shift() // [1]

2.concat

concat可连接数组

const arr1 = [1], arr2 = [2], arr3 = [3];
console.log(arr1.concat(arr2, arr3)) // [1, 2, 3]

concat也可连接字符串

let str1 = 'a', str2 = 'b';
let c = str1.concat(str2)
console.log(c) // ab

3.join

拼接分割字符串

let a = [1,2,3,4,5]
console.log(a.join('-')) // 1-2-3-4-5

4.split

字符串分割成数组

let a = '1-2-3-4-5'
console.log(a.split('-')) // [1,2,3,4,5]

5.splice

arr.splice(start, deletedCount) 删除，start：删除的起始位置，deletedCount：删除的个数
arr.splice(start,deletedCount,item) 替换，start：替换的起始位置，deletedCount：删除的个数，item：替换的内容
arr.splice(start,0,item) 添加，start：从哪个后开始新增，0：删除0个，item：新增的内容，跟第二个一样，删除个数为0的时候就是添加

let arr = [1,2,3,4,5]
arr.splice(2,1)
console.log(arr) // [1,2,4,5]
arr.splice(1,2,6,7,8)
console.log(arr) // [1, 6, 7, 8, 5]

6.slice

slice(start, end)：该方法返回起始和结束位置之间的项（包括起始位置，不包括结尾）
slice(start)：该方法返回起始和结束位置之间的项
slice()：复制数组

let arr = [1,2,3,4,5]
arr.slice(1,2)
console.log(arr.slice(1,3)) // [2, 3]
console.log(arr) // [1, 2, 3, 4, 5]
arr.slice(3)
arr.slice(3)
console.log(arr.slice(3)) // [4, 5]

7.indexOf和lastIndexOf

**indexOf：**返回从前往后匹配的第一个的索引，匹配不上返回-1
**lastIndexOf：**返回从后往前匹配的第一个的索引，匹配不上返回-1
也可用于字符串中

let arr = [1,2,3,4,5,1,8]
console.log(arr.indexOf(1), arr.lastIndexOf(1)) // 0 5

8.map

通过指定函数处理数组的每个元素，并返回处理后的数组，不会对空数组进行检测，不会改变原数组
array.map(function(currentValue,index,arr), thisValue)
currentValue：当前元素的值
index：当前元素的索引
arr：当前元素属于的数组对象
thisValue：对象作为该执行回调时使用，传递给函数，用作 “this” 的值

let arr = [1,2,3,4,5]
let arr2 = arr.map(item=>item*2)
let arr3 = arr.map(item=>{return item*2})
console.log(arr2, arr3, arr) // arr2===arr3 [2, 4, 6, 8, 10] arr [1, 2, 3, 4, 5]

9.forEach

方法用于调用数组的每个元素，并将元素传递给回调函数，返回undefined，对于空数组是不会执行回调函数的
array.forEach(callbackFn(currentValue, index, arr), thisValue)
currentValue：当前元素的值
index：当前元素的索引
arr：当前元素属于的数组对象
thisValue：传递给函数的值一般用 “this” 值

// 基本数据类型不会改变
let arr = [1,2,3,4,5]
let arr2 = arr.forEach(item=>item*2)
console.log(arr2, arr) // undefined, [1, 2, 3, 4, 5]
// 引用数据类型会改变原数组
let a = [{name: 'tom', age: 18},{name: 'jane', age: 20}]
let b = a.forEach(item=>{item.age = item.age*2})
console.log(b, a) // undefined, [{name: 'tom', age: 36},{name: 'jane', age: 40}]

除了抛出异常以外，无法中止或跳出循环，return只中止本次循环

10.filter

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
不会对空数组进行检测
不会改变原始数组

let a = [{name: 'tom', age: 18},{name: 'jane', age: 20}]
let b = a.filter(item=>item.age>18)
console.log(b, a) // [{name: 'jane', age: 20}], [{name: 'tom', age: 18},{name: 'jane', age: 20}]

11.sort

对数组的元素进行排序，排序可以是字母数字，并按升序或者降序，默认按字母升序排列

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits) //  ['Apple', 'Banana', 'Mango', 'Orange']

arrayObject.sort(sortby)：参数sortby可选。规定排序顺序。必须是函数；

let c = [1,3,2,5,4]
// a代表下一个元素，b代表当前元素
c.sort(function(a,b){return a-b})
console.log(c) // [1, 2, 3, 4, 5]
c.sort(function(a,b){return b-a})
console.log(c) // [5, 4, 3, 2, 1]

12.reverse

颠倒数组中元素的顺序

var a = [1,2,3,4,5];  //定义数组
a.reverse();  //颠倒数组顺序
console.log(a);  //返回数组[5,4,3,2,1]

13.find

find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
对于空数组不执行，并不改变原数组

let a = [1,3,2,5,4]
let b = a.find(function(item){return item >= 3})
console.log(b, a) // 3, [1, 3, 2, 5, 4]

14.findIndex

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

let a = [1,3,2,5,4]
let b = a.findIndex(function(item){return item >= 3})
console.log(b, a) // 1, [1, 3, 2, 5, 4]

15.some

用于检测数组中的元素是否满足指定条件，会依次执行，有一个元素满足条件，返回true，剩余元素不再执行
如果没有满足条件的元素，返回false
不会对空数组进行检测
不会改变原始数组

let a = [1,3,2,5,4]
let b = a.some(function(item){return item >= 3})
console.log(b, a) // true, [1, 3, 2, 5, 4]

16.every

使用指定函数检测数组中的所有元素，如果有一个元素不符合，则整个表达式返回false，所有元素都满足条件，返回true
不会对空数组进行检测
不会改变原始数组

let a = [1,3,2,5,4]
let b = a.every(function(item){return item >= 3})
console.log(b, a) // false, [1, 3, 2, 5, 4]

17.reduce

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
可以作为一个高阶函数，用于函数的 compose
对于空数组是不会执行回调函数的

let a = [1,3,2,5,4]
let b = a.reduce(function(total, current){return total + current})
console.log(b, a) // 15, [1, 3, 2, 5, 4]

18.includes

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
searchElement：查找的元素，fromIndex：从该索引开始查，如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0

[1, 2, 3].includes(2); // true

19.fill

array.fill(value, start, end)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4); // Banana,Orange,Runoob,Runoob

20.copyWithin

用于从数组的指定位置拷贝元素到数组的另一个指定位置中
array.copyWithin(target, start, end)
target：复制到指定目标索引位置

21.toLocaleString

.toLocaleString()
返回格式化对象后字符串

var date = new Date();
console.log(date.toLocaleString('zh'));  // 2023/12/26 21:47:14
console.log(date.toLocaleString('en'));  // 12/26/2023, 9:47:14 PM

返回表示数组元素的字符串

var a= [1,2,3]
console.log(a.toLocaleString())

22.toString

toString()把数组转换为字符串，并返回结果，用逗号分开

var a= [1,2,3], b= [{name: 'aa', age: 10}]
console.log(a.toString(), b.toString()) // 1,2,3 [object Object]

23.flat

扁平化嵌套数组，扁平化与数组空项：flat() 方法会移除数组中的空项

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

24.flatMap

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

25.entries

var arr = [1, 2, 3]
var a = arr.entries()
console.log(arr) // [1, 2, 3]
console.log(a); // Array Iterator {}
console.log(a.next()) //{value: Array:[0, 1],done:false}
console.log(a.next()) //{value: Array:[1, 2],done:false}
console.log(a.next()) //{value: Array:[2, 3],done:false}
console.log(a.next()) //{value: undefined, done: true}

26.keys

keys() 方法用于从数组创建一个包含数组键的可迭代对象

var fruits = ["Banana", "Orange", "Apple"];
for (const key of fruits.keys()) {
	console.log(key);
}
// 0
// 1
// 2

27.values

var fruits = ["Banana", "Orange", "Apple"];
for (const value of fruits.values()) {
	console.log(value );
}
// Banana
// Orange
// Apple

28.valueOf

返回数组本身

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

29.isArray

isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true，否则返回 false

console.log([1].isArray()) // true