工作中必会使用的javascript方法

修改自身的方法

1.push(...args)

返回值是数组的长度

var arr = new Array()
var res = arr.push(1)
res = arr.push(2, 5, 8, 10)
console.log(arr, res)
// [ 1, 2, 5, 8, 10 ] 5

2.pop()

返回的是移除的数组元素

arr = [1, 3, 4, 5, 4]
var res = arr.pop()
console.log(arr, res);
// [ 1, 3, 4, 5 ] 4

3.shift()

返回的是移除的数组元素

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

4.unshift(...args)

返回的是操作后的数组长度

arr = [1, 3, 4, 5, 4]
res = arr.unshift(0, 10)
console.log(arr, res);
// [ 0, 10, 1, 3,  4,  5, 4 ] 7

5.splice(startNum, num, ...args)

返回的是截取的数组

arr = [1, 3, 4, 5, 4]
res = arr.splice(0, 2, 11, 12, 13)
console.log(arr, res);
// [ 11, 12, 13, 4, 5, 4 ] [ 1, 3 ]

6.sort

返回的是按规则排序后的数组

arr = [1, 3, 4, 2, 5, 0]
res = arr.sort((a, b) => a - b)
console.log(arr, res);
// [ 0, 1, 2, 3, 4, 5 ] [ 0, 1, 2, 3, 4, 5 ]

7.reverse

将数组翻转

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

迭代遍历方法

1.forEach(function(item, index, array){})

arr = [1, 3, 4]
res = arr.forEach((item, index, arr) => {
  console.log(item, index, arr);
  return 2*item
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// 4 2 [ 1, 3, 4 ]
// undefined

2.map(function(item, index, array){})

返回新数组

arr = [1, 3, 4]
res = arr.map((item, index, arr) => {
  console.log(item, index, arr);
  return item*2
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// 4 2 [ 1, 3, 4 ]
// [ 2, 6, 8 ]

3.find(function(item, index, array){})

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

arr = [1, 3, 4]
res = arr.find((item, index, arr) => {
  console.log(item, index, arr);
  return index == 1
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// 3

4.findIndex(function(item, index, array){})

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

arr = [1, 3, 4]
res = arr.findIndex((item, index, arr) => {
  console.log(item, index, arr);
  return item > 3
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// 4 2 [ 1, 3, 4 ]
// 2

5.filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

arr = [1, 3, 4]
res = arr.filter((item, index, arr) => {
  console.log(item, index, arr);
  return item > 2
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// 4 2 [ 1, 3, 4 ]
// [ 3, 4 ]

5.some

判断方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

arr = [1, 3, 4]
res = arr.some((item, index, arr) => {
  console.log(item, index, arr);
  return item > 2
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// 3 1 [ 1, 3, 4 ]
// true

7.every

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

arr = [1, 3, 4]
res = arr.some((item, index, arr) => {
  console.log(item, index, arr);
  return item > 2
})
console.log(res);
// 1 0 [ 1, 3, 4 ]
// false

8.reduce

对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

arr = [1, 3, 4]
res = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index, arr);
  return prev += cur
}, 0)
console.log(res);
// 0 1 0 [ 1, 3, 4 ]
// 1 3 1 [ 1, 3, 4 ]
// 4 4 2 [ 1, 3, 4 ]
// 8

9.reduceRight

接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

其他操作方法

1.concat

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

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

2.slice

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

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

3.indexOf

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

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

4.lastIndexOf

返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

arr = [1, 2, 3, 4, 5, 10, 4, 212, 2]
res = arr.lastIndexOf(4)
console.log(arr, res);
// [ 1, 2,   3, 4, 5,10, 4, 212, 2 ] 6