slice() 与 splice() 的用法和区别

一、slice(start, end)

• 从 start 开始截取到 end 但不包括 end
• 返回值为截取出来的元素集合
• 原始的数组不会发生变化

const arr = [10, 20, 30, 40, 50]
const arr1 = arr.slice() // [10, 20, 30, 40, 50]
const arr2 = arr.slice(1, 4) // [20, 30, 40]
const arr3 = arr.slice(2) // [20, 30, 40, 50]
const arr4 = arr.slice(-2) // [40, 50]

二、 splice(start, deleteCount, item1, item2, ....)

• start 参数为开始的位置，deleteCount 为要截取的元素，items 为要添加的元素
• 如果 deleteCount 为 0，则表示不删除元素，从 start 位置开始添加后面的几个元素到原始的数组中
• 返回值为由被删除的原始组成的一个数组。如果只删除一个元素，则返回只包含一个元素的数组；如果没有删除元素，则返回空数组
• 职工方法会改变原始数组，数组的长度会发生变化

const arr = [10, 20, 30, 40, 50]
const spliceRes = arr.splice(1, 2, 'a', 'b', 'c') // [20, 30] [10, "a", "b", "c", 40, 50]
const spliceRes1 = arr.splice(1, 2) // [20, 30] [10, 40, 50] 
const spliceRes2 = arr.splice(1, 0, 'a', 'b', 'c') // [] [10, "a", "b", "c", 20, 30, 40, 50] 
console.log(spliceRes, arr) 

 三、数组操作的方法扩展

1.concat：把一个（或多个）数组或之与原数组拼接，返回拼接后的数组

const arr = [10, 20, 30, 40]
const arr1 = arr.concat([50, 60, 70])
console.log(arr, arr1)  // [10, 20, 30, 40] [10, 20, 30, 40, 50, 60, 70]

2.map：该数组中的每个元素都调用一次提供的函数后，创建一个新数组，将结果返回

const arr = [10, 20, 30, 40]
const arr2 = arr.map(num => num * 10)
console.log(arr, arr2)  // [10, 20, 30, 40] [100, 200, 300, 400]

3.filter：返回通过函数的所有元素的新数组

const arr = [10, 20, 30, 40]
const arr3 = arr.filter(num => num > 25) 
console.log(arr, arr3) // [10, 20, 30, 40] [30, 40]

10.join：把数组的所有元素放入一个字符串，通过指定的分割符进行分割。

const arr = [10, 20, 30, 40]
const arr1 = arr.join()
console.log(arr, arr1) // [10, 20, 30, 40] 10,20,30,40

11.reverse：颠倒数组中元素的顺序。

const arr = [10, 20, 30, 40]
const arr1 = arr.reverse()
console.log(arr, arr1) // [10, 20, 30, 40] [40, 30, 20, 10]

4.push / pop：在数组末尾 新增/删除 元素

5.unshift / shift：在数组首部 新增/删除 元素

6.some / every：数组中至少一个/所有元素通过某个指定函数，返回一个布尔值

const arr = [10, 20, 30, 40]
const arr1 = arr.some(item => item > 25)
const arr2 = arr.every(item => item > 25)
console.log(arr, arr1)  // [10, 20, 30, 40] true false

8.forEach

9.reduce

更多请查看：JS 数组常用方法。