JS-数组方法

数组方法的使用语法：数组.方法名()

• 数组方法的学习注意事项：
  1. 数组方法的方法名
  2. 数组方法的作用
  3. 数组方法的参数
  4. 数组方法的返回值
  5. 数组方法是否会改变原数组

1. push

• 语法：数组.push(数据, ...)
• 作用：将传入的数据依次追加到数组最后
• 返回值：添加数据后数组的长度

var arr = ['a', 'b', 'c', 'd']

var r = arr.push('e', 'f')
console.log('返回值r：', r) // 6
console.log('操作后的arr数组：', arr) // ['a', 'b', 'c', 'd', 'e', 'f']

2. unshift

• 语法：数组.unshift(数据, ...)
• 作用：将传入的数据依次向到数组最前面添加
• 返回值：添加数据后数组的长度

var arr = ['a', 'b', 'c', 'd']

var r = arr.unshift('e', 'f')
console.log('返回值r：', r) // 6
console.log('操作后的arr数组：', arr) // ['e', 'f', 'a', 'b', 'c', 'd']

3. pop

• 语法：数组.pop()
• 作用：将数组的最后一个数据删除
• 返回值：被删除的数组数据

var arr = ['a', 'b', 'c', 'd']

var r = arr.pop()
console.log('返回值r：', r) // 'd'
console.log('操作后的arr数组：', arr) // ['a', 'b', 'c']

4. shift

• 语法：数组.shift()
• 作用：将数组的第一个数据删除
• 返回值：被删除的数组数据

var arr = ['a', 'b', 'c', 'd']

var r = arr.shift()
console.log('返回值r：', r) // 'a'
console.log('操作后的arr数组：', arr) // ['b', 'c', 'd']

5. reverse

• 语法：数组.reverse()
• 作用：将数组数据的位置反转
• 返回值：反转后的数组（原数组）

var arr = ['a', 'b', 'c', 'd']

var r = arr.reverse()
console.log('返回值r：', r) // ['d', 'c', 'b', 'a']
console.log('操作后的arr数组：', arr) // ['d', 'c', 'b', 'a']

6. sort

• 语法1：数组.sort()
• 作用：将数组数据按位比较大小排序（升序）
• 返回值：排序后的数组（原数组）

var arr = [200, 4, 3, 11, 9, 6, 50, 8, 7]

var r = arr.sort() // 语法1
console.log('返回值r：', r) // [11, 200, 3, 4, 50, 6, 7, 8, 9]
console.log('操作后的arr数组：', arr) // [11, 200, 3, 4, 50, 6, 7, 8, 9]

• 语法2：数组.sort(函数)
  • 参数必须是一个函数，函数需要两个形参，而且返回值必须是两个形参的差值
    • 如果传入函数的返回值为第一个形参减第二个形参的差值，则为升序排序
    • 如果传入函数的返回值为第二个形参减第一个形参的差值，则为降序排序
• 作用：将数组数据按位比较大小排序（升序或降序）
• 返回值：排序后的数组（原数组）

var arr = [200, 4, 3, 11, 9, 6, 50, 8, 7]

var r = arr.sort(funtion (a, b) { return a - b }) // 语法2（升序）
console.log('返回值r：', r) // [3, 4, 6, 7, 8, 9, 11, 50, 200]
console.log('操作后的arr数组：', arr) // [3, 4, 6, 7, 8, 9, 11, 50, 200]

var r = arr.sort(funtion (a, b) { return b - a }) // 语法2（降序）
console.log('返回值r：', r) // [200, 50, 11, 9, 8, 7, 6, 4, 3]
console.log('操作后的arr数组：', arr) // [200, 50, 11, 9, 8, 7, 6, 4, 3]

7. splice

• 语法1：数组.splice(起始索引, 删除个数)
• 作用：从传入的起始索引开始，删除数组数据
  • 如果第二个参数不传递，则默认从起始索引开始一直删除到数组最后
  • 第一个参数可以传递负数，-1表示最后一个，-2表示倒数第二个…
• 返回值：由被删除的数组数据组成的新数组
  • 若没有数组数据被删除，则返回空数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f']

