Js中一些数组常用API总结

### splice()


`splice()`方法添加或删除数组中的元素，有返回值，以数组形式返回删除的元素，没有删除则返回空数组。


用法：`splice`可以接收三个参数,`splice(index, n, x)`


`index`: 要删除或插入元素的位置, 该参数是必需的。


`n`: 要删除的元素个数, 如果不想删除任何元素, 可以将该参数设置为0。


`x`:要插入到数组中的新元素,可以是多`个x1,x2,x3...`如果不想插入任何元素,则可以省略这些参数。

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

let res2 = arr.splice(1, 0, 8)
console.log(res2);//[]
console.log(arr);//[1, 8, 6, 7, 8, 4, 5]

### sort()


`sort()`方法可以对数组的元素进行排序，并且返回出排序后的数组。


用法：`sort()`默认为升序排列。 直接写`sort()`只能处理10以内的数字排序,处理10以上的我们需要传递一个参数，这个参数必须是函数，函数通过返回一个值来决定这两个值需不需要交换位置。 如果`a-b > 0`,则`a`和`b`交换位置。

let arr = [10, 12, 11, 19, 13, 15, 6];

let res1 = arr.sort(function (a, b) { return a - b; }); //实现由小到大
console.log(res1);//[6, 10, 11, 12,13, 15, 19]
let res2 = arr.sort(function (a, b) { return b - a; }) //实现由大到小
console.log(res2);//[19, 15, 13, 12,11, 10, 6]

### reverse()


`reverse()`方法可以颠倒数组中元素的顺序，并且返回颠倒后的数组。


用法：

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

## 不会改变原数组


`Js`中数组有一些方法不会直接改变原始数组，会返回出一个新的数组。


### slice()


`slice()`方法可提取数组的某些元素，并以新的数组返回被提取的元素。


用法：`slice(n,m)` 从索引`n`（包含`n`）开始找到索引`m`(不包含`m`)处。把找到的内容作为一个新的数组返回，原有数组是不改变的。

let arr = [1, 2, 3, 4, 5]
let res = arr.slice(2, 4)
console.log(res);//[ 3, 4 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
slice(n)// 从索引n（包含n）开始找到末尾
slice(0) // slice() 将原来数组原封不动的复制一份

### concat()


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


用法：

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [7, 8]
let res = arr1.concat(arr2)
console.log(res);//[ 1, 2, 3, 4, 5, 7, 8]
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
console.log(arr2);//[ 7, 8 ]

### filter()


`filter()`用于对数组进行过滤。


用法：它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。其中函数`function` 为必须，数组中的每个元素都会执行这个函数。且如果返回值为`true`，则该元素被保留；函数可以接受三个参数（`item, index, arr`），第一个参数`item`也为必须，代表当前元素的值，第二个参数为当前元素的索引值，第三个参数为数组本身。

const arr = [
{ name: ‘song’, age: 18 },
{ name: ‘Y’, age: 19 },
{ name: ‘son’, age: 20 },
{ name: ‘so’, age: 21 }
]
const newArr = arr.filter((item, index, arr) => {
return item.age > 19
})

console.log(newArr);//[ { name: ‘son’, age: 20 }, { name: ‘so’, age: 21 } ]
console.log(arr);//[ { name: ‘song’, age: 18 },{ name: ‘Y’, age: 19 },
//{ name: ‘son’, age: 20 }, { name: ‘so’, age: 21 }]

### forEach()


`forEach()`方法用于调用数组的每个元素，并将元素传递给回调函数。


用法：回调函数中可以接受三个参数（`item,index,arr`），第一个参数`item`也为必须，代表当前元素的值，第二个参数为当前元素的索引值，第三个参数为数组本身。

const arr = [
{ name: ‘song’, age: 18 },
{ name: ‘Y’, age: 19 },
{ name: ‘son’, age: 20 },
{ name: ‘so’, age: 21 }
]
arr.my_forEach((item, index, arr) => {
console.log(item.age);//18 19 20 21
})

console.log(arr);//[ { name: ‘song’, age: 18 }, { name: ‘Y’, age: 19 },
//{ name: ‘son’, age: 20 },{ name: ‘so’, age: 21 } ]

### toString


`toString` 把数组中的每一项拿出来，用逗号隔开，组成字符串，原有数组不变。


用法：

let arr = [‘song’, ‘Y’, ‘son’, ‘so’]
let res = arr.toString()
console.log(res);//‘song,Y,son,so’
console.log(arr);//[ ‘song’, ‘Y’, ‘son’, ‘so’ ]

### join(分隔符）


`join`(分隔符） 把数组中的每一项拿出来，用指定的分隔符隔开，原有数组不变。


用法：

let arr = [‘song’, ‘Y’, ‘son’, ‘so’]
let res = arr.join(‘,’)
console.log(res);//‘song,Y,son,so’
console.log(res.length);//13
console.log(arr);//[ ‘song’, ‘Y’, ‘son’, ‘so’ ]
console.log(arr.length);//4

## 小结


`Js`中数组的方法不只这么一些，比如还有一些遍历的方法:map,reduce,find,every等等，我们需要知道。好了，本篇文章到这就结束了，希望对你有帮助。


### 结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。



e,find,every等等，我们需要知道。好了，本篇文章到这就结束了，希望对你有帮助。


### 结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。



![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/ac2800265bbcc24df50a1fbca4a8f585.webp?x-oss-process=image/format,png)