js数组常用方法总结

数 组 常 见 操 作 总 结

数组是 js 中常见的数据格式，也是面试的一个常见考点，作为一个前端工程师，我们需要熟练的掌握有关数组的操作技巧。下面我们就开始数组的常用方法的总结吧。

数 组 去 重

数组去重是面试的时候一道常见的面试题，同样的在工作中也会经常性遇到的一个问题，在 ES6 语法中有个非常快速且简单的方法，使用 new Set()以及 Array.from()或者展开运算符(...)来进行数组去重。

let array = [1, 2, 3, 4, 5, 7, 8, 1, 2, 3]
// 方法一
var uniquArray = Array.from(new Set(array));
console.log(uniquArray); // returns [1, 2, 3, 4, 5, 7, 8]
// 方法二
var uniquArray2 = […new Set(array)];
console.log(uniquArray2); // returns [1, 2, 3, 4, 5, 7, 8]

数 组 元 素 的 都 替 换

日常开发中经常需要替换或者删除一些指定的数据，遇到这种场景时一定要联想到 Array.protoType.splice 这个方法。这个方法传参的时候参数有点多。第一个参数是开始的索引，第二个参数是需要删除的数量，剩下的就是需要添加的值（可以是一个或者多个）。【splice 方法会改变原数组，返回原数组被替换或者删除的项组成的数组】

let numArray = [1,2,3,4,5,6,7,8,9];
// 元素的替换
let sp = numArray.splice(0, 2, 'A'.'B');
console.log(numArray); // returns  ['A', 'B', 3, 4, 5, 6,   7,   8, 9]
console.log(sp); // returns [1,2]
// 删除元素
let sp = numArray.splice(0, 2);
console.log(numArray); // returns  [3, 4, 5, 6,   7,   8, 9]
console.log(sp); // returns [1,2]

数 组 的 遍 历

常见的数组遍历有：for 循环，foreach 循环，forof 遍历。。。。。本次主要说一些 ES6 的新的方法或者不太常用的。

map 循环

有返回值，可以 return 出来。不影响原来的数组，会生成一个行的数组

let array = [1,2,3]
let result = array.map((item,index,array)=>{
  return item*item
})
conslole.log(result) // returns [1,4 ,9]
console.log(array) // returns [1,2.3]

filter 遍历

不会改变原始数组,返回新数组

let arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
let result = arr.filter((item) => item.done)
console.log(result) // returns [ { id: 1, text: 'aa', done: true } ]
console.log(arr) // returns  [{ id: 1, text: 'aa', done: true },{ id: 2, text: 'bb', done: false }]

every 遍历

对数组中的每一项运行给定函数，如果该函数对每一项返回 true,则返回 true。不改变原数组

let arr = [1, 2, 3, 4, 5, 6];
let result = arr.every((item) => {
  return item > 3
})
console.log(result) // returns false
console.log(arr) // [1,2,3,4,5,6]

some 遍历

对数组中的每一项运行给定函数，如果有一项返回 true,则返回 true。不改变原数组

let arr = [1, 2, 3, 4, 5, 6];
let result = arr.every((item) => {
  return item > 3
})
console.log(result) // returns true
console.log(arr) // [1,2,3,4,5,6]

Array.from

不改变元素组

var friends = [
  { name: 'John', age: 22 },
  { name: 'Peter', age: 23 },
  { name: 'Mark', age: 24 },
  { name: 'Maria', age: 22 },
  { name: 'Monica', age: 21 },
  { name: 'Martha', age: 19 }
]

var friendsNames = Array.from(friends, ({ name }) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

数组转换成对象

除了使用 map()的类似的迭代方法能达到目的外，如果你正好希望对象的 key 就是数组的索引，那么还有一个超级快速的方法。

let arr = ['a', 'b', 'c', 'd'];
let result = { ...arr };
console.log(result); // returns { '0': 'a', '1': 'b', '2': 'c', '3': 'd' }

数组的填充

使用制定的元素填充数组，其实就是用默认内容初始化数组。该函数有三个参数。value：填充值。start：填充起始位置，可以省略。end：填充结束位置，可以省略，实际结束位置是 end-1。【修改原数组】

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr.fill(7, 2, 5)
console.log(arr) // returns [1,2,7,7,7,6,7,8,9,10,11]