// 语法1（从索引2开始删除3个数组数据）
var r = arr.splice(2, 3)
console.log('返回值r：', r) // ['c', 'd', 'e']
console.log('操作后的arr数组：', arr) // ['a', 'b', 'f']

• 语法2：数组.splice(起始索引, 删除个数, 数据, 数据...)
• 作用：从传入的起始索引开始，删除数组数据，并将传入的数据（第三个参数开始）依次从起始索引开始插入到原数组中
  • 第一个参数可以传递负数，-1表示最后一个，-2表示倒数第二个…
  • 注意：如果删除个数为0，则不删除数据，而是从传入的起始索引开始依次插入数据
• 返回值：由被删除的数组数据组成的新数组
  • 若没有数组数据被删除，则返回空数组

var arr = ['a', 'b', 'f']

// 语法2（从索引2开始删除1个数组数据，并将传入的数据从索引2开始插入数组）
var r = arr.splice(2, 1, 'c', 'd', 'e')
console.log('返回值r：', r) // ['f']
console.log('操作后的arr数组：', arr) // ['a', 'b', 'c', 'd', 'e']

注意：以上7个方法都会改变原数组

8. concat

• 语法：数组.concat(参数)
  • 参数：可以是数组，可以是数据，可以传递多个
• 作用：将传入的数据和原数组数据合并为一个新数组
  • 如果传入的数据是数组，则会将传入的数组数据和原数组数据合并为新数组
  • 如果没有传入参数，则返回一个与原数组相同的新数组（原数组与空数组合并）
• 返回值：原数组数据与传入数据组成的新数组

var arr = ['a', 'b', 'c']

var resArr = arr.concat(['d', 'e'], 1, 2, 3)
console.log('返回值resArr：', resArr) // ['a', 'b', 'c', 'd', 'e', 1, 2, 3]

var resArr = arr.concat()
console.log('返回值resArr：', resArr) // ['a', 'b', 'c']

console.log(arr === resArr) // false

9. join

• 语法：数组.join(拼接字符)
• 作用：将所有数组数据拼接成一个字符串
  • 数组数据之间通过传入的拼接字符进行拼接
  • 注意：如果不传递参数则默认使用逗号,拼接
• 返回值：拼接后的字符串

var arr = ['a', 'b', 'c']

console.log(arr.join()) // 'a,b,c'
console.log(arr.join('')) // 'abc'
console.log(arr.join('-')) // 'a-b-c'

• 注意：数组使用toString方法默认使用的其实就是join方法

console.log([1, 2, 3].toString()) // '1,2,3'

arr.join = function() { return 666 }
console.log(arr.toString()) // 666

10. includes

• 语法：数组.includes(数据)
• 作用：判断传入的数据在数组中是否存在
• 返回值：布尔值
  • 如果存在返回true，不存在则返回false

var arr = ['a', 'b', 'c', 'd', 'e', 'b', 'f', 'g']

var r = arr.includes('a')
console.log('返回值r：', r) // true

var r = arr.includes('ff')
console.log('返回值r：', r) // false

11. indexOf

• 语法1：数组.indexOf(数据)
• 作用：从数组的第一个数据开始往后查找传入的数据在数组中是否存在，找到了则停止查找
• 返回值：如果找到则返回对应的索引，如果找不到则返回-1

var arr = ['a', 'b', 'c', 'd', 'e', 'b', 'f', 'g']

console.log(arr.indexOf('b')) // 1
console.log(arr.indexOf('z')) // -1

• 语法2：数组.indexOf(数据, 起始索引)
• 作用：从数组的起始索引开始往后查找传入的数据在数组中是否存在，找到了则停止查找
• 返回值：如果找到则返回对应的索引，如果找不到则返回-1

var arr = ['a', 'b', 'c', 'd', 'e', 'b', 'f', 'g']

console.log(arr.indexOf('b', 2)) // 5
console.log(arr.indexOf('b', 6)) // -1

12. lastIndexOf

• 语法1：数组.lastIndexOf(数据)
• 作用：从数组的最后一个数据开始往前查找传入的数据在数组中是否存在，找到了则停止查找
• 返回值：如果找到则返回对应的索引，如果找不到则返回-1

var arr = ['a', 'b', 'c', 'd', 'e', 'b', 'f', 'g']

console.log(arr.lastIndexOf('b')) // 5
console.log(arr.lastIndexOf('z')) // -1

• 语法2：数组.lastIndexOf(数据, 起始索引)
• 作用：从数组的起始索引开始往前查找传入的数据在数组中是否存在，找到了则停止查找
• 返回值：如果找到则返回对应的索引，如果找不到则返回-1

var arr = ['a', 'b', 'c', 'd', 'e', 'b', 'f', 'g']

console.log(arr.lastIndexOf('b', 2)) // 1
console.log(arr.lastIndexOf('b', 0)) // -1

13. slice

• 语法：数组.slice(起始索引, 结束索引)
• 作用：从传入的起始索引开始到结束索引，截取数组数据组成新数组并返回
  • 如果不传递任何参数，则默认截取所有
  • 如果不传递结束索引，则默认从起始索引开始截取到最后
  • 参数可以传递负数，-1表示最后一个，-2表示倒数第二个…
  • 注意：截取数组数据包前不包后（包含起始索引，不包含结束索引）
• 返回值：截取的数据组成的新数组

var arr = ['a', 'b', 'c', 'd', 'e']

var resArr = arr.slice(0, 2)
console.log('返回值resArr：', resArr) // ['a', 'b']

var resArr = arr.slice(2)
console.log('返回值resArr：', resArr) // ['c', 'd', 'e']

// 原数组不会发生改变
console.log('操作后的arr数组：', arr) // ['a', 'b', 'c', 'd', 'e']

14. with

• 语法：数组.with(索引, 数据)
• 作用：将传入的第一个参数对应索引的数组数据，替换为传入的第二个参数的数据
  • 如果不传递参数则将数组的第一个数据替换为undefined
  • 如果只传递了第一个参数，则将对应索引的数组数据替换为undefined
  • 第一个参数可以传递负数，-1表示最后一个，-2表示倒数第二个…
• 返回值：替换数据后的新数组

var arr = [10, 20, 30, 40]

console.log(arr.with(2, 666)) // [10, 20, 666, 40]
console.log(arr) // [10, 20, 30, 40]

15. at

• 语法：数组.at(索引)
• 作用：根据传入的索引获取数组数据
  • 参数可以传递负数，-1表示最后一个，-2表示倒数第二个…
• 返回值：索引对应的数组数据，如果没有则返回undefined

let arr = ['a', 'b', 'c']

console.log(arr.at(0)) // 'a'
console.log(arr.at(-1)) // 'c'

let objArr = [{ id: 1 }, { id: 2 }]

let item = objArr.at(-1)
console.log(item) // { id: 2 }

// 对象是复杂数据类型，因此当item的值改变时，objArr中对应的数据也会发生改变
item.id = 999
console.log(objArr) // [{ id: 1 }, { id: 999 }]

16. toReversed/toSorted/toSpliced

• 与reverse/sort/splice方法的语法、作用以及参数都一样
• 注意：
  • reverse/sort/splice方法都会改变原数组
  • 但是toReversed/toSorted/toSpliced方法不会改变原数组
  • 返回值也有所差异

// toReversed
var arr1 = ['a', 'b', 'c', 'd', 'e']

var r1 = arr1.toReversed()
console.log('方法的返回值：', r1) // ['e', 'd', 'c', 'b', 'a']
console.log('使用方法后的arr：', arr1) // ['a', 'b', 'c', 'd', 'e']

// toSorted
var arr2 = [10, 5, 6, 20, 110, 2345]

var r2 = arr2.toSorted(function (a, b) { return a - b })
console.log('方法的返回值：', r2) // [5, 6, 10, 20, 110, 2345]
console.log('使用方法后的arr：', arr2) // [10, 5, 6, 20, 110, 2345]

// toSpliced
var arr3 = ['a', 'b', 'c', 'd', 'e']

var r3 = arr3.toSpliced(2, 2, 666, 999)
// 注意: toSpliced的返回值为操作后的数组
console.log('方法的返回值：', r3) // ['a', 'b', 666, 999, 'e']
console.log('使用方法后的arr：', arr3) // ['a', 'b', 'c', 'd', 'e']